/* =========================================================
   MU LEGEND V2 — visual layer
   Mantiene la estructura y funcionalidad del template default.
   ========================================================= */
:root {
  --ml-bg: #03070d;
  --ml-panel: rgba(7, 16, 27, .92);
  --ml-panel-2: rgba(9, 23, 38, .94);
  --ml-line: rgba(70, 190, 255, .20);
  --ml-line-strong: rgba(80, 205, 255, .42);
  --ml-accent: #39c9ff;
  --ml-accent-2: #7ee7ff;
  --ml-text: #d9e8f3;
  --ml-muted: #8197a7;
  --ml-danger: #ff5268;
  --ml-shadow: 0 18px 50px rgba(0,0,0,.55);
}

html { min-width: 0 !important; }
body.mulegend-v2 {
  color: var(--ml-text);
  background-color: var(--ml-bg) !important;
  background-image:
    radial-gradient(circle at 50% 12%, rgba(34,145,215,.10), transparent 42%),
    linear-gradient(180deg, rgba(1,5,10,.20), rgba(1,5,10,.76)),
    url('../img/background.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  font-family: 'Roboto', sans-serif;
}

body.mulegend-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

/* Top bar */
.mulegend-v2 .global-top-bar {
  background: rgba(2,7,13,.92) !important;
  border-bottom: 1px solid rgba(82,190,255,.15);
  padding: 8px 0 6px !important;
  backdrop-filter: blur(10px);
}
.mulegend-v2 .global-top-bar .global-top-bar-content {
  width: min(1420px, calc(100% - 36px)) !important;
}
.mulegend-v2 .global-top-bar a { color: #a8bdca !important; }
.mulegend-v2 .global-top-bar a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(57,201,255,.65); }

/* Hero */
.mulegend-v2 .mu-video-area {
  height: clamp(350px, 45vw, 540px) !important;
  background: #02050a !important;
  border-bottom: 1px solid rgba(74,194,255,.18);
  box-shadow: inset 0 -80px 90px rgba(2,7,13,.85);
}
.mulegend-v2 .mu-video-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(1,5,10,.10) 0%, rgba(1,5,10,.06) 48%, rgba(2,8,14,.88) 100%),
    radial-gradient(circle at 50% 52%, transparent 0 22%, rgba(0,0,0,.26) 75%);
  pointer-events: none;
}
.mulegend-v2 .mu-video-area video { filter: saturate(.76) contrast(1.08) brightness(.78); }
.mulegend-v2 .mu-video-area #header { z-index: 3; }
.mulegend-v2 .mu-video-area .webengine-mu-logo {
  max-width: min(440px, 72vw) !important;
  filter: drop-shadow(0 0 18px rgba(75,192,255,.20)) drop-shadow(0 14px 30px rgba(0,0,0,.75));
  transition: transform .35s ease, filter .35s ease;
}
.mulegend-v2 .mu-video-area .webengine-mu-logo:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 0 26px rgba(78,206,255,.35)) drop-shadow(0 16px 34px rgba(0,0,0,.8));
}

/* Counter */
.mulegend-v2 .mu-online-counter {
  width: 410px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: rgba(3,11,19,.72) !important;
  border: 1px solid rgba(83,201,255,.26) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.40), inset 0 0 24px rgba(33,149,220,.06) !important;
  backdrop-filter: blur(12px) !important;
}
.mulegend-v2 .online-title { color: #93e6ff !important; font-size: 9px !important; letter-spacing: 4px !important; }
.mulegend-v2 #onlineCounter { color: #eaf8ff; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mulegend-v2 #onlineCounter span { color: #7fddff; font-weight: 700; }

/* Navigation */
.mulegend-v2 .header-info-container {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(3,9,16,.88) !important;
  border-top: 1px solid rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(73,191,255,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
}
.mulegend-v2 .header-info,
.mulegend-v2 .headersito { width: 100% !important; max-width: 1480px; margin: 0 auto; }
.mulegend-v2 #navbar { border: 0 !important; backdrop-filter: none !important; }
.mulegend-v2 #navbar ul li a {
  color: #a9bbc7 !important;
  padding: 18px 24px !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .7px;
  position: relative;
}
.mulegend-v2 #navbar ul li a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ml-accent), transparent);
  box-shadow: 0 0 12px rgba(57,201,255,.65);
  transition: left .25s ease, right .25s ease;
}
.mulegend-v2 #navbar ul li a:hover { color: #fff !important; text-shadow: 0 0 14px rgba(57,201,255,.45); }
.mulegend-v2 #navbar ul li a:hover::after { left: 16%; right: 16%; }

