:root{
  --bg:#06060a;
  --card: rgba(10,10,16,.60);
  --line: rgba(255,255,255,.10);
  --text:#f3f3f8;
  --muted:#c2c2cc;
  --gold:#d8b35a;
  --accent:#6a5cff;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

.video-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:transparent;
}
.video-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1 !important;
  filter:brightness(1.42) saturate(1.18) contrast(1.08) !important;
  transform:scale(1.03);
}
.video-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(106,92,255,.06), transparent 60%),
    radial-gradient(900px 450px at 85% 10%, rgba(216,179,90,.04), transparent 60%);
  z-index:1;
}
.video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 45%, rgba(0,0,0,.22));
  z-index:2;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 18px}

header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(8px);
  background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.6px;
}
.logo{
  width:48px;
  height:48px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(0,0,0,.40);
  border:1px solid rgba(216,179,90,.6);
  background:rgba(0,0,0,.15);
}
.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.chip{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,16,.32);
  color:var(--muted);
  font-size:14px;
}
.chip:hover{
  border-color:rgba(216,179,90,.55);
  color:var(--text);
}

.hero{padding:34px 0 10px}
.heroGrid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:14px;
}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.32);
  backdrop-filter:blur(3px);
}
.box{padding:18px}
.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--gold);
  font-weight:900;
  letter-spacing:.8px;
  font-size:12px;
}
h1{
  margin:10px 0 8px;
  font-size:40px;
  line-height:1.05;
}
h2{
  margin:0;
  font-size:22px;
}
.sub{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:75ch;
}
.ctaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(216,179,90,.55);
  background:rgba(216,179,90,.12);
  color:var(--text);
  font-weight:800;
}
.btn:hover{background:rgba(216,179,90,.18)}
.btn.primary{
  border-color:rgba(106,92,255,.85);
  background:rgba(106,92,255,.18);
}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-size:13px;
}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}
.stat{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
}
.stat b{
  display:block;
  font-size:18px;
  color:var(--text);
}
.stat span{
  color:var(--muted);
  font-size:12px;
}

section{padding:14px 0}
.sectionTitle{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 12px;
}
.sectionTitle p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
input, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
input:focus, select:focus{
  border-color:rgba(106,92,255,.75);
}

table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}
th, td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:14px;
}
th{
  color:var(--text);
  font-weight:800;
  background:rgba(255,255,255,.03);
}
tr:hover td{
  background:rgba(106,92,255,.06);
}

footer{
  margin-top:18px;
  padding:22px 0 30px;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
}

.toTop{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:999;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.30);
  color:var(--text);
  font-weight:900;
}
.toTop:hover{
  border-color:rgba(216,179,90,.55);
}

