:root {
  /* ============== COLOR ============== */
  --bg-0: #080a0c;
  --bg-1: #13191e;
  --bg-2: #162028;

  --blood:        #65351e;
  --blood-deep:   #3a1e10;
  --crimson:      #a8702c;
  --crimson-soft: #d6903a;
  --tomato:       #ffb050;
  --tomato-soft:  #ffc47d;
  --tomato-bright:#ffd4a0;

  --text:        #f8f4f0;
  --text-dim:    #c9c1b7;
  --text-faint:  #8e817a;

  --line:        rgba(255, 176, 80, 0.28);
  --line-soft:   rgba(255, 176, 80, 0.12);
  --line-strong: rgba(255, 176, 80, 0.55);

  --panel-bg:        rgba(13, 21, 28, 0.82);
  --panel-bg-strong: rgba(8, 12, 15, 0.94);

  --danger: #ff4757;
  --good:   #4ad08a;

  /* Aliases mantenidos para compat con clases existentes */
  --gold:         var(--tomato);
  --gold-bright:  var(--tomato-bright);
  --ember:        var(--crimson);
  --ember-soft:   var(--tomato-soft);

  /* ============== SPACING SCALE ============== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* Vertical rhythm between major sections */
  --section-gap: clamp(48px, 7vw, 80px);
  --section-pad-y: clamp(36px, 5vw, 60px);

  /* ============== TYPE SCALE (fluid) ============== */
  --fs-xs:   clamp(10.5px, 0.7vw, 12px);
  --fs-sm:   clamp(12px, 0.85vw, 14px);
  --fs-base: clamp(14px, 1vw, 16px);
  --fs-lg:   clamp(16px, 1.1vw, 18px);
  --fs-xl:   clamp(18px, 1.3vw, 22px);
  --fs-2xl:  clamp(22px, 1.8vw, 28px);
  --fs-3xl:  clamp(26px, 2.4vw, 36px);
  --fs-4xl:  clamp(32px, 3vw, 48px);
  --fs-5xl:  clamp(40px, 4.5vw, 64px);
  --fs-hero: clamp(64px, 12vw, 128px);

  /* ============== RADIUS ============== */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-full: 999px;

  /* ============== SHADOW ============== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0,0.4);
  --shadow-md: 0 10px 26px rgba(0, 0, 0,0.55);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0,0.65);
  --shadow-xl: 0 30px 70px rgba(0, 0, 0,0.75);
  --glow-red:  0 0 24px rgba(255, 176, 80,0.35);
  --glow-red-strong: 0 0 36px rgba(255, 71, 87,0.55);

  /* ============== EASING ============== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ============== FONTS ============== */
  --font-display: "Grenze Gotisch", "Alegreya SC", serif;
  --font-serif:   "Alegreya SC", serif;
  --font-ui:      "Barlow Condensed", system-ui, sans-serif;
  --font-tech:    "Barlow Condensed", "Alegreya SC", sans-serif;

  /* ============== CURSORS ============== */
  --cursor-default: url("img/cursor/normal cursor.cur"), auto;
  --cursor-alt: url("img/cursor/alternate select.cur"), default;
  --cursor-link: url("img/cursor/link select.cur"), pointer;
  --cursor-text: url("img/cursor/text.cur"), text;
  --cursor-busy: url("img/cursor/busy.cur"), wait;
  --cursor-progress: url("img/cursor/wib.cur"), progress;
}

/* Shared MU item tooltip */
.mu-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  display: none;
  min-width: 210px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 13px;
  border: 1px solid rgba(255, 176, 80, 0.65);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(4, 11, 16, 0.98), rgba(1, 2, 4, 0.98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.78), 0 0 18px rgba(255, 176, 80, 0.22);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}
.mu-tooltip__name {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 176, 80, 0.24);
  color: #fff2ee;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 176, 80, 0.35);
}
.mu-tooltip__name--excellent { color: #48ff7a; }
.mu-tooltip__name--ancient { color: #75d7ff; }
.mu-tooltip__line { color: #e9d4d1; }
.mu-tooltip__line--skill { color: #9cc9ff; }
.mu-tooltip__line--luck { color: #f6e07a; }
.mu-tooltip__line--option { color: #ffd1a1; }
.mu-tooltip__line--excellent { color: #8cff9d; }
.mu-tooltip__line--ancient { color: #8fdcff; }
.mu-tooltip__line--380,
.mu-tooltip__line--harmony,
.mu-tooltip__line--socket { color: var(--tomato-bright); }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-0);
  cursor: var(--cursor-default);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--text);
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: var(--cursor-default);
}

input, textarea, select { cursor: var(--cursor-text); }
a, button, [role="button"], label[for], summary { cursor: var(--cursor-link); }
:disabled, [aria-disabled="true"] { cursor: var(--cursor-alt); }

::selection { background: rgba(226, 88, 34,0.45); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0,0.3); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--ember));
  border-radius: 8px;
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-bright), var(--ember-soft)); }

img { max-width: 100%; display: block; }

/* Capas de fondo: usamos width/height fijos al "largest viewport" en lugar
   de inset:0 para que en móvil NO se redimensionen cuando la barra de URL
   del navegador se oculta/aparece (eso era lo que hacía "agrandar" el bg). */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background-image: url("img/drakon/drakon-background.webp");
  background-position: center 20%;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -3;
  filter: saturate(1.25) brightness(0.85) contrast(1.08);
  will-change: auto;
}

.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(168, 112, 44, 0.32), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(101, 53, 30, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(2, 4, 6,0.45) 0%, rgba(2, 4, 6,0.65) 60%, rgba(2, 4, 6,0.82) 100%);
  z-index: -2;
  pointer-events: none;
}

.bg-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(2, 4, 6,0.7) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0,0) 0px,
      rgba(0, 0, 0,0) 2px,
      rgba(255, 176, 80,0.02) 3px,
      rgba(0, 0, 0,0) 4px
    );
  z-index: -1;
  pointer-events: none;
}

/* ========== EMBERS / PARTÍCULAS ========== */

.embers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ember {
  position: absolute;
  bottom: -20px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd4a0 0%, #ffb050 45%, #a8702c 70%, transparent 80%);
  filter: blur(0.5px);
  opacity: 0;
  animation: ember-rise linear infinite;
  box-shadow: 0 0 10px rgba(255, 176, 80, 0.7);
}

@keyframes ember-rise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(20px, -45vh) scale(1); opacity: 0.7; }
  100% { transform: translate(-10px, -100vh) scale(0.4); opacity: 0; }
}

/* ========== TOPBAR ========== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 44px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(3, 6, 8,0.95), rgba(3, 6, 8,0.6));
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 176, 80,0) 10%,
    rgba(255, 176, 80,0.95) 50%,
    rgba(255, 176, 80,0) 90%,
    transparent 100%);
  background-size: 200% 100%;
  animation: blood-line 6s ease-in-out infinite;
}

@keyframes blood-line {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: -100% 0; }
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  --nav-hover: var(--tomato);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.25s, background 0.25s, text-shadow 0.25s;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-hover), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.25s, transform 0.25s;
}

.nav-link:hover {
  color: var(--nav-hover);
  background: color-mix(in srgb, var(--nav-hover) 12%, transparent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--nav-hover) 55%, transparent);
}

.nav-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-link.is-active {
  color: var(--nav-hover);
  text-shadow: 0 0 14px color-mix(in srgb, var(--nav-hover) 55%, transparent);
}

.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ====== Drakon-rift Castle Siege nav treatment ====== */
.nav-link--rainbow { position: relative; }

.nav-link__rainbow {
  background: linear-gradient(90deg,
    #f2e9dd, #ffd4a0, #ffb050, #a8702c, #65351e, #7ec5ff, #ffb050, #f2e9dd);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: drakon-flow 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 176, 80, 0.35));
  font-weight: 900;
}

.nav-link--rainbow:hover .nav-link__rainbow {
  animation-duration: 1.6s;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.nav-link--rainbow::after { display: none !important; }

@keyframes drakon-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

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

/* =============================================================
   HAMBURGER BUTTON + MOBILE DRAWER
   ============================================================= */
.hamburger {
  display: none; /* shown only on narrow screens */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: var(--cursor-link);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.hamburger:hover {
  border-color: var(--tomato);
  background: rgba(255, 176, 80,0.08);
  transform: translateY(-1px);
}
.hamburger__bar {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--tomato-bright);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
  box-shadow: 0 0 8px rgba(255, 176, 80,0.45);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Drawer backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0,0.7);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drawer-backdrop:not([hidden]) { opacity: 1; }

/* Drawer panel */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 90vw);
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 176, 80,0.18), transparent 55%),
    linear-gradient(180deg, rgba(8, 13, 18,0.98), rgba(3, 6, 8,0.99));
  border-left: 1px solid var(--tomato);
  box-shadow: -25px 0 60px rgba(0, 0, 0,0.85);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-spring);
  padding: 0;
}
.drawer:not([hidden]) { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.drawer__head::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  filter: drop-shadow(0 0 4px var(--tomato));
}

.drawer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer__logo {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 10px rgba(255, 176, 80,0.5));
}
.drawer__brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff, var(--tomato));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.drawer__brand-sub {
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

.drawer__close {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0,0.5);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--tomato-bright);
  font-size: 24px;
  line-height: 1;
  cursor: var(--cursor-link);
  transition: 0.25s;
}
.drawer__close:hover {
  border-color: var(--tomato);
  background: rgba(255, 176, 80,0.12);
  transform: rotate(90deg);
  color: #fff;
}

.drawer__section {
  display: flex;
  flex-direction: column;
  padding: 16px 14px 8px;
  border-bottom: 1px dashed var(--line-soft);
}
.drawer__section:last-of-type { border-bottom: 0; }

.drawer__section-title {
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 10px 10px;
  font-weight: 600;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.22s, color 0.22s, transform 0.22s, border-color 0.22s;
  border: 1px solid transparent;
}
.drawer__link svg { color: var(--tomato-soft); flex-shrink: 0; transition: color 0.22s; }

.drawer__link:hover,
.drawer__link:focus-visible {
  color: #fff;
  background: rgba(255, 176, 80,0.08);
  border-color: var(--line-soft);
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(255, 176, 80,0.45);
}
.drawer__link:hover svg { color: var(--tomato-bright); }

/* Castle siege rainbow inside the drawer */
.drawer__link--rainbow .drawer__link-rainbow {
  background: linear-gradient(90deg,
    #ffb050, #ffd4a0, #f2e9dd, #4ad08a, #f2e9dd, #9ed4ff, #7ec5ff, #ffb050, #ffb050);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: drakon-flow 5s linear infinite;
  font-weight: 900;
}
.drawer__link--rainbow:hover { color: #fff; }

.drawer__link--svfast {
  color: #5eff96 !important;
  text-shadow: 0 0 10px rgba(74, 208, 138,0.45);
}
.drawer__link--svfast svg { color: #5eff96; }

.drawer__foot {
  margin-top: auto;
  padding: 18px 16px 22px;
  border-top: 1px solid var(--line-soft);
}
.drawer__foot .btn--block { width: 100%; }

/* Show hamburger + hide nav at proper breakpoint */
@media (max-width: 1100px) {
  .hamburger { display: inline-flex; }
}

/* Body lock when drawer is open */
body.has-drawer { overflow: hidden; }

/* === SV Fast nav badge === */
.nav-link--svfast {
  position: relative;
  color: #5eff96 !important;
  text-shadow: 0 0 10px rgba(74, 208, 138,0.5);
}
.nav-link--svfast::before {
  content: "⚡";
  margin-right: 6px;
  color: #5eff96;
  text-shadow: 0 0 10px rgba(74, 208, 138,0.7);
  animation: svfast-blink 1.8s ease-in-out infinite alternate;
}
@keyframes svfast-blink {
  from { filter: drop-shadow(0 0 4px rgba(74, 208, 138,0.4)); }
  to   { filter: drop-shadow(0 0 12px rgba(74, 208, 138,0.9)); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.brand__logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 176, 80, 0.5));
  animation: logo-pulse 3.6s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.brand:hover .brand__logo {
  transform: rotate(-6deg) scale(1.08);
}

@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 176, 80, 0.4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255, 176, 80, 0.85)); }
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__title {
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #f2e9dd 0%, var(--tomato) 60%, var(--blood) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 176, 80, 0.4);
}

.brand__sub {
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tomato-soft);
  font-weight: 600;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 14, 20, 0.75);
  animation: fade-up 0.4s ease both;
  box-shadow: 0 0 0 1px rgba(255, 176, 80,0.05), 0 6px 18px rgba(0, 0, 0,0.55);
}

.user-area__icon {
  animation: sword-flicker 3s ease-in-out infinite;
}

@keyframes sword-flicker {
  0%, 100% { color: var(--tomato-soft); text-shadow: 0 0 6px rgba(255, 176, 80,0.45); }
  50%      { color: #fff;                text-shadow: 0 0 14px rgba(255, 176, 80,0.85); }
}

.user-area__icon { color: var(--ember-soft); font-size: 16px; }

.user-area__name {
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
}

/* ========== MAIN ========== */

.main {
  max-width: 1440px;
  margin: 40px auto;
  padding: 0 36px 80px;
}

/* ========== AUTH ========== */

.auth-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 36px;
  margin-bottom: 50px;
  animation: fade-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dash-view {
  animation: fade-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0,0.55), inset 0 0 0 1px rgba(255, 255, 255,0.02);
  position: relative;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 176, 80,0.22), transparent 60%);
  animation: glow-shift 8s ease-in-out infinite;
}

.auth-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  padding: 1px;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(255, 176, 80,0.85) 60deg,
    transparent 120deg,
    transparent 240deg,
    rgba(168, 112, 44,0.7) 300deg,
    transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: rotate-border 14s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes glow-shift {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@keyframes rotate-border {
  to { transform: rotate(360deg); }
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0,0.35);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  position: relative;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: var(--cursor-link);
  transition: color 0.2s, background 0.2s;
}

.auth-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 176, 80,0.28), rgba(168, 112, 44,0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 80,0.5);
  text-shadow: 0 0 14px rgba(255, 176, 80,0.6);
}

.auth-tab:not(.is-active):hover { color: var(--text); }

.auth-form { display: none; flex-direction: column; gap: 14px; position: relative; }
.auth-form.is-active { display: flex; }

.auth-title {
  margin: 0;
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #fff 0%, var(--tomato-bright) 60%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-sub {
  margin: -6px 0 12px;
  color: var(--text-dim);
  font-size: 14px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

.field input {
  background: rgba(0, 0, 0,0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus {
  border-color: var(--ember-soft);
  box-shadow: 0 0 0 3px rgba(226, 88, 34,0.18);
}

.btn {
  border: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: var(--r-md);
  cursor: var(--cursor-link);
  font-size: var(--fs-base);
  transition: transform 0.18s var(--ease-spring),
              box-shadow 0.25s,
              filter 0.2s,
              border-color 0.25s,
              background 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background: linear-gradient(180deg, var(--tomato) 0%, var(--crimson) 60%, var(--blood) 100%);
  color: #fff;
  box-shadow:
    0 10px 30px rgba(255, 176, 80, 0.4),
    inset 0 1px 0 rgba(255, 255, 255,0.25),
    inset 0 -2px 0 rgba(0, 0, 0,0.25);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0, 0, 0,0.4);
}

.btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255,0.0) 40%,
    rgba(255, 255, 255,0.55) 50%,
    rgba(255, 255, 255,0.0) 60%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.btn--primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 14px 38px rgba(255, 176, 80, 0.55),
    inset 0 1px 0 rgba(255, 255, 255,0.3),
    inset 0 -2px 0 rgba(0, 0, 0,0.25);
}
.btn--primary:hover::before { left: 130%; }
.btn--primary:active { transform: translateY(0); filter: brightness(0.95); }
.btn--primary:disabled { opacity: 0.6; cursor: var(--cursor-alt); transform: none; }

.btn--secondary {
  background: rgba(0, 0, 0,0.55);
  color: var(--tomato-bright);
  border: 1px solid var(--line-strong);
  text-shadow: none;
}

.btn--secondary:hover {
  background: rgba(255, 176, 80, 0.12);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 176, 80, 0.25);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  padding: 8px 14px;
  font-size: 12px;
}

.btn--ghost:hover {
  color: var(--tomato-bright);
  border-color: var(--tomato);
  background: rgba(255, 176, 80, 0.06);
}

/* Botón con corte angular (estilo "assassin") */
.btn--blade {
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  padding-left: 26px;
  padding-right: 26px;
}

/* Botón WhatsApp — toma color verde al hacer hover */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.18s, box-shadow 0.25s, color 0.25s, background 0.25s, border-color 0.25s;
}

