body {
  background: #070709;
  --txt2: #9ca3bd;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(56,214,255,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(6,182,212,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 90%, rgba(56,214,255,.1) 0%, transparent 50%),
    #070709;
}

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sec-title,
.hero-title,
.prize-clan,
.ptb-amt {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.sec-eyebrow,
.hero-eyebrow,
.tag-sec {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .22em !important;
}

body {
  --r-card: 20px; --r-btn: 13px; --r-pill: 999px;
  --glass-bg: rgba(22,22,28,.52);
  --glass-brd: rgba(255,255,255,.10);

  --clay-sh: 0 16px 38px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.13), inset 0 -10px 20px rgba(0,0,0,.30);
  --clay-sh-sm: 0 8px 20px rgba(0,0,0,.40),
             inset 0 1px 0 rgba(255,255,255,.12), inset 0 -4px 10px rgba(0,0,0,.22);
}

.mec-card, .prize-card, .rule-card, .vote-form, .vote-results,
.r-card, .date-item, .clan-acc-item, .pub-tbl-wrap,
.insc-discord-card, .ph-box, .stat-item {
  border-radius: var(--r-card) !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--clay-sh);
  clip-path: none !important;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}

.prize-total-box, .insc-warning, .ibox, .wbox, .ebox, .flash,
.round-info, .rule-card-hd, .cab-discord, .cab-stat, .cab-round-result,
.cab-role-row, .vote-opt, .bq-yes, .bq-no, .hero-ip {
  border-radius: var(--r-btn) !important;
}

.twitch-btn, .nav-twitch, .nav-admin, .insc-btn, .vote-btn, .fix-tab,
.nav-links a, .cd-block,
input[type="text"], input[type="password"], select, textarea {
  border-radius: var(--r-btn) !important;
}
.twitch-btn, .nav-twitch, .nav-admin, .insc-btn, .vote-btn {
  box-shadow: var(--clay-sh-sm);
}

.tag, .pts-chip, .st-bdg, .rnk-badge, .pb, .hero-eyebrow, .sec-eyebrow,
.clan-acc-tag, .cab-role-badge, .date-status, .vbar-bg, .vbar-fill {
  border-radius: var(--r-pill) !important;
}

.mc-ico {
  image-rendering: pixelated; image-rendering: crisp-edges;
  vertical-align: middle; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.mec-icon .mc-ico   { width: 40px; height: 40px; }
.ph-icon .mc-ico    { width: 30px; height: 30px; }
.insc-icon .mc-ico  { width: 22px; height: 22px; filter: none; }
.prize-medal .mc-ico{ width: 42px; height: 42px; }
.rule-card-hd .mc-ico { width: 22px; height: 22px; }

.emoji-ico {
  display: inline-block; width: 1.15em; height: 1.15em;
  vertical-align: -0.24em; margin-right: .12em;
  image-rendering: pixelated; image-rendering: crisp-edges; object-fit: contain;
}
.nav-links a .emoji-ico, .nav-admin .emoji-ico { width: 15px; height: 15px; vertical-align: -3px; }
.sec-eyebrow .emoji-ico, .hero-eyebrow .emoji-ico { width: 1.25em; height: 1.25em; margin-right: .3em; vertical-align: -.28em; }
.tag .emoji-ico { width: 13px; height: 13px; vertical-align: -2px; }
.st-bdg .emoji-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: .4em; }

html::after {
  content: ''; position: fixed; inset: 0; z-index: 998; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity: .28;
}

.hero-title { text-shadow: 0 0 26px rgba(56,214,255,.55), 0 6px 40px rgba(0,0,0,.6); }
.sec-title span  { filter: drop-shadow(0 0 10px rgba(56,214,255,.45)); }

.cd-block {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-color: rgba(56,214,255,.35);
  box-shadow: var(--clay-sh-sm), 0 0 22px rgba(56,214,255,.14);
}
.cd-num   { text-shadow: 0 0 16px rgba(56,214,255,.55); }
.cd-sep   { text-shadow: 0 0 14px rgba(56,214,255,.6); }

.hero-ip { box-shadow: 0 0 22px rgba(56,214,255,.1); }
.hero-ip-addr { text-shadow: 0 0 12px rgba(56,214,255,.45); }

section.pub-sec { border-top: 1px solid rgba(56,214,255,.07); }

.mec-card:hover, .prize-card:hover, .rule-card:hover,
.r-card:hover, .date-item:hover, .clan-acc-item:hover,
.vote-form:hover, .vote-results:hover {
  box-shadow: var(--clay-sh), 0 0 30px rgba(56,214,255,.18);
  transform: translateY(-3px);
}

.fix-tab.on::after { box-shadow: 0 0 10px rgba(56,214,255,.7); }
.rh-sq.sq1 { box-shadow: 0 0 8px rgba(245,158,11,.6); }
.clan-row-pub.is-win { box-shadow: inset 2px 0 12px rgba(245,158,11,.12); }

.rv {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1);
  transition-delay: var(--rvd, 0s);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }

