/* =====================================================================
   Torneo LoL — sistema visual inmersivo
   Escena de fondo con imagen por sección + partículas, sidebar, banners
   full-bleed con parallax, tarjetas de vidrio, escenario "versus".
   Bracket/cruces: estética broadcast (dorado, lado azul vs lado rojo).
   Perfil/stats: glow violeta→cian y gráficos.
   ===================================================================== */
:root {
  --bg: #04050a;
  --bg-2: #090b12;
  --surface: rgba(12, 14, 22, 0.78);
  --surface-solid: #0d1018;
  --surface-2: #141824;
  --surface-3: #1b2030;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f5f9;
  --text-2: #bcc2d2;
  --muted: #7f879b;
  --gold: #e9b949;
  --gold-2: #f8dc93;
  --gold-soft: rgba(233, 185, 73, 0.14);
  --gold-line: rgba(233, 185, 73, 0.45);
  --blue: #2f7cf6;
  --blue-soft: rgba(47, 124, 246, 0.18);
  --red: #e5484d;
  --red-soft: rgba(229, 72, 77, 0.18);
  --accent: #2f7cf6;
  --accent-soft: var(--blue-soft);
  --accent-2: #22d3ee;
  --accent-2-soft: rgba(34, 211, 238, 0.14);
  --violet: #8b5cf6;
  --violet-soft: rgba(139, 92, 246, 0.2);
  --win: #3ddc84;
  --win-soft: rgba(61, 220, 132, 0.14);
  --loss: #ff5c5c;
  --loss-soft: rgba(255, 92, 92, 0.14);
  --silver: #c9d1e0;
  --bronze: #d8a071;
  --warn: #f5b942;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.45);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --glow: linear-gradient(135deg, #8b5cf6, #22d3ee);
  --sidebar-w: 250px;
  --tabbar-h: 62px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
button { font-family: inherit; }
img { max-width: 100%; }

/* ---------- Escena de fondo ---------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-img {
  position: absolute; inset: -6%; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04); filter: saturate(1.05);
  transition: opacity 1.2s var(--ease), background-image .6s ease;
  animation: kenburns 40s ease-in-out infinite alternate;
}
.scene-img.on { opacity: 0.28; }
@keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, 1%, 0); } }
.scene-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(47, 124, 246, 0.16), transparent 60%),
    radial-gradient(1000px 600px at 100% 20%, rgba(233, 185, 73, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(4, 5, 10, 0.55) 0%, rgba(4, 5, 10, 0.82) 45%, #04050a 100%);
}
.scene-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .scene-img { animation: none; } }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { margin: 0; line-height: 1.02; }
h1 { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
h3 svg, h2 svg { width: 14px; height: 14px; vertical-align: -2px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.mt-sm { margin-top: 8px; }
.mb { margin-bottom: 16px; }
.mb-sm { margin-bottom: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
.display { font-family: var(--font-display); }
.num { font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); }
.eyebrow {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gold); }
.gradient-text { background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
  display: flex; flex-direction: column; gap: 18px; padding: 22px 16px 18px;
  background: rgba(6, 7, 12, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 0 6px; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--gold-2), #b8842a);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  box-shadow: 0 8px 24px rgba(233, 185, 73, 0.25);
}
.brand-mark.small { width: 30px; height: 30px; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.brand-text b { color: var(--gold); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
  color: var(--text-2); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease, transform .15s var(--ease);
}
.nav a svg { width: 18px; height: 18px; opacity: 0.8; }
.nav a:hover { text-decoration: none; color: var(--text); background: rgba(255, 255, 255, 0.04); transform: translateX(2px); }
.nav a.active { color: var(--gold); background: linear-gradient(90deg, var(--gold-soft), transparent); }
.nav a.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--gold); border-radius: 2px; }
.side-live { margin-top: auto; }
.live-card { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.live-card .t { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.live-card .n { font-family: var(--font-display); font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.05; margin: 4px 0 8px; }
.live-card .progress { margin-top: 8px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 6px 0; border-top: 1px solid var(--border); }
.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.user-chip .who .name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who .role { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.user-chip .who .role.admin { color: var(--gold); }

/* Topline (móvil) + tabbar */
.topline {
  display: none; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 14px; height: 54px; background: rgba(6, 7, 12, 0.8); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border);
}
.topline .brand-text { font-size: 20px; }
.topline .user-chip { border: 0; padding: 0; }
.topline .user-chip .who { display: none; }
.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(6, 7, 12, 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--border);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a.active { color: var(--gold); }
.tabbar a:hover { text-decoration: none; }

/* ---------- Shell / páginas ---------- */
.shell { position: relative; z-index: 1; margin-left: var(--sidebar-w); min-height: 100vh; }
.shell.full { margin-left: 0; }
.content { max-width: 1180px; margin: 0 auto; padding: 26px 28px 80px; }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.form-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .eyebrow { margin-bottom: 6px; }
.page-head .sub { color: var(--muted); margin-top: 6px; }

/* Banner full-bleed con imagen + parallax */
.banner { position: relative; min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.banner.tall { min-height: 420px; }
.banner.short { min-height: 240px; }
.banner-img { position: absolute; inset: -12% 0; background-size: cover; background-position: center; z-index: -2; will-change: transform; }
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 5, 10, 0.25) 0%, rgba(4, 5, 10, 0.55) 50%, #04050a 100%),
    linear-gradient(90deg, rgba(4, 5, 10, 0.75) 0%, transparent 60%);
}
.banner.blue-red::before {
  background:
    linear-gradient(90deg, rgba(47, 124, 246, 0.35), transparent 45%, transparent 55%, rgba(229, 72, 77, 0.35)),
    linear-gradient(180deg, rgba(4, 5, 10, 0.3) 0%, rgba(4, 5, 10, 0.6) 55%, #04050a 100%);
}
.banner-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 60px 28px 26px; }
.banner h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 900; line-height: 0.92; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7); margin-top: 10px; }
.banner .meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 14px; color: var(--text-2); font-family: var(--font-display); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.banner .meta span { display: inline-flex; align-items: center; gap: 6px; }
.banner .meta svg { width: 15px; height: 15px; opacity: 0.85; }
.banner .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.banner-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.banner .progress { max-width: 520px; margin-top: 16px; }
.champion-box {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: rgba(10, 12, 18, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--gold-line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 0 40px rgba(233, 185, 73, 0.18);
}
.champion-box .lbl { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.champion-box .val { font-family: var(--font-display); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }

.progress { height: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .6s var(--ease); }

/* Tarjetas (vidrio) */
.card {
  position: relative; background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
}
.card.compact { padding: 14px 16px; }
.card.accent-top::before, .card.gold-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: var(--radius) var(--radius) 0 0; }
.card.accent-top::before { background: linear-gradient(90deg, var(--blue), var(--red)); }
.card.gold-top::before { background: linear-gradient(90deg, var(--gold), var(--gold-2), transparent); }
.card.glow { background: linear-gradient(160deg, rgba(139, 92, 246, 0.14), rgba(34, 211, 238, 0.05) 45%, transparent 70%), var(--surface); border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12), 0 14px 44px rgba(76, 29, 149, 0.3); }
.card.image { overflow: hidden; padding: 0; min-height: 220px; display: flex; align-items: flex-end; isolation: isolate; }
.card.image .bgi { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; transition: transform .8s var(--ease); }
.card.image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 5, 10, 0.25), rgba(4, 5, 10, 0.75) 45%, rgba(4, 5, 10, 0.96)); }
.card.image:hover .bgi { transform: scale(1.06); }
.card.image .body { padding: 22px; width: 100%; }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-title h2, .card-title h3 { margin: 0; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* Reveal / tilt */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.tilt { transform-style: preserve-3d; transition: transform .25s var(--ease), box-shadow .25s ease; transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .tilt { transform: none !important; } }

/* Stepper */
.stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.step .dot { width: 26px; height: 26px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--border-strong); font-size: 12px; clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }
.step.done { color: var(--text-2); }
.step.done .dot { background: var(--win-soft); border-color: var(--win); color: var(--win); }
.step.current { color: var(--gold); }
.step.current .dot { background: var(--gold); border-color: var(--gold); color: #1a1200; }
.step-line { width: 28px; height: 1px; background: var(--border-strong); }

/* ---------- Badges / tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: var(--text-2); border: 1px solid var(--border);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; opacity: 0.9; }
.badge.plain::before { display: none; }
.badge.win { background: var(--win-soft); color: var(--win); border-color: transparent; }
.badge.loss { background: var(--loss-soft); color: var(--loss); border-color: transparent; }
.badge.gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.badge.accent { background: var(--blue-soft); color: #8db6ff; border-color: transparent; }
.badge.warn { background: rgba(245, 185, 66, 0.14); color: var(--warn); border-color: transparent; }
.badge.cyan { background: var(--accent-2-soft); color: var(--accent-2); border-color: transparent; }
.badge.cyan::before { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.role-tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 76px; padding: 4px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.14em;
  background: rgba(4, 5, 10, 0.8); color: var(--gold); border: 1px solid var(--gold-line);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ---------- Avatares ---------- */
.avatar {
  --h: 220; flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 55% 45%), hsl(calc(var(--h) + 40) 55% 32%));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.avatar.lg { width: 58px; height: 58px; font-size: 22px; }