.btn--whatsapp .btn__wa-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn--whatsapp:hover {
  color: #fff;
  background: linear-gradient(180deg, #25d366 0%, #128c7e 100%);
  border-color: #25d366;
  box-shadow:
    0 14px 36px rgba(37, 211, 102, 0.45),
    inset 0 1px 0 rgba(255, 255, 255,0.25),
    inset 0 -2px 0 rgba(0, 0, 0,0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0,0.3);
}

.btn--whatsapp:hover .btn__wa-icon {
  transform: scale(1.12) rotate(-6deg);
}

.auth-msg {
  margin: 0;
  min-height: 18px;
  font-size: 14px;
  color: var(--danger);
}

.auth-msg.is-good { color: var(--good); }

.auth-side {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.auth-side::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse at 100% 0%, rgba(226, 88, 34,0.18), transparent 60%);
  pointer-events: none;
}

.auth-side__title {
  margin: 0;
  font-family: "Alegreya SC", serif;
  font-size: 22px;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff, var(--tomato));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-side__text { margin: 0; color: var(--text-dim); font-size: 15px; }

.auth-side__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-side__features li {
  position: relative;
  padding: 10px 14px 10px 36px;
  background: rgba(0, 0, 0,0.35);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}

.auth-side__features li::before {
  content: "▸";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tomato);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255, 176, 80,0.7);
}

/* ========== DASHBOARD ========== */

.dash-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: var(--cursor-link);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.dash-tab__icon { font-size: 16px; }
.dash-tab:hover { color: var(--text); border-color: var(--line); }

.dash-tab.is-active {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(226, 88, 34,0.18), rgba(226, 88, 34,0.04));
  box-shadow: 0 8px 22px rgba(226, 88, 34,0.18);
  transform: translateY(-2px);
}

.dash-tab:hover { transform: translateY(-1px); }

.dash-panel {
  display: none;
  background: var(--panel-bg-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0,0.55);
}

.dash-panel.is-active { display: block; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}

.section-head::after {
  content: "✦";
  position: absolute;
  left: 0;
  bottom: -10px;
  font-size: 13px;
  color: var(--tomato);
  background: var(--bg-0);
  padding: 0 8px 0 0;
  text-shadow: 0 0 10px var(--tomato);
  filter: drop-shadow(0 0 4px var(--tomato));
}

.section-head h2 {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff 0%, #ffd6cf 40%, var(--tomato) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  line-height: 1.1;
  text-shadow: 0 0 28px rgba(255, 176, 80, 0.3);
}

/* Vertical accent bar on the left of every section heading */
.section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 18%;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tomato) 0%, var(--crimson) 60%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 176, 80,0.5);
}

.section-head h2::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -14px;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--tomato), transparent);
  filter: drop-shadow(0 0 4px var(--tomato));
}

.section-head__hint {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-head__tools {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ranking-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ranking-filter__label {
  font-family: "Alegreya SC", serif;
  font-weight: 700;
}

.ranking-filter__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 32px 8px 12px;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background-color: rgba(0, 0, 0,0.55);
  background-image: linear-gradient(45deg, transparent 50%, var(--tomato) 50%),
                    linear-gradient(135deg, var(--tomato) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: var(--cursor-link);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.ranking-filter__select:hover,
.ranking-filter__select:focus {
  border-color: var(--tomato);
  background-color: rgba(255, 176, 80,0.08);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 176, 80,0.15);
}

.ranking-filter__select option {
  background: #080d12;
  color: var(--text);
}

.section-head--center {
  justify-content: space-between;
}

/* ========== WELCOME ========== */

.welcome-view {
  text-align: center;
  padding: 18px 24px;
  margin-bottom: 36px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0,0.45);
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
  position: relative;
  overflow: hidden;
}

.welcome-view::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 176, 80,0.22), transparent 60%);
  pointer-events: none;
}

.welcome-title {
  margin: 0 0 6px;
  font-family: "Alegreya SC", serif;
  font-size: 26px;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff, var(--tomato));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

.welcome-title span {
  color: var(--tomato-bright);
  -webkit-text-fill-color: var(--tomato-bright);
}

.welcome-sub {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* ========== STATS ========== */

.stats-view {
  margin-bottom: 40px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ad08a;
  box-shadow: 0 0 0 0 rgba(74, 208, 138,0.7);
  animation: live-pulse 1.6s ease-out infinite;
  display: inline-block;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 208, 138,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(74, 208, 138,0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 208, 138,0); }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 176, 80,0.16), transparent 60%),
    var(--panel-bg-strong);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--tomato);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}

/* Top decorative accent line that animates on hover */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  transform: translateX(-50%) scaleX(1);
  filter: drop-shadow(0 0 6px var(--tomato));
  transition: width 0.45s var(--ease-out);
}

.stat-card:hover::before { width: 80%; }

/* Corner glyph */
.stat-card::after {
  content: "✦";
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 12px;
  color: var(--tomato);
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s;
}
.stat-card:hover::after { opacity: 1; transform: rotate(72deg); }

.stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--tomato);
  box-shadow: var(--shadow-lg), 0 0 28px rgba(255, 176, 80,0.3);
}

.stat-card__icon {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.stat-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.stat-card--online   .stat-card__icon { filter: drop-shadow(0 0 18px rgba(74, 208, 138,0.55)); }
.stat-card--accounts .stat-card__icon { filter: drop-shadow(0 0 18px rgba(255, 71, 87,0.55)); }
.stat-card--chars    .stat-card__icon { filter: drop-shadow(0 0 18px rgba(168, 112, 44,0.6)); }

.stat-card__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.stat-card__label {
  font-family: var(--font-tech);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--text-dim);
  margin-bottom: var(--sp-1);
  font-weight: 600;
}

.stat-card__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff 0%, var(--tomato-bright) 60%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.3s ease;
  text-shadow: 0 0 22px rgba(255, 176, 80,0.4);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0,0.6));
}

.stat-card__value.is-bumping {
  animation: stat-bump 0.55s cubic-bezier(0.2,0.8,0.2,1);
}

@keyframes stat-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); filter: brightness(1.3); }
  100% { transform: scale(1); }
}

/* ========== RANKING (público, fuera del dashboard) ========== */

.ranking-view {
  background: var(--panel-bg-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0,0.55);
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
  margin-bottom: 30px;
}

.table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 560px;
}

.data-table thead th {
  background: linear-gradient(180deg, rgba(7, 14, 20,0.95), rgba(3, 7, 10,0.95));
  color: var(--tomato);
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(216, 169, 59,0.06);
  color: var(--text);
}

.data-table tbody tr:hover td { background: rgba(255, 176, 80,0.07); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table--with-avatar .avatar-cell {
  width: 60px;
  padding: 8px 0 8px 12px;
}

.avatar-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.race-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 18%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line);
  background:
    radial-gradient(ellipse at center, rgba(255, 176, 80,0.22), transparent 70%),
    rgba(0, 0, 0,0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0,0.55), inset 0 0 0 1px rgba(255, 255, 255,0.04);
  display: block;
  flex-shrink: 0;
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #03070a;
  box-sizing: content-box;
}

.avatar-wrap .status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
}

.status-dot--online {
  background: #2ecc71;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0,0.4),
    0 0 8px rgba(46, 204, 113,0.85),
    0 0 14px rgba(46, 204, 113,0.55);
  animation: status-pulse 2.2s ease-in-out infinite;
}

.status-dot--offline {
  background: #ff4757;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0,0.4),
    0 0 6px rgba(255, 71, 87,0.55);
}

@keyframes status-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0,0.4),
      0 0 6px rgba(46, 204, 113,0.7),
      0 0 12px rgba(46, 204, 113,0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0,0.4),
      0 0 12px rgba(46, 204, 113,1),
      0 0 22px rgba(46, 204, 113,0.65);
  }
}

.status-dot--card {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  z-index: 3;
}

.data-table tbody tr:hover .race-avatar {
  border-color: var(--tomato);
  box-shadow: 0 4px 18px rgba(255, 176, 80,0.45), inset 0 0 0 1px rgba(255, 255, 255,0.06);
}

.rank-cell { font-family: "Alegreya SC", serif; color: var(--tomato-bright); font-weight: 800; }
.rank-cell--top1 {
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 176, 80,0.9), 0 0 26px rgba(255, 71, 87,0.55);
  animation: top1-pulse 2.6s ease-in-out infinite;
}
.rank-cell--top2 { color: #ffd6cf; text-shadow: 0 0 12px rgba(255, 122, 106,0.6); }
.rank-cell--top3 { color: #e6786b; text-shadow: 0 0 10px rgba(168, 112, 44,0.6); }

@keyframes top1-pulse {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 176, 80,0.7), 0 0 22px rgba(255, 176, 80,0.45); }
  50%      { text-shadow: 0 0 22px rgba(255, 176, 80,1),    0 0 36px rgba(255, 176, 80,0.7); }
}

.data-table tbody tr {
  animation: row-in 0.4s cubic-bezier(0.2,0.8,0.2,1) both;
}

@keyframes row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.race-avatar {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.data-table tbody tr:hover .race-avatar {
  transform: scale(1.08);
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: rgba(0, 0, 0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tag:hover { transform: translateY(-1px); }
.tag--ok:hover  { box-shadow: 0 4px 14px rgba(74, 208, 138,0.25); }
.tag--bad:hover { box-shadow: 0 4px 14px rgba(210, 71, 71,0.3); }
.tag--gm:hover  { box-shadow: 0 4px 14px rgba(216, 169, 59,0.35); }
.tag--ok  { color: var(--good);   border-color: rgba(74, 208, 138,0.45); }
.tag--bad { color: var(--danger); border-color: rgba(210, 71, 71,0.45); }
.tag--gm  { color: var(--gold-bright); border-color: var(--gold); }

.char-link {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s, text-shadow 0.25s;
}
.char-link:hover {
  color: var(--tomato-bright);
  text-shadow: 0 0 12px rgba(255, 71, 87,0.55);
}

.state-cell {
  text-align: center;
  color: var(--text-dim);
  padding: 28px 16px !important;
  font-style: italic;
}

/* =============================================================
   TOPBAR ACTIONS
   ============================================================= */

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn--sm {
  padding: 9px 16px;
  font-size: 12px;
}

/* =============================================================
   HERO
   ============================================================= */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 52px);
  margin-bottom: var(--sp-7);
  border: 1px solid var(--line);
  border-top: 2px solid var(--tomato);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(7, 14, 20, 0.95) 0%, rgba(3, 6, 8, 0.85) 60%, rgba(11, 27, 40, 0.75) 100%);
  box-shadow:
    var(--shadow-xl),
    inset 0 0 0 1px rgba(255, 176, 80,0.04),
    0 0 40px rgba(255, 176, 80,0.12);
  overflow: hidden;
  isolation: isolate;
  animation: fade-up 0.6s var(--ease-out) both;
}

/* Cinematic scrim: dark fade from bottom for readability */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(2, 4, 6,0.55) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(168, 112, 44,0.28), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Corner glyphs (4 esquinas con runas) */
.hero__corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--tomato);
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px var(--tomato));
}
.hero__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.hero__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.hero__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.hero__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(168, 112, 44,0.35), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(101, 53, 30,0.45), transparent 60%);
  z-index: -1;
  animation: hero-glow 9s ease-in-out infinite;
}

@keyframes hero-glow {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 18px,
      rgba(255, 176, 80,0.025) 18px 19px
    );
  pointer-events: none;
  z-index: -1;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tomato-bright);
  background: rgba(255, 176, 80, 0.1);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

.hero__title-primary {
  font-size: var(--fs-hero);
  background: linear-gradient(180deg, #fff 0%, var(--tomato) 55%, var(--blood) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(255, 176, 80, 0.35);
  filter: drop-shadow(0 6px 24px rgba(255, 176, 80,0.3));
  animation: hero-drakon-pulse 4s ease-in-out infinite;
}

@keyframes hero-drakon-pulse {
  0%, 100% { filter: drop-shadow(0 6px 24px rgba(255, 176, 80,0.3)); }
  50%      { filter: drop-shadow(0 6px 36px rgba(255, 71, 87,0.55)); }
}

.hero__title-secondary {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 60px);
  letter-spacing: 0.32em;
  background: linear-gradient(180deg, var(--tomato-bright), var(--crimson));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: -6px;
  position: relative;
}

/* Drakon-forged divider between the two parts of the brand name */
.hero__title-secondary::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--tomato), transparent);
  filter: drop-shadow(0 0 6px var(--tomato));
}

.hero__tagline {
  margin: 0 0 var(--sp-7);
  font-size: var(--fs-lg);
  color: var(--text);
  max-width: 560px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.hero__tagline strong {
  color: var(--tomato-bright);
  font-weight: 700;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  position: relative;
  z-index: 2;
}

.chip {
  display: inline-flex;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(0, 0, 0,0.7), rgba(0, 0, 0,0.55));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: var(--shadow-sm);
}

.chip:hover {
  border-color: var(--tomato);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 14px rgba(255, 176, 80,0.25);
}

.chip__key {
  padding: 9px 12px;
  color: var(--text-dim);
  background: rgba(255, 176, 80,0.08);
  border-right: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  font-family: var(--font-tech);
  font-size: 10.5px;
  letter-spacing: 0.18em;
}

.chip__val {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 9px 14px;
  color: var(--tomato-bright);
  font-weight: 800;
  font-family: var(--font-tech);
  text-shadow: 0 0 8px rgba(255, 176, 80,0.35);
}

.chip__vip {
  display: inline-block;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f2e9dd;
  background: rgba(255, 176, 80, 0.15);
  border: 1px solid rgba(255, 176, 80, 0.35);
  border-radius: 999px;
  font-family: "Barlow Condensed", "Alegreya SC", sans-serif;
  text-shadow: 0 0 8px rgba(255, 176, 80,0.45);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn--lg {
  padding: 16px 28px;
  font-size: 15px;
  letter-spacing: 0.18em;
}

.hero__hero-art {
  position: relative;
  height: 100%;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: 520px;
  background-image: url("img/drakon/characters/drakon-guardian.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 30px 30px rgba(0, 0, 0,0.6))
    drop-shadow(0 0 35px rgba(255, 176, 80, 0.3));
  animation: hero-float 5s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero__art-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 80,0.45) 0%, transparent 65%);
  z-index: 0;
  animation: hero-aura 4s ease-in-out infinite;
}

@keyframes hero-aura {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1;   }
}

/* =============================================================
   CLASSES
   ============================================================= */

.classes-view {
  margin-bottom: 50px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}

/* =============================================================
   CLASES — Cards con info revelable al hacer hover
   ============================================================= */
.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}

.class-card {
  --c-accent: var(--tomato);
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(8, 15, 20,0.95), rgba(3, 6, 8,0.98));
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: var(--cursor-link);
  isolation: isolate;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s,
    box-shadow 0.35s;
  outline: none;
  height: 420px;
}

.class-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 65%);
  opacity: 0.55;
  z-index: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.class-card::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  transform: translateX(-50%);
  z-index: 3;
  transition: width 0.45s ease;
  filter: drop-shadow(0 0 6px var(--c-accent));
}

.class-card:hover,
.class-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--c-accent);
  box-shadow:
    0 32px 60px rgba(0, 0, 0,0.7),
    0 0 38px color-mix(in srgb, var(--c-accent) 45%, transparent);
}
.class-card:hover::before,
.class-card:focus-visible::before { opacity: 1; }
.class-card:hover::after,
.class-card:focus-visible::after { width: 90%; }

.class-card__art-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.class-card__art {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 12%;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0,0.85)) saturate(1.05);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s;
}

.class-card:hover .class-card__art,
.class-card:focus-visible .class-card__art {
  transform: scale(1.08) translateY(-4px);
  filter:
    drop-shadow(0 22px 24px rgba(0, 0, 0,0.9))
    drop-shadow(0 0 20px color-mix(in srgb, var(--c-accent) 55%, transparent));
}

/* Initial-letter rune chip in the corner (always visible). */
.class-card__rune {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 9px;
  background: rgba(0, 0, 0,0.6);
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  border-radius: 6px;
  color: var(--c-accent);
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.18em;
  box-shadow: 0 6px 12px rgba(0, 0, 0,0.7), inset 0 0 6px color-mix(in srgb, var(--c-accent) 20%, transparent);
  text-shadow: 0 0 8px var(--c-accent);
  transition: transform 0.3s, box-shadow 0.3s;
}
.class-card:hover .class-card__rune {
  transform: rotate(-4deg) scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0,0.8), 0 0 18px color-mix(in srgb, var(--c-accent) 60%, transparent);
}