.mec-card, .prize-card, .rule-card, .date-item, .pl-item, .ph-box,
.clan-acc-item, .insc-discord-card, .cab-stat {
  transition: transform .22s cubic-bezier(.22,.8,.3,1), border-color .22s, box-shadow .22s;
}
.mec-card .mc-ico, .ph-icon .mc-ico, .prize-medal .mc-ico {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mec-card:hover .mc-ico  { transform: scale(1.18) rotate(-6deg); }
.ph-box:hover            { transform: translateY(-3px); border-color: var(--border2); }
.ph-box:hover .mc-ico    { transform: scale(1.15); }
.prize-card:hover .mc-ico{ transform: scale(1.18) rotate(8deg); }
.pl-item:hover           { transform: translateY(-2px); border-color: var(--border2); }
.date-item:hover         { transform: translateX(4px); }
.cab-stat:hover          { transform: translateY(-2px); border-color: var(--border2); }
.insc-discord-card:hover { transform: translateY(-3px); }

.mec-card::before { transform: scaleX(.35); transform-origin: left; transition: transform .3s cubic-bezier(.22,.8,.3,1); }
.mec-card:hover::before { transform: scaleX(1); }

.hero-btn:active, .vote-btn:active, .fix-tab:active, .insc-btn:active,
.twitch-btn:active, .nav-toggle:active, .lang-btn:active, .lang-item:active,
.nav-admin:active, .vote-opt:active, .clan-acc-trigger:active, .hero-ip:active {
  transform: scale(.965);
  transition-duration: .06s;
}
.hero-ip { transition: border-color .15s, background .15s, transform .12s; }

@keyframes ipPop { 0% { transform: scale(1); } 35% { transform: scale(1.045); } 100% { transform: scale(1); } }
.hero-ip.copied { animation: ipPop .3s ease; }

.fix-panel.on { animation: panelIn .32s cubic-bezier(.22,.8,.3,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.clan-row-pub { transition: background .15s, border-color .15s, color .15s, transform .15s; }
.clan-row-pub:hover { transform: translateX(3px); }

.pub-st tbody tr { transition: background .15s; }
.pub-st tbody tr:hover td:nth-child(2) { color: var(--cyan2); }

.vbar-fill { transition: width .8s cubic-bezier(.22,.8,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .fix-panel.on { animation: none; }
  .hero-ip.copied { animation: none; }
}

.nav-toggle, .lang-btn { box-shadow: 0 0 16px rgba(56,214,255,.1); }
.nav-toggle:hover, .lang-btn:hover { box-shadow: 0 0 22px rgba(56,214,255,.3); }
#topnav.open { box-shadow: 0 0 60px rgba(0,0,0,.6), 2px 0 24px rgba(56,214,255,.12); }
.nav-links a.active { color: var(--cyan2); background: rgba(30,167,225,.1); box-shadow: inset 0 0 0 1px rgba(56,214,255,.28); }
.nav-links a.active .emoji-ico { filter: drop-shadow(0 0 5px rgba(56,214,255,.7)); }

.nav-toggle {
  position: fixed; top: 16px; left: 16px; z-index: 1002;
  width: 46px; height: 46px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(20,20,26,.94); border: 1px solid var(--border2); border-radius: 3px;
  cursor: pointer; transition: border-color .18s, background .18s;
}
.nav-toggle:hover { border-color: var(--cyan2); background: rgba(22,13,52,.98); }
.nav-toggle span {
  display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: #fff; transition: transform .25s, opacity .2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(5,5,7,.66);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

#topnav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
  width: 264px; max-width: 84vw; height: 100%;
  background: #0b0b10;
  border-right: 1px solid var(--border2);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
}
#topnav.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.6); }
.nav-inner {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 80px 16px 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0; margin: 0 0 10px; padding: 0 4px;
}
.nav-logo img {
  width: 34px; height: 34px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(56,214,255,.65));
}
.nav-logo-text { font-size: 13px; font-weight: 800; color: #fff; }
.nav-logo-text em { font-style: normal; color: var(--pur3); }
.nav-links {
  display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
}
.nav-links a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; color: var(--txt2);
  text-decoration: none; font-size: 14px; font-weight: 600;
  border-radius: 3px; white-space: nowrap; transition: color .12s, background .12s, box-shadow .12s;
}
.nav-links a:hover  { color: #fff; background: rgba(56,214,255,.15); }
.nav-links a.active { color: var(--pur3); background: rgba(56,214,255,.12); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.nav-twitch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; background: rgba(145,70,255,.22);
  border: 1px solid rgba(145,70,255,.55); border-radius: 6px;
  color: #c9b3ff; text-decoration: none; font-size: 12px; font-weight: 700;
  transition: all .15s; white-space: nowrap;
}
.nav-twitch:hover { background: rgba(145,70,255,.4); color: #fff; }
.nav-twitch .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.nav-admin {
  padding: 7px 13px; background: rgba(56,214,255,.18);
  border: 1px solid var(--border2); border-radius: 6px;
  color: var(--pur3); text-decoration: none;
  font-size: 11px; font-weight: 700; transition: all .15s; white-space: nowrap;
}
.nav-admin:hover { background: rgba(56,214,255,.3); color: #fff; }

.lang-switch { position: fixed; top: 16px; right: 16px; left: auto; z-index: 1002; }
.lang-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border-radius: 3px;
  background: rgba(20,20,26,.94); border: 1px solid var(--border2);
  cursor: pointer; transition: border-color .18s, background .18s;
}
.lang-btn:hover { border-color: var(--cyan2); background: rgba(22,13,52,.98); }
.lang-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.lang-btn .lang-flag { width: 24px; height: 24px; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 600;
  min-width: 172px; padding: 6px;
  background: #101017;
  border: 1px solid var(--border2); border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  display: none; flex-direction: column; gap: 2px;
}
.lang-switch.open .lang-menu { display: flex; animation: fadeDown .18s ease both; }
.lang-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 2px; border: 0; background: transparent;
  color: var(--txt2); cursor: pointer; transition: all .12s;
  font-family: var(--font); font-size: 13px; font-weight: 700; text-align: left; width: 100%;
}
.lang-item:hover { background: rgba(56,214,255,.16); color: #fff; }
.lang-item.on { color: var(--cyan2); background: rgba(30,167,225,.1); }

#hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; text-align: center;
  padding: 52px 24px 36px; overflow: hidden;
  background: #070709;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}

.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: saturate(1.05) contrast(1.05) brightness(.85);
}

.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,6,9,.72) 0%, rgba(6,6,9,.55) 40%, rgba(6,6,9,.92) 100%),
    radial-gradient(ellipse at 50% 38%, rgba(56,214,255,.35) 0%, transparent 60%);
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%,  rgba(56,214,255,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(6,182,212,.12) 0%, transparent 45%);
}

#hero > *:not(.hero-bg) { position: relative; z-index: 2; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(56,214,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,214,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 25%, transparent 72%);
}
.particle {
  position: absolute; border-radius: 50%;
  animation: float linear infinite; pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(56,214,255,.18); border: 1px solid var(--border2);
  border-radius: 20px; padding: 6px 18px;
  font-size: 12px; font-weight: 700; color: var(--pur3);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px;
  animation: fadeDown .55s ease both;
}
.hero-logo {
  width: 150px; height: 150px; object-fit: contain;
  filter: drop-shadow(0 0 34px rgba(56,214,255,.8)) drop-shadow(0 0 70px rgba(6,182,212,.35));
  margin-bottom: 10px;
  animation: fadeDown .55s .1s ease both;
}
@media (max-width: 640px) { .hero-logo { width: 120px; height: 120px; } }
.hero-title {
  font-size: clamp(38px, 8.5vw, 96px); line-height: .92;
  letter-spacing: .01em;
  margin-bottom: 10px; animation: fadeDown .55s .2s ease both;
  text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.hero-title-grad {
  display: block;
  background: linear-gradient(100deg, var(--cyan2) 0%, var(--pur3) 30%, var(--pink2) 62%, var(--lime2) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(56,214,255,.4)) drop-shadow(0 0 30px rgba(56,214,255,.25)) drop-shadow(0 4px 26px rgba(56,214,255,.5));
  animation: heroSheen 7s linear infinite;
}
@keyframes heroSheen { to { background-position: 200% center; } }
.hero-sub {
  font-size: clamp(13px, 2vw, 18px); color: var(--txt2);
  margin-bottom: 18px; font-weight: 500; max-width: 560px;
  animation: fadeDown .55s .3s ease both;
}
.hero-annihilation {
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan2);
  margin-top: -8px;
  margin-bottom: 16px;
  opacity: .8;
  animation: fadeDown .55s .28s ease both;
}
.hero-prize {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.06));
  border: 2px solid var(--gold); border-radius: 8px;
  padding: 13px 28px; font-size: clamp(14px, 2.5vw, 20px); font-weight: 900;
  color: var(--gold); letter-spacing: .04em; margin-bottom: 18px;
  animation: fadeDown .55s .4s ease both;
  box-shadow: 0 0 40px rgba(245,158,11,.12);
}
.hero-cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  animation: fadeDown .55s .5s ease both;
}
.hero-btn {
  position: relative; overflow: hidden;
  padding: 15px 30px;
  font-family: var(--display); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  transition: transform .18s, box-shadow .18s, color .18s, border-color .18s;
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: var(--r-btn); border: 0;
}