@media (max-width:900px){
  .heroGrid{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  h1{font-size:32px}
}

.hero h1{
  font-family:"Cinzel", serif;
  font-size:52px;
  font-weight:900;
  letter-spacing:2px;
  margin:10px 0 8px;
  line-height:1.05;
  background:linear-gradient(90deg, #f7e7a2, #d8b35a, #ffffff, #d8b35a, #f7e7a2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 15px rgba(216,179,90,0.45),
    0 0 25px rgba(106,92,255,0.28),
    0 0 45px rgba(106,92,255,0.16);
}
.card h2,
.sectionTitle h2{
  font-family:"Cinzel", serif;
  font-size:24px;
  font-weight:900;
  letter-spacing:1px;
  color:#f7e7a2;
  text-shadow:
    0 0 10px rgba(216,179,90,0.25),
    0 0 20px rgba(106,92,255,0.18);
}
.kicker{
  font-family:"Cinzel", serif;
  letter-spacing:1.2px;
}
@media (max-width:900px){
  .hero h1{font-size:38px; letter-spacing:1px}
  .card h2, .sectionTitle h2{font-size:20px}
}

.brandName{
  font-family:"Cinzel", serif;
  font-weight:900;
  letter-spacing:1.2px;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1;
}
.brandName__main,
.brandName__sub{
  position:relative;
  display:inline-block;
  padding:2px 4px;
  border-radius:8px;
}
.brandName__main{
  background:linear-gradient(90deg, #fff2b8, #d8b35a, #ffffff, #d8b35a, #fff2b8);
  background-size:220% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldShift 3.5s linear infinite;
  text-shadow:
    0 0 10px rgba(216,179,90,.35),
    0 0 22px rgba(106,92,255,.18);
}
.brandName__sub{
  color:#f7e7a2;
  text-shadow:
    0 0 10px rgba(216,179,90,.25),
    0 0 26px rgba(106,92,255,.22),
    0 0 48px rgba(106,92,255,.12);
  animation:lightningPulse 2.2s ease-in-out infinite;
}
.brandName__sub::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:60%;
  height:16px;
  background:
    radial-gradient(12px 14px at 10% 60%, rgba(255,120,0,.55), transparent 65%),
    radial-gradient(14px 16px at 30% 40%, rgba(255,190,60,.45), transparent 65%),
    radial-gradient(12px 14px at 55% 70%, rgba(255,90,0,.50), transparent 65%),
    radial-gradient(14px 16px at 80% 45%, rgba(255,200,90,.40), transparent 65%),
    radial-gradient(12px 14px at 95% 65%, rgba(255,110,0,.45), transparent 65%);
  filter:blur(1px);
  opacity:.55;
  transform:translateY(0);
  animation:flameFlicker 0.9s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
.brandName__sub::after{
  content:"";
  position:absolute;
  inset:-6px -10px -10px -10px;
  background:
    linear-gradient(110deg, transparent 0 42%, rgba(120,170,255,.0) 42%, rgba(120,170,255,.65) 48%, rgba(120,170,255,.0) 55%, transparent 55% 100%),
    linear-gradient(70deg, transparent 0 50%, rgba(175,220,255,.0) 50%, rgba(175,220,255,.55) 56%, rgba(175,220,255,.0) 63%, transparent 63% 100%);
  opacity:.0;
  filter:blur(.2px) drop-shadow(0 0 10px rgba(140,190,255,.35));
  animation:lightningStrike 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes goldShift{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}
@keyframes flameFlicker{
  0%,100%{opacity:.45; transform:translateY(0) scaleX(1)}
  50%{opacity:.65; transform:translateY(-2px) scaleX(1.02)}
}
@keyframes lightningPulse{
  0%,100%{
    text-shadow:
      0 0 10px rgba(216,179,90,.25),
      0 0 26px rgba(106,92,255,.20),
      0 0 48px rgba(106,92,255,.10);
  }
  50%{
    text-shadow:
      0 0 14px rgba(216,179,90,.35),
      0 0 34px rgba(140,190,255,.38),
      0 0 70px rgba(140,190,255,.18);
  }
}
@keyframes lightningStrike{
  0%,78%{opacity:0; transform:translateY(0)}
  80%{opacity:.70; transform:translateY(-1px)}
  81%{opacity:0}
  90%{opacity:.45}
  92%{opacity:0}
  100%{opacity:0}
}
@media (max-width:900px){
  .brandName{font-size:16px}
}

/* =========================
   RANKINGS MENU REAL FIX
   ========================= */

.rankings_menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px 0;
  padding:0;
}

.rankings_menu_btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(216,179,90,.35);
  background:rgba(216,179,90,.10);
  color:#f5e6b8 !important;
  font-weight:800;
  font-size:14px;
  line-height:1;
  text-decoration:none !important;
  transition:all .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.rankings_menu_btn:hover{
  background:rgba(216,179,90,.18);
  border-color:rgba(216,179,90,.75);
  color:#ffffff !important;
  transform:translateY(-1px);
}

.rankings_menu_btn.active{
  background:linear-gradient(135deg, rgba(106,92,255,.32), rgba(216,179,90,.22));
  border-color:rgba(106,92,255,.85);
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(106,92,255,.18);
}

.rankings-filter-wrapper{
  width:100%;
  display:block;
  text-align:center;
  margin:10px 0 20px 0;
}

.rankings-filter-row{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:18px;
}

.rankings-class-filter-selection{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:90px;
  min-width:90px;
  text-align:center;
  color:#ffffff;
  font-size:12px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}

.rankings-class-filter-selection span{
  display:block;
  margin-top:6px;
}

.rankings-class-filter-image,
.rankings-class-image{
  display:block;
  width:64px;
  height:64px;
  margin:0 auto;
  object-fit:cover;
  border-radius:12px;
  filter:none;
  -webkit-filter:none;
  transition:all .2s ease;
}

.rankings-class-filter-selection:hover{
  color:#ffda8a;
}

.rankings-class-filter-selection:hover .rankings-class-filter-image{
  transform:scale(1.05);
}

.rankings-class-filter-grayscale{
  filter:none;
  -webkit-filter:none;
}

.rankings-table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  background:transparent;
}

.rankings-table tr td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:14px;
  color:#f3f3f8;
  vertical-align:middle;
}

.rankings-table tr:first-child td{
  color:#ffffff;
  font-weight:800;
  background:rgba(255,255,255,.03);
}

.rankings-table tr:not(:first-child):hover td{
  background:rgba(106,92,255,.06);
}

.rankings-table-place{
  font-weight:800;
  color:#ffffff;
}

.rankings-table img{
  max-width:none;
}

.online-status-indicator{
  display:inline-block;
  margin-left:4px;
  vertical-align:middle;
}

.rankings-update-time{
  margin-top:14px;
  color:#b0b0ba;
  font-size:13px;
}

@media (max-width:768px){
  .rankings_menu{
    gap:8px;
  }
  .rankings_menu_btn{
    font-size:13px;
    padding:9px 12px;
    min-height:36px;
  }
  .rankings-filter-row{
    gap:12px;
  }
  .rankings-class-filter-selection{
    width:78px;
    min-width:78px;
    font-size:11px;
  }
  .rankings-class-filter-image,
  .rankings-class-image{
    width:56px;
    height:56px;
  }
  .rankings-table tr td{
    font-size:13px;
    padding:8px 8px;
  }
}

/* =========================
   REGISTER BUTTON CLICK FIX
   ========================= */

main,
main .card,
main .box,
.page-title,
.form-horizontal,
.form-group,
.col-sm-8,
.col-sm-offset-4{
  position:relative;
  z-index:5;
}

.video-bg,
.video-bg::before,
.video-bg::after{
  pointer-events:none !important;
}

.form-horizontal .btn,
.form-horizontal .btn-primary,
.form-horizontal button[type="submit"],
button[name="webengineRegistersubmit"]{
  position:relative;
  z-index:20;
  pointer-events:auto !important;
  cursor:pointer !important;
}

.form-horizontal .form-group{
  overflow:visible;
}

.form-horizontal .col-sm-8,
.form-horizontal .col-sm-offset-4{
  position:relative;
  z-index:10;
}

/* =========================
   LOGIN / CAPTCHA DARK TEXT FIX
   ========================= */

.form-control,
.form-horizontal .form-control,
input.form-control,
input[type="text"],
input[type="password"],
input[type="email"]{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
}

.form-control::placeholder,
.form-horizontal .form-control::placeholder,
input.form-control::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder{
  color:#1a1a1a !important;
  opacity:1 !important;
}

.form-control::-webkit-input-placeholder,
.form-horizontal .form-control::-webkit-input-placeholder,
input.form-control::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder{
  color:#1a1a1a !important;
  opacity:1 !important;
}

.form-control:-ms-input-placeholder,
.form-horizontal .form-control:-ms-input-placeholder,
input.form-control:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder{
  color:#1a1a1a !important;
}

.form-control::-ms-input-placeholder,
.form-horizontal .form-control::-ms-input-placeholder,
input.form-control::-ms-input-placeholder,
input[type="text"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder{
  color:#1a1a1a !important;
}

.login-captcha-input,
.security-verification input,
.captcha input{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
}

.login-captcha-input::placeholder,
.security-verification input::placeholder,
.captcha input::placeholder{
  color:#1a1a1a !important;
  opacity:1 !important;
}

/* autofill chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#111111 !important;
  box-shadow:0 0 0 1000px #ffffff inset !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* =========================
   LOGIN LABELS DARK FIX
   ========================= */

/* etiquetas del login */
.form-horizontal label,
.form-horizontal .control-label,
.form-horizontal .help-block,
.form-horizontal #username-status,
.form-horizontal #password-status,
.form-horizontal .form-group > label{
  color:#111111 !important;
  text-shadow:none !important;
}

/* textos de ayuda debajo de los campos */
.form-horizontal .help-block,
.form-horizontal .form-text,
.form-horizontal small{
  color:#111111 !important;
}

/* captcha label y texto de seguridad */
.form-horizontal .col-sm-4.control-label,
.form-horizontal label[for="webengineRegistration1"],
.form-horizontal label[for="webengineRegistration2"],
.form-horizontal label[for="webengineRegistration3"],
.form-horizontal label[for="webengineRegistration4"]{
  color:#111111 !important;
  font-weight:700 !important;
}

/* texto del captcha/seguridad en el login */
.form-horizontal .col-sm-8,
.form-horizontal .col-sm-8 span,
.form-horizontal .col-sm-8 p,
.form-horizontal .col-sm-8 div{
  color:#111111 !important;
}

/* específicamente el texto "Solve the math operation to continue" */
.form-horizontal .col-sm-offset-4 .help-block,
.form-horizontal .col-sm-offset-4 span,
.form-horizontal .col-sm-offset-4 p{
  color:#111111 !important;
}

/* si el captcha o el input hereda un gris claro */
.form-horizontal input,
.form-horizontal input::placeholder{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
}