/* Soft glow behind the art (revealed on hover) */
.class-card__glow {
  position: absolute;
  inset: auto 0 -20% 0;
  height: 70%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 70%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
  z-index: 0;
}
.class-card:hover .class-card__glow,
.class-card:focus-visible .class-card__glow { opacity: 0.55; }

/* Info area at the bottom: name + role visible by default, .reveal slides on hover */
.class-card__info {
  position: relative;
  z-index: 2;
  padding: 18px 18px 20px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0,0.65) 25%, rgba(0, 0, 0,0.92) 100%);
  text-align: center;
}

.class-card__name {
  margin: 0 0 4px;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, var(--c-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px color-mix(in srgb, var(--c-accent) 45%, transparent);
}

.class-card__role {
  margin: 0;
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.class-card__reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s ease 0.1s,
    margin-top 0.5s;
  margin-top: 0;
}
.class-card:hover .class-card__reveal,
.class-card:focus-visible .class-card__reveal {
  max-height: 220px;
  opacity: 1;
  margin-top: 12px;
}

.class-card__desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.class-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.class-card__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
  border-radius: 6px;
}
.class-card__stats li span {
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.class-card__stats li b {
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-size: 13px;
  font-weight: 900;
  color: var(--c-accent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--c-accent) 50%, transparent);
}

@media (max-width: 700px) {
  /* Reveal-on-hover doesn't make sense on touch — always show desc */
  .class-card { height: auto; }
  .class-card__reveal { max-height: 220px; opacity: 1; margin-top: 12px; }
  .class-card__art-wrap { min-height: 260px; }
}

/* =============================================================
   GUARDIÁN DEL REINO
   ============================================================= */

.killer-view {
  margin-bottom: 50px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
  display: flex;
  justify-content: center;
}

.killer-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 600 / 335;
  background-image: url("img/drakon/characters/drakon-top-killer.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.7));
}

.killer-frame__name,
.killer-frame__kills {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  text-align: center;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  background: linear-gradient(180deg, #f8f4f0 0%, #ffc47d 55%, #a8702c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 8px rgba(255, 176, 80, 0.95))
    drop-shadow(0 0 18px rgba(168, 112, 44, 0.55))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
  animation: killerPulse 2.2s ease-in-out infinite;
}

.killer-frame__name {
  top: 51.5%;
  font-size: clamp(18px, 3.4vw, 30px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.killer-frame__kills {
  top: 74%;
  font-size: clamp(24px, 4.6vw, 44px);
  letter-spacing: 0.06em;
  animation-delay: 0.4s;
}

@keyframes killerPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(255, 176, 80, 0.95))
      drop-shadow(0 0 18px rgba(168, 112, 44, 0.55))
      drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255, 80, 80, 1))
      drop-shadow(0 0 28px rgba(168, 112, 44, 0.85))
      drop-shadow(0 0 42px rgba(255, 30, 30, 0.55))
      drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .killer-frame__name,
  .killer-frame__kills { animation: none; }
}

.killer-frame__state {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 60%;
  text-align: center;
  color: #ffd0d0;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* =============================================================
   EVENTS
   ============================================================= */

.events-view {
  margin-bottom: 50px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
  perspective: 1500px;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}

.events-grid__state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--line-soft);
  border-radius: 12px;
  background: rgba(3, 6, 8, 0.72);
}

.events-grid__state--error {
  color: #ffedd8;
  border-color: rgba(255, 176, 80, 0.5);
}

.event-card {
  position: relative;
  padding: 24px 22px 22px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 176, 80,0.18), transparent 65%),
    linear-gradient(180deg, rgba(8, 15, 20,0.95) 0%, rgba(3, 6, 8,0.98) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s,
    box-shadow 0.35s;
  isolation: isolate;
  will-change: transform;
}

.event-card__admin-edit {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  padding: 7px 11px;
  border: 1px solid rgba(242, 233, 221, 0.55);
  border-radius: 999px;
  background: rgba(3, 6, 8, 0.82);
  color: #f2e9dd;
  font: 700 10px/1 "Barlow Condensed", "Alegreya SC", serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: var(--cursor-link);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.event-card__admin-edit:hover,
.event-card__admin-edit:focus-visible {
  border-color: var(--tomato-bright);
  background: rgba(255, 176, 80, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 176, 80, 0.24);
  outline: none;
}

/* Top accent line */
.event-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  transform: translateX(-50%) scaleX(0.3);
  opacity: 0.4;
  transition: transform 0.45s ease, opacity 0.3s;
  filter: drop-shadow(0 0 6px var(--tomato));
}

/* Glare layer that follows the mouse (set inline via JS) */
.event-card__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 176, 80,0.18), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.event-card:hover {
  transform: translateY(-6px);
  border-color: var(--tomato);
  box-shadow:
    0 28px 60px rgba(0, 0, 0,0.7),
    0 0 36px rgba(255, 176, 80,0.32);
}
.event-card:hover::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
.event-card:hover .event-card__glare { opacity: 1; }

.event-card--featured {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 176, 80,0.32), transparent 65%),
    linear-gradient(135deg, rgba(60, 33, 20,0.92), rgba(7, 14, 20,0.98));
  border-color: var(--tomato);
  box-shadow: 0 24px 50px rgba(0, 0, 0,0.6), 0 0 22px rgba(255, 176, 80,0.22);
}

.event-card--featured::before { transform: translateX(-50%) scaleX(1); opacity: 1; }

.event-card__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.event-card__icon {
  width: 180px;
  height: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0,0.9)) drop-shadow(0 0 22px rgba(255, 71, 87,0.55));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s;
  animation: event-icon-float 4.5s ease-in-out infinite;
}

@keyframes event-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.event-card:hover .event-card__icon {
  transform: scale(1.1) rotate(-3deg) translateY(-4px);
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0,0.9))
    drop-shadow(0 0 26px rgba(255, 176, 80,0.85));
}

.event-card--featured .event-card__icon {
  animation-duration: 3.5s;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0,0.85)) drop-shadow(0 0 22px rgba(255, 176, 80,0.7));
}

.event-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.event-card__icon--model {
  position: relative;
  isolation: isolate;
  width: min(220px, 100%);
  height: 190px;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0,0.95)) drop-shadow(0 0 24px rgba(255, 176, 80,0.4));
}

.event-card__icon--golden::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 112, 0.48) 0, rgba(255, 166, 0, 0.18) 42%, transparent 72%);
  filter: blur(12px);
  animation: event-golden-aura 2.8s ease-in-out infinite;
  pointer-events: none;
}

.event-model--golden {
  filter:
    grayscale(0.22)
    sepia(0.92)
    saturate(3.8)
    hue-rotate(354deg)
    brightness(1.18)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(255, 226, 128, 0.92))
    drop-shadow(0 0 20px rgba(255, 167, 20, 0.72));
}

@keyframes event-golden-aura {
  0%, 100% { opacity: 0.62; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

.event-card__model {
  display: block;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
  touch-action: pan-y;
}

.event-card__model-poster {
  font: 700 10px/1.3 "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.event-card__cadence {
  display: inline-block;
  padding: 5px 14px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato-soft);
  border: 1px solid color-mix(in srgb, var(--tomato) 45%, transparent);
  border-radius: 999px;
  background: rgba(0, 0, 0,0.6);
  text-shadow: 0 0 6px rgba(255, 176, 80,0.4);
}

.event-card__title {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  background: linear-gradient(180deg, #f8f4f0 0%, var(--tomato) 60%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255, 176, 80,0.3);
  transition: letter-spacing 0.35s ease;
}
.event-card:hover .event-card__title { letter-spacing: 0.12em; }

/* ====== Expand/Collapse mechanism ====== */
.event-card__toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 0;
  padding: 8px 18px;
  width: 100%;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--tomato-soft);
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: var(--cursor-link);
  transition: border-color 0.25s, color 0.25s, background 0.25s, box-shadow 0.25s;
  outline: none;
}

.event-card__toggle:hover,
.event-card__toggle:focus-visible {
  border-color: var(--tomato);
  color: #fff;
  background: rgba(255, 176, 80,0.1);
  box-shadow: 0 5px 18px rgba(255, 176, 80,0.25);
}

.event-card__toggle-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}

.event-card.is-expanded .event-card__toggle-arrow {
  transform: rotate(180deg);
}

.event-card__details {
  position: relative;
  z-index: 2;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition:
    max-height 0.55s cubic-bezier(0.2,0.8,0.2,1),
    opacity 0.35s ease 0.1s,
    margin-top 0.45s;
}

.event-card.is-expanded .event-card__details {
  max-height: 600px;
  opacity: 1;
  margin-top: 16px;
}

/* When collapsed, the lists inside don't take padding-top */
.event-card__details .event-card__times { padding-top: 12px; }

.event-card__desc {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.event-card__maps {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.event-card__maps li {
  position: relative;
  font-size: 11px;
  font-weight: 600;
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  letter-spacing: 0.08em;
  padding: 4px 10px 4px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--tomato-soft);
  background: rgba(255, 176, 80, 0.08);
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}

.event-card__maps li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--tomato);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px var(--tomato);
}

.event-card__maps li:hover {
  border-color: var(--tomato);
  color: #fff;
  transform: translateY(-2px);
}

.event-card__times {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-card__times li {
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  min-width: 56px;
  text-align: center;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--text);
  background: rgba(0, 0, 0,0.55);
  transition: border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.event-card__times li:hover {
  border-color: var(--tomato);
  color: var(--tomato-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 176, 80,0.3);
  text-shadow: 0 0 8px var(--tomato);
}

/* Editor puntual del medio de cada evento. Visible únicamente para admin. */
.event-editor {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(1, 3, 4, 0.94);
  backdrop-filter: blur(12px);
  animation: dl-modal-in 0.22s ease both;
}

.event-editor__card {
  position: relative;
  width: min(820px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 176, 80, 0.16), transparent 34%),
    linear-gradient(160deg, rgba(8, 17, 25, 0.99), rgba(3, 5, 7, 0.99));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.78), 0 0 60px rgba(255, 176, 80, 0.16);
  animation: dl-modal-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.event-editor__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: var(--text-dim);
  font: 26px/1 "Alegreya SC", serif;
  cursor: var(--cursor-link);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}

.event-editor__close:hover,
.event-editor__close:focus-visible {
  color: #fff;
  border-color: var(--tomato);
  transform: rotate(90deg);
  outline: none;
}

.event-editor__head {
  padding: 30px 34px 20px;
  border-bottom: 1px dashed var(--line-soft);
}

.event-editor__eyebrow {
  display: block;
  margin: 0 48px 8px 0;
  color: var(--tomato-soft);
  font: 700 10px/1.4 "Barlow Condensed", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.event-editor__title {
  margin: 0;
  color: #fff;
  font: 800 clamp(21px, 3vw, 28px)/1.15 "Alegreya SC", serif;
  letter-spacing: 0.04em;
}

.event-editor__lead {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.event-editor__form { padding: 24px 34px 30px; }

.event-editor__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
}

.event-editor__choices label { cursor: var(--cursor-link); }
.event-editor__choices input { position: absolute; opacity: 0; pointer-events: none; }
.event-editor__choices span {
  display: block;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-dim);
  text-align: center;
  font: 700 11px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.event-editor__choices input:checked + span {
  color: #fff;
  border-color: var(--tomato);
  background: rgba(255, 176, 80, 0.14);
  box-shadow: inset 0 0 22px rgba(255, 176, 80, 0.08);
}
.event-editor__choices input:focus-visible + span { outline: 2px solid var(--tomato-bright); outline-offset: 2px; }

.event-editor__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  margin-top: 20px;
}

.event-editor__fields small {
  display: block;
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.5;
}

.event-editor__size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.event-editor__or { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
.event-editor__or::before, .event-editor__or::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }

.event-editor .admin-field select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #070c10;
  color: var(--text);
  font: inherit;
  outline: none;
}
.event-editor .admin-field select:focus { border-color: var(--tomato); box-shadow: 0 0 0 3px rgba(255, 176, 80,0.16); }
.event-editor .admin-field select:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.72;
}

.event-editor__animation-field {
  position: relative;
  margin-top: 14px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255, 176, 80, 0.2);
  border-left: 2px solid var(--tomato);
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(255, 176, 80, 0.09), rgba(255, 176, 80, 0.015));
}
.event-editor__animation-field::after {
  content: "LOOP";
  position: absolute;
  top: 11px;
  right: 12px;
  color: var(--tomato-bright);
  font: 700 9px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
  opacity: 0.76;
}
.event-editor__animation-field .admin-field__label { padding-right: 48px; }
.event-editor__animation-field small { margin-bottom: 0; }

.event-editor__speed-control {
  margin-top: 9px;
  padding-top: 13px;
  border-top: 1px dashed rgba(255, 176, 80, 0.22);
}
.event-editor__speed-head,
.event-editor__speed-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.event-editor__speed-head label {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.event-editor__speed-head output {
  min-width: 58px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 176, 80, 0.42);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: var(--tomato-bright);
  text-align: center;
  font: 700 11px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
}
.event-editor .event-editor__speed-slider {
  --speed-fill: 48.72%;
  width: 100%;
  height: 6px;
  margin: 15px 0 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, var(--tomato) 0 var(--speed-fill), rgba(255, 255, 255, 0.14) var(--speed-fill) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 18px rgba(255, 176, 80, 0.08);
  cursor: ew-resize;
}
.event-editor .event-editor__speed-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #ffe5c4;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--tomato);
  box-shadow: 0 0 0 4px rgba(255, 176, 80, 0.14), 0 0 16px rgba(255, 176, 80, 0.48);
}
.event-editor .event-editor__speed-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #ffe5c4;
  border-radius: 50%;
  background: var(--tomato);
  box-shadow: 0 0 0 4px rgba(255, 176, 80, 0.14), 0 0 16px rgba(255, 176, 80, 0.48);
}
.event-editor .event-editor__speed-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 176, 80, 0.2), 0 0 20px rgba(255, 176, 80, 0.22);
}
.event-editor__speed-scale {
  color: var(--text-faint);
  font: 600 8px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-editor__speed-control > small { margin-top: 8px; }

.event-editor__golden-toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 190, 55, 0.24);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(255, 184, 34, 0.1), rgba(255, 176, 80, 0.02));
  cursor: var(--cursor-link);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.event-editor__golden-toggle:hover {
  border-color: rgba(255, 210, 100, 0.58);
  background: linear-gradient(100deg, rgba(255, 184, 34, 0.16), rgba(255, 176, 80, 0.035));
}
.event-editor__golden-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.event-editor__golden-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 211, 108, 0.46);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.48);
  color: rgba(255, 224, 145, 0.54);
  box-shadow: inset 0 0 12px rgba(255, 183, 35, 0.05);
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.event-editor__golden-copy { min-width: 0; }
.event-editor__golden-copy strong {
  display: block;
  color: #e9d9bd;
  font: 700 10px/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.event-editor__golden-copy small { margin-top: 4px; }
.event-editor__golden-badge {
  padding: 5px 7px;
  border: 1px solid rgba(255, 205, 91, 0.26);
  border-radius: 999px;
  color: rgba(255, 218, 128, 0.55);
  font: 700 8px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.14em;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.event-editor__golden-toggle input:checked ~ .event-editor__golden-mark {
  border-color: #ffdb76;
  background: linear-gradient(145deg, #ffd96c, #b66700);
  color: #3b1c00;
  box-shadow: 0 0 0 4px rgba(255, 187, 38, 0.11), 0 0 20px rgba(255, 178, 22, 0.38);
  transform: rotate(8deg);
}
.event-editor__golden-toggle input:checked ~ .event-editor__golden-copy strong { color: #ffdc82; }
.event-editor__golden-toggle input:checked ~ .event-editor__golden-badge {
  border-color: rgba(255, 219, 118, 0.72);
  color: #ffdc82;
  box-shadow: 0 0 14px rgba(255, 177, 19, 0.18);
}
.event-editor__golden-toggle:has(input:focus-visible) {
  outline: 2px solid #ffcc58;
  outline-offset: 2px;
}

.event-editor__preview {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 176, 80, 0.18), transparent 58%),
    rgba(0, 0, 0, 0.56);
  color: var(--text-faint);
  text-align: center;
  font-size: 12px;
}
.event-editor__preview.is-golden::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 128, 0.34), rgba(255, 169, 18, 0.12) 48%, transparent 72%);
  filter: blur(12px);
  animation: event-golden-aura 2.8s ease-in-out infinite;
  pointer-events: none;
}
.event-editor__preview img { display: block; width: 92%; height: 240px; object-fit: contain; }
.event-editor__model { display: block; width: 100%; height: 260px; --poster-color: transparent; background: transparent; }