.hero-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .5s;
}
.hero-btn:hover::after { transform: translateX(120%); }
.hb-purple {
  background: linear-gradient(120deg, var(--blue), var(--pur2) 55%, var(--pink));
  color: #fff; box-shadow: 0 0 22px rgba(56,214,255,.35), 0 6px 22px rgba(56,214,255,.3);
}
.hb-purple:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(56,214,255,.4); }
.hb-outline {
  background: rgba(255,255,255,.04); color: var(--cyan2);
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 18px rgba(30,167,225,.2);
}
.hb-outline:hover { transform: translateY(-3px); color: #fff; box-shadow: inset 0 0 0 2px var(--cyan2), 0 10px 26px rgba(30,167,225,.3); }
.hb-twitch {
  background: #9146ff; color: #fff;
  box-shadow: 0 0 22px rgba(145,70,255,.4), 0 6px 22px rgba(145,70,255,.35);
}
.hb-twitch:hover { transform: translateY(-3px); background: #772ce8; box-shadow: 0 12px 30px rgba(145,70,255,.5); }

.countdown {
  display: flex; gap: 14px; justify-content: center; margin-top: 22px;
  flex-wrap: wrap; animation: fadeDown .55s .6s ease both;
}
.cd-block {
  background: rgba(20,20,26,.82); border: 1px solid var(--border2);
  border-radius: 6px; padding: 16px 8px; text-align: center;
  width: 96px; box-sizing: border-box;
}
.cd-num {
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 50px); color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  display: block; width: 100%;
}
.cd-lbl { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--pur3); letter-spacing: .2em; text-transform: uppercase; margin-top: 4px; }
.cd-sep { font-family: var(--display); font-size: 34px; color: var(--pur2); align-self: center; padding-top: 4px; }