/* Main frame */
.mulegend-v2 #container {
  width: min(1500px, calc(100% - 24px)) !important;
  max-width: 1500px !important;
  margin: 18px auto 0 !important;
  padding: 18px 10px 24px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(7,17,28,.93), rgba(3,9,15,.96)) !important;
  border: 1px solid rgba(74,187,247,.15) !important;
  box-shadow: 0 24px 75px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.mulegend-v2 #container::before {
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(78,194,255,.08) !important;
}
.mulegend-v2 #content { padding: 8px 14px !important; }
.mulegend-v2 #content > .row { --bs-gutter-x: 1.15rem; }

/* Generic cards/panels */
.mulegend-v2 .panel-sidebar,
.mulegend-v2 .panel-general,
.mulegend-v2 .panel-addstats,
.mulegend-v2 .panel-downloads,
.mulegend-v2 .panel-news,
.mulegend-v2 .card {
  color: var(--ml-text) !important;
  background: linear-gradient(180deg, rgba(10,24,39,.94), rgba(5,12,20,.96)) !important;
  border: 1px solid rgba(73,185,244,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow: hidden;
}
.mulegend-v2 .panel-sidebar > .panel-heading,
.mulegend-v2 .panel-news .panel-heading,
.mulegend-v2 .card-header {
  color: #dff7ff !important;
  background: linear-gradient(90deg, rgba(13,39,61,.92), rgba(7,22,36,.92)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(77,194,255,.20) !important;
  padding: 13px 15px !important;
  font-size: 14px !important;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.mulegend-v2 .panel-news .panel-body,
.mulegend-v2 .panel-news .panel-footer,
.mulegend-v2 .card-body,
.mulegend-v2 .card-footer {
  color: #c7d7e1 !important;
  background: rgba(5,13,22,.86) !important;
  border-color: rgba(72,181,240,.12) !important;
}
.mulegend-v2 .page-title { color: #dff7ff !important; font-family: 'Cinzel', serif !important; font-size: clamp(24px, 3vw, 34px) !important; letter-spacing: .6px; text-shadow: 0 0 18px rgba(57,201,255,.15); }

/* Existing MuTyR sidebars: cool palette, same markup */
.mulegend-v2 .mutyr-box,
.mulegend-v2 .mutyr-user-box {
  background: linear-gradient(180deg, rgba(9,25,42,.97), rgba(4,11,19,.98)) !important;
  border: 1px solid rgba(67,190,255,.25) !important;
  box-shadow: 0 13px 34px rgba(0,0,0,.34), inset 0 0 25px rgba(30,132,205,.06) !important;
}
.mulegend-v2 .mutyr-box::before,
.mulegend-v2 .mutyr-user-box::before {
  background: linear-gradient(90deg, transparent, #42c9ff, #b7efff, #42c9ff, transparent) !important;
  box-shadow: 0 0 13px rgba(66,201,255,.45);
}
.mulegend-v2 .mutyr-header,
.mulegend-v2 .mutyr-user-title { color: #9fe9ff !important; }
.mulegend-v2 .mutyr-header i { color: #53cbff !important; }
.mulegend-v2 .mutyr-banner img {
  border-color: rgba(64,190,255,.24) !important;
  box-shadow: 0 7px 22px rgba(0,0,0,.35) !important;
}
.mulegend-v2 .mutyr-banner img:hover { box-shadow: 0 0 24px rgba(63,192,255,.30) !important; }
.mulegend-v2 .mutyr-user-input { background: rgba(2,9,16,.92) !important; border-color: rgba(68,193,255,.22) !important; }
.mulegend-v2 .mutyr-user-input i { color: #63d4ff !important; }
.mulegend-v2 .mutyr-login-btn {
  background: linear-gradient(90deg, #1479b8, #1fbde8) !important;
  box-shadow: 0 7px 22px rgba(21,154,211,.16);
}

/* Tables */
.mulegend-v2 .table,
.mulegend-v2 .rankings-table,
.mulegend-v2 .general-table-ui,
.mulegend-v2 .myaccount-table {
  color: #cfdee7 !important;
  background: rgba(4,12,20,.88) !important;
  border-color: rgba(70,181,239,.13) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.mulegend-v2 .table thead th,
.mulegend-v2 .rankings-table tr:first-child td,
.mulegend-v2 .general-table-ui tr:first-child td {
  color: #85dcff !important;
  background: rgba(10,31,50,.92) !important;
  border-color: rgba(75,191,248,.15) !important;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.mulegend-v2 .table tbody tr,
.mulegend-v2 .rankings-table tr { transition: background .2s ease; }
.mulegend-v2 .table tbody tr:hover,
.mulegend-v2 .rankings-table tr:hover { background: rgba(47,155,215,.07) !important; }
.mulegend-v2 .table tbody td,
.mulegend-v2 .rankings-table tr td { border-color: rgba(255,255,255,.045) !important; color: #cad8e1; }
.mulegend-v2 .rankings-table-place { color: #62d4ff !important; }

/* Forms */
.mulegend-v2 input[type=text],
.mulegend-v2 input[type=password],
.mulegend-v2 input[type=number],
.mulegend-v2 input[type=email],
.mulegend-v2 select,
.mulegend-v2 textarea,
.mulegend-v2 .form-control {
  color: #d9edf7 !important;
  background: rgba(2,9,16,.90) !important;
  border: 1px solid rgba(75,190,248,.18) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.22);
}
.mulegend-v2 input:focus,
.mulegend-v2 select:focus,
.mulegend-v2 textarea:focus,
.mulegend-v2 .form-control:focus {
  border-color: rgba(66,201,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(57,201,255,.08) !important;
}

/* Buttons */
.mulegend-v2 .btn-primary,
.mulegend-v2 a.btn-primary {
  color: #f4fbff !important;
  background: linear-gradient(180deg, #159ed2, #0a6eaa) !important;
  border-color: rgba(104,220,255,.32) !important;
  border-radius: 9px !important;
  box-shadow: 0 7px 20px rgba(0,133,190,.18);
}
.mulegend-v2 .btn-primary:hover,
.mulegend-v2 a.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 22px rgba(47,193,244,.28) !important;
  transform: translateY(-1px);
}
.mulegend-v2 .btn { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }

/* Links */
.mulegend-v2 a { color: #63d1fb; }
.mulegend-v2 a:hover { color: #c3f2ff !important; }

/* Footer */
.mulegend-v2 .footer {
  width: min(1500px, calc(100% - 24px)) !important;
  margin: 14px auto 50px !important;
  color: #7f96a5 !important;
  background: rgba(4,11,18,.94) !important;
  border: 1px solid rgba(69,185,243,.13) !important;
  border-top: 1px solid rgba(79,198,255,.24) !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 42px rgba(0,0,0,.33);
}
.mulegend-v2 .footer a { color: #9fc7d9 !important; }
.mulegend-v2 .footer a:hover { color: #fff !important; }

/* Selection and scrollbar */
.mulegend-v2 ::selection { background: rgba(50,190,244,.33); color: #fff; }
.mulegend-v2::-webkit-scrollbar { width: 11px; }
.mulegend-v2::-webkit-scrollbar-track { background: #03080d; }
.mulegend-v2::-webkit-scrollbar-thumb { background: #15394d; border: 3px solid #03080d; border-radius: 10px; }
.mulegend-v2::-webkit-scrollbar-thumb:hover { background: #1c536f; }

/* Responsive cleanup: original template forced 1040px */
@media (max-width: 991.98px) {
  .mulegend-v2 .global-top-bar .global-top-bar-content { width: calc(100% - 24px) !important; }
  .mulegend-v2 #container { width: calc(100% - 14px) !important; padding: 10px 4px 18px !important; }
  .mulegend-v2 #content { padding: 6px 8px !important; }
  .mulegend-v2 #navbar ul li a { padding: 14px 11px !important; font-size: 11px !important; }
  .mulegend-v2 .footer { width: calc(100% - 14px) !important; }
}
@media (max-width: 767.98px) {
  .mulegend-v2 .mu-video-area { height: 360px !important; }
  .mulegend-v2 .mu-video-area .webengine-mu-logo { max-width: 300px !important; }
  .mulegend-v2 .mu-online-counter { width: min(360px, 88vw) !important; }
  .mulegend-v2 .header-info-container { position: relative; }
  .mulegend-v2 #navbar ul li { display: block !important; border-bottom: 1px solid rgba(255,255,255,.035); }
  .mulegend-v2 #navbar ul li a { display: block !important; padding: 12px 10px !important; }
  .mulegend-v2 #content > .row > [class*="col-"] { margin-bottom: 12px; }
}