.event-editor__message { min-height: 20px; margin: 16px 0 0; color: var(--danger); font-size: 13px; }
.event-editor__message.is-good { color: var(--good); }
.event-editor__actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line-soft); }
.event-editor__remove { color: #ffdaae; border-color: rgba(255, 193, 117, 0.36); }

@media (max-width: 700px) {
  .event-editor { padding: 10px; align-items: flex-start; }
  .event-editor__head { padding: 24px 20px 16px; }
  .event-editor__form { padding: 18px 20px 22px; }
  .event-editor__workspace { grid-template-columns: 1fr; }
  .event-editor__preview { min-height: 210px; order: -1; }
  .event-editor__model, .event-editor__preview img { height: 210px; }
  .event-editor__actions { grid-template-columns: 1fr 1fr; }
  .event-editor__actions > span { display: none; }
  .event-editor__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .event-card__icon--golden::before,
  .event-editor__preview.is-golden::before { animation: none; }
}

/* =============================================================
   USER PANEL
   ============================================================= */

.user-panel-view {
  margin-bottom: 50px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}

.user-panel__badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vip-badge--active {
  color: #1a0808;
  background: linear-gradient(180deg, #f2e9dd 0%, #bf9765 60%, #784a33 100%);
  box-shadow:
    0 6px 22px rgba(255, 180, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255,0.4);
  border: 1px solid rgba(0, 0, 0,0.25);
  animation: vip-pulse 3s ease-in-out infinite;
}

.vip-badge__crown {
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.7));
}

.vip-badge__days {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0,0.25);
  color: #1a0808;
  font-size: 10px;
  letter-spacing: 0.15em;
}

.vip-badge--inactive {
  color: var(--text-faint);
  background: rgba(0, 0, 0,0.45);
  border: 1px solid var(--line-soft);
}

@keyframes vip-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(255, 180, 60,0.35), inset 0 1px 0 rgba(255, 255, 255,0.4); }
  50%      { box-shadow: 0 8px 32px rgba(255, 180, 60,0.65), inset 0 1px 0 rgba(255, 255, 255,0.5); }
}

.coins-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.coin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--panel-bg-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.coin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, var(--coin-glow, rgba(255, 176, 80,0.15)), transparent 60%);
  pointer-events: none;
}

.coin:hover {
  transform: translateY(-2px);
  border-color: var(--coin-border, var(--tomato));
  box-shadow: 0 18px 44px var(--coin-shadow, rgba(255, 176, 80,0.25));
}

.coin--wc { --coin-glow: rgba(120, 200, 255, 0.18); --coin-border: #9ed4ff; --coin-shadow: rgba(120, 200, 255,0.22); }
.coin--wp { --coin-glow: rgba(216, 169, 59, 0.22); --coin-border: #f2e9dd; --coin-shadow: rgba(255, 200, 80,0.25); }
.coin--gp { --coin-glow: rgba(255, 176, 80, 0.22); --coin-border: var(--tomato); --coin-shadow: rgba(255, 176, 80,0.28); }

.coin__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255,0.06), rgba(0, 0, 0,0.4));
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.coin__body { position: relative; z-index: 1; min-width: 0; }

.coin__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.coin__value {
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #fff;
}

.user-panel__subtitle {
  margin: 26px 0 14px;
  font-family: "Alegreya SC", serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tomato-bright);
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

.user-panel__subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, var(--tomato), transparent);
}

.my-chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.my-char {
  position: relative;
  padding: 22px;
  background: var(--panel-bg-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.my-char::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(255, 176, 80,0.18), transparent 60%);
  pointer-events: none;
}

.my-char:hover {
  transform: translateY(-3px);
  border-color: var(--tomato);
  box-shadow: 0 24px 56px rgba(168, 112, 44,0.3);
}

.my-char__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.my-char__avatar {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background:
    radial-gradient(ellipse at center, rgba(255, 176, 80,0.25), transparent 65%),
    rgba(0, 0, 0,0.55);
  object-fit: cover;
  object-position: center 14%;
  flex-shrink: 0;
  transition: border-color 0.3s, transform 0.3s;
}

.my-char:hover .my-char__avatar {
  border-color: var(--tomato);
  transform: scale(1.05);
}

.my-char__title { min-width: 0; flex: 1; }

.my-char__name {
  display: block;
  margin: 0 0 2px;
  font-family: "Alegreya SC", serif;
  font-size: 19px;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #fff, var(--tomato));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: filter 0.2s;
}
.my-char__name:hover { filter: brightness(1.3); text-shadow: 0 0 12px rgba(255, 176, 80,0.5); }

.my-char__class {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.my-char__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.metric {
  text-align: center;
  padding: 10px 8px;
  background: rgba(0, 0, 0,0.45);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.metric__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.metric__value {
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  line-height: 1.1;
}

.metric--lvl .metric__value { color: var(--tomato-bright); }
.metric--rst .metric__value { color: #f2e9dd; }
.metric--mr  .metric__value { color: #8fcdff; }

.my-char__map {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 176, 80, 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.my-char__map-icon {
  font-size: 16px;
  color: var(--tomato);
}

.my-char__map-text {
  flex: 1;
  min-width: 0;
}

.my-char__map-name {
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--tomato-bright);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-char__map-pos {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-family: "Alegreya SC", serif;
}

.my-char__stats {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.my-char__stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  background: rgba(0, 0, 0,0.4);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-family: "Alegreya SC", serif;
}

.my-char__stat-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.my-char__stat-value {
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}

.my-char__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 16px;
  color: var(--text-dim);
  font-style: italic;
  border: 1px dashed var(--line-soft);
  border-radius: 12px;
}

/* ===== Character action buttons (Reset / Clear PK / Unstuck / Stats) ===== */
.my-char__points {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin-top: 12px;
  background: rgba(74, 208, 138,0.08); border: 1px dashed #4ad08a; border-radius: 8px;
  font-family: "Barlow Condensed", sans-serif; font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #5eff96;
  text-shadow: 0 0 8px rgba(74, 208, 138,0.45);
}
.my-char__points b { color: #fff; }

.my-char__actions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  margin-top: 12px; position: relative; z-index: 1;
}

.my-char__btn {
  padding: 8px 10px; background: rgba(0, 0, 0,0.55); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text-dim);
  font-family: "Alegreya SC", serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: var(--cursor-link); transition: 0.25s;
}
.my-char__btn:hover {
  border-color: var(--tomato); color: #fff;
  background: rgba(255, 176, 80,0.08); text-shadow: 0 0 8px rgba(255, 176, 80,0.45);
  transform: translateY(-1px); box-shadow: 0 5px 10px rgba(255, 176, 80,0.2);
}
.my-char__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.my-char__btn--accent {
  grid-column: 1 / -1;
  border-color: var(--tomato);
  color: var(--tomato-bright);
  background: rgba(255, 176, 80,0.08);
}
.my-char__btn--accent:hover { background: rgba(255, 176, 80,0.18); color: #fff; }

.my-char__msg {
  font-family: "Alegreya SC", serif; font-size: 12px; text-align: center;
  margin-top: 8px; min-height: 18px;
  color: var(--text-dim);
}
.my-char__msg.is-good { color: #5eff96; text-shadow: 0 0 8px rgba(74, 208, 138,0.45); }
.my-char__msg.is-bad  { color: #ffd4a0; text-shadow: 0 0 8px rgba(255, 176, 80,0.45); }

@media (max-width: 700px) {
  .coins-bar { grid-template-columns: 1fr; }
}

/* =============================================================
   BENEFITS (Free vs VIP)
   ============================================================= */

.benefits-view {
  margin-bottom: 50px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.benefit-card {
  position: relative;
  padding: 30px 28px;
  background: var(--panel-bg-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.benefit-card--free::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80, 160, 255, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 200, 255, 0.08), transparent 60%);
}

.benefit-card--free {
  --bc-accent: #9ed4ff;
  --bc-accent-soft: #a8d0ff;
}

.benefit-card--vip::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 80, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 176, 80, 0.16), transparent 60%);
}

.benefit-card--vip {
  --bc-accent: #f2e9dd;
  --bc-accent-soft: #ffe08a;
  border-color: rgba(241, 196, 84, 0.4);
}

.benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--bc-accent);
  box-shadow: 0 28px 64px color-mix(in srgb, var(--bc-accent) 28%, transparent);
}

.benefit-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--line-soft);
}

.benefit-card__title {
  margin: 0;
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff, var(--bc-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.benefit-card__badge {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--bc-accent) 45%, transparent));
  animation: badge-float 4.5s ease-in-out infinite;
}

.benefit-card--vip .benefit-card__badge {
  animation: badge-float-vip 4.5s ease-in-out infinite;
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

@keyframes badge-float-vip {
  0%, 100% { transform: translateY(0) rotate(2deg) scale(1); filter: drop-shadow(0 10px 24px rgba(241, 196, 84,0.45)); }
  50%      { transform: translateY(-8px) rotate(-2deg) scale(1.04); filter: drop-shadow(0 16px 36px rgba(255, 200, 80,0.7)); }
}

.benefit-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.benefit-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(0, 0, 0,0.4);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.benefit-list li:hover {
  border-color: var(--bc-accent);
  background: rgba(0, 0, 0,0.55);
  transform: translateX(2px);
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255,0.05);
  border: 1px solid var(--line-soft);
}

.benefit-icon--exp  { color: #f2e9dd; }
.benefit-icon--gem  { color: #9ed4ff; }
.benefit-icon--drop { color: #4ad08a; }

.benefit-key {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.benefit-val {
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--bc-accent-soft);
  white-space: nowrap;
  text-shadow: 0 0 12px color-mix(in srgb, var(--bc-accent) 40%, transparent);
}

.benefit-subtitle {
  margin: 8px 0 12px;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bc-accent);
  text-align: center;
  position: relative;
  padding: 0 14px;
}

.benefit-subtitle::before,
.benefit-subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bc-accent), transparent);
  opacity: 0.6;
}
.benefit-subtitle::before { left: 0; }
.benefit-subtitle::after  { right: 0; }

.benefit-list--mix li { background: rgba(74, 208, 138,0.04); }

@media (max-width: 800px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 24px 18px; }
  .benefit-card__badge { width: 100px; height: 100px; }
}

/* =============================================================
   DOWNLOAD CARD
   ============================================================= */

.download-view {
  margin-bottom: 60px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}

.download-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 56px 48px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--tomato);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(255, 176, 80,0.22), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(101, 53, 30,0.32), transparent 55%),
    linear-gradient(135deg, rgba(11, 27, 40,0.92), rgba(3, 6, 8,0.98) 70%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0,0.7),
    0 0 32px rgba(255, 176, 80,0.18),
    inset 0 0 30px rgba(0, 0, 0,0.5);
  overflow: hidden;
  isolation: isolate;
}

/* Animated top accent line */
.download-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 8px var(--tomato));
  z-index: 4;
  animation: dl-line 4s ease-in-out infinite;
}

@keyframes dl-line {
  0%, 100% { width: 50%; opacity: 0.55; }
  50%      { width: 90%; opacity: 1; }
}

/* Glowing corner runes */
.download-card::after {
  content: "✦";
  position: absolute;
  top: 22px;
  left: 26px;
  font-size: 20px;
  color: var(--tomato);
  text-shadow: 0 0 12px var(--tomato), 0 0 22px var(--crimson);
  opacity: 0.8;
  filter: drop-shadow(0 0 4px var(--tomato));
  animation: corner-twinkle 3s ease-in-out infinite alternate;
  z-index: 3;
  pointer-events: none;
}

@keyframes corner-twinkle {
  0%   { opacity: 0.45; transform: scale(0.95); }
  100% { opacity: 1;    transform: scale(1.1); }
}

.download-card__body {
  position: relative;
  z-index: 2;
}

.download-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tomato-bright);
  background: rgba(255, 176, 80,0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(255, 176, 80,0.5);
}

.download-card__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tomato);
  box-shadow: 0 0 8px var(--tomato);
  animation: live-pulse 1.6s ease-out infinite;
}

.download-card__title {
  margin: 0 0 14px;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #f8f4f0 0%, var(--tomato) 60%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255, 176, 80,0.3);
  line-height: 1.05;
}

.download-card__desc {
  margin: 0 0 24px;
  font-size: 17px;
  color: var(--text-dim);
  max-width: 480px;
  line-height: 1.55;
}

.download-card__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.download-card__art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 380px;
  background-image: url("img/drakon/characters/drakon-warrior.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 22px 32px rgba(0, 0, 0,0.7))
    drop-shadow(0 0 36px rgba(255, 176, 80,0.45));
  animation: dl-float 5s ease-in-out infinite;
}

@keyframes dl-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}

.download-card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 176, 80,0.35), transparent 55%);
  filter: blur(20px);
  z-index: -1;
  animation: dl-aura 4s ease-in-out infinite alternate;
}

@keyframes dl-aura {
  0%   { opacity: 0.45; }
  100% { opacity: 0.85; }
}

/* =============================================================
   GALERÍA
   ============================================================= */

.gallery-view {
  margin-bottom: 60px;
  animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}

.gallery {
  position: relative;
}

.gallery__viewport {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 176, 80,0.12), transparent 70%),
    linear-gradient(180deg, rgba(6, 11, 15,0.95), rgba(3, 6, 8,0.98));
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(0, 0, 0,0.7),
    0 0 28px rgba(255, 176, 80,0.15),
    inset 0 0 30px rgba(0, 0, 0,0.6);
  isolation: isolate;
}

.gallery__viewport::before,
.gallery__viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  filter: drop-shadow(0 0 6px var(--tomato));
  z-index: 3;
  pointer-events: none;
}
.gallery__viewport::before { top: 0; }
.gallery__viewport::after  { bottom: 0; }

.gallery__track {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}

.gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  cursor: var(--cursor-link);
  transition: transform 8s ease-out, filter 0.4s ease;
  transform: scale(1);
}

/* Ken Burns slow zoom on the active slide only */
.gallery__slide.is-active img {
  animation: kenburns 18s ease-out infinite alternate;
}

@keyframes kenburns {
  0%   { transform: scale(1) translateX(0) translateY(0); }
  100% { transform: scale(1.08) translateX(-1.5%) translateY(-1%); }
}

.gallery__slide img:hover {
  filter: brightness(1.08) saturate(1.1);
}

/* Hover overlay with "click to enlarge" hint */
.gallery__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.gallery__slide:hover::after { opacity: 1; }

.gallery__slide-caption {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(3, 6, 8,0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--tomato-bright);
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 176, 80,0.5);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.gallery__slide.is-active .gallery__slide-caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery__counter {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 4;
  padding: 6px 12px;
  background: rgba(3, 6, 8,0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  backdrop-filter: blur(6px);
  text-shadow: 0 0 6px var(--tomato);
}
.gallery__counter b { color: var(--tomato-bright); }

.gallery__state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  color: var(--text-dim);
  font-style: italic;
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 176, 80,0.25), transparent 60%),
    rgba(3, 6, 8,0.7);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: var(--cursor-link);
  z-index: 3;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(6px);
  font-size: 0;
}

.gallery__nav::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1px;
  filter: drop-shadow(0 0 4px var(--tomato));
}

.gallery__nav--prev::before { transform: rotate(-135deg) translate(-2px, 2px); }
.gallery__nav--next::before { transform: rotate(45deg)   translate(-2px, 2px); }

.gallery__nav:hover {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 176, 80,0.45), transparent 60%),
    rgba(255, 176, 80,0.18);
  border-color: var(--tomato);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 22px rgba(255, 176, 80,0.35);
}

.gallery__nav--prev { left: 18px; }
.gallery__nav--next { right: 18px; }

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.gallery__dot {
  width: 32px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0,0.5);
  cursor: var(--cursor-link);
  padding: 0;
  transition: background 0.25s, border-color 0.25s, width 0.35s ease, box-shadow 0.25s;
}

.gallery__dot:hover {
  border-color: var(--tomato);
  background: rgba(255, 176, 80,0.2);
}

.gallery__dot.is-active {
  background: linear-gradient(90deg, var(--tomato), var(--crimson-soft));
  border-color: var(--tomato);
  width: 60px;
  box-shadow: 0 0 14px rgba(255, 176, 80,0.6);
}

/* =============================================================
   ADMIN BUTTON + MODAL
   ============================================================= */

.btn-admin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 200, 80, 0.08);
  color: #f2e9dd;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: var(--cursor-link);
  transition: all 0.2s;
}

.btn-admin:hover {
  background: rgba(255, 200, 80, 0.18);
  border-color: #f2e9dd;
  color: #f2e9dd;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 200, 80, 0.25);
}