.cd-live {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 16px 32px; border-radius: 4px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.5);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(16px, 3vw, 24px); letter-spacing: .06em; color: #fff;
  animation: livePulse 1.8s ease-in-out infinite;
}
.cd-live-dot {
  width: 13px; height: 13px; border-radius: 50%; background: var(--red); flex-shrink: 0;
  box-shadow: 0 0 12px var(--red); animation: pulse 1.1s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(239,68,68,.2); }
  50%      { box-shadow: 0 0 40px rgba(239,68,68,.42); }
}

.hero-ip {
  display: inline-flex; align-items: center; gap: 11px;
  margin-bottom: 16px; padding: 8px 10px 8px 10px;
  background: rgba(20,20,26,.78); border: 1px solid var(--border2); border-radius: 2px;
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s, transform .15s;
  animation: fadeDown .55s .45s ease both;
}
.hero-ip:hover { border-color: var(--cyan2); background: rgba(20,20,26,.85); transform: translateY(-1px); }
.hero-ip-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--cyan2); background: rgba(30,167,225,.14); padding: 4px 9px; border-radius: 2px;
}
.hero-ip-addr { font-family: var(--mono); font-size: clamp(14px,2vw,17px); font-weight: 700; color: #fff; letter-spacing: .02em; }
.hero-ip-hint {
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--txt3);
  text-transform: uppercase; letter-spacing: .12em;
  border-left: 1px solid var(--border); padding-left: 11px; white-space: nowrap;
}
.hero-ip-block { width: 30px; height: 30px; }
.hero-ip-main { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.hero-ip-row { display: flex; align-items: center; gap: 9px; }
.hero-ip-ver {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--cyan2); letter-spacing: .05em; text-transform: uppercase;
}
.hero-ip.copied { border-color: var(--lime2); }
.hero-ip.copied .hero-ip-hint { color: var(--lime2); }
.hero-tagline {
  font-family: var(--mono); font-size: 12px; font-weight: 600; font-style: italic;
  color: var(--txt2); letter-spacing: .04em; margin: 0 0 16px;
  animation: fadeDown .55s .5s ease both;
}
@media (max-width: 480px) { .hero-ip-hint { display: none; } }

#twitch-banner {
  background: linear-gradient(135deg, #08080c 0%, #17111f 50%, #08080c 100%);
  border-top: 1px solid rgba(145,70,255,.35);
  border-bottom: 1px solid rgba(145,70,255,.35);
  padding: 20px 24px;
}
.twitch-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.twitch-info { text-align: center; }
.twitch-info h3 { font-size: 18px; font-weight: 800; color: #b18cff; margin-bottom: 4px; }
.twitch-info p  { font-size: 13px; color: var(--txt2); }
.twitch-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 8px;
  background: #9146ff; border: 2px solid #a970ff;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  transition: all .2s; white-space: nowrap;
}
.twitch-btn:hover { background: #772ce8; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(145,70,255,.45); }
.twitch-icon { font-size: 20px; }

body { counter-reset: secn; }
section.pub-sec { padding: 90px 24px; position: relative; counter-increment: secn; }
.sec-inner { max-width: 1160px; margin: 0 auto; }
.sec-header {
  margin-bottom: 44px; position: relative;
  padding-left: 22px;
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--cyan2), var(--pur2) 50%, var(--pink2)) 1;
}
.sec-eyebrow {
  display: inline-flex; align-items: center; margin-bottom: 14px;
  text-transform: uppercase;
}

.sec-header::before {
  content: counter(secn, decimal-leading-zero);
  position: absolute; left: -3px; top: -46px;
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 86px);
  line-height: .8; color: rgba(56,214,255,.12);
  pointer-events: none; z-index: 0;
}
.sec-title {
  position: relative; z-index: 1;
  font-size: clamp(30px, 6vw, 64px);
  color: #fff; line-height: .98; margin-bottom: 14px;
}
.sec-title span {
  background: linear-gradient(100deg, var(--cyan2) 0%, var(--pur3) 45%, var(--pink2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sec-sub { font-size: 15px; color: var(--txt2); max-width: 560px; line-height: 1.7; }

.pub-sec.has-vid { background: transparent; }
.sec-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  opacity: .24; filter: grayscale(.2) brightness(.78) saturate(1.1);
}
.pub-sec.has-vid::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,6,9,.74) 0%, rgba(6,6,9,.66) 50%, rgba(6,6,9,.8) 100%);
}
.pub-sec.has-vid .sec-inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .sec-bg-video { display: none; } }