.avatar.xl { width: 84px; height: 84px; font-size: 30px; }
.avatar.xxl { width: 132px; height: 132px; font-size: 48px; }
.avatar.ring-1 { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--blue), 0 0 40px rgba(47, 124, 246, 0.45); }
.avatar.ring-2 { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--red), 0 0 40px rgba(229, 72, 77, 0.45); }
.avatar.ring-gold { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--gold), 0 0 44px rgba(233, 185, 73, 0.45); }
.avatar.tbd { background: var(--surface-3); color: var(--muted); box-shadow: inset 0 0 0 2px var(--border-strong); }
.avatar.img { position: relative; overflow: hidden; background: var(--surface-3); }
.avatar.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.img > span { opacity: 0; }
.player { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.06); color: var(--text);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease, filter .15s ease; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; border-color: rgba(255, 255, 255, 0.28); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #1a1200; border-color: transparent; box-shadow: 0 10px 30px rgba(233, 185, 73, 0.28); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.success { background: var(--win); color: #062b17; border-color: transparent; }
.btn.danger { background: transparent; color: var(--loss); border-color: rgba(255, 92, 92, 0.45); }
.btn.danger:hover { background: var(--loss-soft); }
.btn.gold { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1a1200; border-color: transparent; box-shadow: 0 8px 26px rgba(233, 185, 73, 0.3); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); clip-path: none; }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.lg { padding: 15px 28px; font-size: 17px; }
.btn.block { width: 100%; }
.btn.discord-btn { background: #5865f2; border-color: transparent; color: #fff; }
.btn.discord-btn:hover { background: #4752c4; }

/* ---------- Formularios ---------- */
label { display: block; font-family: var(--font-display); font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
input[type=text], input[type=password], input[type=number], input[type=date], select {
  width: 100%; padding: 12px 13px; border-radius: 6px; font-family: var(--font);
  border: 1px solid var(--border-strong); background: rgba(4, 5, 10, 0.6); color: var(--text); font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
input[type=number] { font-variant-numeric: tabular-nums; }
input[type=date] { color-scheme: dark; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f879b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.field { margin-bottom: 14px; }
.choice-group { display: flex; gap: 8px; flex-wrap: wrap; }
.choice {
  display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 130px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: rgba(4, 5, 10, 0.6);
  color: var(--text); font-family: var(--font); font-weight: 600; font-size: 14px; margin: 0; text-transform: none; letter-spacing: 0;
  transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: rgba(255, 255, 255, 0.25); }
.choice:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.choice.cyan:has(input:checked) { border-color: var(--accent-2); background: var(--accent-2-soft); }
.choice input { accent-color: var(--gold); margin: 0; }
.choice.cyan input { accent-color: var(--accent-2); }
.choice.disabled { opacity: 0.5; cursor: not-allowed; }
.player-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.error { color: var(--loss); font-size: 14px; margin-top: 10px; font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); }

/* ---------- Login inmersivo ---------- */
.login { position: relative; }
.login-hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; padding: 60px clamp(20px, 6vw, 90px); overflow: hidden; }
.login-hero .kicker { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
.login-hero .kicker::before { content: ""; width: 34px; height: 2px; background: var(--gold); }
.login-hero h1 { font-size: clamp(56px, 9vw, 124px); font-weight: 900; line-height: 0.88; margin-top: 18px; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); }
.login-hero h1 b { color: var(--gold); }
.login-hero .lead { max-width: 520px; color: var(--text-2); font-size: 17px; margin-top: 22px; }
.login-hero .roles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.glass {
  background: rgba(8, 10, 16, 0.62); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong); padding: 34px; box-shadow: var(--shadow);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.glass::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
.glass { position: relative; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--muted); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: bob 2.2s infinite; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.features { max-width: 1180px; margin: 0 auto; padding: 40px 28px 90px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature { min-height: 340px; }
.feature .n { font-family: var(--font-display); font-size: 64px; font-weight: 900; color: var(--gold); line-height: 1; opacity: 0.9; }
.feature h2 { font-size: 30px; margin-top: 6px; }
.feature p { color: var(--text-2); margin-top: 8px; }
.login-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 0 20px 40px; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
th { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.w { color: var(--win); font-weight: 700; }
td.l { color: var(--loss); font-weight: 700; }
tr.me td { background: var(--gold-soft) !important; }
tr.hidden-row { opacity: 0.55; }
.rank { display: inline-grid; place-items: center; width: 28px; height: 28px; font-family: var(--font-display); font-weight: 800; font-size: 16px; background: var(--surface-3); color: var(--text-2); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); }
.rank.r1 { background: var(--gold); color: #1a1200; }
.rank.r2 { background: var(--silver); color: #111; }
.rank.r3 { background: var(--bronze); color: #1a0e00; }
.bar { position: relative; height: 6px; width: 90px; background: var(--surface-3); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--win); }

/* ---------- Match cards ---------- */
.matchup-list { display: grid; gap: 10px; }
.mcard {
  position: relative; display: block; padding: 0; border: 1px solid var(--border-strong); background: rgba(6, 7, 12, 0.85);
  color: var(--text); overflow: hidden; transition: border-color .15s ease, transform .15s var(--ease), box-shadow .15s ease;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.mcard:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--gold-line); }
.mcard.mine { box-shadow: inset 0 0 0 1px var(--gold-line); }
.mcard-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.mcard .side { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; text-transform: uppercase; }
.mcard .side.left { justify-content: flex-end; text-align: right; background: linear-gradient(90deg, transparent, var(--blue-soft)); box-shadow: inset -3px 0 0 var(--blue); }
.mcard .side:not(.left) { background: linear-gradient(270deg, transparent, var(--red-soft)); box-shadow: inset 3px 0 0 var(--red); }
.mcard .side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .side.winner .nm { color: var(--gold); }
.mcard .side.loser { opacity: 0.5; }
.mcard-score { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 112px; padding: 0 14px; font-family: var(--font-display); font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(4, 5, 10, 0.9); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.mcard-score .sep { color: var(--gold); font-size: 22px; }
.mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: rgba(12, 14, 22, 0.8); flex-wrap: wrap; }
.mcard-foot .info { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dots { display: inline-flex; gap: 4px; }
.dot-g { width: 20px; height: 20px; display: grid; place-items: center; font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }
.dot-g.p1 { background: var(--blue); color: #fff; border-color: transparent; }
.dot-g.p2 { background: var(--red); color: #fff; border-color: transparent; }
.dot-g.np { opacity: 0.3; }

/* ---------- Escenario versus ---------- */
.stage { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--gold-line); }
.stage-img { position: absolute; inset: -10% 0; background-size: cover; background-position: center; z-index: -2; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(47, 124, 246, 0.45), rgba(4, 5, 10, 0.75) 38%, rgba(4, 5, 10, 0.75) 62%, rgba(229, 72, 77, 0.45)), linear-gradient(180deg, rgba(4, 5, 10, 0.2), #04050a); }
.stage-inner { max-width: 1180px; margin: 0 auto; padding: 50px 28px 34px; }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.versus .who { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.versus .who .nm { font-family: var(--font-display); font-size: clamp(28px, 4vw, 52px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.95; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7); }
.versus .who.winner .nm { color: var(--gold); }
.versus .who .tag { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; }
.versus .who:first-child .tag { color: #8db6ff; }
.versus .who:last-child .tag { color: #ff8a8e; }
.versus .mid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.versus .big-score { font-family: var(--font-display); font-size: clamp(64px, 9vw, 120px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); }
.versus .big-score .sep { color: var(--gold); margin: 0 8px; font-size: 0.6em; }
.vs-chip { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.3em; color: var(--gold); padding: 6px 14px; border: 1px solid var(--gold-line); background: rgba(4, 5, 10, 0.6); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 30px; }
.tl { position: relative; padding: 12px 10px 10px; text-align: center; background: rgba(6, 7, 12, 0.7); border: 1px solid var(--border); border-top-width: 3px; transition: transform .2s var(--ease); }
.tl:hover { transform: translateY(-2px); }
.tl .r { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.16em; font-size: 15px; }
.tl .s { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-display); }
.tl.p1 { border-top-color: var(--blue); }
.tl.p1 .s { color: #8db6ff; }
.tl.p2 { border-top-color: var(--red); }
.tl.p2 .s { color: #ff8a8e; }
.tl.np { opacity: 0.4; border-top-color: var(--border-strong); }
.tl.pending { border-top-color: var(--gold-line); }

/* ---------- Partidas ---------- */
.games { display: grid; gap: 8px; }
.game { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); background: rgba(6, 7, 12, 0.75); border-left-width: 4px; }
.game.p1 { border-left-color: var(--blue); }
.game.p2 { border-left-color: var(--red); }
.game.not-played { opacity: 0.45; }
.game .rl { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.game .rl .n { font-family: var(--font-display); font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 0.16em; }
.game .summary { font-size: 13px; color: var(--muted); line-height: 1.5; min-width: 0; }
.game .summary b { color: var(--text); font-weight: 700; }
.game .summary .stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 3px; }
.game .summary .stats span { display: inline-flex; align-items: center; gap: 5px; }
.game .summary .stats svg { width: 13px; height: 13px; opacity: 0.7; }
.game .actions { display: flex; gap: 6px; }
.gline { display: flex; align-items: center; gap: 8px; }
.gline .nm { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); min-width: 110px; }
.gline .mark { font-weight: 800; }
.gline.w .mark, .gline.w .nm { color: var(--win); }
.gline.l .mark { color: var(--loss); }
.gline.l .nm { color: var(--muted); }
.result-panel { margin: 4px 0 6px; padding: 18px; border: 1px solid var(--gold-line); background: linear-gradient(180deg, var(--gold-soft), transparent 60%), rgba(8, 10, 16, 0.9); }
.result-panel h3 { color: var(--text); font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }

/* ---------- Stats & perfil ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.tile { padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.tile .v { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 6px; font-weight: 700; }
.tile.win .v { color: var(--win); }
.tile.loss .v { color: var(--loss); }
.tile.gold .v { color: var(--gold); }
.tile.accent .v { color: var(--accent-2); }
.player-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.player-head .nm { font-family: var(--font-display); font-size: 32px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.player-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.profile-cover { position: relative; }
.profile-cover .banner-inner { padding-bottom: 26px; }
.profile-id { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.profile-id .nm { font-family: var(--font-display); font-size: clamp(36px, 6vw, 64px); font-weight: 900; text-transform: uppercase; line-height: 0.95; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7); }
.profile-id .sub { color: var(--text-2); margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-id .sub svg, .banner .meta svg, .banner .sub svg { width: 14px; height: 14px; flex: none; }
.profile-cover .banner-img.avatar-bg { filter: blur(22px) saturate(1.2); transform: scale(1.15); opacity: 0.9; }
.profile-body { padding-top: 0; }
.rolebar { display: inline-block; width: 70px; height: 6px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.rolebar > span { display: block; height: 100%; background: var(--glow); }
.role-list { display: grid; gap: 6px; }
.role-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); font-size: 14px; }
.rolebar.grow { flex: 1; width: auto; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.podium .pod { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; background: rgba(6, 7, 12, 0.8); border: 1px solid var(--border); text-align: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.podium .pod .nm { font-family: var(--font-display); font-size: 24px; font-weight: 800; text-transform: uppercase; }
.podium .pod .rec { font-size: 12px; color: var(--muted); }
.podium .pod.p1 { order: 2; border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-soft), transparent 70%), rgba(6, 7, 12, 0.85); transform: translateY(-8px); box-shadow: 0 0 40px rgba(233, 185, 73, 0.15); }
.podium .pod.p2 { order: 1; }
.podium .pod.p3 { order: 3; }
.podium .medal { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; }
.podium .p1 .medal { color: var(--gold); }
.podium .p2 .medal { color: var(--silver); }
.podium .p3 .medal { color: var(--bronze); }

/* Gráficos */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font); fill: var(--text-2); font-size: 13px; }
.chart .hb-label.me { fill: var(--gold); font-weight: 700; }
.chart .hb-value { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.chart .hb-value.best { fill: var(--text); font-weight: 700; }
.chart .radar-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; fill: var(--text-2); }
.chart.radar { max-width: 300px; margin: 0 auto; }
.chart [data-tip] { cursor: default; outline: none; }
.chart [data-tip]:hover rect[rx], .chart [data-tip]:focus rect[rx] { filter: brightness(1.15); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart-tip { position: fixed; z-index: 60; pointer-events: none; padding: 8px 10px; background: #1a1a19; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; line-height: 1.5; border-radius: 6px; box-shadow: var(--shadow-sm); max-width: 240px; }
.chart-tip .muted { color: #c3c2b7; }
.ring { width: 90px; height: 90px; }
.ring .ring-value { font-family: var(--font-display); font-size: 20px; font-weight: 800; fill: var(--text); }
.chart-row { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; }

/* ---------- Hall of fame ---------- */
.hof { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.hof-item {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px;
  border: 1px solid var(--gold-line); background: radial-gradient(360px 180px at 0% 0%, rgba(233, 185, 73, 0.24), transparent 70%), rgba(6, 7, 12, 0.85);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: 0 0 40px rgba(233, 185, 73, 0.1);
}
.hof-item .trophy { position: absolute; right: -8px; top: -12px; font-size: 96px; opacity: 0.08; }
.hof-item .t { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.hof-item .nm { font-family: var(--font-display); font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.hof-item .champ { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.hof-item .date { font-size: 12px; color: var(--muted); }
.tlist { display: grid; gap: 6px; }
.tentry { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text); }
.tentry:hover { text-decoration: none; border-color: var(--gold-line); }
.tentry .medal { font-size: 20px; }
.tentry .gold { color: var(--gold); font-weight: 700; }

/* ---------- Varios ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }
.seg a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--muted); font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.seg a svg { width: 15px; height: 15px; }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.active { background: var(--gold); color: #1a1200; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; background: rgba(6, 7, 12, 0.8); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.pchip a { color: var(--text); }
.pchip.st-eliminated { opacity: 0.5; }
.pchip.st-eliminated a { text-decoration: line-through; }
.pchip.st-champion { border-color: var(--gold); background: var(--gold-soft); }
.ulist { display: grid; gap: 8px; }
.urow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); flex-wrap: wrap; }
.urow.inactive { opacity: 0.5; }
.urow .xs svg { width: 12px; height: 12px; vertical-align: -2px; }
.user-form { margin-bottom: 12px; border-color: var(--gold-line); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.kv:last-of-type { border-bottom: 0; }
.kv > span:first-child { color: var(--muted); }
.kv code { background: var(--surface-3); padding: 2px 8px; border-radius: 4px; font-size: 12px; color: var(--accent-2); word-break: break-all; }
.steps { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.steps code { background: var(--surface-3); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--accent-2); word-break: break-all; overflow-wrap: anywhere; }
.kv { flex-wrap: wrap; }
code { overflow-wrap: anywhere; }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty .ico { font-size: 34px; margin-bottom: 8px; opacity: 0.8; }
.empty b { color: var(--text-2); display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.06em; }
.skeleton { display: grid; gap: 14px; padding: 28px; }
.sk { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 12px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: rgba(12, 14, 22, 0.95); border: 1px solid var(--gold-line); box-shadow: var(--shadow); z-index: 50; font-weight: 600; max-width: 92vw; animation: rise .2s ease; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.toast::before { content: ""; width: 8px; height: 8px; background: var(--gold); }
.toast.ok::before { background: var(--win); }
.toast.err { border-color: rgba(255, 92, 92, 0.5); }
.toast.err::before { background: var(--loss); }
.toast.warn { border-color: rgba(245, 185, 66, 0.5); }
.toast.warn::before { background: var(--warn); }

/* ---- Gráfico de comunidad: barra dividida + evolución ---- */
.cchart { display: flex; flex-direction: column; gap: 8px; }
.cc-head { display: flex; justify-content: space-between; gap: 12px; }
.cc-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-side.p2 { flex-direction: row-reverse; text-align: right; }
.cc-side .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.cc-bar .seg { display: block; height: 100%; transition: width 0.4s ease; min-width: 0; }
.cc-bar .seg.p1 { background: var(--blue); border-radius: 7px 0 0 7px; }
.cc-bar .seg.p2 { background: var(--red); border-radius: 0 7px 7px 0; }
.cc-bar.empty .seg { width: 100%; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 6px, transparent 6px 12px); }
.cc-hist summary { cursor: pointer; }
.cc-svg { width: 100%; height: auto; margin-top: 6px; display: block; }
.cc-svg .grid { stroke: rgba(255, 255, 255, 0.18); stroke-dasharray: 3 4; }
.cc-svg .ax { fill: var(--muted); font-size: 9px; font-family: var(--font-body); }
.cc-svg .lbl { fill: var(--text); font-size: 10px; font-weight: 700; font-family: var(--font-body); }
.cc-svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-svg .ln.p1 { stroke: var(--blue); }
.cc-svg .pt { fill: var(--blue); stroke: var(--surface-solid); stroke-width: 2; cursor: pointer; }
.cc-svg .pt:hover { r: 6; }
.mk-mini { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; }
.mk-mini .pv { font-weight: 700; min-width: 28px; }
.mk-mini .pv:last-of-type { text-align: right; }
.mk-mini-bar { flex: 1; display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.mk-mini-bar .seg { display: block; height: 100%; }
.mk-mini-bar .seg.p1 { background: var(--blue); }
.mk-mini-bar .seg.p2 { background: var(--red); }
.mk-mini.preds .mk-mini-bar .seg { opacity: 0.55; }
.mk-mini .mk-n { min-width: 34px; text-align: right; }
.mnode .mk-mini { margin: 4px 8px 8px; }
.mcard .mk-mini { margin: 0 12px 8px; }

/* ---- Predicciones: mercado y apuestas (sobrio, sin estética de casino) ---- */
.pp-chip { color: var(--gold); font-weight: 700; }
.market { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); }
.mk-sides { display: flex; align-items: center; gap: 12px; }
.mk-side { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mk-side .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-side.p2 { flex-direction: row-reverse; text-align: right; }
.mk-vs { font-family: var(--font-display); color: var(--muted); font-size: 12px; letter-spacing: 0.1em; }
.odds { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.mk-state { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; }
.field.stake input[type=number] { font-weight: 700; }
.bet-line { margin-top: 8px; font-size: 14px; }
.talk { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, 0.03); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.talk blockquote { margin: 4px 0 0; font-style: italic; }
.mini-list.bets li, .mini-list.moves li { display: flex; align-items: center; gap: 10px; }
.mini-list li .win { color: var(--win); }
.mini-list li .loss { color: var(--loss); }
@media (max-width: 640px) {
  .mk-sides { flex-direction: column; align-items: stretch; }
  .mk-side.p2 { flex-direction: row; text-align: left; }
  .mk-vs { display: none; }
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.credits { text-align: center; color: var(--muted); font-size: 11px; padding: 10px 0 0; letter-spacing: 0.06em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --sidebar-w: 88px; }
  .sidebar { padding: 18px 10px; align-items: center; }
  .sidebar .brand-text, .sidebar .nav a span, .sidebar .side-live, .sidebar .user-chip .who { display: none; }
  .sidebar .nav a { justify-content: center; padding: 12px; }
  .sidebar .nav a.active::before { display: none; }
  .sidebar .user-chip { flex-direction: column; border: 0; }
}
@media (max-width: 900px) {
  .login-hero { grid-template-columns: 1fr; padding: 90px 20px 70px; gap: 28px; }
  .login-hero h1 { font-size: clamp(48px, 14vw, 84px); }
  .glass { padding: 26px; }
  .banner-grid { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .tl .r { font-size: 12px; letter-spacing: 0.08em; }
}
@media (max-width: 700px) {
  .sidebar { display: none; }
  .topline { display: flex; }
  .tabbar { display: flex; }
  .shell { margin-left: 0; }
  .content { padding: 16px 14px calc(var(--tabbar-h) + 28px); }
  .banner { min-height: 260px; }
  .banner.tall { min-height: 320px; }
  .banner-inner { padding: 40px 14px 20px; }
  h1 { font-size: 30px; }
  .mcard .side { font-size: 15px; padding: 12px 10px; gap: 8px; }
  .mcard .side .avatar { display: none; }
  .mcard-score { font-size: 24px; min-width: 84px; padding: 0 8px; }
  .stage-inner { padding: 30px 14px 24px; }
  .versus { gap: 8px; }
  .versus .who .nm { font-size: 20px; }
  .versus .avatar.xl { width: 56px; height: 56px; font-size: 18px; }
  .versus .avatar.xxl { width: 66px; height: 66px; font-size: 22px; }
  .versus .who .tag { font-size: 10px; letter-spacing: 0.16em; }
  .versus .big-score { font-size: 46px; }
  .versus .big-score .sep { margin: 0 3px; }
  .gline .nm { min-width: 62px; font-size: 13px; }
  .gline .xs { white-space: nowrap; font-size: 11px; }
  .game .summary .stats { gap: 8px; }
  .timeline { margin-top: 18px; }
  .tl { padding: 8px 4px; }
  .tl .s { display: none; }
  .game { grid-template-columns: auto 1fr; }
  .game .actions { grid-column: 1 / -1; justify-content: flex-end; }
  .grid.form-2 { grid-template-columns: 1fr 1fr; }
  .podium { gap: 8px; }
  .podium .pod { padding: 12px 6px; }
  .podium .pod .nm { font-size: 16px; }
  .stat-tiles { grid-template-columns: repeat(3, 1fr); }
  .toast { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); }
  .urow .row { width: 100%; justify-content: flex-end; }
  .page-head select { max-width: 100%; }
  .profile-id { gap: 14px; }
  .profile-id .avatar.xxl { width: 84px; height: 84px; font-size: 30px; }
  .profile-id .nm { font-size: 32px; }
  .scroll-cue { display: none; }
  h2 { font-size: 22px; }
  .chart text { font-size: 17px; }
  .chart .hb-value { font-size: 16px; }
  .chart .radar-label { font-size: 15px; }
  .player-head { flex-wrap: wrap; }
  .player-head > .row { width: 100%; }
  .hide-m { display: none !important; }
  .seg a span { display: inline; font-size: 12px; }
  .seg a { padding: 7px 9px; gap: 5px; }
  .banner .actions .btn { padding: 10px 14px; font-size: 14px; }
  .glass { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
  .login-hero .kicker { font-size: 12px; letter-spacing: 0.2em; }
  .champion-box { width: 100%; }
  .features { padding: 20px 14px 60px; }
  .feature { min-height: 260px; }
}
@media (max-width: 380px) {
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .choice { min-width: 100px; }
}


/* =====================================================================
   Coordinación de enfrentamientos, centro de actividad y vista Live
   ===================================================================== */
.badge.live { background: var(--red-soft); color: #ff7b7b; border-color: transparent; }
.badge.live::before { animation: pulse 1.2s infinite; }
.badge.tiny { font-size: 11px; padding: 3px 8px; }
.mcard-foot .info .when { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-2); text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 12px; }
.mcard-foot .info .when svg { width: 13px; height: 13px; }

/* ---- Estado grande dentro del panel de coordinación / próximo cruce ---- */
.ck { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.ck.warn { color: var(--warn); } .ck.win { color: var(--win); } .ck.live { color: #ff7b7b; } .ck.gold { color: var(--gold); }
.cstate { padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); display: grid; gap: 8px; }
.cstate.warn { border-color: rgba(245, 185, 66, 0.45); background: rgba(245, 185, 66, 0.07); }
.cstate.warn .ck { color: var(--warn); }
.cstate.ok { border-color: rgba(61, 220, 132, 0.45); background: rgba(61, 220, 132, 0.07); }
.cstate.ok .ck { color: var(--win); }
.cstate.live { border-color: rgba(229, 72, 77, 0.55); background: rgba(229, 72, 77, 0.1); box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.2), 0 10px 40px rgba(229, 72, 77, 0.2); }
.cstate.live .ck { color: #ff7b7b; }
.cstate p { margin: 0; }
.cstate > .badge { justify-self: start; }
.cwhen { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: 0.02em; }
.countdown { font-family: var(--font-display); font-size: clamp(30px, 6vw, 56px); font-weight: 900; letter-spacing: 0.08em; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; }
.countdown.sm { font-size: 18px; letter-spacing: 0.06em; }
.countdown.due { color: #ff7b7b; animation: pulse 1.2s infinite; }
.banner-note { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); font-size: 14px; }
.banner-note.loss { border-color: rgba(255, 92, 92, 0.45); background: var(--loss-soft); }
.help-list, .mini-list { margin: 8px 0 0; padding-left: 18px; }
.help-list li, .mini-list li { margin: 4px 0; }
.admin-box { padding: 16px 18px; border-radius: var(--radius-sm); border: 1px dashed var(--gold-line); background: var(--gold-soft); }
.admin-box h3 { margin: 0; }

/* ---- Disponibilidad ---- */
.av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.av-col { padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); }
.av-col.mine { border-color: var(--gold-line); }
.av-col.av-rival { border-style: dashed; }
.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.slots li { padding: 5px 10px; border-radius: 8px; background: var(--blue-soft); color: #cfe0ff; font-size: 13px; }
.slots li b { color: #fff; margin-right: 4px; }
.av-editor { display: grid; gap: 8px; }
.av-day { display: grid; grid-template-columns: 90px 1fr auto; align-items: start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.av-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; padding-top: 8px; color: var(--text-2); }
.av-ranges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.av-range { display: inline-flex; align-items: center; gap: 4px; }
.av-range select { padding: 6px 8px; width: auto; min-width: 80px; }
.av-range .av-del { padding: 4px 8px; }
.sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.sug { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(61, 220, 132, 0.45); background: rgba(61, 220, 132, 0.08); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.sug:hover { background: rgba(61, 220, 132, 0.18); }
.sug span:first-child { font-weight: 700; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--border); }
.plist li.p-accepted { border-left-color: var(--win); } .plist li.p-pending { border-left-color: var(--warn); }
.plist li.p-rejected, .plist li.p-cancelled { border-left-color: var(--loss); opacity: 0.85; }
.plist .pw { font-weight: 700; }

/* ---- Próximo enfrentamiento (dashboard) ---- */
.next-match { position: relative; overflow: hidden; }
.next-match.st-scheduling, .next-match.st-proposed, .next-match.st-reschedule_required { border-color: rgba(245, 185, 66, 0.5); }
.next-match.st-confirmed { border-color: rgba(61, 220, 132, 0.5); }
.next-match.st-in_progress { border-color: rgba(229, 72, 77, 0.6); box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.2), 0 14px 44px rgba(229, 72, 77, 0.22); }
.nm-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 8px 0 14px; }
.nm-vs .who { text-align: center; display: grid; justify-items: center; gap: 6px; }
.nm-vs .who .nm { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.nm-mid { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--muted); letter-spacing: 0.1em; }
.nm-body { display: grid; gap: 6px; text-align: center; justify-items: center; }
.nm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nm-actions .btn.block { flex: 1; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agenda li a { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: inherit; border-left: 3px solid var(--win); }
.agenda li.st-in_progress a { border-left-color: var(--red); }
.agenda .ag-when { font-weight: 700; font-size: 13px; }
.agenda .ag-who i { color: var(--muted); font-style: normal; margin: 0 4px; }

/* ---- Feed de actividad ---- */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fe { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.feed.compact .fe { padding: 7px 4px; }
.fe:last-child { border-bottom: 0; }
.fi { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); font-size: 15px; }
.fe.t-schedule_confirmed .fi, .fe.t-matchup_finished .fi { background: var(--win-soft); }
.fe.t-matchup_started .fi, .fe.t-deadline_warning .fi, .fe.t-admin_help_requested .fi { background: var(--red-soft); }
.fe.t-champion .fi, .fe.t-mvp_selected .fi, .fe.t-tournament_started .fi { background: var(--gold-soft); }
.fm { font-size: 14px; }
.fm a { color: inherit; }
.ft { font-size: 12px; color: var(--muted); }

/* ---- Deadlines (admin) ---- */
.deadlines { display: grid; gap: 8px; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dl-row label { min-width: 130px; font-weight: 600; font-size: 13px; }
.dl-row input { width: auto; max-width: 220px; padding: 7px 10px; }
.dl-row.done { opacity: 0.55; }

/* ---- Live (espectadores) ---- */
.live-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; }
.live-tag { display: inline-flex; align-items: center; gap: 8px; color: #ff7b7b; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); display: inline-block; box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); }
.live-dot.on, body.live-on .live-dot { background: var(--red); animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.live-h { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; color: #ff7b7b; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.live-match { display: block; color: inherit; padding: 18px; border-radius: var(--radius); border: 1px solid rgba(229, 72, 77, 0.55); background: linear-gradient(160deg, rgba(229, 72, 77, 0.16), var(--surface) 55%); box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.2), 0 18px 50px rgba(229, 72, 77, 0.18); }
.live-match:hover { text-decoration: none; }
.lm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lm-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.lm-body .who { text-align: center; display: grid; justify-items: center; gap: 6px; }
.lm-body .who .nm { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.lm-score { font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 1; }
.lm-score .sep { color: var(--gold); font-size: 0.6em; margin: 0 6px; }
.lm-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.live-next-list, .live-results { display: grid; gap: 8px; }
.live-next { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: inherit; border-left: 3px solid var(--border); }
.live-next.st-confirmed { border-left-color: var(--win); }
.live-next.st-proposed, .live-next.st-reschedule_required, .live-next.st-scheduling { border-left-color: var(--warn); }
.live-next:hover { text-decoration: none; background: rgba(255, 255, 255, 0.06); }
.ln-when { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ln-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ln-who i { color: var(--muted); font-style: normal; margin: 0 4px; }
.live-result { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: inherit; }
.live-result:hover { text-decoration: none; background: rgba(255, 255, 255, 0.06); }
.live-result .side { display: flex; align-items: center; gap: 6px; }
.live-result .side.r { justify-content: flex-end; text-align: right; }
.live-result .side.w { color: var(--gold); font-weight: 700; }
.live-result .side.l { color: var(--muted); }
.live-result .sc { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.live-result .rn { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .av-grid { grid-template-columns: 1fr; }
  .av-day { grid-template-columns: 1fr auto; grid-template-areas: "name add" "ranges ranges"; align-items: center; padding: 4px 0; }
  .av-name { grid-area: name; padding-top: 0; }
  .av-add { grid-area: add; }
  .av-ranges { grid-area: ranges; min-height: 0; }
  .av-ranges:empty { display: none; }
  .av-none { font-size: 11px; }
  .agenda li a { grid-template-columns: 1fr; gap: 2px; }
  .nm-vs .who .nm { font-size: 16px; }
  .lm-score { font-size: 44px; }
  .live-grid { grid-template-columns: 1fr; }
  .dl-row label { min-width: 100%; }
  .cwhen { font-size: 24px; }
}

/* ---- Notificaciones ---- */
.bell { position: relative; }
.bell svg { width: 18px; height: 18px; }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; font-family: var(--font-display); letter-spacing: 0.04em; }
.npanel { position: fixed; z-index: 60; right: 16px; top: 64px; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.nhead { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--surface-solid); border-bottom: 1px solid var(--border); }
.nlist { list-style: none; margin: 0; padding: 6px; display: grid; gap: 4px; }
.nlist li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
.nlist li:hover { background: rgba(255, 255, 255, 0.06); }
.nlist li.unread { background: var(--blue-soft); }
.nlist .ni { font-size: 18px; }
.nlist .nt { font-weight: 700; font-size: 14px; }
.nlist .nd { font-size: 13px; color: var(--text-2); }
.nlist .nm { font-size: 11px; color: var(--muted); margin-top: 2px; }
@media (min-width: 901px) { .npanel { left: calc(var(--sidebar-w) + 16px); right: auto; top: auto; bottom: 24px; } }

/* ---- Feed: hora · tipo · mensaje ---- */
.fe { grid-template-columns: 48px 32px 1fr; }
.feed.compact .fe { grid-template-columns: 44px 28px 1fr; }
.fh { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted); letter-spacing: 0.06em; padding-top: 6px; font-variant-numeric: tabular-nums; }
.fk { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; color: var(--text-2); }
.fe.c-predictions .fk, .fe.t-upset .fk { color: #ff7b7b; }
.fe.c-results .fk { color: var(--gold); }
.fe.c-calendar .fk { color: var(--accent-2); }
.fe.c-discord .fk { color: #8db6ff; }
.fday { list-style: none; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 10px 4px 2px; }
.feed-filters { flex-wrap: wrap; }
.todo { margin: 6px 0 10px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(245, 185, 66, 0.45); background: rgba(245, 185, 66, 0.08); }
.todo ul { margin: 6px 0 0; padding-left: 18px; }
.todo li { margin: 3px 0; }
.todo a { color: var(--text); font-weight: 600; }

/* ---- Predicciones ---- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); }
.pp.p1 { border-color: rgba(47, 124, 246, 0.4); } .pp.p2 { border-color: rgba(229, 72, 77, 0.4); }
.pp .nm { font-weight: 700; }
.pp .conf { font-size: 14px; }
.pp .conf b { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.roles-conf { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.roles-conf .role-tag { min-width: auto; font-size: 11px; }
.roles-conf .role-tag b { color: var(--gold); margin-left: 3px; }
.field.slider input[type=range] { width: 100%; accent-color: var(--gold); }
.field.slider label b { color: var(--gold); font-family: var(--font-display); font-size: 18px; margin-left: 6px; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin-top: 8px; }
.pbar { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.pbar .pt { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pbar .pf { display: block; height: 100%; border-radius: 6px; }
.pbar .pf.p1 { background: var(--blue); } .pbar .pf.p2 { background: var(--red); }
.pbar .pv { text-align: right; font-family: var(--font-display); font-weight: 800; }
.upset { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(229, 72, 77, 0.55); background: linear-gradient(160deg, rgba(229, 72, 77, 0.16), rgba(4, 5, 10, 0.4)); }
.ulevel { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.1em; }
.ulevel b { color: var(--gold); font-size: 30px; }
.ubar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); margin: 8px 0; overflow: hidden; }
.ubar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); }
.upset blockquote { margin: 10px 0 6px; font-size: 17px; color: var(--gold-2); font-style: italic; }
@media (max-width: 700px) { .pgrid { grid-template-columns: 1fr; } .pbar { grid-template-columns: 80px 1fr 40px; } .fe { grid-template-columns: 42px 26px 1fr; } }


/* =====================================================================
   Auditoría UX: jerarquía "estado → acción → detalle"
   ===================================================================== */
/* Hero compacto del dashboard: el torneo es contexto, no protagonista */
.banner.compact { min-height: 200px; }
.banner.compact .banner-inner { padding: 34px 28px 22px; }
.banner.compact h1 { font-size: clamp(28px, 4vw, 42px); }

/* Bloque de situación (mismo componente en dashboard, Match Center y coordinación) */
.sit { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); }
.sit .ck { font-size: 14px; }
.sit-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.1; letter-spacing: 0.02em; }
.sit-explain { margin: 0; color: var(--text-2); font-size: 15px; max-width: 60ch; }
.sit-extra { margin: 0; color: var(--warn); font-size: 13px; }
.sit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sit.compact { padding: 14px 16px; gap: 6px; }
.sit.compact .sit-title { font-size: clamp(18px, 2.6vw, 26px); }
.sit.action { border-color: rgba(229, 72, 77, 0.55); background: rgba(229, 72, 77, 0.09); }
.sit.action .ck { color: #ff7b7b; }
.sit.warn { border-color: rgba(245, 185, 66, 0.5); background: rgba(245, 185, 66, 0.08); }
.sit.warn .ck { color: var(--warn); }
.sit.wait { border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.05); }
.sit.wait .ck { color: var(--accent-2); }
.sit.win { border-color: rgba(61, 220, 132, 0.45); background: rgba(61, 220, 132, 0.07); }
.sit.win .ck { color: var(--win); }
.sit.live { border-color: rgba(229, 72, 77, 0.6); background: rgba(229, 72, 77, 0.12); box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.2), 0 10px 40px rgba(229, 72, 77, 0.2); }
.sit.live .ck { color: #ff7b7b; }
.sit.muted { opacity: 0.92; }
.sit.muted .ck { color: var(--muted); }
form.sit { margin: 0; }
.stage-sit { max-width: 720px; margin: 18px auto 0; }
.stage-sit .sit { background: rgba(4, 5, 10, 0.55); backdrop-filter: blur(8px); }
.stage.pre .stage-inner { padding-bottom: 28px; }
.big-vs { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 900; color: var(--muted); letter-spacing: 0.1em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); }

/* Tarjetas de acción / al día */
.card.action { border-color: rgba(229, 72, 77, 0.5); }
.card.win { border-color: rgba(61, 220, 132, 0.4); }
.uptodate { margin-top: 10px; font-size: 13px; color: var(--win); font-weight: 600; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.todo-list .ti { font-size: 18px; }
.next-match .card-title h2 { font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.next-match.action { border-color: rgba(229, 72, 77, 0.55); }
.next-match.warn { border-color: rgba(245, 185, 66, 0.5); }
.next-match.win { border-color: rgba(61, 220, 132, 0.45); }
.next-match.live { border-color: rgba(229, 72, 77, 0.6); }

/* Detalles colapsables como tarjetas */
details.card { padding: 14px 18px; }
details.card > summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 8px; }
details.card > summary::before { content: "▸"; color: var(--gold); transition: transform .2s; }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card > summary h2 { font-size: 16px; margin: 0; }
details > summary { cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
.danger-zone { border-color: rgba(255, 92, 92, 0.35); }
.danger-zone > summary { color: var(--loss); }

/* Pasos chicos (coordinación) */
.stepper.small .step { font-size: 12px; letter-spacing: 0.08em; }
.stepper.small .step .dot { width: 22px; height: 22px; font-size: 11px; }
.warn-text { color: var(--warn); }
.tabs { flex-wrap: wrap; }

/* Predicciones: elección grande + escala */
.choice-group.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice.big { padding: 12px 14px; font-size: 16px; justify-content: center; }
.choice.big:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.mini-list.plain { list-style: none; padding: 0; }
.mini-list.plain li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.mini-list.plain li:last-child { border-bottom: 0; }

@media (max-width: 700px) {
  .sit { padding: 14px; }
  .sit-actions .btn.lg { width: 100%; justify-content: center; }
  .sit-actions { flex-direction: column; }
  .sit-actions .btn { width: 100%; justify-content: center; }
  .choice-group.pick { grid-template-columns: 1fr; }
  .banner.compact { min-height: 160px; }
  .todo-list li { flex-wrap: wrap; }
  .todo-list li .btn { width: 100%; justify-content: center; }
}
.lastresult { margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.lastresult.win { border-color: rgba(61, 220, 132, 0.35); color: var(--win); }
.lastresult a { margin-left: 6px; }
/* Móvil: en el inicio el torneo es contexto; la acción tiene que entrar en la primera pantalla */
@media (max-width: 700px) {
  .banner.compact { min-height: 120px; }
  .banner.compact .banner-inner { padding: 22px 14px 16px; }
  .banner.compact .meta > span:not(:first-child), .banner.compact .actions { display: none; }
  .banner.compact h1 { font-size: 26px; margin: 4px 0; }
}

/* =====================================================================
   Efectos épicos (fx.js). Todo bajo prefers-reduced-motion: no-preference.
   ===================================================================== */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-flash { position: absolute; inset: 0; animation: fxflash var(--ms, 420ms) ease-out forwards; mix-blend-mode: screen; }
@keyframes fxflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.fx-ring { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 3px solid var(--gold); animation: fxring 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fxring { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(22); opacity: 0; border-width: 1px; } }

/* Sello (UPSET / etc.) */
.fx-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fx-stamp span { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 16vw, 200px); letter-spacing: 0.08em; color: var(--gold); border: 6px solid currentColor; padding: 0 0.25em; border-radius: 10px;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.8); background: rgba(4, 5, 10, 0.55); transform: rotate(-8deg); animation: fxstamp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fx-stamp.red span { color: var(--red); }
.fx-stamp.out span { animation: fxstampout 0.35s ease-in forwards; }
@keyframes fxstamp { 0% { transform: rotate(-8deg) scale(4); opacity: 0; filter: blur(12px); } 60% { transform: rotate(-8deg) scale(0.92); opacity: 1; filter: blur(0); } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } }
@keyframes fxstampout { to { transform: rotate(-8deg) scale(1.2); opacity: 0; filter: blur(6px); } }

/* Sacudidas */
.fx-shake { animation: fxshake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.fx-shake-soft { animation: fxshake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; animation-name: fxshakesoft; }
@keyframes fxshake { 10%, 90% { transform: translate3d(-2px, 1px, 0); } 20%, 80% { transform: translate3d(4px, -2px, 0); } 30%, 50%, 70% { transform: translate3d(-8px, 3px, 0); } 40%, 60% { transform: translate3d(8px, -3px, 0); } }
@keyframes fxshakesoft { 20%, 80% { transform: translate3d(2px, -1px, 0); } 40%, 60% { transform: translate3d(-3px, 1px, 0); } }
.fx-shake-el { animation: fxshakeel 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes fxshakeel { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* Contador PP */
.fx-count { display: inline-block; animation: fxpop 0.5s ease; }
.fx-count.up { color: var(--win) !important; text-shadow: 0 0 14px rgba(46, 204, 113, 0.7); }
.fx-count.down { color: var(--loss) !important; text-shadow: 0 0 14px rgba(229, 72, 77, 0.6); }
@keyframes fxpop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Avatar campeón en vivo */
.fx-champion { animation: fxchamp 1.4s ease-in-out infinite; }
.fx-champion .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--gold), 0 0 60px 10px rgba(233, 185, 73, 0.75) !important; }
@keyframes fxchamp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Bienvenida (portal) */
.fx-welcome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: all; background: radial-gradient(circle at var(--x) var(--y), rgba(233, 185, 73, 0.35), rgba(4, 5, 10, 0.98) 40%);
  clip-path: circle(0 at var(--x) var(--y)); animation: fxportal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fx-welcome.out { animation: fxportalout 0.55s ease-in forwards; }
@keyframes fxportal { to { clip-path: circle(150% at var(--x) var(--y)); } }
@keyframes fxportalout { to { opacity: 0; transform: scale(1.06); } }
.fx-w-inner { text-align: center; padding: 0 20px; }
.fx-w-k { font-family: var(--font-display); letter-spacing: 0.4em; color: var(--gold); font-size: clamp(12px, 2vw, 18px); opacity: 0; animation: fxfadeup 0.6s 0.35s ease forwards; }
.fx-w-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 12vw, 150px); line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 10px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(233, 185, 73, 0.35); margin-top: 8px; }
.fx-w-line { width: 0; height: 3px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: fxline 0.9s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fxline { to { width: min(60vw, 520px); } }
@keyframes fxfadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Letras en cascada (login y bienvenida) */
.fx-l { display: inline-block; opacity: 0; transform: translateY(0.6em) scale(1.6); filter: blur(8px); animation: fxletter 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(0.35s + var(--i, 0) * 45ms); }
.fx-l.sp { animation: none; opacity: 1; transform: none; filter: none; }
@keyframes fxletter { to { opacity: 1; transform: none; filter: blur(0); } }
.fx-title { position: relative; }
.fx-title::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 224, 150, 0.35) 50%, transparent 70%); background-size: 250% 100%; mix-blend-mode: screen; animation: fxsweep 1.6s 1.3s ease-out forwards; opacity: 0; }
@keyframes fxsweep { 0% { background-position: 200% 0; opacity: 1; } 100% { background-position: -100% 0; opacity: 0; } }

/* Login: ambiente */
.login-hero { position: relative; }
.login-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: conic-gradient(from 180deg at 30% 40%, rgba(47, 124, 246, 0.16), transparent 30%, rgba(233, 185, 73, 0.14) 55%, transparent 75%, rgba(229, 72, 77, 0.12)); filter: blur(60px); animation: fxaurora 14s ease-in-out infinite alternate; }
@keyframes fxaurora { from { filter: blur(60px) hue-rotate(0deg); opacity: 0.8; } to { filter: blur(70px) hue-rotate(60deg); opacity: 1; } }
.login .glass { animation: fxglassin 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fxglassin { from { opacity: 0; transform: translateX(60px) rotateY(-12deg); } to { opacity: 1; transform: none; } }
.login .glass::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.35), 0 0 40px rgba(233, 185, 73, 0.12); animation: fxglow 3.5s ease-in-out infinite; }
@keyframes fxglow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.login .roles .role-tag { opacity: 0; transform: translateY(14px) scale(0.8); animation: fxpopin 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.login .roles .role-tag:nth-child(1) { animation-delay: 1.1s; } .login .roles .role-tag:nth-child(2) { animation-delay: 1.2s; } .login .roles .role-tag:nth-child(3) { animation-delay: 1.3s; } .login .roles .role-tag:nth-child(4) { animation-delay: 1.4s; } .login .roles .role-tag:nth-child(5) { animation-delay: 1.5s; }
@keyframes fxpopin { 70% { transform: translateY(-3px) scale(1.06); opacity: 1; } to { opacity: 1; transform: none; } }
.login .btn.primary { position: relative; overflow: hidden; }
.login .btn.primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); background-size: 250% 100%; animation: fxsweep 2.6s 2s ease-out infinite; }

/* Login por Discord: CTA principal + salida hacia Discord */
.btn.discord-btn.hero-cta { font-size: 18px; padding: 18px 22px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.5), 0 10px 40px rgba(88, 101, 242, 0.35); animation: fxdsglow 2.8s ease-in-out infinite; }
.btn.discord-btn.hero-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); background-size: 250% 100%; animation: fxsweep 2.6s 1.6s ease-out infinite; }
.btn.discord-btn.hero-cta svg { width: 26px; height: 26px; }
@keyframes fxdsglow { 0%, 100% { box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.5), 0 10px 40px rgba(88, 101, 242, 0.3); } 50% { box-shadow: 0 0 0 1px rgba(139, 149, 255, 0.9), 0 10px 60px rgba(88, 101, 242, 0.65); } }
.alt-login summary { cursor: pointer; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; }
.alt-login[open] summary { margin-bottom: 12px; }
.fx-depart { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; pointer-events: all; background: radial-gradient(circle at var(--x) var(--y), rgba(88, 101, 242, 0.45), rgba(4, 5, 10, 0.98) 45%); clip-path: circle(0 at var(--x) var(--y)); animation: fxportal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fx-depart .fx-w-k { color: #8b95ff; animation-delay: 0.2s; }

/* Versus del Match Center: entrada */
.fx-versus .who:first-child { animation: fxfromleft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fx-versus .who:last-child { animation: fxfromright 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fx-versus .big-vs, .fx-versus .big-score { animation: fxpunch 0.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fxfromleft { from { opacity: 0; transform: translateX(-80px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fxfromright { from { opacity: 0; transform: translateX(80px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fxpunch { 0% { opacity: 0; transform: scale(3.5); filter: blur(10px); } 65% { opacity: 1; transform: scale(0.9); filter: blur(0); } 100% { transform: scale(1); } }
.big-vs { text-shadow: 0 0 30px rgba(255, 255, 255, 0.35), 0 8px 40px rgba(0, 0, 0, 0.8); animation: fxvsbreathe 2.8s ease-in-out infinite; }
@keyframes fxvsbreathe { 0%, 100% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.25), 0 8px 40px rgba(0, 0, 0, 0.8); } 50% { text-shadow: 0 0 46px rgba(233, 185, 73, 0.6), 0 8px 40px rgba(0, 0, 0, 0.8); } }
.stage:not(.pre) .big-score { animation: fxscorepop 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fxscorepop { 0% { transform: scale(1.5); color: var(--gold); } 100% { transform: scale(1); } }

/* Campana */
.fx-bell { animation: fxbell 1s ease both; transform-origin: 50% 0; }
@keyframes fxbell { 0% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } 100% { transform: rotate(0); } }

/* Transición de página */
.fx-page > * { animation: fxpage 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fxpage { from { opacity: 0; transform: translateY(10px) scale(0.995); } to { opacity: 1; transform: none; } }

/* Toast con rebote */
.toast:not([hidden]) { animation: fxtoast 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fxtoast { from { opacity: 0; transform: translate(-50%, 24px) scale(0.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* Bracket: campeón brillante, cruce en juego latiendo, brillo al pasar */
.champ-node.has { animation: fxchampglow 2.4s ease-in-out infinite; }
@keyframes fxchampglow { 0%, 100% { box-shadow: 0 0 0 1px rgba(233, 185, 73, 0.4), 0 0 24px rgba(233, 185, 73, 0.25); } 50% { box-shadow: 0 0 0 1px rgba(233, 185, 73, 0.9), 0 0 60px rgba(233, 185, 73, 0.55); } }
.mnode.st-in_progress, .mcard.st-in_progress { animation: livepulse 1.8s ease-out infinite; }
.mnode, .mcard { position: relative; }
.mnode::after, .mcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); background-size: 250% 100%; background-position: 200% 0; transition: background-position 0.9s ease; }
.mnode:hover::after, .mcard:hover::after { background-position: -100% 0; }

/* Upset: barra con fuego que late */
.upset .ubar span { animation: fxfire 1.2s ease-in-out infinite; }
@keyframes fxfire { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45) saturate(1.3); } }
.upset .ck.live { animation: pulse 1.2s ease-in-out infinite; }

/* Acción necesaria: borde que respira */
.sit.action { animation: fxaction 2.6s ease-in-out infinite; }
@keyframes fxaction { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } 50% { box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18), 0 0 30px rgba(229, 72, 77, 0.25); } }

/* =====================================================================
   Bracket: cascada, avance en vivo y coronación
   ===================================================================== */
.fx-cascade .mnode { animation: fxnodein 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.08s + var(--i, 0) * 70ms); }
.fx-cascade .champ-node { animation: fxnodein 0.7s 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fxnodein { from { opacity: 0; transform: translateX(-26px) scale(0.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.mnode.fx-won { border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold), 0 0 34px rgba(233, 185, 73, 0.55); animation: fxwonglow 1.4s ease-out 2; }
.mnode.fx-won .mrow.won { position: relative; overflow: hidden; }
.mnode.fx-won .mrow.won::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 224, 150, 0.55) 50%, transparent 80%); background-size: 250% 100%; animation: fxsweep 0.9s ease-out 2; }
@keyframes fxwonglow { 0% { box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(233, 185, 73, 0.3); } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 46px rgba(233, 185, 73, 0.8); } 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(233, 185, 73, 0.45); } }
/* Energía viajando por los conectores: salida del nodo ganador → entrada del siguiente */
.mwrap.fx-flow::after { border-top-color: var(--gold); box-shadow: 0 0 14px 2px rgba(233, 185, 73, 0.9); animation: fxflow 0.5s 0.15s ease-in-out both; }
.mwrap.fx-flow-in::before { border-left-color: var(--gold); box-shadow: 0 0 14px 2px rgba(233, 185, 73, 0.9); animation: fxflow 0.5s 0.05s ease-in-out both; }
.mwrap.fx-flow-in .in { border-top-color: var(--gold); box-shadow: 0 0 14px 2px rgba(233, 185, 73, 0.9); animation: fxflow 0.5s 0.35s ease-in-out both; }
@keyframes fxflow { 0% { opacity: 0.4; filter: brightness(0.8); } 50% { opacity: 1; filter: brightness(2); } 100% { opacity: 1; filter: brightness(1.2); } }
.mnode.fx-land-node { border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold), 0 0 40px rgba(233, 185, 73, 0.6); }
.mrow.fx-land { animation: fxland 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; background: linear-gradient(90deg, var(--gold-soft), transparent); }
.mrow.fx-land .nm { color: var(--gold); text-shadow: 0 0 18px rgba(233, 185, 73, 0.8); }
@keyframes fxland { 0% { transform: scale(1.35) translateX(-14px); filter: blur(6px); opacity: 0; } 60% { transform: scale(0.97); filter: blur(0); opacity: 1; } 100% { transform: none; } }
.champ-node.fx-crown { animation: fxcrown 1s cubic-bezier(0.16, 1, 0.3, 1) both, fxchampglow 2.4s 1s ease-in-out infinite; }
.champ-node.fx-crown::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, rgba(233, 185, 73, 0) 0 8%, rgba(233, 185, 73, 0.35) 12%, rgba(233, 185, 73, 0) 16%, rgba(233, 185, 73, 0) 33%, rgba(233, 185, 73, 0.35) 37%, rgba(233, 185, 73, 0) 41%, rgba(233, 185, 73, 0) 58%, rgba(233, 185, 73, 0.35) 62%, rgba(233, 185, 73, 0) 66%, rgba(233, 185, 73, 0) 83%, rgba(233, 185, 73, 0.35) 87%, rgba(233, 185, 73, 0) 91%); animation: fxrays 12s linear infinite; pointer-events: none; }
.champ-node { position: relative; }
@keyframes fxcrown { 0% { transform: scale(0.6); opacity: 0; filter: blur(10px); } 60% { transform: scale(1.08); opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
@keyframes fxrays { to { transform: rotate(360deg); } }
.bracket-wrap { overflow: hidden; }

/* Coordinación: horario confirmado en vivo · partida en juego */
.sit.fx-confirmed { animation: fxconfirm 1.2s ease-out both; }
.sit.fx-confirmed .ck { animation: fxpop 0.6s 0.2s ease both; }
@keyframes fxconfirm { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 100% { box-shadow: 0 0 0 26px rgba(46, 204, 113, 0); } }
.steps .step.done, .coord-steps .step.done { animation: fxpop 0.5s ease both; }

/* Predicciones: cuotas que cambian, cierre del mercado */
.odds-v.fx-flip { display: inline-block; animation: fxflip 0.6s ease both; color: var(--gold); }
@keyframes fxflip { 0% { transform: rotateX(90deg); opacity: 0; } 60% { transform: rotateX(-15deg); opacity: 1; } 100% { transform: none; } }
.fx-stamp.sm span { font-size: clamp(28px, 6vw, 64px); border-width: 3px; }

/* Notificaciones: entrada escalonada */
.nlist li { animation: fxfadeup 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nlist li:nth-child(1) { animation-delay: 0.02s; } .nlist li:nth-child(2) { animation-delay: 0.07s; } .nlist li:nth-child(3) { animation-delay: 0.12s; } .nlist li:nth-child(4) { animation-delay: 0.17s; }
.nlist li:nth-child(5) { animation-delay: 0.22s; } .nlist li:nth-child(6) { animation-delay: 0.27s; } .nlist li:nth-child(7) { animation-delay: 0.32s; } .nlist li:nth-child(n+8) { animation-delay: 0.36s; }

/* Banners: la imagen entra con zoom lento; el título con barrido */
.banner-img { animation: fxbanner 12s ease-out both; }
@keyframes fxbanner { from { transform: scale(1.12); } to { transform: scale(1); } }
.banner h1 { position: relative; }
.banner-inner.in h1::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 224, 150, 0.35) 50%, transparent 70%); background-size: 250% 100%; mix-blend-mode: screen; animation: fxsweep 1.4s 0.5s ease-out forwards; opacity: 0; }

/* Hall of Fame: trofeo del último campeón con rayos */
.champion-box { position: relative; }
.champion-box .avatar { animation: fxchamp 2.2s ease-in-out infinite; }
.champion-box::before { content: ''; position: absolute; left: 0; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -30px; border-radius: 50%; z-index: -1; background: conic-gradient(from 0deg, rgba(233, 185, 73, 0) 0 10%, rgba(233, 185, 73, 0.4) 15%, rgba(233, 185, 73, 0) 20%, rgba(233, 185, 73, 0) 45%, rgba(233, 185, 73, 0.4) 50%, rgba(233, 185, 73, 0) 55%, rgba(233, 185, 73, 0) 80%, rgba(233, 185, 73, 0.4) 85%, rgba(233, 185, 73, 0) 90%); filter: blur(6px); animation: fxrays 14s linear infinite; pointer-events: none; }

/* Tarjetas de cruce (lista) que terminan en vivo */
.mcard.fx-won { border-color: var(--gold) !important; animation: fxwonglow 1.4s ease-out 2; }

@media (prefers-reduced-motion: reduce) {
  .fx-cascade .mnode, .fx-cascade .champ-node, .mnode.fx-won, .mnode.fx-won .mrow.won::after, .mwrap.fx-flow::after, .mwrap.fx-flow-in::before, .mwrap.fx-flow-in .in, .mrow.fx-land, .champ-node.fx-crown, .champ-node.fx-crown::before,
  .sit.fx-confirmed, .sit.fx-confirmed .ck, .steps .step.done, .coord-steps .step.done, .odds-v.fx-flip, .nlist li, .banner-img, .banner-inner.in h1::after, .champion-box .avatar, .champion-box::before, .mcard.fx-won { animation: none !important; }
}

/* Countdown urgente (menos de 10 min) */
[data-countdown].urgent { animation: fxurgent 1s ease-in-out infinite; color: var(--red); }
@keyframes fxurgent { 0%, 100% { text-shadow: 0 0 0 rgba(229, 72, 77, 0); } 50% { text-shadow: 0 0 18px rgba(229, 72, 77, 0.9); } }

@media (prefers-reduced-motion: reduce) {
  .fx-layer { display: none; }
  .btn.discord-btn.hero-cta, .btn.discord-btn.hero-cta::after, .sit.action, .login .glass, .login .roles .role-tag, .fx-versus .who, .fx-versus .big-vs, .fx-versus .big-score, .big-vs, .fx-page > *, .toast, .champ-node.has, .mnode.st-in_progress, .mcard.st-in_progress, .upset .ubar span, [data-countdown].urgent, .login-hero::before, .login .btn.primary::after, .login .glass::before { animation: none !important; }
  .login .roles .role-tag { opacity: 1; transform: none; }
}