.btn-admin > span:first-child {
  font-size: 16px;
  animation: gear-spin 12s linear infinite;
}

@keyframes gear-spin {
  to { transform: rotate(360deg); }
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(1, 3, 4,0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  animation: dl-modal-in 0.25s ease both;
}

.admin-modal__card {
  position: relative;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(7, 14, 20,0.97), rgba(3, 6, 8,0.99));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0,0.7),
    0 0 0 1px rgba(255, 200, 80,0.08),
    0 0 60px rgba(255, 200, 80,0.18);
  animation: dl-modal-pop 0.35s cubic-bezier(0.2,0.8,0.2,1) both;
  overflow: hidden;
}

.admin-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-family: "Alegreya SC", serif;
  line-height: 1;
  color: var(--text-dim);
  background: rgba(0, 0, 0,0.5);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: var(--cursor-link);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
  z-index: 2;
}

.admin-modal__close:hover {
  color: #fff;
  background: rgba(255, 176, 80,0.3);
  border-color: var(--tomato);
  transform: scale(1.08) rotate(90deg);
}

.admin-modal__head {
  text-align: center;
  padding: 30px 30px 20px;
  border-bottom: 1px dashed var(--line-soft);
}

.admin-modal__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f2e9dd;
  margin-bottom: 8px;
}

.admin-modal__title {
  margin: 0;
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff, #f2e9dd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-modal__body {
  padding: 22px 28px;
  overflow-y: auto;
  flex: 1;
}

.admin-section {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 18px 18px 14px;
  margin: 0 0 18px;
  background: rgba(0, 0, 0,0.3);
}

.admin-section__title {
  padding: 0 8px;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tomato-bright);
}

.admin-subhead {
  margin: 18px 0 10px;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.admin-field__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.admin-field input,
.admin-field textarea,
.admin-grid input {
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
  width: 100%;
  resize: vertical;
}

.admin-field textarea { min-height: 64px; line-height: 1.45; }

.admin-field--checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0,0.4);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: var(--cursor-link);
  transition: border-color 0.2s, background 0.2s;
}
.admin-field--checkbox:hover { border-color: var(--tomato); background: rgba(255, 176, 80,0.06); }
.admin-field--checkbox input[type="checkbox"] {
  width: 18px !important; height: 18px; flex-shrink: 0;
  accent-color: var(--tomato);
  cursor: var(--cursor-link);
  margin: 0;
}
.admin-field--checkbox span {
  font-family: var(--font-serif); font-size: 13.5px;
  color: var(--text); letter-spacing: 0.04em;
}

.admin-field input:focus,
.admin-field textarea:focus,
.admin-grid input:focus {
  border-color: var(--tomato);
  box-shadow: 0 0 0 3px rgba(255, 176, 80,0.16);
}

.admin-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.admin-grid__row {
  display: contents;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  margin-top: 14px;
}

.admin-msg {
  margin: 12px 0 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--danger);
}
.admin-msg.is-good { color: var(--good); }

@media (max-width: 560px) {
  .admin-modal { padding: 14px; }
  .admin-modal__head { padding: 24px 20px 16px; }
  .admin-modal__body { padding: 18px 18px; }
  .admin-grid { grid-template-columns: 1fr; }
  .btn-admin__text { display: none; }
  .btn-admin { padding: 8px 10px; }
}

/* =============================================================
   DOWNLOAD MODAL
   ============================================================= */

.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(1, 3, 4,0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dl-modal-in 0.25s ease both;
}

@keyframes dl-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dl-modal__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, rgba(7, 14, 20,0.96), rgba(3, 6, 8,0.98));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 36px 30px 30px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0,0.7),
    0 0 0 1px rgba(255, 176, 80,0.08),
    0 0 60px rgba(255, 176, 80,0.18);
  animation: dl-modal-pop 0.35s cubic-bezier(0.2,0.8,0.2,1) both;
}

@keyframes dl-modal-pop {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.dl-modal__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 176, 80,0.18), transparent 60%);
  pointer-events: none;
}

.dl-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-family: "Alegreya SC", serif;
  line-height: 1;
  color: var(--text-dim);
  background: rgba(0, 0, 0,0.5);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: var(--cursor-link);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
  z-index: 1;
}

.dl-modal__close:hover {
  color: #fff;
  background: rgba(255, 176, 80,0.3);
  border-color: var(--tomato);
  transform: scale(1.08) rotate(90deg);
}

.dl-modal__head {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.dl-modal__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tomato-soft);
  margin-bottom: 10px;
}

.dl-modal__title {
  margin: 0;
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #fff, var(--tomato));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dl-modal__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.dl-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0,0.55);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}

.dl-option::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--dl-accent, var(--tomato));
  opacity: 0;
  transition: opacity 0.25s;
}

.dl-option:hover {
  transform: translateY(-2px);
  border-color: var(--dl-accent, var(--tomato));
  background: var(--dl-bg-hover, rgba(255, 176, 80,0.08));
  box-shadow: 0 12px 28px var(--dl-shadow, rgba(255, 176, 80,0.25));
}

.dl-option:hover::before { opacity: 1; }

.dl-option__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--dl-icon-bg, rgba(255, 176, 80,0.12));
  color: var(--dl-accent, var(--tomato-bright));
  border: 1px solid var(--line-soft);
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.dl-option:hover .dl-option__icon {
  background: var(--dl-accent, var(--tomato));
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
}

.dl-option__body {
  flex: 1;
  min-width: 0;
}

.dl-option__name {
  display: block;
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 2px;
}

.dl-option__desc {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
}

.dl-option__arrow {
  font-family: "Alegreya SC", serif;
  font-size: 22px;
  color: var(--dl-accent, var(--tomato));
  transition: transform 0.25s;
  flex-shrink: 0;
}

.dl-option:hover .dl-option__arrow {
  transform: translateX(6px);
}

/* Marca: Mediafire (azul) */
.dl-option--mediafire {
  --dl-accent: #006eff;
  --dl-bg-hover: rgba(0, 110, 255, 0.1);
  --dl-icon-bg: rgba(0, 110, 255, 0.15);
  --dl-shadow: rgba(0, 110, 255, 0.32);
}

/* Marca: Mega (rojo) */
.dl-option--mega {
  --dl-accent: #d99643;
  --dl-bg-hover: rgba(217, 150, 67, 0.1);
  --dl-icon-bg: rgba(217, 150, 67, 0.15);
  --dl-shadow: rgba(217, 150, 67, 0.35);
}

@media (max-width: 480px) {
  .dl-modal__card { padding: 30px 20px 24px; }
  .dl-modal__title { font-size: 20px; }
  .dl-option { padding: 14px; gap: 12px; }
  .dl-option__icon { width: 44px; height: 44px; }
  .dl-option__name { font-size: 16px; }
}

/* =============================================================
   LIGHTBOX
   ============================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(1, 3, 4,0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  animation: lightbox-in 0.25s ease both;
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0,0.7),
    0 0 0 1px rgba(255, 176, 80,0.3),
    0 0 60px rgba(255, 176, 80,0.18);
  animation: lightbox-zoom 0.35s cubic-bezier(0.2,0.8,0.2,1) both;
}

@keyframes lightbox-zoom {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.lightbox__caption {
  font-family: "Alegreya SC", serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(3, 6, 8,0.65);
  border: 1px solid var(--line);
  color: #fff;
  cursor: var(--cursor-link);
  font-family: "Alegreya SC", serif;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 176, 80,0.3);
  border-color: var(--tomato);
}

.lightbox__close {
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close:hover { transform: scale(1.08) rotate(90deg); }

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }

.lightbox__nav--prev { left: 22px; }
.lightbox__nav--next { right: 22px; }

@media (max-width: 700px) {
  .gallery__nav { width: 38px; height: 38px; font-size: 28px; }
  .gallery__nav--prev { left: 8px; }
  .gallery__nav--next { right: 8px; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 32px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close { top: 12px; right: 12px; }
}

/* =============================================================
   FOOTER
   ============================================================= */

.footer {
  padding: 56px 24px 36px;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 176, 80,0.12), transparent 65%),
    linear-gradient(180deg, transparent, rgba(3, 6, 8,0.95));
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 176, 80,0) 10%,
    rgba(255, 176, 80,0.9) 50%,
    rgba(255, 176, 80,0) 90%,
    transparent 100%);
  filter: drop-shadow(0 0 8px var(--tomato));
}

/* Note: ::after replaced by the .footer__rune-row */

.footer__rune-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  max-width: 720px;
  margin: 0 auto var(--sp-7);
  padding: 0 var(--sp-4);
  position: relative;
  z-index: 2;
}

.footer__rune {
  color: var(--tomato);
  font-size: 20px;
  text-shadow: 0 0 14px var(--tomato);
  filter: drop-shadow(0 0 6px var(--tomato));
  animation: corner-twinkle 3s ease-in-out infinite alternate;
  flex-shrink: 0;
}

.footer__rune-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  filter: drop-shadow(0 0 4px var(--tomato));
}

.footer__rune-cluster {
  font-family: var(--font-tech);
  letter-spacing: 0.5em;
  font-size: 16px;
  color: var(--tomato-soft);
  text-shadow: 0 0 12px var(--tomato);
  flex-shrink: 0;
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

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

.footer__logo {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 12px rgba(255, 71, 87,0.55));
  animation: logo-pulse 3.6s ease-in-out infinite;
}

.footer__brand-title {
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #f8f4f0 0%, var(--tomato) 60%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 176, 80,0.4);
}

.footer__brand-sub {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

.footer__nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__nav a {
  position: relative;
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.25s, text-shadow 0.25s;
}

.footer__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.25s, transform 0.25s;
}

.footer__nav a:hover {
  color: var(--tomato-bright);
  text-shadow: 0 0 12px rgba(255, 176, 80,0.6);
}

.footer__nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.footer__copy {
  text-align: right;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.footer__copy .dot { margin: 0 6px; opacity: 0.6; }

/* =============================================================
   MEDIA QUERIES
   ============================================================= */

@media (max-width: 1300px) {
  .nav-link { padding: 10px 14px; font-size: 14px; letter-spacing: 0.14em; }
}

@media (max-width: 1100px) {
  .topbar__nav { display: none; }
}

@media (max-width: 900px) {
  .auth-view { grid-template-columns: 1fr; }
  .topbar { padding: 14px 18px; }
  .brand__title { font-size: 18px; }
  .main { margin-top: 24px; padding: 0 16px 60px; }
  .stats-grid { grid-template-columns: 1fr; }
  .section-head { flex-wrap: wrap; gap: 6px; }

  .hero {
    grid-template-columns: 1fr;
    padding: 50px 24px;
    text-align: left;
  }
  .hero__hero-art { display: none; }

  .download-card {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }
  .download-card__art { display: none; }

  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__brand { justify-content: center; }
  .footer__copy { text-align: center; }
}

@media (max-width: 560px) {
  .brand__sub { display: none; }
  .user-area__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .auth-card, .ranking-view { padding: 20px; }
  .auth-title { font-size: 22px; }
  .stat-card { padding: 20px; }
  .stat-card__icon { width: 84px; height: 84px; font-size: 24px; }
  .stat-card__value { font-size: 30px; }
  .welcome-title { font-size: 20px; }

  .hero { padding: 40px 20px; }
  .hero__title-primary { letter-spacing: 0.02em; }
  .hero__title-secondary { letter-spacing: 0.22em; }
  .hero__tagline { font-size: 16px; }

  .classes-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .class-card { padding: 16px 14px; }
  .class-card__art { width: 110px; height: 110px; }
  .class-card__name { font-size: 14px; }

  .download-card__title { font-size: 24px; }
  .download-card__desc  { font-size: 14px; }

  .topbar__actions .btn--sm { padding: 8px 12px; font-size: 11px; }
}

/* =============================================================
   MOBILE PERFORMANCE — efectos livianos
   En móvil desactivamos lo más caro: blurs en tiempo real,
   filter-drop-shadow animados, repeating-gradients full-screen y
   gran parte de los hover/transitions. La estética se mantiene
   con gradientes estáticos y micro-animaciones de transform/opacity.
   ============================================================= */
@media (max-width: 900px) {
  /* 1) Topbar sin backdrop-filter (muy caro al hacer scroll) */
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(3, 6, 8,0.97), rgba(3, 6, 8,0.92));
  }

  /* 2) Capas decorativas de pantalla completa: simplificar.
     Quitamos el repeating-linear-gradient (scanlines) y el filter del bg
     porque obligan a repaint constante cuando el viewport cambia. */
  .bg-layer {
    filter: none;
  }
  .bg-vignette {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(2, 4, 6,0.7) 100%);
  }

  /* 3) Hero: quitar repeating-gradient diagonal y aura del background */
  .hero::before { display: none; }
  .hero__bg { animation: none; }

  /* 3b) Auth card: el ::after tiene un conic-gradient rotatorio (rotate-border)
     que en móvil obliga a repintar todo el borde de la card en cada frame
     — eso era lo que se "agrandaba y achicaba" al hacer scroll.
     El ::before tiene un pulse de opacidad (glow-shift) que también suma. */
  .auth-card::before {
    animation: none;
    opacity: 0.9;
  }
  .auth-card::after {
    animation: none;
    opacity: 0.45;
  }

  /* 4) Killer frame: sustituir la animación de filter (3 drop-shadows)
     por una de transform+opacity, mucho más barata para la GPU. */
  .killer-frame__name,
  .killer-frame__kills {
    filter:
      drop-shadow(0 0 6px rgba(255, 176, 80, 0.85))
      drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
    animation: killerPulseLite 2.4s ease-in-out infinite;
  }
  .killer-frame__kills { animation-delay: 0.4s; }

  /* 5) VIP badge: la animación animaba filter en cada frame.
     La reemplazamos por una versión solo con transform. */
  .benefit-card--vip .benefit-card__badge {
    animation: badge-float 4.5s ease-in-out infinite;
    filter: drop-shadow(0 10px 24px rgba(241, 196, 84,0.45));
  }

  /* 6) Quitar hovers caros / transiciones que no aportan en táctil */
  .class-card:hover,
  .event-card:hover,
  .benefit-card:hover,
  .stat-card:hover,
  .chip:hover,
  .dl-option:hover {
    transform: none;
    box-shadow: none;
  }

  /* 7) Modales: reducir blur (menos costoso) */
  .dl-modal,
  .lightbox,
  .admin-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@keyframes killerPulseLite {
  0%, 100% { transform: translate(-50%, -50%); opacity: 0.92; }
  50%      { transform: translate(-50%, -50%); opacity: 1; }
}

@media (max-width: 700px) {
  /* 8) Embers: en pantallas chicas no aportan y suman GPU.
     Si querés 4-6 partículas livianas, sacá este display:none. */
  .embers { display: none; }

  /* 9) Sombras gigantes: reducir (los box-shadow grandes en cards
     causan repintados notables al hacer scroll). */
  .hero,
  .auth-card,
  .download-card,
  .benefit-card,
  .killer-frame {
    box-shadow: 0 10px 24px rgba(0, 0, 0,0.5);
  }
  .killer-frame { filter: none; }

  /* 10) Animaciones de entrada más cortas */
  .hero,
  .classes-view,
  .ranking-view,
  .events-view,
  .benefits-view,
  .gallery-view,
  .download-view {
    animation-duration: 0.35s;
  }
}

/* Si el usuario prefiere menos movimiento, todo queda quieto. */
@media (prefers-reduced-motion: reduce) {
  .embers,
  .hero__bg,
  .hero__art,
  .hero__art-glow,
  .benefit-card__badge,
  .topbar::after {
    animation: none !important;
  }
}

/* =============================================================
   LATEST MARKET ITEMS widget
   ============================================================= */
.latest-market { margin-bottom: 50px; animation: fade-up 0.55s cubic-bezier(0.2,0.8,0.2,1) both; }

.latest-market__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.lm-card {
  position: relative;
  padding: 16px 14px 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 176, 80,0.14), transparent 65%),
    linear-gradient(180deg, rgba(8, 13, 18,0.95), rgba(3, 6, 8,0.98));
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0,0.55);
  text-align: center;
  transition: 0.3s;
  text-decoration: none;
  color: var(--text);
  display: block;
}

.lm-card:hover {
  transform: translateY(-4px);
  border-color: var(--tomato);
  box-shadow: 0 20px 40px rgba(0, 0, 0,0.7), 0 0 22px rgba(255, 176, 80,0.3);
}

.lm-card__icon-wrap {
  width: 78px; height: 78px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 176, 80,0.18), transparent 65%),
    rgba(0, 0, 0,0.55);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0,0.7);
}

.lm-card__icon {
  max-width: 60px; max-height: 60px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0,0.85));
}

