/* ================================================================
   TRACKER.CSS v2 — Glassmorphism · Gradient borders · Neon cyan
   ================================================================ */

/* tracker.css no sobreescribe el body background — heredado de base.css con cadenas */
body {
  font-family: 'Rajdhani', sans-serif;
  overflow-x: clip;
}

/* ── TEXTURES ───────────────────────────────────────────────────── */
.grid-texture {
  background-image:
    linear-gradient(rgba(79,195,247,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.chain-bg {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(79,195,247,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(200,155,60,.05) 0%, transparent 50%);
}

/* ── TIER BADGES ────────────────────────────────────────────────── */
.tier-splus,.tier-s,.tier-aplus,.tier-a,.tier-bplus,.tier-b,.tier-c,.tier-d,.tier-f {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}
.tier-splus { background: linear-gradient(180deg,#4a3200,#1e1400); color:#FFD700; box-shadow: inset 0 1px 0 rgba(255,200,0,.4); }
.tier-s     { background: linear-gradient(180deg,#2e1e00,#140e00); color:#E8C06A; box-shadow: inset 0 1px 0 rgba(200,155,60,.4); }
.tier-aplus { background: linear-gradient(180deg,#0a2a3a,#04111e); color:#38BDF8; box-shadow: inset 0 1px 0 rgba(56,189,248,.4); }
.tier-a     { background: linear-gradient(180deg,#0a2030,#04101a); color:#4FC3F7; box-shadow: inset 0 1px 0 rgba(79,195,247,.4); }
.tier-bplus { background: linear-gradient(180deg,#042010,#021008); color:#4ADE80; box-shadow: inset 0 1px 0 rgba(74,222,128,.4); }
.tier-b     { background: linear-gradient(180deg,#0a2010,#041008); color:#66BB6A; box-shadow: inset 0 1px 0 rgba(102,187,106,.4); }
.tier-c     { background: linear-gradient(180deg,#2a2200,#121000); color:#FACC15; box-shadow: inset 0 1px 0 rgba(250,204,21,.4); }
.tier-d     { background: linear-gradient(180deg,#2a1000,#120800); color:#FB923C; box-shadow: inset 0 1px 0 rgba(251,146,60,.4); }
.tier-f     { background: linear-gradient(180deg,#2e0808,#140404); color:#EF5350; box-shadow: inset 0 1px 0 rgba(239,83,80,.4); }

/* ── SCALING BADGES ─────────────────────────────────────────────── */
.scale-ap     { background:rgba(79,195,247,.15);  border:1px solid rgba(79,195,247,.4);  color:#4FC3F7; }
.scale-ad     { background:rgba(239,83,80,.12);   border:1px solid rgba(239,83,80,.4);   color:#EF5350; }
.scale-hybrid { background:rgba(200,155,60,.12);  border:1px solid rgba(200,155,60,.4);  color:#C89B3C; }
.scale-hp     { background:rgba(102,187,106,.12); border:1px solid rgba(102,187,106,.4); color:#66BB6A; }

/* ── GLASSMORPHISM CHAMPION CARD ────────────────────────────────── */
.champion-card {
  background: rgba(10,15,30,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(79,195,247,.1);
  position: relative;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

/* Gradient border via mask trick — compatible con border-radius */
.champion-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 12px; padding: 1px;
  background: linear-gradient(135deg,
    rgba(79,195,247,.25) 0%,
    rgba(200,155,60,.15) 45%,
    rgba(145,70,255,.2)  100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
  transition: opacity .25s ease, background .25s ease;
}

.champion-card:hover {
  transform: scale(1.04) translateY(-3px);
  box-shadow:
    0 0 22px rgba(79,195,247,.18),
    0 0 44px rgba(79,195,247,.07),
    0 14px 44px rgba(0,0,0,.55);
}
.champion-card:hover::before {
  opacity: 1;
  background: linear-gradient(135deg,
    rgba(79,195,247,.7)  0%,
    rgba(200,155,60,.4)  45%,
    rgba(145,70,255,.6)  100%
  );
}
.champion-card.selected {
  border-color: rgba(200,155,60,.5);
  box-shadow: 0 0 0 1px rgba(200,155,60,.2), 0 8px 32px rgba(200,155,60,.2);
}

/* ── CHAMPION IMAGE — desaturado → color en hover ───────────────── */
.champ-img {
  width: 60px; height: 60px;
  border-radius: 8px; object-fit: cover;
  flex-shrink: 0; background: #0A0F1E;
  filter: saturate(.18) brightness(.7);
  transition: filter .35s ease, box-shadow .35s ease;
}
.champion-card:hover .champ-img {
  filter: saturate(1) brightness(1);
  box-shadow: 0 0 14px rgba(79,195,247,.35);
}
.champ-img-lg {
  width: 72px; height: 72px;
  border-radius: 10px; object-fit: cover;
  border: 2px solid rgba(200,155,60,.3);
  box-shadow: 0 0 20px rgba(200,155,60,.15);
}

/* ── DIFFICULTY BAR ─────────────────────────────────────────────── */
.diff-bar-wrap { display:flex; gap:3px; }
.diff-bar-seg {
  height: 4px; flex: 1; border-radius: 2px;
  background: rgba(255,255,255,.07);
  transition: background .3s;
}
.diff-bar-seg.filled-easy   { background:#22c55e; box-shadow:0 0 5px rgba(34,197,94,.5); }
.diff-bar-seg.filled-medium { background:#eab308; box-shadow:0 0 5px rgba(234,179,8,.5); }
.diff-bar-seg.filled-hard   { background:#ef4444; box-shadow:0 0 5px rgba(239,68,68,.5); }

/* ── SYKII'S SECRET TIP — nota técnica ─────────────────────────── */
.secret-tip {
  background: rgba(200,155,60,.04);
  border: 1px solid rgba(200,155,60,.15);
  border-left: 2px solid rgba(200,155,60,.5);
  border-radius: 0 6px 6px 0;
  padding: 7px 9px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; color: #6a7a9a; line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.secret-tip-full {
  background: rgba(200,155,60,.04);
  border: 1px solid rgba(200,155,60,.18);
  border-left: 3px solid rgba(200,155,60,.55);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px; color: #8899AA; line-height: 1.65;
}

/* ── VER COMBO BUTTON ───────────────────────────────────────────── */
.ver-combo-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(79,195,247,.28);
  color: #4FC3F7;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.ver-combo-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(79,195,247,.15) 0%, transparent 70%);
  opacity: 0; transition: opacity .2s;
}
.ver-combo-btn:hover {
  border-color: rgba(79,195,247,.85);
  color: #fff;
  box-shadow:
    0 0 12px rgba(79,195,247,.35),
    0 0 24px rgba(79,195,247,.12),
    inset 0 0 10px rgba(79,195,247,.07);
}
.ver-combo-btn:hover::before { opacity: 1; }

/* ── LIVE STATUS WIDGET (esquina fija) ──────────────────────────── */
.live-widget {
  position: fixed;
  top: 62px; right: 16px; z-index: 200;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 18px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  background: linear-gradient(180deg, #160d28 0%, #0a0814 100%);
  box-shadow:
    inset 0 1px 0 rgba(145,70,255,.45),
    inset 0 -1px 0 rgba(145,70,255,.15);
  filter: drop-shadow(0 0 10px rgba(145,70,255,.25));
  cursor: pointer; text-decoration: none;
  transition: filter .25s, background .25s;
}
.live-widget:hover {
  background: linear-gradient(180deg, #201040 0%, #120c20 100%);
  filter: drop-shadow(0 0 16px rgba(145,70,255,.5));
}
.live-widget.offline {
  background: linear-gradient(180deg, #141820 0%, #0a0c12 100%);
  box-shadow:
    inset 0 1px 0 rgba(74,88,120,.2),
    inset 0 -1px 0 rgba(74,88,120,.08);
  filter: drop-shadow(0 0 4px rgba(74,88,120,.15));
}

/* Círculo animado rojo Twitch */
.live-dot-tw {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff3d3d;
  box-shadow: 0 0 8px #ff3d3d, 0 0 16px rgba(255,61,61,.5);
  flex-shrink: 0;
  animation: livePulse 1.4s ease-in-out infinite;
}
.live-dot-tw.is-offline {
  background: #4A5878; box-shadow: none; animation: none;
}
@keyframes livePulse {
  0%,100% { transform:scale(1);    box-shadow:0 0 8px #ff3d3d; }
  50%     { transform:scale(1.3);  box-shadow:0 0 18px #ff3d3d, 0 0 28px rgba(255,61,61,.4); }
}

/* Dot legacy (header interno) */
.live-dot   { width:8px;height:8px;background:#9146FF;border-radius:50%;box-shadow:0 0 8px #9146FF;animation:glowPulse 1.5s ease-in-out infinite; }
.offline-dot{ width:8px;height:8px;background:#4A5878;border-radius:50%; }

/* ── SEARCH INPUT — angular energy border ───────────────────────── */
.search-input {
  background: linear-gradient(180deg, #141824 0%, #0a0e18 100%);
  border: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  box-shadow:
    inset 0 1px 0 rgba(79,195,247,.12),
    inset 0 -1px 0 rgba(79,195,247,.05),
    inset 1px 0 0 rgba(79,195,247,.07),
    inset -1px 0 0 rgba(79,195,247,.07);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
  transition: box-shadow .3s, filter .3s, background .3s;
  caret-color: #4FC3F7;
}
.search-input:focus {
  outline: none;
  background: linear-gradient(180deg, #1a2030 0%, #0e1420 100%);
  box-shadow:
    inset 0 1px 0 rgba(79,195,247,.55),
    inset 0 -1px 0 rgba(79,195,247,.2),
    inset 1px 0 0 rgba(79,195,247,.35),
    inset -1px 0 0 rgba(79,195,247,.35);
  filter: drop-shadow(0 0 10px rgba(79,195,247,.22)) drop-shadow(0 0 22px rgba(79,195,247,.09));
}
.search-input::placeholder { color:#4A5878; }

/* ── FILTER BUTTON — Hextech bevel ──────────────────────────────── */
.filter-btn {
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px;
  cursor: pointer;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  background: linear-gradient(180deg, #141824 0%, #0a0e18 100%);
  color: #4A5878;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  transition: background .2s, color .2s, filter .2s, transform .15s;
  border: none;
}
.filter-btn:hover {
  background: linear-gradient(180deg, #1c2438 0%, #101622 100%);
  color: #7a9abf;
  filter: drop-shadow(0 0 6px rgba(79,195,247,.2));
  transform: translateY(-1px);
}
/* Active states — se aplican desde JS con inline style, pero añadimos variantes */
.filter-btn.active-gold {
  background: linear-gradient(180deg, #2a1e08 0%, #14100a 100%);
  color: #C89B3C;
  box-shadow:
    inset 0 1px 0 rgba(200,155,60,.6),
    inset 0 -1px 0 rgba(200,155,60,.2);
  filter: drop-shadow(0 0 8px rgba(200,155,60,.35));
}
.filter-btn.active-cyan {
  background: linear-gradient(180deg, #0c1e2e 0%, #06101a 100%);
  color: #4FC3F7;
  box-shadow:
    inset 0 1px 0 rgba(79,195,247,.6),
    inset 0 -1px 0 rgba(79,195,247,.2);
  filter: drop-shadow(0 0 8px rgba(79,195,247,.35));
}

/* ── SHIMMER BUTTON ─────────────────────────────────────────────── */
.shimmer-btn {
  background:linear-gradient(90deg,#C89B3C 0%,#E8C06A 40%,#C89B3C 60%,#8B6A1F 100%);
  background-size:200% 100%; animation:shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ── SIDE PANEL ─────────────────────────────────────────────────── */
.side-panel {
  background: linear-gradient(160deg, rgba(10,15,30,.97) 0%, rgba(6,11,24,.98) 100%);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(200,155,60,.2);
  box-shadow: -20px 0 60px rgba(0,0,0,.7);
}

/* ── VIDEO PLACEHOLDER ──────────────────────────────────────────── */
.video-placeholder {
  background:linear-gradient(135deg,#0A0F1E 0%,#05080F 100%);
  border:1px solid rgba(145,70,255,.3);
  position:relative; overflow:hidden;
}
.video-placeholder::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(45deg,transparent 40%,rgba(145,70,255,.05) 50%,transparent 60%);
  animation:shimmer 3s linear infinite; background-size:200% 100%;
}

/* ── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes chainFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes glowPulse  { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes slideIn    { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fadeIn     { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:768px) {
  .side-panel   { position:fixed; inset:0; z-index:50; border-left:none; overflow-y:auto; }
  .live-widget  { top:auto; bottom:20px; right:16px; }
}

/* ── ANDROID / MOBILE — mejoras táctiles ────────────────────────── */
@media(max-width:700px) {

  /* Tier summary — iconos más pequeños y legibles */
  #tier-summary {
    gap: 6px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  #tier-summary > div { min-width: 28px; }

  /* Filtros — más espacio táctil */
  .filter-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px;
    min-width: 36px;
  }
  #btn-tierlist {
    padding: 6px 14px !important;
    min-height: 36px;
  }

  /* Search input */
  .search-input {
    padding: 12px 36px !important;
    font-size: 14px !important;
    min-height: 44px;
  }

  /* Champion cards — ancho completo en móvil */
  #champ-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .champion-card { padding: 14px !important; min-height: 88px; }
  .champ-img { width: 64px !important; height: 64px !important; }

  /* Mobile panel — ya fijado en HTML con top:56px para estar bajo el nav */
  /* El botón cerrar es grande y táctil (ya definido en detailHtml) */

  /* Live widget */
  .live-widget { top: auto !important; bottom: 16px !important; right: 12px !important; }

  /* Tierlist modal — columna única */
  #tl-left { padding: 16px 10px 40px !important; }
  #tl-detail { display: none !important; }
  #tierlist-rows [data-champ-id] { width: 44px !important; height: 44px !important; }

  /* Tierlist mobile detail fullscreen */
  #tl-mobile-detail { padding-top: 0 !important; }

  /* ── Ocultar sub-header: libera espacio y solo deja el nav principal ── */
  #tracker-subheader { display: none !important; }

  /* Banner ULTIMATE STOLEN DATABASE — más compacto */
  #tier-banner { padding: 8px 12px !important; }
  #tier-banner h2 { font-size: 13px !important; }
  #tier-banner p  { display: none !important; }

  /* Tier summary más pequeño */
  #tier-summary { gap: 4px !important; }
  #tier-summary > div > div:first-child {
    width: 22px !important;
    height: 22px !important;
    font-size: 8px !important;
  }
  #tier-summary > div > p { font-size: 9px !important; }
}

/* ── TIERLIST MODAL ─────────────────────────────────────────────────── */
#tierlist-modal {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,155,60,.2) transparent;
}
#tierlist-modal::-webkit-scrollbar { width: 6px; }
#tierlist-modal::-webkit-scrollbar-track { background: transparent; }
#tierlist-modal::-webkit-scrollbar-thumb { background: rgba(200,155,60,.2); border-radius: 3px; }

/* Champion icon wrapper in tierlist */
#tierlist-rows img {
  border: 1px solid rgba(255,255,255,.06);
}

/* Button TIERLIST — gold variant */
#btn-tierlist {
  color: #C89B3C;
  background: linear-gradient(180deg, #2a1e08 0%, #14100a 100%);
  box-shadow:
    inset 0 1px 0 rgba(200,155,60,.35),
    inset 0 -1px 0 rgba(200,155,60,.12);
  filter: drop-shadow(0 0 0px rgba(200,155,60,0));
  transition: background .2s, filter .2s, transform .15s;
}
#btn-tierlist:hover {
  background: linear-gradient(180deg, #3a2a0a 0%, #1e1608 100%);
  filter: drop-shadow(0 0 10px rgba(200,155,60,.3));
  transform: translateY(-1px);
}

/* ── TIERLIST MODAL — scrollbar izquierdo ──────────────────────────── */
#tl-left {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,155,60,.18) transparent;
}
#tl-left::-webkit-scrollbar { width: 5px; }
#tl-left::-webkit-scrollbar-track { background: transparent; }
#tl-left::-webkit-scrollbar-thumb { background: rgba(200,155,60,.18); border-radius: 3px; }

/* ── TIERLIST MODAL — panel derecho de detalle ─────────────────────── */
#tl-detail {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,155,60,.18) transparent;
  transition: width .25s;
}
#tl-detail::-webkit-scrollbar { width: 5px; }
#tl-detail::-webkit-scrollbar-track { background: transparent; }
#tl-detail::-webkit-scrollbar-thumb { background: rgba(200,155,60,.18); border-radius: 3px; }

/* Icono de campeón en tierlist — borde al estar seleccionado */
#tierlist-rows [data-champ-id] {
  position: relative;
}

/* ── TIERLIST MODAL MOBILE DETAIL (fullscreen overlay) ──────────── */
#tl-mobile-detail {
  padding: 0;
}
#tl-mobile-detail > div {
  min-height: 100%;
}
@media(max-width:700px) {
  /* Tierlist modal — ocupar pantalla completa */
  #tierlist-modal > div {
    max-width: 100% !important;
  }
  /* Tier label más estrecho */
  #tierlist-rows > div > div:first-child {
    width: 40px !important;
  }
  /* Íconos de campeón más compactos */
  #tierlist-rows > div > div:last-child {
    padding: 3px 4px !important;
    gap: 2px !important;
  }
}

/* ── TRACKER HERO ───────────────────────────────────────────── */
.tracker-hero {
  text-align: center;
  padding: 28px 20px 16px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.tracker-hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(26px, 5vw, 50px);
  font-weight: 900; letter-spacing: .12em;
  color: var(--text); margin: 0 0 6px;
  line-height: 1;
}
.tracker-hero-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px; color: var(--muted); margin: 0 0 14px;
}
.tracker-tier-summary {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-top: 4px;
}

/* Eyebrow reuse from ab-page */
.tracker-hero .ab-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.tracker-hero .ab-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

/* grid-bg reuse */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(79,195,247,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,.022) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── TRACKER MOBILE EXTRAS ─────────────────────────────────────── */
@media(max-width:700px) {
  /* Champion grid — 1 column for cards to be readable */
  #champ-grid {
    grid-template-columns: 1fr !important;
  }
  /* Filter bar — scrollable horizontal */
  .filter-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  /* Filter buttons smaller */
  .filter-btn {
    font-size: 10px !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }
  /* Counter text smaller */
  #counter { font-size: 10px; }
  /* Champion card — tighter layout */
  .champion-card { padding: 10px !important; }
  .champ-img { width: 50px !important; height: 50px !important; }
}
@media(max-width:480px) {
  /* Tier summary — wrap and smaller */
  #tier-summary > div > div:first-child {
    font-size: 9px !important;
    padding: 4px 7px !important;
    min-width: 26px !important;
  }
  /* Search bar full width */
  #search-input { width: 100% !important; }
}