#mecanica { background: var(--bg2); }
.mec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.mec-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 24px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s;
}
.mec-card:hover { transform: translateY(-4px); border-color: var(--border2); }
.mec-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pur2), var(--cyan));
}
.mec-icon   { font-size: 30px; margin-bottom: 12px; }
.mec-title  { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.mec-desc   { font-size: 13px; color: var(--txt2); line-height: 1.65; }
.pts-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.pl-item {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 7px; padding: 10px 16px;
  flex: 1; min-width: 120px;
}
.pl-pos { width: 32px; height: 32px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.pp1{background:var(--gold);color:#1a1000} .pp2{background:#38bdf8;color:#001a26}
.pp3{background:var(--pur3);color:#1a0026} .pp4{background:var(--red);color:#fff}
.pl-pts  { font-size: 18px; font-weight: 900; color: #fff; line-height: 1; }
.pl-lbl  { font-size: 11px; color: var(--txt3); font-weight: 600; }
.phase-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 28px; justify-content: center; }
.ph-box {
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 20px; text-align: center; flex: 1; min-width: 110px; max-width: 180px;
}
.ph-box.final { border-color: rgba(245,158,11,.45); }
.ph-icon { font-size: 22px; margin-bottom: 6px; }
.ph-name { font-size: 13px; font-weight: 800; color: #fff; }
.ph-sub  { font-size: 11px; color: var(--txt3); margin-top: 2px; }
.ph-arr  { font-size: 22px; color: var(--pur2); padding: 0 6px; flex-shrink: 0; }

#fechas { background: var(--bg3); }
.dates-list { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.date-item {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .15s;
}
.date-item:hover { border-color: var(--border2); }
.date-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.date-name  { font-size: 14px; font-weight: 800; color: #fff; }
.date-when  { font-size: 12px; color: var(--pur3); font-weight: 700; margin-top: 2px; }
.date-desc  { font-size: 12px; color: var(--txt2); margin-top: 3px; }
.date-status {
  font-size: 10px; font-weight: 700; padding: 4px 10px;
  border-radius: 4px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; white-space: nowrap;
}
.ds-upcoming { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: var(--gold); }
.ds-live     { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.35); color: #f87171; animation: pulse 1.5s ease-in-out infinite; }
.ds-done     { background: rgba(34,197,94,.1);   border: 1px solid rgba(34,197,94,.25); color: var(--green); }

#fixture { background: var(--bg); }
.fix-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.fix-tab {
  position: relative;
  padding: 12px 22px; font-family: var(--display); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border: 0; background: transparent; color: var(--txt2);
  cursor: pointer; transition: color .15s;
}
.fix-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--cyan2), var(--pink2)); transform: scaleX(0);
  transition: transform .2s; transform-origin: left;
}
.fix-tab.on    { color: #fff; }
.fix-tab.on::after { transform: scaleX(1); }
.fix-tab:hover:not(.on) { color: var(--cyan2); }
.fix-panel { display: none; }
.fix-panel.on  { display: block; animation: fadeIn .2s ease; }
.round-info {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 20px; margin-bottom: 18px; font-size: 13px; color: var(--txt2); line-height: 1.7;
}
.round-info strong { color: var(--pur3); }
.round-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.r-card      {
  background: linear-gradient(180deg, rgba(24,24,30,.9), rgba(16,16,20,.95));
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.r-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.r-card-hd   {
  padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rh-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.r-hd-name   { font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.r-hd-sub    { font-family: var(--mono); font-size: 10px; opacity: .7; font-weight: 600; white-space: nowrap; letter-spacing: .08em; text-transform: uppercase; }

.rh-squares { display: flex; gap: 3px; flex-shrink: 0; }
.rh-sq { width: 16px; height: 9px; border-radius: 1px; background: rgba(255,255,255,.13); }
.rh-sq.sq1 { background: var(--gold);  box-shadow: 0 0 6px rgba(245,158,11,.5); }
.rh-sq.sq2 { background: #38bdf8; }
.rh-sq.sq3 { background: var(--pur3); }
.rh-sq.sq4 { background: var(--red); }
.r-body      { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.clan-row-pub {
  display: flex; align-items: center; gap: 11px; padding: 10px 10px 10px 12px;
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-radius: 2px; font-size: 14px; font-weight: 700; color: var(--txt2);
  transition: background .15s, border-color .15s, color .15s;
}
.clan-row-pub .crp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crp-score {
  flex-shrink: 0; min-width: 30px; text-align: center;
  padding: 4px 8px; border-radius: 2px;
  font-family: var(--display); font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,.07); color: var(--txt2);
}
.crp-score.pb1 { background: var(--gold);  color: #1a1000; }
.crp-score.pb2 { background: #38bdf8;      color: #001a26; }
.crp-score.pb3 { background: var(--pur3);  color: #1a0026; }
.crp-score.pb4 { background: rgba(239,68,68,.85); color: #fff; }
.clan-row-pub:nth-child(odd) { background: rgba(255,255,255,.022); }
.clan-row-pub:hover { background: rgba(56,214,255,.1); color: #fff; }

.clan-row-pub.is-win {
  background: rgba(245,158,11,.08); border-left-color: var(--gold); color: #fff;
}
.clan-row-pub.is-win .crp-name { font-weight: 800; }
.clan-row-pub:last-child { margin-bottom: 0; }
.bq-yes { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: #86efac; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; margin-left:auto; flex-shrink:0; }
.bq-no  { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25); color:#f87171; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; margin-left:auto; flex-shrink:0; }
.fix-empty { text-align: center; padding: 48px 24px; color: var(--txt3); font-size: 13px; }
.fix-empty .icon { font-size: 36px; margin-bottom: 10px; display: block; }

#votacion { background: var(--bg2); }
.vote-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.vote-form, .vote-results {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px;
}
.vote-head  { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.vote-sub   { font-size: 13px; color: var(--txt2); margin-bottom: 18px; }
.vote-list  {
  display: flex; flex-direction: column; gap: 8px; max-height: 380px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pur) transparent; padding-right: 4px;
}
.vote-opt {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.03); transition: all .15s;
  font-size: 14px; font-weight: 700; color: #fff;
}
.vote-opt:hover:not(.voted-for):not(.has-voted) { border-color: var(--pur2); background: rgba(56,214,255,.1); }
.vote-opt.voted-for { border-color: var(--green); background: rgba(34,197,94,.08); color: var(--green); }
.vote-opt input[type="radio"] { accent-color: var(--pur2); width: 16px; height: 16px; flex-shrink: 0; }
.vote-btn {
  width: 100%; margin-top: 16px; padding: 13px;
  border-radius: 7px; font-family: var(--font); font-size: 14px; font-weight: 800;
  background: var(--pur); border: 2px solid var(--pur2); color: #fff;
  cursor: pointer; transition: all .15s; letter-spacing: .04em;
}
.vote-btn:hover:not(:disabled) { background: var(--pur2); transform: translateY(-1px); }
.vote-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.vote-note { font-size: 11px; color: var(--txt3); text-align: center; margin-top: 8px; }
.vr-title  { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.vr-total  { font-size: 12px; color: var(--txt3); margin-bottom: 18px; }
.vbar-row  { margin-bottom: 12px; }
.vbar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.vbar-name { font-size: 13px; font-weight: 700; color: #fff; }
.vbar-pct  { font-size: 12px; font-weight: 700; color: var(--pur3); }
.vbar-bg   { height: 8px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.vbar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pur2), var(--cyan)); transition: width .6s cubic-bezier(.4,0,.2,1); }
.vbar-fill.top { background: linear-gradient(90deg, var(--gold2), var(--gold)); }
.no-votes  { text-align: center; padding: 40px 0; color: var(--txt3); font-size: 13px; }

#premios { background: var(--bg); }
.prizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.prize-card {
  border-radius: var(--r); padding: 28px; position: relative; overflow: hidden;
  border: 2px solid transparent; transition: transform .2s;
}
.prize-card:hover { transform: translateY(-5px); }
.prize-card.p1 { background: linear-gradient(145deg, #1c1200, #2a1c00, #1a1200); border-color: var(--gold); }
.prize-card.p2 { background: linear-gradient(145deg, #090f18, #0d1724, #090f18); border-color: #64748b; }
.prize-card.p3 { background: linear-gradient(145deg, #130a00, #1e1000, #130a00); border-color: #b45309; }
.prize-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.prize-card.p1::before { background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold)); }
.prize-card.p2::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8); }
.prize-card.p3::before { background: linear-gradient(90deg, #b45309, #f97316, #b45309); }
.prize-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.prize-medal { font-size: 40px; }
.prize-pos-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.prize-card.p1 .prize-pos-lbl { color: var(--gold); }
.prize-card.p2 .prize-pos-lbl { color: #94a3b8; }
.prize-card.p3 .prize-pos-lbl { color: #f97316; }
.prize-clan { font-size: 22px; font-weight: 900; color: #fff; }
.prize-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.prize-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--txt2); line-height: 1.5;
}
.prize-list li::before {
  content: '▸'; flex-shrink: 0; margin-top: 1px; font-size: 11px;
}
.prize-card.p1 .prize-list li::before { color: var(--gold); }
.prize-card.p2 .prize-list li::before { color: #94a3b8; }
.prize-card.p3 .prize-list li::before { color: #f97316; }
.prize-list li strong { color: #fff; font-weight: 700; }
.prize-total-box {
  margin-top: 28px; text-align: center; padding: 22px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
}
.ptb-lbl { font-size: 13px; color: var(--txt2); margin-bottom: 4px; }
.ptb-amt {
  font-size: clamp(26px, 4vw, 42px); font-weight: 900;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

#clasificacion { background: var(--bg2); }
.pub-tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--border); }
table.pub-st { width: 100%; border-collapse: collapse; font-size: 14px; }
.pub-st th {
  font-size: 11px; font-weight: 700; color: var(--txt3); text-align: left;
  padding: 11px 16px; border-bottom: 1px solid var(--border); text-transform: uppercase;
  letter-spacing: .07em; background: var(--card2); white-space: nowrap;
}
.pub-st td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.pub-st tr:last-child td { border-bottom: none; }
.pub-st tr:hover td { background: rgba(56,214,255,.05); }
.pub-st .row-champ td { background: rgba(245,158,11,.05); }
.pub-st .row-elim td { opacity: .32; }
.pub-st .row-elim td:nth-child(2) { text-decoration: line-through; }
.rnk-badge { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.rnk-1{background:var(--gold);color:#1a1000} .rnk-2{background:#38bdf8;color:#001a26}
.rnk-3{background:var(--pur3);color:#1a0026} .rnk-n{background:rgba(255,255,255,.08);color:var(--txt2)}
.pts-chip { display:inline-flex; align-items:center; background:rgba(56,214,255,.15); border:1px solid var(--border2); border-radius:4px; padding:2px 10px; font-size:12px; font-weight:700; color:var(--pur3); }
.pts-chip.gold { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); color:var(--gold); }
.st-bdg { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 9px; border-radius:4px; }
.sb-ch{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:var(--gold)}
.sb-fi{background:rgba(56,214,255,.12);border:1px solid var(--border);color:var(--pur3)}
.sb-ac{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#86efac}
.sb-el{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171}
.st-empty { text-align:center; padding:48px; color:var(--txt3); font-size:14px; }

footer.pub-footer {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 44px 24px; text-align: center;
}
.ft-logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.ft-logo img { width:40px; height:40px; object-fit:contain; opacity:.65; }
.ft-logo span { font-size:15px; font-weight:800; color:var(--txt2); }
.ft-logo em { font-style:normal; color:var(--pur3); }
footer.pub-footer p { font-size:12px; color:var(--txt3); line-height:2.2; }

#clanes-inscritos { background: var(--bg3); }

.clan-accordion { display: flex; flex-direction: column; gap: 10px; }

.clan-acc-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.clan-acc-item.open {
  border-color: var(--border2);
  box-shadow: 0 4px 24px rgba(56,214,255,.12);
}
.clan-acc-trigger {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; user-select: none;
  transition: background .15s; width: 100%; text-align: left;
  background: none; border: none; font-family: var(--font); color: var(--txt);
}
.clan-acc-trigger:hover { background: rgba(56,214,255,.07); }
.clan-acc-item.open .clan-acc-trigger { background: rgba(56,214,255,.09); }

.clan-acc-tag {
  font-family: monospace; font-size: 12px; font-weight: 800;
  background: rgba(56,214,255,.18); border: 1px solid var(--border2);
  border-radius: 5px; padding: 4px 11px; color: var(--pur3);
  letter-spacing: .07em; flex-shrink: 0;
}
.clan-acc-name  { font-size: 15px; font-weight: 800; color: #fff; flex: 1; text-align: left; }
.clan-acc-meta  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.clan-acc-arrow {
  font-size: 12px; color: var(--txt3); flex-shrink: 0;
  transition: transform .25s; display: inline-block;
}
.clan-acc-item.open .clan-acc-arrow { transform: rotate(180deg); }

.clan-acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.clan-acc-item.open .clan-acc-body { max-height: 1400px; }
.clan-acc-inner { padding: 0 20px 24px; }
.cab-divider { height: 1px; background: var(--border); margin-bottom: 20px; }

.cab-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
@media (max-width: 680px) { .cab-grid { grid-template-columns: 1fr; } }

.cab-col-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 10px;
}
.cab-col-title.purple { color: var(--pur3); }
.cab-col-title.gold   { color: var(--gold); }
.cab-col-title.cyan   { color: var(--cyan); }
.cab-col-title.green  { color: var(--green); }

.cab-role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 7px; font-size: 13px; font-weight: 700; color: #fff;
}
.cab-role-icon { font-size: 16px; flex-shrink: 0; }
.cab-role-name { flex: 1; }
.cab-role-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; flex-shrink: 0;
}
.crb-supreme { background: rgba(56,214,255,.2); border: 1px solid var(--border2); color: var(--pur3); }
.crb-leader  { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.3); color: var(--gold); }
.crb-sub     { background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.25); color: var(--cyan); }

.cab-members {
  columns: 2; column-gap: 12px; list-style: none;
}
@media (max-width: 520px) { .cab-members { columns: 1; } }
.cab-members li {
  font-size: 12px; color: var(--txt2); padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  break-inside: avoid; display: flex; align-items: center; gap: 7px;
}
.cab-members li::before {
  content: '▸'; color: var(--pur3); font-size: 10px; flex-shrink: 0;
}
.cab-members li.is-leader::before  { color: var(--gold); content: '★'; }
.cab-members li.is-supreme::before { color: var(--pur3); content: '♛'; }
.cab-members li.is-sub::before     { color: var(--cyan); content: '◆'; }

.cab-discord {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: 8px;
  background: rgba(88,101,242,.12); border: 1px solid rgba(88,101,242,.3);
  color: #7289da; text-decoration: none; font-size: 13px; font-weight: 700;
  transition: all .15s; margin-bottom: 16px; line-height: 1.5;
}
.cab-discord svg { flex-shrink: 0; margin-top: 2px; }
.cab-discord:hover { background: rgba(88,101,242,.25); color: #fff; transform: translateY(-1px); }

.cab-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px;
  margin-bottom: 16px;
}
.cab-stat {
  background: var(--card2); border: 1px solid var(--border); border-radius: 7px;
  padding: 10px 12px; text-align: center;
}
.cab-stat-val { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
.cab-stat-lbl { font-size: 10px; color: var(--txt3); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.cab-round-result {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06); border-radius: 5px; margin-bottom: 6px;
  font-size: 13px;
}
.cab-round-result:last-child { margin-bottom: 0; }
.crr-round { font-size: 10px; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: .06em; min-width: 60px; }
.crr-room  { color: var(--txt2); flex: 1; }
.crr-pos   { font-size: 11px; font-weight: 800; }
.crr-pos.p1{color:var(--gold)} .crr-pos.p2{color:#38bdf8} .crr-pos.p3{color:var(--pur3)} .crr-pos.p4{color:var(--red)}
.crr-pts   { font-size: 12px; font-weight: 700; color: var(--pur3); min-width: 40px; text-align: right; }

#reglas { background: var(--bg3); }
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 20px;
}
.rule-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.rule-card-hd {
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 800; color: #fff;
}
.rule-card-hd span:first-child { font-size: 20px; flex-shrink: 0; }
.rule-hd-purple { background: rgba(56,214,255,.18); border-bottom: 2px solid var(--pur2); }
.rule-hd-red    { background: rgba(239,68,68,.14);  border-bottom: 2px solid var(--red); }

.rule-list {
  list-style: none;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 11px;
}
.rule-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px; color: var(--txt2); line-height: 1.7;
}
.rule-list li::before {
  content: '▸';
  position: absolute; left: 0; top: 2px;
  color: var(--pur3); font-size: 11px;
}
.rule-list-red li::before { color: #f87171; }
.rule-list li strong { color: #fff; }
.txt-danger { color: #f87171 !important; }
.rule-note {
  display: block;
  margin-top: 5px;
  font-size: 12px; color: var(--txt3); font-style: italic;
}

#inscripciones { background: var(--bg2); }
.insc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
}

.insc-list {
  list-style: none;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.insc-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
}
.insc-icon {
  font-size: 17px;
  color: var(--pur3);
  line-height: 1.5;
  text-align: center;
}
.insc-list li > div { min-width: 0; }
.insc-list li p {
  font-size: 13px; color: var(--txt2);
  line-height: 1.65; margin: 0;
}
.insc-list li p strong { color: #fff; }
.insc-note {
  display: block;
  font-size: 11px; color: var(--txt3);
  font-style: italic; margin-top: 3px; line-height: 1.5;
}

.insc-cta-col { display: flex; flex-direction: column; gap: 16px; }
.insc-discord-card {
  background: linear-gradient(135deg, rgba(88,101,242,.12), rgba(88,101,242,.05));
  border: 2px solid rgba(88,101,242,.35);
  border-radius: var(--r); padding: 28px 24px;
  text-align: center; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.insc-cta-title { font-size: 16px; font-weight: 800; color: #fff; }
.insc-cta-desc  { font-size: 13px; color: var(--txt2); line-height: 1.6; max-width: 280px; }
.insc-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 8px;
  background: #5865f2; border: 2px solid #7289da;
  color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 800;
  transition: background .15s, transform .15s;
  letter-spacing: .04em;
}
.insc-btn:hover { background: #4752c4; transform: translateY(-2px); }

.insc-status {
  margin-bottom: 22px; padding: 12px 18px; border-radius: 2px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}
.insc-status:empty { display: none; }
.insc-status.is-open   { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.45);  color: #86efac; }
.insc-status.is-closed { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.45);  color: #fca5a5; }

.insc-warning {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px; padding: 14px 16px;
  font-size: 12px; color: #fde68a; line-height: 1.7;
}

#preloader {
  position: fixed; inset: 0; z-index: 3000; background: #070709;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: opacity .55s ease, visibility .55s;
}
#preloader img {
  width: 104px; height: 104px; object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(56,214,255,.7));
  animation: pulse 1.6s ease-in-out infinite;
}
.pre-count {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(42px, 8vw, 74px); color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(56,214,255,.5);
}
.pre-bar { width: min(260px, 60vw); height: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.pre-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan2), var(--pink2));
  box-shadow: 0 0 12px rgba(56,214,255,.6);
  transition: width .12s linear;
}
.pre-lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--txt3);
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 1160px; margin: 0 auto; padding: 48px 24px;
}
.stat-item {
  text-align: center; padding: 26px 10px 22px;
  background: linear-gradient(180deg, rgba(24,24,30,.7), rgba(16,16,20,.85));
  border: 1px solid var(--border);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform .22s cubic-bezier(.22,.8,.3,1), border-color .22s, box-shadow .22s;
}
.stat-item:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: 0 0 24px rgba(56,214,255,.12); }
.stat-num {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(32px, 5vw, 54px); color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(56,214,255,.35);
}
.stat-lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt2); margin-top: 9px;
}
@media (max-width: 720px) { .stats-strip { grid-template-columns: repeat(2, 1fr); padding: 36px 16px; } }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  #preloader { display: none; }
}

@media (max-width: 760px) {
  .vote-wrap { grid-template-columns: 1fr; }
  .prizes-grid { grid-template-columns: 1fr; }
  .phase-flow { gap: 4px; }
  .ph-arr { padding: 0 3px; }
  .rule-grid  { grid-template-columns: 1fr; }
  .insc-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #hero { padding: 88px 16px 48px; }
  section.pub-sec { padding: 56px 16px; }
  .nav-inner { padding: 0 14px; gap: 0; }
  .nav-links a { padding: 7px 10px; font-size: 11px; }
  .countdown { gap: 10px; }
  .cd-block { padding: 12px 6px; width: 74px; }
  .round-grid { grid-template-columns: 1fr; }
}