.lm-card__name {
  font-family: "Alegreya SC", serif; font-weight: 700;
  font-size: 12.5px; color: #fff;
  letter-spacing: 0.04em; line-height: 1.25;
  min-height: 32px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lm-card__price {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--tomato-soft); border-radius: 999px;
  color: #f2e9dd; font-family: "Barlow Condensed", sans-serif;
  font-weight: 800; font-size: 11.5px; letter-spacing: 0.08em;
  text-shadow: 0 0 6px var(--tomato);
}

.lm-card__seller {
  margin-top: 8px;
  font-family: "Barlow Condensed", sans-serif; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =============================================================
   HERO SLIDER (rotating banners below the hero)
   ============================================================= */
.hslider {
  position: relative;
  margin: 40px 0;
  border-radius: 18px;
  overflow: hidden;
  background: #080a0c;
  border: 1px solid var(--line);
  box-shadow:
    0 28px 60px rgba(0, 0, 0,0.72),
    0 0 36px rgba(255, 176, 80,0.18),
    inset 0 0 0 1px rgba(242, 233, 221,0.035);
  isolation: isolate;
}

.hslider::before,
.hslider::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  filter: drop-shadow(0 0 6px var(--tomato));
  z-index: 5; pointer-events: none;
}
.hslider::before { top: 0; }
.hslider::after  { bottom: 0; }

.hslider__track {
  display: flex;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hslider__slide {
  flex: 0 0 100%;
  min-height: clamp(340px, 25vw, 390px);
  padding: 56px 64px 66px;
  background: linear-gradient(135deg, #13191e, #080a0c);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hslider__slide::before {
  content: "";
  position: absolute;
  inset: -2%;
  background-image:
    linear-gradient(90deg,
      rgba(8, 10, 12,0.98) 0%,
      rgba(9, 13, 17,0.90) 34%,
      rgba(8, 12, 15,0.58) 54%,
      rgba(8, 10, 12,0.18) 78%,
      rgba(8, 10, 12,0.12) 100%),
    linear-gradient(180deg, rgba(8, 10, 12,0.08), rgba(8, 10, 12,0.54)),
    var(--slide-image);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, var(--slide-focus, center);
  background-repeat: no-repeat;
  opacity: 0.96;
  transform: scale(1.025) translate3d(0,0,0);
  filter: saturate(1.08) contrast(1.04);
  transition: transform 7.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  pointer-events: none;
  z-index: -2;
}

.hslider__slide.is-active::before {
  transform: scale(1.075) translate3d(-0.8%, -0.3%, 0);
}

.hslider__slide::after {
  content: "";
  position: absolute;
  inset: -35% -12%;
  background:
    radial-gradient(circle at 18% 26%, color-mix(in srgb, var(--slide-accent, var(--tomato)) 82%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 64%, rgba(242, 233, 221,0.72) 0 1px, transparent 2.2px),
    radial-gradient(circle at 72% 35%, color-mix(in srgb, var(--slide-accent, var(--tomato)) 72%, transparent) 0 1.4px, transparent 2.5px),
    radial-gradient(ellipse at 78% 50%, color-mix(in srgb, var(--slide-accent, var(--tomato)) 24%, transparent), transparent 54%);
  background-size: 150px 130px, 210px 180px, 260px 210px, 100% 100%;
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 5px var(--slide-accent, var(--tomato)));
  pointer-events: none;
  z-index: -1;
  animation: slide-drakon-drift 10s linear infinite;
}

@keyframes slide-drakon-drift {
  0%   { transform: translate3d(0, 4%, 0); }
  50%  { transform: translate3d(-2%, -1%, 0); }
  100% { transform: translate3d(-4%, -6%, 0); }
}

.hslider__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  transform: translateX(-20px);
  opacity: 0;
  transition: transform 0.8s ease 0.2s, opacity 0.8s ease 0.2s;
}

.hslider__slide.is-active .hslider__content {
  transform: translateX(0);
  opacity: 1;
}

.hslider__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--slide-accent, var(--tomato));
  border-radius: 999px;
  color: var(--slide-accent, var(--tomato-bright));
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 0 8px currentColor;
  box-shadow: inset 0 0 18px rgba(255, 176, 80,0.08), 0 8px 20px rgba(0, 0, 0,0.22);
  backdrop-filter: blur(8px);
}

.hslider__title {
  margin: 0 0 14px;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff 0%, var(--slide-accent, var(--tomato)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 176, 80,0.35);
  line-height: 1.05;
}

.hslider__desc {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  max-width: 520px;
  text-shadow: 0 2px 12px rgba(0, 0, 0,0.95);
}

.hslider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 8,0.65);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: var(--cursor-link);
  z-index: 4;
  backdrop-filter: blur(6px);
  transition: 0.25s;
}
.hslider__nav::before {
  content: "";
  width: 12px; height: 12px;
  border-top: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  border-radius: 1px;
}
.hslider__nav--prev::before { transform: rotate(-135deg) translate(-2px, 2px); }
.hslider__nav--next::before { transform: rotate(45deg)   translate(-2px, 2px); }
.hslider__nav--prev { left: 18px; }
.hslider__nav--next { right: 18px; }
.hslider__nav:hover {
  background: rgba(255, 176, 80,0.2);
  border-color: var(--tomato);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 22px rgba(255, 176, 80,0.35);
}

.hslider__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.hslider__dot {
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255,0.2);
  border: 0;
  cursor: var(--cursor-link);
  padding: 0;
  transition: width 0.35s ease, background 0.25s;
}
.hslider__dot:hover { background: var(--tomato-soft); }
.hslider__dot.is-active {
  width: 60px;
  background: linear-gradient(90deg, var(--tomato), var(--crimson-soft));
  box-shadow: 0 0 12px rgba(255, 71, 87,0.55);
}

@media (max-width: 700px) {
  .hslider__slide { padding: 38px 24px 64px; min-height: 370px; align-items: flex-end; }
  .hslider__slide::before {
    background-image:
      linear-gradient(90deg, rgba(8, 10, 12,0.94) 0%, rgba(8, 13, 16,0.83) 58%, rgba(8, 10, 12,0.42) 100%),
      linear-gradient(180deg, rgba(8, 10, 12,0.16), rgba(8, 10, 12,0.78)),
      var(--slide-image);
    background-position: center, center, var(--slide-focus-mobile, 74% center);
    opacity: 0.92;
  }
  .hslider__content { max-width: calc(100% - 8px); }
  .hslider__title { font-size: 32px; }
  .hslider__desc { font-size: 15px; }
  .hslider__nav { top: auto; bottom: 12px; width: 36px; height: 36px; transform: none; }
  .hslider__nav--prev { left: 12px; }
  .hslider__nav--next { right: 12px; }
  .hslider__nav:hover { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hslider__slide::before,
  .hslider__slide::after {
    animation: none;
    transition: none;
  }
  .hslider__slide.is-active::before { transform: scale(1.025); }
}

/* =============================================================
   PROMO BOXES (3 clickable banners on home)
   ============================================================= */
.promo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.promo-box {
  --p-accent: var(--tomato);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background:
    radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--p-accent) 18%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(8, 15, 20,0.95), rgba(3, 6, 8,0.98));
  border: 1px solid var(--line);
  border-left: 3px solid var(--p-accent);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0, 0, 0,0.5);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.promo-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 110% 50%, color-mix(in srgb, var(--p-accent) 28%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.promo-box:hover {
  transform: translateY(-5px);
  border-color: var(--p-accent);
  box-shadow:
    0 24px 50px rgba(0, 0, 0,0.65),
    0 0 28px color-mix(in srgb, var(--p-accent) 35%, transparent);
}
.promo-box:hover::before { opacity: 1; }

.promo-box__icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid color-mix(in srgb, var(--p-accent) 40%, transparent);
  border-radius: 14px;
  color: var(--p-accent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--p-accent) 50%, transparent));
  transition: transform 0.35s, box-shadow 0.35s;
}

.promo-box:hover .promo-box__icon {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 0 22px color-mix(in srgb, var(--p-accent) 55%, transparent);
}

.promo-box__body { flex: 1; min-width: 0; }
.promo-box__body h4 {
  margin: 0 0 4px;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 12px color-mix(in srgb, var(--p-accent) 45%, transparent);
}
.promo-box__body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

.promo-box__arrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  color: var(--p-accent);
  transition: transform 0.3s;
  text-shadow: 0 0 12px currentColor;
}
.promo-box:hover .promo-box__arrow { transform: translateX(6px); }

@media (max-width: 900px) {
  .promo-row { grid-template-columns: 1fr; }
}

/* =============================================================
   SIDE RUNE MENU (floating left quick-access)
   ============================================================= */
.rune-menu {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 12px;
  width: 64px;
  background: rgba(7, 11, 15, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow:
    0 22px 50px rgba(0, 0, 0,0.7),
    0 0 22px rgba(255, 176, 80,0.15),
    inset 0 0 18px rgba(255, 176, 80,0.06);
  animation: rune-menu-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}

.rune-menu::before {
  content: "";
  position: absolute;
  top: 16px; bottom: 16px;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 176, 80,0.3), transparent);
  pointer-events: none;
  z-index: -1;
}

@keyframes rune-menu-in {
  from { opacity: 0; transform: translate(-30px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

.rune-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--text-dim);
  background: linear-gradient(135deg, rgba(16, 29, 40,0.85), rgba(3, 6, 8,0.95));
  border: 1px solid rgba(255, 255, 255,0.05);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              border-color 0.3s, color 0.3s, box-shadow 0.3s;
  box-shadow: 0 6px 14px rgba(0, 0, 0,0.55);
}

.rune-btn:hover {
  color: #fff;
  border-color: var(--tomato);
  background: radial-gradient(circle at 30% 30%, rgba(255, 176, 80,0.35), rgba(7, 11, 15,0.95));
  box-shadow:
    0 8px 22px rgba(0, 0, 0,0.65),
    0 0 22px rgba(255, 71, 87,0.55),
    inset 0 0 12px rgba(255, 176, 80,0.18);
  transform: scale(1.15) translateX(2px);
}

.rune-btn__icon { display: flex; align-items: center; justify-content: center; }

/* Castle Siege rune cycles rainbow */
.rune-btn--cs {
  border-color: rgba(255, 176, 80,0.4);
  animation: cs-rune-pulse 2.4s ease-in-out infinite;
}
.rune-btn--cs:hover { animation: none; }

@keyframes cs-rune-pulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0,0.55), 0 0 10px rgba(255, 176, 80,0.4); }
  50%      { box-shadow: 0 6px 14px rgba(0, 0, 0,0.55), 0 0 24px rgba(255, 176, 80,0.85); }
}

/* Tooltip label on hover */
.rune-btn::after {
  content: attr(data-rune-tip);
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  padding: 7px 14px;
  background: linear-gradient(90deg, rgba(8, 15, 20,0.95), rgba(3, 7, 10,0.95));
  border: 1px solid var(--tomato);
  border-radius: 6px;
  color: var(--tomato-bright);
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0,0.85), 0 0 14px rgba(255, 176, 80,0.3);
  text-shadow: 0 0 8px var(--tomato);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rune-btn::before {
  content: "";
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--tomato);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.rune-btn:hover::after,
.rune-btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.rune-btn:hover::before { opacity: 1; }

@media (max-width: 1100px) {
  .rune-menu { display: none; }
}

/* ===================== CHAOS MACHINE FEED ===================== */
/* Diseño premium — cards con gradient oscuro tinte rojo, borde con glow,
   icono del item destacado con halo, tipografía Alegreya SC para títulos.
   Estética del resto del sitio (paleta tomato) en vez de Discord-gris. */

.chaos-view {
  margin: 60px auto 30px;
  max-width: 1280px;
  padding: 0 28px;
  position: relative;
  z-index: 5;
}

.chaos-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}
@media (max-width: 1024px) { .chaos-feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .chaos-feed { grid-template-columns: 1fr; } }

/* ===== Card premium ===== */
.chaos-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 176, 80, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, #14171a 0%, #12161a 60%, #0d1012 100%);
  border: 1px solid rgba(255, 176, 80, 0.22);
  border-radius: 14px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.chaos-card::before {
  /* Línea superior decorativa con gradient */
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--tomato) 50%, transparent 100%);
  opacity: 0.55;
  z-index: 1;
}
.chaos-card::after {
  /* Glow detrás del card que se intensifica en hover */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(255, 176, 80, 0);
  transition: box-shadow 0.3s ease;
}
.chaos-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 176, 80, 0.5);
}
.chaos-card.is-success:hover::after { box-shadow: 0 0 38px 4px rgba(74, 208, 138, 0.25); }
.chaos-card.is-failure:hover::after { box-shadow: 0 0 38px 4px rgba(255, 176, 80, 0.30); }

.chaos-card.is-success { border-top-color: rgba(74, 208, 138, 0.6); }
.chaos-card.is-success::before { background: linear-gradient(90deg, transparent, #4ad08a, transparent); }

/* ===== Cabecera del card ===== */
.chaos-card__title {
  font-family: "Alegreya SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 176, 80, 0.35);
}
.chaos-card.is-success .chaos-card__title { text-shadow: 0 0 14px rgba(74, 208, 138, 0.4); }

.chaos-card__desc {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.45;
}
.chaos-card__desc b {
  color: var(--tomato-bright);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ===== Imagen del item con halo ===== */
.chaos-card__image {
  margin: 4px auto 6px;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(circle at center, rgba(255, 176, 80, 0.18) 0%, transparent 65%),
    rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px;
}
.chaos-card.is-success .chaos-card__image {
  background:
    radial-gradient(circle at center, rgba(74, 208, 138, 0.18) 0%, transparent 65%),
    rgba(0, 0, 0, 0.4);
  border-color: rgba(74, 208, 138, 0.25);
}
.chaos-card__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 8px rgba(255, 176, 80, 0.35));
}
.chaos-card.is-success .chaos-card__image img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 10px rgba(74, 208, 138, 0.45));
}
.chaos-card__image.is-empty {
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-faint, #87898c);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ===== Fields ===== */
.chaos-card__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.chaos-card__field { min-width: 0; }
.chaos-card__field--full { grid-column: 1 / -1; }

.chaos-card__field-label {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-faint, #8a817d);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.chaos-card__field-value {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.35;
  font-weight: 500;
}

/* Probabilidad con badge según color */
.chaos-card__rate {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.chaos-card__rate.is-high { color: #4ad08a; background: rgba(74, 208, 138, 0.12); border: 1px solid rgba(74, 208, 138, 0.3); }
.chaos-card__rate.is-mid  { color: #f0b232; background: rgba(240, 178, 50, 0.12); border: 1px solid rgba(240, 178, 50, 0.3); }
.chaos-card__rate.is-low  { color: #ffd4a0; background: rgba(255, 176, 80, 0.12); border: 1px solid rgba(255, 176, 80, 0.3); }

.chaos-card__result {
  display: inline-block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chaos-card__result.is-success { color: #4ad08a; }
.chaos-card__result.is-failure { color: #ffd4a0; }

.chaos-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint, #87898c);
}

.chaos-feed__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  color: var(--text-dim);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ===================== Botón "Ver todas" ===================== */
.chaos-more {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.chaos-more__btn {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 28px;
  background:
    linear-gradient(180deg, rgba(255, 176, 80, 0.18) 0%, rgba(255, 176, 80, 0.05) 100%),
    #14171a;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--tomato-bright);
  font-family: "Alegreya SC", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: var(--cursor-link, pointer);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.chaos-more__btn::before {
  /* Brillo de barrido en hover */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -120%;
  width: 80%;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 114, 0.18), transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
}
.chaos-more__btn:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 176, 80, 0.18);
  color: #fff;
}
.chaos-more__btn:hover::before { left: 130%; }
.chaos-more__icon {
  font-size: 14px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}
.chaos-more__btn:hover .chaos-more__icon { transform: translateY(2px); }
.chaos-more__count {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--tomato);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}

/* ===================== Modal "Historial completo" ===================== */
.chaos-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.chaos-modal[hidden] { display: none; }
.chaos-modal__card {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 176, 80, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #12161a 0%, #0b0e10 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 1240px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.chaos-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.chaos-modal__head::after {
  content: "";
  position: absolute;
  left: 28px; right: 28px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tomato), transparent);
  opacity: 0.6;
}
.chaos-modal__head h3 {
  margin: 0;
  font-family: "Alegreya SC", serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 176, 80, 0.3);
}
.chaos-modal__subtitle {
  margin: 4px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint, #8a817d);
}
.chaos-modal__tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.chaos-modal__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #ffb050;
  color: #ffd4a0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: var(--cursor-link, pointer);
  transition: background 0.18s ease, color 0.18s ease;
}
.chaos-modal__clear:hover { background: rgba(255, 176, 80, 0.14); color: #fff; }
.chaos-modal__clear:disabled { opacity: 0.5; cursor: default; }
.chaos-modal__close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 30px;
  line-height: 1;
  padding: 0 8px;
  cursor: var(--cursor-link, pointer);
  transition: color 0.18s ease, transform 0.18s ease;
}
.chaos-modal__close:hover { color: #fff; transform: rotate(90deg); }
.chaos-modal__msg {
  margin: 0;
  padding: 0 28px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  min-height: 0;
}
.chaos-modal__msg.is-good { color: #4ad08a; padding: 10px 28px 0; }
.chaos-modal__msg.is-bad  { color: #ffd4a0; padding: 10px 28px 0; }
.chaos-modal__body {
  padding: 22px 28px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.chaos-modal__body .chaos-feed { margin-top: 0; }

/* Scrollbar custom */
.chaos-modal__body::-webkit-scrollbar { width: 10px; }
.chaos-modal__body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }
.chaos-modal__body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tomato), var(--crimson, #a02828));
  border-radius: 999px;
}

@media (max-width: 640px) {
  .chaos-modal { padding: 12px; }
  .chaos-modal__head { padding: 16px 18px; flex-direction: column; align-items: stretch; gap: 10px; }
  .chaos-modal__body { padding: 14px 16px 18px; }
  .chaos-modal__head h3 { font-size: 17px; }
  .chaos-more__btn { padding: 14px 18px; font-size: 13px; letter-spacing: 0.18em; gap: 10px; }
}


/* =============================================================
   HUD STRIP — 3 cards equally distributed, elegant glass
   ============================================================= */
.hud-strip {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 36px 0;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.hud-strip__divider { display: none; }
.hud-strip__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(8, 15, 20,0.7) 0%, rgba(3, 6, 8,0.6) 100%);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0,0.45);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  min-height: 64px;
}

.hud-strip__item:hover {
  transform: translateY(-2px);
  border-color: var(--tomato);
  box-shadow: 0 14px 32px rgba(0, 0, 0,0.55), 0 0 18px rgba(255, 176, 80,0.18);
}

.hud-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--line);
  color: var(--tomato-bright);
  filter: drop-shadow(0 0 6px rgba(255, 176, 80,0.4));
  flex-shrink: 0;
}
.hud-strip__icon svg { width: 22px; height: 22px; }
.hud-strip__icon--castle { color: var(--crimson-soft); }
.hud-strip__icon--time   {
  color: #f2e9dd;
  border-color: rgba(241, 196, 84,0.45);
  filter: drop-shadow(0 0 6px rgba(241, 196, 84,0.4));
}

.hud-strip__body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.hud-strip__label {
  font-family: "Barlow Condensed", "Alegreya SC", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
  font-weight: 600;
}

.hud-strip__value {
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 176, 80,0.4), 0 2px 4px #000;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-strip__value--castle {
  background: linear-gradient(180deg, #ffd6cf 0%, var(--tomato) 55%, #a8702c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 176, 80,0.45));
}

.hud-strip__value--time {
  color: #f2e9dd;
  font-family: "Barlow Condensed", "Barlow Condensed", sans-serif;
  text-shadow: 0 0 8px rgba(241, 196, 84,0.4), 0 2px 4px #000;
  letter-spacing: 0.16em;
}

.hud-strip__value--online  { color: #5eff96; text-shadow: 0 0 12px rgba(46, 204, 113,0.6); }
.hud-strip__value--offline { color: #ff5a3c; text-shadow: 0 0 12px rgba(255, 71, 87,0.55); }

@media (max-width: 900px) {
  .hud-strip { padding: 14px 18px 0; gap: 10px; grid-template-columns: 1fr; }
  .hud-strip__item { padding: 10px 14px; min-height: 56px; }
  .hud-strip__value { font-size: 17px; }
  .hud-strip__icon { width: 38px; height: 38px; }
}

/* =============================================================
   RANK TABS (filter bar above the podium)
   ============================================================= */
.rank-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 26px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(6, 11, 15,0.6), rgba(3, 6, 8,0.4));
  border-radius: 12px;
  border: 1px solid var(--line-soft);
}

.rank-tab {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid #0d1d2a;
  border-bottom: 2px solid var(--blood-deep);
  background: linear-gradient(180deg, #0d161e 0%, #03070a 100%);
  color: var(--text-dim);
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: var(--cursor-link);
  transform: skewX(-15deg);
  transition: all 0.3s ease;
  box-shadow: 0 5px 12px rgba(0, 0, 0,0.55);
  border-radius: 4px;
}

.rank-tab span { display: inline-block; transform: skewX(15deg); }

.rank-tab:hover {
  background: linear-gradient(180deg, #2d1c14 0%, #050c11 100%);
  color: #fff;
  border-color: var(--tomato);
  border-bottom-color: var(--tomato-bright);
  box-shadow: 0 5px 18px rgba(255, 176, 80,0.25);
}

.rank-tab.is-active {
  background: linear-gradient(180deg, rgba(255, 176, 80,0.22) 0%, rgba(3, 7, 10,0.95) 100%);
  color: #fff;
  border-color: var(--tomato);
  border-bottom: 2px solid var(--tomato-bright);
  box-shadow: 0 0 18px rgba(255, 176, 80,0.4), inset 0 0 8px rgba(255, 176, 80,0.12);
  text-shadow: 0 0 8px var(--tomato);
}

.rank-tab--killers {
  border-bottom-color: var(--blood);
}
.rank-tab--killers:hover,
.rank-tab--killers.is-active {
  border-color: #ffb050;
  border-bottom-color: #d6903a;
  background: linear-gradient(180deg, rgba(255, 176, 80,0.22) 0%, rgba(3, 7, 10,0.95) 100%);
  box-shadow: 0 0 18px rgba(255, 176, 80,0.5), inset 0 0 8px rgba(255, 176, 80,0.15);
  text-shadow: 0 0 8px #ffb050;
}

/* =============================================================
   PODIUM #1 (big character card above the table)
   ============================================================= */
.podium-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
}

.podium-info {
  text-align: center;
  color: var(--text-faint);
  font-family: "Alegreya SC", serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.podium {
  position: relative;
  width: 320px;
  max-width: 92vw;
  padding: 30px 22px 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 176, 80,0.18), transparent 60%),
    linear-gradient(180deg, rgba(16, 26, 35,0.95) 0%, rgba(3, 6, 8,0.98) 100%);
  border: 1px solid #3a261c;
  border-top: 2px solid var(--tomato);
  border-bottom: 4px solid #0d1d2a;
  border-radius: 12px;
  box-shadow:
    0 25px 50px rgba(0, 0, 0,0.9),
    0 0 30px rgba(255, 176, 80,0.18),
    inset 0 0 20px rgba(0, 0, 0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s;
  animation: podium-glow 4s ease-in-out infinite;
}

@keyframes podium-glow {
  0%, 100% { box-shadow: 0 25px 50px rgba(0, 0, 0,0.9), 0 0 24px rgba(255, 176, 80,0.18), inset 0 0 20px rgba(0, 0, 0,0.5); }
  50%      { box-shadow: 0 30px 60px rgba(0, 0, 0,0.9), 0 0 38px rgba(255, 176, 80,0.42), inset 0 0 22px rgba(0, 0, 0,0.5); }
}

.podium:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 30px 60px rgba(0, 0, 0,0.9), 0 0 40px rgba(255, 176, 80,0.45);
}

.podium__crown {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0d151c, #020305);
  border: 2px solid var(--tomato);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2e9dd;
  box-shadow: 0 0 22px rgba(255, 176, 80,0.6), 0 10px 18px rgba(0, 0, 0,0.85);
  z-index: 5;
  filter: drop-shadow(0 0 4px var(--tomato));
}

.podium__art-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.podium__art {
  width: auto;
  height: 240px;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 20px 16px rgba(0, 0, 0,0.9))
    drop-shadow(0 0 22px rgba(255, 71, 87,0.55));
  transition: transform 0.35s ease, filter 0.35s ease;
}

.podium:hover .podium__art {
  transform: translateY(-3px) scale(1.03);
  filter:
    drop-shadow(0 20px 18px rgba(0, 0, 0,0.95))
    drop-shadow(0 0 30px rgba(255, 176, 80,0.85));
}

.podium__pedestal {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(255, 71, 87,0.55) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(2px);
}

.podium__name {
  margin: 16px 0 4px;
  font-family: "Grenze Gotisch", "Alegreya SC", serif;
  font-size: 26px;
  font-weight: 900;
  color: #f2e9dd;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(255, 176, 80,0.7), 0 2px 4px #000;
  word-break: break-all;
}

.podium__class {
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tomato-bright);
  margin-bottom: 16px;
  font-weight: 700;
}

.podium__badge {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 30px;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid var(--tomato-soft);
  color: #f2e9dd;
  font-family: "Barlow Condensed", "Alegreya SC", serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--tomato);
  box-shadow:
    inset 0 0 12px rgba(255, 176, 80,0.18),
    0 5px 14px rgba(0, 0, 0,0.7);
}

/* Guardián theme: MU Drakon ruby-magenta podium */
.podium--killer,
.ranking-view.is-killers .podium {
  border-color: #4a2614;
  border-top-color: #ffb050;
  border-bottom-color: #0a1a26;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 176, 80,0.22), transparent 60%),
    linear-gradient(180deg, rgba(14, 26, 35,0.95) 0%, rgba(8, 10, 12,0.98) 100%);
  box-shadow:
    0 25px 50px rgba(0, 0, 0,0.9),
    0 0 30px rgba(255, 176, 80,0.28),
    inset 0 0 20px rgba(0, 0, 0,0.5);
  animation: podium-glow-killer 4s ease-in-out infinite;
}

@keyframes podium-glow-killer {
  0%, 100% { box-shadow: 0 25px 50px rgba(0, 0, 0,0.9), 0 0 28px rgba(255, 176, 80,0.25), inset 0 0 20px rgba(0, 0, 0,0.5); }
  50%      { box-shadow: 0 30px 60px rgba(0, 0, 0,0.9), 0 0 44px rgba(255, 71, 87,0.55), inset 0 0 22px rgba(0, 0, 0,0.5); }
}

.podium--killer .podium__crown,
.ranking-view.is-killers .podium__crown {
  border-color: #ffb050;
  color: #f2e9dd;
  box-shadow: 0 0 22px rgba(255, 176, 80,0.7), 0 10px 18px rgba(0, 0, 0,0.85);
}

.podium--killer .podium__art,
.ranking-view.is-killers .podium__art {
  filter:
    drop-shadow(0 20px 16px rgba(0, 0, 0,0.9))
    drop-shadow(0 0 24px rgba(255, 176, 80,0.7));
}

.podium--killer .podium__pedestal,
.ranking-view.is-killers .podium__pedestal {
  background: radial-gradient(ellipse, rgba(255, 71, 87,0.55) 0%, transparent 70%);
}

.podium--killer .podium__name,
.ranking-view.is-killers .podium__name {
  color: #d6903a;
  text-shadow: 0 0 18px rgba(255, 176, 80,0.85), 0 2px 4px #000;
}

.podium--killer .podium__class,
.ranking-view.is-killers .podium__class {
  color: #ffd4a0;
}

.podium--killer .podium__badge,
.ranking-view.is-killers .podium__badge {
  border-color: #d6903a;
  color: #fff;
  text-shadow: 0 0 10px #ffb050;
  box-shadow:
    inset 0 0 12px rgba(255, 176, 80,0.22),
    0 5px 14px rgba(0, 0, 0,0.7);
}

/* killer-view section: contains the killer podium centered */
.killer-view--podium {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.killer-view--podium .podium {
  align-self: center;
  margin-top: 10px;
}

/* Section head centered helper */
.section-head--center { text-align: center; }
.section-head--center h2 { margin-left: auto; margin-right: auto; }

/* Killer ranking row hover (red glow) */
.ranking-view.is-killers .data-table tbody tr:hover td { background: rgba(255, 176, 80,0.07); }
.ranking-view.is-killers .data-table tbody tr:hover .race-avatar {
  border-color: #d6903a;
  box-shadow: 0 4px 18px rgba(255, 71, 87,0.55);
}

/* =============================================================
   MOUSE TRAIL
   ============================================================= */
.mouse-trail-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.mouse-trail {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 10px #fff,
    0 0 22px var(--tomato),
    0 0 36px var(--crimson);
  animation: mt-fade 0.65s linear forwards;
}

@keyframes mt-fade {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(0.1) translateY(18px); opacity: 0; }
}

@media (max-width: 700px) {
  .mouse-trail-layer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mouse-trail-layer { display: none; }
  .podium, .podium--killer { animation: none; }
}

/* Podium empty state (no data) */
.podium__empty-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240px;
  color: var(--tomato);
  filter: drop-shadow(0 0 22px rgba(255, 71, 87,0.55));
  opacity: 0.55;
  animation: empty-pulse 3s ease-in-out infinite;
}
.podium.is-empty .podium__empty-icon { display: flex; }
.podium.is-empty .podium__art { display: none; }
.podium.is-empty .podium__pedestal { opacity: 0.35; }

.podium--killer .podium__empty-icon,
.ranking-view.is-killers .podium__empty-icon { color: #d6903a; }

@keyframes empty-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.03); }
}

/* Podium responsive */
@media (max-width: 560px) {
  .podium { width: 280px; padding: 26px 18px 18px; }
  .podium__art, .podium__empty-icon { height: 200px; }
  .podium__empty-icon svg { width: 96px; height: 96px; }
  .podium__name { font-size: 22px; }
  .rank-tab { padding: 7px 14px; font-size: 11px; letter-spacing: 0.08em; }
}

/* =============================================================
   MOBILE — comprehensive layout fixes
   ============================================================= */
@media (max-width: 700px) {
  /* MY-CHAR cards: condense vertical density */
  .my-chars-grid { grid-template-columns: 1fr; gap: 14px; }
  .my-char { padding: 16px 14px; }
  .my-char__head { gap: 11px; margin-bottom: 11px; }
  .my-char__avatar { width: 56px; height: 56px; border-radius: 12px; }
  .my-char__name { font-size: 17px; }
  .my-char__class { font-size: 11px; letter-spacing: 0.12em; }

  .my-char__metrics { gap: 6px; margin-bottom: 10px; }
  .metric { padding: 7px 4px; }
  .metric__value { font-size: 16px; }
  .metric__label { font-size: 9px; letter-spacing: 0.16em; }

  .my-char__map { padding: 8px 10px; margin-bottom: 9px; }
  .my-char__map-name { font-size: 12px; }
  .my-char__map-pos { font-size: 10px; }

  .my-char__stats { gap: 3px; flex-wrap: wrap; }
  .my-char__stat { padding: 5px 2px; min-width: 18%; }
  .my-char__stat-value { font-size: 12px; }
  .my-char__stat-label { font-size: 8.5px; letter-spacing: 0.16em; }

  .my-char__points { padding: 7px 10px; font-size: 10.5px; margin-top: 9px; }
  .my-char__actions { margin-top: 9px; gap: 5px; }
  .my-char__btn { padding: 7px 8px; font-size: 10px; letter-spacing: 0.08em; }

  /* RANKING table — more compact rows */
  .data-table { font-size: 13.5px; min-width: 0; }
  .data-table thead th { padding: 10px 8px; font-size: 10.5px; letter-spacing: 0.14em; }
  .data-table tbody td { padding: 8px 8px; }
  .data-table--with-avatar .avatar-cell { width: 50px; padding: 6px 0 6px 8px; }
  .race-avatar { width: 44px; height: 44px; }

  /* Hide less-important columns on small screens */
  .data-table thead th:nth-child(4), .data-table tbody td:nth-child(4) { display: none; } /* class */
  .data-table thead th:nth-child(5), .data-table tbody td:nth-child(5) { display: none; } /* level */
  .data-table thead th:nth-child(7), .data-table tbody td:nth-child(7) { display: none; } /* MR */

  /* RANKING tabs — wrap tighter */
  .rank-tabs { gap: 4px; padding: 4px; }
  .rank-tab { padding: 6px 12px; font-size: 11px; }

  /* CLASSES grid: less tall and 2-col stays */
  .classes-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .class-card { height: 380px; }
  .class-card__art-wrap { min-height: 240px; }

  /* SECTION HEADINGS: smaller h2 */
  .section-head h2 { font-size: 24px; letter-spacing: 0.06em; }
  .section-head__hint { font-size: 11.5px; letter-spacing: 0.14em; }

  /* HERO: tighter padding + smaller title */
  .hero__title-primary { font-size: clamp(60px, 18vw, 96px); }
  .hero__title-secondary { font-size: clamp(28px, 9vw, 44px); letter-spacing: 0.18em; }
  .hero__tagline { font-size: 15px; }
  .hero__chips { gap: 8px; }
  .chip { padding: 4px 10px; font-size: 11px; }

  /* PROMO boxes: compact */
  .promo-box { padding: 16px 18px; gap: 14px; }
  .promo-box__icon { width: 52px; height: 52px; }
  .promo-box__icon svg { width: 30px; height: 30px; }
  .promo-box__body h4 { font-size: 16px; }
  .promo-box__body p { font-size: 12px; }

  /* HUD strip: spacing handled at 900px breakpoint, just tweak font here */
  .hud-strip { padding: 12px 14px 0; }
  .hud-strip__value { font-size: 15px; }
  .hud-strip__label { font-size: 9.5px; }

  /* BENEFITS: ensure 1-col + tighter */
  .benefits-grid { grid-template-columns: 1fr; gap: 18px; }

  /* GALLERY: smaller chevrons */
  .gallery__nav { width: 40px; height: 40px; }
  .gallery__counter { top: 10px; right: 12px; padding: 4px 10px; font-size: 10.5px; }
  .gallery__slide-caption { left: 12px; bottom: 12px; padding: 5px 12px; font-size: 10.5px; }

  /* STATS LIVE: cards in 1 col on tiny */
  .stat-card__icon { width: 80px; height: 80px; }
  .stat-card { padding: 18px 14px; gap: 10px; }

  /* DOWNLOAD card: title size */
  .download-card { padding: 30px 22px; }
  .download-card__title { font-size: 28px; }
  .download-card__desc { font-size: 15px; }
  .download-card__art { height: 260px; }

  /* FOOTER: tighter */
  .footer { padding: 36px 18px 24px; }
  .footer__inner { padding: 0 16px; gap: 18px; }
  .footer__nav { gap: 14px; }
  .footer__nav a { font-size: 12px; letter-spacing: 0.14em; }

  /* MAIN: padding */
  .main { padding: 0 18px 60px; margin-top: 24px; }

  /* TOPBAR: compact */
  .topbar { padding: 12px 16px; }
  .brand__logo { width: 42px; height: 42px; }
  .brand__title { font-size: 20px; }
  .brand__sub { display: none; }

  /* LATEST MARKET: tighter cards */
  .latest-market__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .lm-card { padding: 12px 10px 14px; }
  .lm-card__icon-wrap { width: 66px; height: 66px; }
  .lm-card__icon { max-width: 50px; max-height: 50px; }
  .lm-card__name { font-size: 12px; min-height: 28px; }
}

@media (max-width: 480px) {
  /* Even smaller — keep status dot only column besides #, avatar, name, resets */
  .data-table thead th:nth-child(6), .data-table tbody td:nth-child(6) { display: none; } /* resets when too narrow */
  .race-avatar { width: 40px; height: 40px; border-radius: 10px; }
  .my-char__avatar { width: 50px; height: 50px; }
  .my-char__name { font-size: 16px; }

  /* Stack stats in 2 rows for tiny screens */
  .my-char__stat { flex: 0 0 calc(50% - 2px); min-width: 0; }

  /* Hero slider on tiny */
  .hslider__title { font-size: 26px; }
  .hslider__desc { font-size: 14px; }
  .hslider__slide { padding: 30px 22px 56px; min-height: 200px; }
}
/* ========================================================================== */
/* DRAKON MOTION SYSTEM                                                        */
/* Navegacion, actividad de red y cambios de vistas compartidos              */
/* ========================================================================== */

html.drakon-motion-pending {
  background: #030609;
}

html.drakon-motion-pending body {
  opacity: 0;
}

html.drakon-motion-ready body {
  opacity: 1;
  transition: opacity 0.34s ease;
}

html.drakon-motion-ready :is(.main, .mk-page, .ws-page, .pf-page, .cs-page, .svf-shell) {
  /* Libera transform y filter al terminar. Con fill-mode "both", cualquier
     modal fixed descendiente quedaba anclado al alto total del contenedor. */
  animation: drakon-page-arrive 0.58s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes drakon-page-arrive {
  from { opacity: 0; transform: translateY(12px); filter: saturate(0.76); }
  to   { opacity: 1; transform: translateY(0); filter: saturate(1); }
}

/* Chromium conserva el ultimo fotograma (incluido el velo) hasta que la
   siguiente pagina esta lista. En navegadores sin soporte se usa el fallback
   de .drakon-route-transition. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: drakon-document-out 0.34s cubic-bezier(0.65, 0, 0.35, 1) both;
}

::view-transition-new(root) {
  animation: drakon-document-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drakon-document-out {
  to { opacity: 0; filter: brightness(0.46) saturate(1.15); }
}

@keyframes drakon-document-in {
  from { opacity: 0; filter: brightness(0.55) saturate(0.72); }
  to   { opacity: 1; filter: brightness(1) saturate(1); }
}

.drakon-route-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 176, 80, 0.16), transparent 34%),
    rgba(1, 4, 7, 0.92);
  isolation: isolate;
  transition: opacity 0.26s ease, visibility 0s linear 0.42s;
}

html.drakon-motion-leaving {
  overflow: hidden;
}

html.drakon-motion-leaving .drakon-route-transition {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.drakon-route-transition__veil {
  position: absolute;
  inset: -15%;
  z-index: -3;
  background:
    linear-gradient(112deg, transparent 0 30%, rgba(255, 176, 80, 0.08) 47%, transparent 57%),
    linear-gradient(90deg, #020609 0%, #071119 46%, #020609 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  filter: drop-shadow(0 0 50px rgba(255, 176, 80, 0.45));
  transition: clip-path 0.48s cubic-bezier(0.77, 0, 0.18, 1);
}

html.drakon-motion-leaving .drakon-route-transition__veil {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.drakon-route-transition__mist {
  position: absolute;
  z-index: -2;
  width: 78vmax;
  height: 24vmax;
  border-radius: 50%;
  opacity: 0;
  filter: blur(36px);
  background: radial-gradient(ellipse, rgba(255, 176, 80, 0.22), transparent 66%);
}

.drakon-route-transition__mist--one { transform: rotate(-17deg) translateX(-38%); }
.drakon-route-transition__mist--two { transform: rotate(19deg) translateX(38%); }

html.drakon-motion-leaving .drakon-route-transition__mist {
  opacity: 1;
  animation: drakon-mist-drift 2.1s ease-in-out infinite alternate;
}

.drakon-route-transition__mist--two { animation-delay: -0.8s !important; }

@keyframes drakon-mist-drift {
  to { transform: rotate(0deg) translateX(0) scale(1.08); }
}

.drakon-route-transition__rift {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: -8%;
  width: 3px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, #ffd4a0 20%, #ffb050 50%, #7ec5ff 78%, transparent);
  box-shadow: 0 0 12px #ffb050, 0 0 34px rgba(126, 197, 255, 0.78), 0 0 80px rgba(255, 176, 80, 0.5);
  transform: rotate(9deg);
}

html.drakon-motion-leaving .drakon-route-transition__rift {
  animation: drakon-rift-cross 0.66s cubic-bezier(0.77, 0, 0.18, 1) both;
}

@keyframes drakon-rift-cross {
  0%   { left: -8%; opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { left: 108%; opacity: 0; }
}

.drakon-route-transition__content {
  display: grid;
  justify-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
}

html.drakon-motion-leaving .drakon-route-transition__content {
  animation: drakon-route-content-in 0.34s ease 0.14s both;
}

@keyframes drakon-route-content-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.drakon-route-transition__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  margin-bottom: 5px;
}

.drakon-route-transition__seal::before,
.drakon-route-transition__seal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 212, 160, 0.45);
  box-shadow: inset 0 0 18px rgba(255, 176, 80, 0.15), 0 0 22px rgba(255, 176, 80, 0.16);
}

.drakon-route-transition__seal::after {
  inset: 0;
  border-style: dashed;
  border-color: rgba(126, 197, 255, 0.36);
  animation: drakon-seal-spin 5s linear infinite reverse;
}

.drakon-route-transition__seal img {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 176, 80, 0.72));
  animation: drakon-seal-breathe 1.4s ease-in-out infinite alternate;
}

.drakon-route-transition__orbit {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border-top: 2px solid #ffd4a0;
  border-right: 2px solid transparent;
  animation: drakon-seal-spin 1.05s linear infinite;
}

@keyframes drakon-seal-spin { to { transform: rotate(360deg); } }
@keyframes drakon-seal-breathe { to { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(126, 197, 255, 0.95)); } }

.drakon-route-transition__eyebrow {
  color: #ffd4a0;
  font-family: var(--font-tech, "Barlow Condensed", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.drakon-route-transition__label {
  color: #fff;
  font-family: var(--font-serif, "Alegreya SC", serif);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-shadow: 0 0 18px rgba(255, 176, 80, 0.7);
}

.drakon-route-transition__dots {
  display: flex;
  gap: 5px;
  height: 8px;
  margin-top: 4px;
}

.drakon-route-transition__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd4a0;
  box-shadow: 0 0 8px #ffb050;
  animation: drakon-dot 0.8s ease-in-out infinite alternate;
}

.drakon-route-transition__dots i:nth-child(2) { animation-delay: 0.14s; }
.drakon-route-transition__dots i:nth-child(3) { animation-delay: 0.28s; }

@keyframes drakon-dot { to { opacity: 0.28; transform: translateY(3px); } }

.drakon-network-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.drakon-network-progress.is-active { opacity: 1; }

.drakon-network-progress__bar {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #7ec5ff, #ffb050 55%, #ffe3c0);
  box-shadow: 0 0 10px #ffb050, 0 0 22px rgba(126, 197, 255, 0.68);
  transform: translateX(-100%);
}

.drakon-network-progress.is-active .drakon-network-progress__bar {
  animation: drakon-progress-run 1.8s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}

.drakon-network-progress.is-done .drakon-network-progress__bar {
  width: 100%;
  transform: translateX(0);
  transition: width 0.2s ease;
}

@keyframes drakon-progress-run {
  0%   { width: 10%; transform: translateX(-100%); }
  45%  { width: 48%; transform: translateX(70%); }
  100% { width: 74%; transform: translateX(32%); }
}

button.is-drakon-busy,
a.is-drakon-busy {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: none;
}

.drakon-action-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: inherit;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  background: linear-gradient(110deg, rgba(4, 9, 14, 0.94), rgba(70, 35, 18, 0.96), rgba(4, 9, 14, 0.94));
  background-size: 220% 100%;
  animation: drakon-action-flow 1.5s linear infinite;
}

.drakon-action-loader i {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffd4a0;
  box-shadow: 0 0 8px rgba(255, 176, 80, 0.58);
  animation: drakon-seal-spin 0.7s linear infinite;
}

@keyframes drakon-action-flow { to { background-position: -220% 0; } }

.drakon-surface-enter {
  animation: drakon-surface-enter 0.36s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes drakon-surface-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.drakon-list-enter {
  animation: drakon-list-enter 0.44s cubic-bezier(0.16, 1, 0.3, 1) var(--drakon-enter-delay, 0ms) both !important;
}

@keyframes drakon-list-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: saturate(0.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.drakon-motion-pending body,
  html.drakon-motion-ready body { opacity: 1; transition: none; }

  html.drakon-motion-ready :is(.main, .mk-page, .ws-page, .pf-page, .cs-page, .svf-shell),
  .drakon-surface-enter,
  .drakon-list-enter,
  .drakon-route-transition *,
  .drakon-network-progress *,
  .drakon-action-loader,
  .drakon-action-loader i {
    animation: none !important;
    transition: none !important;
  }

  .drakon-route-transition__veil { clip-path: inset(0); }
  .drakon-route-transition__content { opacity: 1; transform: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms !important; }
}

/* ========================================================================== */
/* FIRMA DEL CREADOR + CONTADOR DE VISITANTES                                */
/* Componentes livianos compartidos por todas las paginas publicas.          */
/* ========================================================================== */

.drakon-visitors {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  height: 38px;
  padding: 5px 12px 5px 9px;
  flex: 0 0 auto;
  overflow: hidden;
  color: #fff0de;
  border: 1px solid rgba(255, 176, 80, 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 176, 80, 0.19), transparent 46%),
    linear-gradient(145deg, rgba(8, 19, 28, 0.9), rgba(3, 5, 7, 0.88));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 18px rgba(255, 176, 80, 0.07);
}

.drakon-visitors::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -25% -18px 35%;
  height: 28px;
  background: rgba(255, 176, 80, 0.2);
  filter: blur(13px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.drakon-visitors.is-ready::after { opacity: 1; }
.drakon-visitors.is-unavailable { opacity: 0.58; }

.drakon-visitors__icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  color: #ffc47d;
  border: 1px solid rgba(255, 196, 125, 0.28);
  border-radius: 7px;
  background: rgba(255, 176, 80, 0.08);
}

.drakon-visitors__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.drakon-visitors__copy {
  display: grid;
  align-content: center;
  gap: 0;
  min-width: 0;
  line-height: 1;
}

.drakon-visitors__copy small {
  color: rgba(242, 233, 221, 0.58);
  font-family: var(--font-serif, "Alegreya SC", serif);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.drakon-visitors__copy strong {
  margin-top: 3px;
  color: #fff;
  font-family: var(--font-tech, "Barlow Condensed", sans-serif);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 0.85;
  text-shadow: 0 0 10px rgba(255, 196, 125, 0.72);
}

.drakon-visitors--floating {
  position: fixed;
  z-index: 120;
  top: 16px;
  right: 18px;
}

.drakon-credit {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  isolation: isolate;
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 9px;
  width: 184px;
  min-height: 48px;
  padding: 6px 13px 6px 7px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 196, 125, 0.58);
  border-radius: 13px 5px 13px 5px;
  background:
    linear-gradient(112deg, rgba(52, 27, 14, 0.97), rgba(5, 11, 16, 0.96) 58%, rgba(10, 28, 42, 0.96));
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 176, 80, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.drakon-credit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.13) 48%, transparent 72%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.drakon-credit:hover {
  color: #fff;
  transform: translateY(-3px);
  border-color: rgba(255, 212, 160, 0.95);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.54),
    0 0 27px rgba(255, 176, 80, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.drakon-credit:hover::before { transform: translateX(120%); }

.drakon-credit:focus-visible {
  outline: 2px solid #ffe3c0;
  outline-offset: 4px;
}

.drakon-credit__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #ffd4a0;
  border: 1px solid rgba(255, 212, 160, 0.55);
  border-radius: 10px 3px 10px 3px;
  background: radial-gradient(circle, rgba(255, 176, 80, 0.22), rgba(255, 176, 80, 0.04) 68%);
  box-shadow: 0 0 15px rgba(255, 176, 80, 0.19);
}

.drakon-credit__seal svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drakon-credit__copy {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  line-height: 1;
}

.drakon-credit__copy small {
  color: rgba(255, 227, 192, 0.72);
  font-family: var(--font-tech, "Barlow Condensed", sans-serif);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.drakon-credit__copy strong {
  overflow: hidden;
  color: #fff;
  font-family: var(--font-serif, "Alegreya SC", serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 196, 125, 0.42);
}

.drakon-credit__spark {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px #ffc47d;
  animation: drakon-credit-pulse 2.4s ease-in-out infinite;
}

@keyframes drakon-credit-pulse {
  0%, 100% { opacity: 0.32; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.25); }
}

@media (max-width: 700px) {
  .drakon-visitors {
    min-width: 56px;
    height: 36px;
    gap: 6px;
    padding: 5px 8px;
  }

  .drakon-visitors__copy small { display: none; }
  .drakon-visitors__copy strong { margin-top: 0; font-size: 14px; }
  .drakon-visitors__icon { width: 21px; height: 21px; flex-basis: 21px; }

  .drakon-visitors--floating {
    top: 10px;
    right: 10px;
  }

  .drakon-credit {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: 172px;
    min-height: 44px;
    grid-template-columns: 30px auto;
    gap: 8px;
    padding: 6px 10px 6px 6px;
  }

  .drakon-credit__seal { width: 30px; height: 30px; }
  .drakon-credit__seal svg { width: 18px; height: 18px; }
  .drakon-credit__copy strong { font-size: 9.5px; }
}

@media (max-width: 400px) {
  .drakon-visitors {
    min-width: 39px;
    padding-inline: 7px;
  }

  .topbar__actions { gap: 6px; }
  .topbar__actions .drakon-visitors__icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drakon-credit,
  .drakon-credit::before,
  .drakon-credit__spark,
  .drakon-visitors::after {
    animation: none !important;
    transition: none !important;
  }
}