/* ===== Tipografía propia (sin depender de Google Fonts) ===== */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/public/fonts/bricolage-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/public/fonts/bricolage-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/public/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/public/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* =====================================================================
   HTP — Sistema de diseño amarillo
   Se carga al final (después de style.css y theme.css) y manda sobre todo.
   Regla de oro: fondo oscuro cálido + amarillo como único acento.
     - Amarillo SÓLIDO  -> texto oscuro (#1a1300)
     - Fondo oscuro     -> texto claro (#fff8e1) o amarillo
   ===================================================================== */

:root{
  --bg:#0b0b0d;
  --bg-panel:#141417;
  --bg-panel-solid:#141417;
  --surface-2:#1b1b20;
  --surface-3:#26262d;
  --line:rgba(255,255,255,0.13);
  --line-soft:rgba(255,255,255,0.08);

  --y-500:#f2c230;       /* amarillo principal */
  --y-400:#f5cf5c;
  --y-300:#f8dc8a;
  --y-600:#d9a91c;
  --y-700:#a87a00;
  --ink:#1a1300;         /* texto sobre amarillo */

  --red:#f2c230;
  --red-2:#f5cf5c;
  --red-deep:#c99200;
  --red-dim:rgba(255,255,255,0.22);
  --red-glow:rgba(242,194,48,0.16);
  --gold:#f2c230;

  --text:#f6f6f8;
  --muted:#c9c9d1;       /* contraste AA sobre fondo oscuro */
  --muted-2:#9d9da8;
  --radius:14px;
}

html,body{background:var(--bg);}
body{color:var(--text);}
a{color:inherit;}
::selection{background:var(--y-500);color:var(--ink);}
:focus-visible{outline:2px solid var(--y-400);outline-offset:3px;}

/* ---------- Cabecera: 3 zonas, nada se parte en dos líneas ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px clamp(16px,3vw,40px);
  background:rgba(10,9,7,0.94);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand-name{display:flex;align-items:center;gap:8px;color:var(--text);white-space:nowrap;}
.brand-sub{color:var(--muted-2);white-space:nowrap;}
.brand-tag{
  background:var(--y-500)!important;color:var(--ink)!important;border:0!important;
  font-weight:800;letter-spacing:.04em;padding:3px 9px!important;
}
.brand-mark{background:var(--surface-2);border:1px solid var(--line);}

header nav{
  display:flex;align-items:center;justify-content:center;gap:4px;
  flex:1 1 auto;min-width:0;flex-wrap:nowrap;
}
.nav-link,.nav-dropdown-toggle{
  color:var(--text);opacity:.88;white-space:nowrap;
  font-size:14.5px;font-weight:600;padding:9px 14px;border-radius:10px;
  background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover,.nav-dropdown-toggle:hover{background:rgba(255,194,26,0.12);color:var(--y-300);opacity:1;}
.nav-link.active{background:var(--y-500);color:var(--ink);opacity:1;box-shadow:none;}
.nav-link.active:hover{background:var(--y-400);color:var(--ink);}
.nav-dropdown-menu{background:var(--surface-2);border:1px solid var(--line);}
.nav-dropdown-menu a{color:var(--text);}
.nav-dropdown-menu a:hover{background:rgba(255,194,26,0.14);color:var(--y-300);}

.nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.reset-countdown{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:6px 12px;
}
.reset-countdown strong{color:var(--y-400);font-size:12.5px;white-space:nowrap;}
.reset-countdown small{color:var(--muted-2);font-size:9.5px;letter-spacing:.08em;}
.reset-clock{color:var(--y-500);}

.user-chip{
  color:var(--text)!important;background:var(--surface-2);border:1px solid var(--line)!important;
  display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:100px;
}
.user-chip span{color:inherit;white-space:nowrap;}

/* ---------- Botones: 3 niveles claros ---------- */
.btn,.shop-btn,button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 22px;border-radius:12px;
  font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
/* 1) Principal: amarillo sólido + texto oscuro */
.btn-primary,.btn.btn-primary,
.shop-btn:not(:disabled):not(.owned):not(.equipped){
  background:var(--y-500);color:var(--ink)!important;border:2px solid var(--y-500);box-shadow:0 6px 20px -8px var(--red-glow);
}
.btn-primary:hover,.shop-btn:not(:disabled):not(.owned):not(.equipped):hover{background:var(--y-400);border-color:var(--y-400);transform:translateY(-1px);}
.btn-primary:active{background:var(--y-600);border-color:var(--y-600);transform:none;}
/* 2) Secundario: borde amarillo + texto claro */
.btn-ghost,.btn-secondary{
  background:transparent;color:var(--text)!important;border:2px solid var(--y-500);
}
.btn-ghost:hover,.btn-secondary:hover{background:rgba(255,194,26,0.14);color:var(--y-300)!important;border-color:var(--y-400);}
/* 3) Peligro (banear, borrar): se distingue por el borde punteado */
.quick-btn.danger,.btn-danger,button.danger{
  background:transparent;color:var(--y-300)!important;border:2px dashed var(--y-500);
}
.quick-btn.danger:hover,.btn-danger:hover{background:rgba(255,194,26,0.16);}
.btn:disabled,.shop-btn:disabled,button:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.shop-btn.owned,.shop-btn:disabled{background:var(--surface-3);color:var(--muted)!important;border:2px solid var(--line);}
.shop-btn.equipped{background:var(--y-500);color:var(--ink)!important;border:2px solid var(--y-500);}
.btn-lg{min-height:52px;padding:14px 30px;font-size:16px;}

/* ---------- Texto y títulos ---------- */
h1,h2,h3,h4{color:var(--text);}
h1 .accent,.accent,.text-premium{color:var(--y-500)!important;background:none!important;-webkit-text-fill-color:currentColor;}
.eyebrow{color:var(--y-400);font-weight:700;}
p{color:var(--muted);}
.muted{color:var(--muted);}

/* ---------- Tarjetas: mismo lenguaje en todo el sitio ---------- */
.card,.pillar,.rule-card,.member-card,.glass,.legend-card,.level-card,.wheel-card,.balance-card,
.shop-card,.shop-item,.admin-card,.panel,.postular-form,.reset-banner,.cta-banner{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;
}
.card:hover,.pillar:hover,.rule-card:hover,.member-card:hover{border-color:var(--y-500);}
.pillar .num,.rule-num,.card-icon{color:var(--y-500);}
.rule-card .rule-num{background:rgba(255,194,26,0.14);border:1px solid var(--line);}

/* ---------- Píldoras / etiquetas ---------- */
.pill{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  padding:8px 16px;border-radius:100px;font-weight:600;
}
.tab,.chip,.shop-tab,[class*="filter"] button{
  background:var(--surface-2);color:var(--text);border:1.5px solid var(--line);
  padding:9px 18px;border-radius:100px;font-weight:700;cursor:pointer;
}
.tab:hover,.chip:hover,.shop-tab:hover{border-color:var(--y-500);color:var(--y-300);}
.tab.active,.chip.active,.shop-tab.active{background:var(--y-500);color:var(--ink);border-color:var(--y-500);}

/* ---------- Formularios ---------- */
input,select,textarea{
  background:var(--surface-2)!important;color:var(--text)!important;
  border:1.5px solid var(--line-soft)!important;border-radius:12px;
  padding:12px 14px;font:inherit;font-size:15px;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)!important;}
input:focus,select:focus,textarea:focus{border-color:var(--y-500)!important;outline:none;box-shadow:0 0 0 3px rgba(255,194,26,.22);}
label{color:var(--text);font-weight:600;}

/* ---------- Cabeceras de página: centradas ---------- */
.ranking-head,.ruleta-head,.postular-head,.admin-head,.tienda-head{
  text-align:center;margin:0 auto 32px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ranking-head>div,.admin-head>div{display:flex;flex-direction:column;align-items:center;}
.ranking-head h1,.ruleta-head h1,.postular-head h1,.admin-head h1{margin:0;text-align:center;max-width:none;}
.ruleta-head p,.postular-head p,.ranking-head p{margin-left:auto;margin-right:auto;text-align:center;max-width:620px;color:var(--muted);}
.section-head{text-align:center;margin-left:auto;margin-right:auto;}
.section-head p{margin-left:auto;margin-right:auto;max-width:620px;}
.section-head h2{text-align:center;}

/* Contenedores de página: mismo ancho y siempre centrados */
.ranking-wrap,.ruleta-wrap,.postular-wrap,.admin-wrap,.tienda-wrap,.shop-wrap{
  width:100%;margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(16px,3vw,34px)!important;padding-right:clamp(16px,3vw,34px)!important;
  box-sizing:border-box;
}
.ranking-wrap,.tienda-wrap,.shop-wrap{max-width:1120px!important;}
.ruleta-wrap,.admin-wrap{max-width:1120px!important;}
.postular-wrap{max-width:780px!important;}

/* ---------- Home: hero ---------- */
.hero{align-items:center;text-align:center;}
.hero .btn{margin:0;}
.hero-actions,.hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero h1{color:var(--text);text-shadow:0 2px 24px rgba(0,0,0,.8);}
.hero p{color:var(--text);opacity:.9;max-width:640px;margin-left:auto;margin-right:auto;}
.stats,.hero-stats{margin-left:auto;margin-right:auto;}
.stat-num{color:var(--text);}
.stat-num span{color:var(--y-500);}

/* ---------- Ranking ---------- */
.podium-card,.member-rank-card{background:var(--bg-panel);border:1.5px solid var(--line);}
.podium-card.p1{border-color:var(--y-500);box-shadow:0 0 0 1px var(--y-500),0 18px 50px -20px var(--red-glow);}
.podium-rank-badge{font-weight:800;}
.podium-card.p1 .podium-rank-badge{background:var(--y-500);color:var(--ink);}
.podium-points,.member-stats b{color:var(--y-400);}
.member-name,.podium-name{color:var(--text);}
.member-handle,.podium-handle{color:var(--muted-2);}
.member-pos{background:var(--y-500);color:var(--ink);font-weight:800;}
.member-title,.podium-title-line{color:var(--y-400);}
.member-stats span{color:var(--text);border-color:var(--line);}

/* ---------- Footer ---------- */
footer{background:#070605;border-top:1px solid var(--line);}
footer a{color:var(--muted);}
footer a:hover{color:var(--y-400);}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .brand-sub{display:none;}
  .nav-link,.nav-dropdown-toggle{padding:8px 10px;font-size:14px;}
  .reset-countdown{display:none;}
}
@media (max-width:860px){
  header{flex-wrap:wrap;justify-content:center;row-gap:10px;position:static;}
  header nav{order:3;flex:1 1 100%;flex-wrap:wrap;justify-content:center;}
  .nav-right{justify-content:center;}
  .btn,.shop-btn{min-height:46px;}
}
@media (max-width:560px){
  .btn-lg{width:100%;}
  .hero-actions{flex-direction:column;align-items:stretch;}
}

/* ================= RANKING: tamaños legibles ================= */
.ranking-wrap{max-width:1120px!important;}
.ranking-head{margin-top:36px!important;}
.ranking-head h1{font-size:clamp(34px,4.6vw,54px)!important;}
.live-badge{background:rgba(255,194,26,.14);color:var(--y-300);border:1px solid var(--y-500);padding:6px 14px;border-radius:100px;font-weight:700;display:inline-flex;align-items:center;gap:8px;}
.live-badge .pulse{background:var(--y-500);box-shadow:0 0 0 0 var(--red-glow);}
.ranking-reset-card{
  max-width:100%;margin:0 auto 36px!important;
  background:var(--bg-panel)!important;border:1.5px solid var(--line)!important;border-radius:16px!important;
  padding:16px 22px!important;display:flex;align-items:center;gap:16px;
}
.ranking-reset-icon{color:var(--y-500);border:1.5px solid var(--y-500);}
.ranking-reset-copy strong{color:var(--text);font-size:15px;letter-spacing:.04em;}
.ranking-reset-copy span{color:var(--muted);font-size:13.5px;}
.ranking-reset-timer{margin-left:auto;text-align:right;}
.ranking-reset-timer b{color:var(--y-400);font-size:22px;}
.ranking-reset-timer small{color:var(--muted-2);font-size:11px;}

.podium{max-width:900px!important;gap:20px!important;margin-bottom:56px!important;}
.podium-card{background:var(--bg-panel)!important;border:1.5px solid var(--line)!important;min-height:250px!important;padding:38px 18px 22px!important;}
.podium-card.p1{min-height:290px!important;border-color:var(--y-500)!important;box-shadow:0 0 0 1px var(--y-500),0 24px 60px -24px var(--red-glow)!important;}
.podium-rank-badge{font-size:12px!important;padding:7px 16px!important;top:-15px!important;}
.podium-card.p2 .podium-rank-badge{background:#d9d4c4;color:var(--ink);}
.podium-card.p3 .podium-rank-badge{background:#c27a1f;color:#fff;}
.podium-card.p1 .podium-rank-badge{background:var(--y-500);color:var(--ink);}
.podium-avatar{width:84px!important;height:84px!important;border-color:var(--y-700)!important;}
.podium-card.p1 .podium-avatar{width:100px!important;height:100px!important;border-color:var(--y-500)!important;}
.podium-card.p3 .podium-avatar{border-color:var(--y-700)!important;box-shadow:none!important;}
.podium-name{font-size:19px!important;color:var(--text);}
.podium-handle{font-size:13px!important;color:var(--muted-2)!important;}
.podium-mini-icons{display:none;}
.podium-title-line{font-size:12px!important;color:var(--y-400)!important;letter-spacing:.06em;}
.podium-points{font-size:20px!important;font-weight:800;color:var(--y-400)!important;}

.members-heading{border-bottom:1.5px solid var(--line)!important;margin-bottom:20px!important;}
.members-title{font-size:17px!important;color:var(--text)!important;}
.members-title>span{background:var(--y-500)!important;}
.members-count{font-size:13px!important;color:var(--y-400)!important;}
.rank-section-label{display:flex;justify-content:space-between;align-items:center;margin:26px 0 14px;font-weight:800;color:var(--text);}
.rank-section-label span{font-size:15px;letter-spacing:.05em;}
.rank-section-label em{font-style:normal;font-size:12.5px;color:var(--y-400);font-weight:700;}

.rank-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important;}
.member-rank-card{
  height:auto!important;padding:26px 12px 18px!important;border:1.5px solid var(--line)!important;background:var(--bg-panel)!important;border-radius:16px!important;
}
.member-rank-card:hover{border-color:var(--y-500)!important;}
.member-rank-card.me{border-color:var(--y-500)!important;box-shadow:0 0 0 1px var(--y-500)!important;}
.member-rank-card.owner-member{border-color:var(--y-400)!important;}
.member-pos{top:-1px!important;font-size:12px!important;padding:5px 12px!important;background:var(--y-500)!important;color:var(--ink)!important;border:0!important;border-radius:0 0 10px 10px!important;}
.member-avatar-wrap,.member-avatar{width:64px!important;height:64px!important;}
.member-avatar{border:2px solid var(--y-700)!important;}
.member-avatar-wrap{margin:6px auto 12px!important;}
.member-name{font-size:16px!important;line-height:1.2!important;color:var(--text)!important;}
.member-handle{font-size:12.5px!important;color:var(--muted-2)!important;margin-top:4px!important;}
.member-icons{display:none;}
.member-title{font-size:11.5px!important;color:var(--y-400)!important;margin-top:8px!important;letter-spacing:.05em;}
.member-stats{margin-top:12px!important;font-size:13px!important;gap:8px!important;}
.member-stats span{font-size:12px!important;padding:4px 8px!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:6px!important;}
.member-stats b{color:var(--y-400)!important;font-size:13.5px!important;}
.member-rank-card .name-title,.member-rank-card .name-badge{font-size:11px!important;}
@media (max-width:1050px){.rank-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media (max-width:820px){.rank-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}.podium{gap:12px!important;}.podium-name{font-size:16px!important;}.podium-avatar{width:64px!important;height:64px!important;}.podium-card.p1 .podium-avatar{width:76px!important;height:76px!important;}}
@media (max-width:560px){
  .rank-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .ranking-reset-card{flex-wrap:wrap;justify-content:center;text-align:center;}
  .ranking-reset-timer{margin:0 auto;text-align:center;}
  .podium{grid-template-columns:1fr!important;max-width:340px!important;}
}

/* ================= TIENDA ================= */
.shop-balance{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;margin-bottom:26px;background:var(--bg-panel);border:1.5px solid var(--line);border-radius:16px;}
.shop-balance .amount{font-size:32px;color:var(--text);}
.shop-balance .amount span{color:var(--y-500);}
.shop-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 36px;position:static;background:none;border:0;padding:0;}
.shop-tabs a{
  background:var(--surface-2);color:var(--text);border:1.5px solid var(--line);
  padding:10px 22px;border-radius:100px;font-weight:700;font-size:14.5px;text-decoration:none;
}
.shop-tabs a:hover{background:var(--y-500);border-color:var(--y-500);color:var(--ink);}
.shop-category{margin-bottom:56px;}
.shop-category h3{text-align:center;font-size:24px;text-transform:none;color:var(--text);margin-bottom:22px;}
.shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
.shop-grid.shop-grid-banner,.shop-grid.shop-grid-title{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.shop-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px!important;text-align:center;background:var(--bg-panel)!important;border:1.5px solid var(--line)!important;}
.shop-card:hover{border-color:var(--y-500)!important;}
.shop-card .item-name{font-size:16px;color:var(--text);}
.shop-price{font-size:15px;color:var(--y-400)!important;font-weight:800;}
.shop-card form{width:100%;margin-top:auto;}
.shop-card .shop-btn{width:100%;margin-top:auto;font-size:14.5px;}
.shop-btn.owned{background:transparent!important;color:var(--text)!important;border:2px solid var(--y-500)!important;}
.shop-btn.owned:hover{background:rgba(255,194,26,.14)!important;}
.shop-btn:disabled{background:var(--surface-3)!important;color:var(--muted)!important;border:2px solid var(--line)!important;}
@media (max-width:1000px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}.shop-grid.shop-grid-banner,.shop-grid.shop-grid-title{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media (max-width:640px){.shop-grid,.shop-grid.shop-grid-banner,.shop-grid.shop-grid-title{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}.shop-balance{flex-direction:column;text-align:center;}}
@media (max-width:420px){.shop-grid.shop-grid-banner,.shop-grid.shop-grid-title{grid-template-columns:1fr!important;}}

/* Aire entre el menú y el título de cada página */
.ruleta-head,.postular-head,.admin-head,.tienda-head{margin-top:44px!important;margin-bottom:32px!important;}
.eyebrow{margin-bottom:4px;}

body{overflow-x:clip;}
.admin-wrap h2,.admin-wrap .section-title{text-align:center;}


/* =====================================================================
   MODERACIÓN: el amarillo es un ACENTO, no el color de todo.
   Solo lleva amarillo: botón principal, menú activo, el título del
   hero, el puesto #1 y los números clave. Lo demás va en neutros.
   ===================================================================== */
header{border-bottom:1px solid var(--line);}
.brand-mark,.reset-countdown,.user-chip,.pill{border-color:var(--line)!important;}
.reset-countdown strong{color:var(--text);}
.reset-clock{color:var(--muted);}
.nav-link:hover,.nav-dropdown-toggle:hover{background:rgba(255,255,255,0.08);color:#fff;}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.08);color:#fff;}

/* Botón secundario: neutro (el amarillo queda para el principal) */
.btn-ghost,.btn-secondary,.shop-btn.owned{border:2px solid rgba(255,255,255,0.28)!important;color:var(--text)!important;background:transparent!important;}
.btn-ghost:hover,.btn-secondary:hover,.shop-btn.owned:hover{border-color:var(--y-500)!important;background:rgba(255,255,255,0.06)!important;color:#fff!important;}
.quick-btn.danger,.btn-danger,button.danger{border:2px dashed rgba(255,255,255,0.35)!important;color:var(--text)!important;}
.btn-primary,.shop-btn:not(:disabled):not(.owned):not(.equipped){box-shadow:none;}

/* Etiquetas, textos y detalles: fuera el amarillo */
.eyebrow,.section-head .eyebrow{color:var(--muted);font-weight:600;}
.section-head .accent,.section-head .text-premium,.section-head h2 span{color:inherit!important;}
.ranking-head h1 .text-premium,.ruleta-head h1 .text-premium,.postular-head h1 .text-premium{color:var(--y-500)!important;}
.pillar .num,.rule-num,.card-icon{color:var(--muted);}
.rule-card .rule-num{background:var(--surface-3);color:var(--text);}
.card:hover,.pillar:hover,.rule-card:hover,.member-card:hover{border-color:rgba(255,255,255,0.3);}
.stat-num span,.stat-num{color:var(--text);}
.hero-stats .stat-num,.stat-num{color:var(--text);}

/* Ranking */
.live-badge{background:var(--surface-2);color:var(--text);border:1px solid var(--line);}
.live-badge .pulse{background:#3ddc84;box-shadow:none;}
.ranking-reset-icon{color:var(--muted);border-color:var(--line);}
.ranking-reset-timer b{color:var(--text);}
.podium-card{border-color:var(--line)!important;}
.podium-card.p1{border-color:var(--y-500)!important;box-shadow:0 20px 50px -28px var(--red-glow)!important;}
.podium-card.p2 .podium-rank-badge{background:#d4d4da;}
.podium-card.p3 .podium-rank-badge{background:#b8793a;}
.podium-avatar,.podium-card.p3 .podium-avatar{border-color:rgba(255,255,255,0.35)!important;}
.podium-card.p1 .podium-avatar{border-color:var(--y-500)!important;}
.podium-points{color:var(--text)!important;}
.podium-card.p1 .podium-points{color:var(--y-400)!important;}
.podium-title-line,.member-title{color:var(--muted)!important;}
.members-title>span{background:var(--y-500)!important;}
.members-heading{border-bottom-color:var(--line)!important;}
.members-count,.rank-section-label em{color:var(--muted)!important;}
.member-rank-card{border-color:var(--line)!important;}
.member-rank-card:hover{border-color:rgba(255,255,255,0.35)!important;}
.member-pos{background:var(--surface-3)!important;color:var(--text)!important;}
.member-rank-card.me .member-pos,.member-rank-card.owner-member .member-pos{background:var(--y-500)!important;color:var(--ink)!important;}
.member-avatar{border-color:rgba(255,255,255,0.3)!important;}
.member-stats b{color:var(--text)!important;}
.member-stats span{border-color:var(--line)!important;color:var(--muted)!important;}

/* Tienda / Ruleta / Postular / Admin */
.shop-tabs a{border-color:var(--line);}
.shop-price{color:var(--text)!important;}
.shop-balance .amount span{color:var(--y-500);}
.shop-card,.glass,.legend-card,.level-card,.wheel-card,.postular-form,.admin-card{border-color:var(--line)!important;}
.shop-card:hover{border-color:rgba(255,255,255,0.3)!important;}
.legend-row.rare .legend-name,.legend-row.epic .legend-name{color:var(--text)!important;}
.fichas-amount,.level-badge span{color:var(--y-400);}
input:focus,select:focus,textarea:focus{border-color:var(--y-500)!important;}
input,select,textarea{border-color:var(--line)!important;}
footer{border-top-color:var(--line);}

/* =====================================================================
   V3 — MENOS AMARILLO + HERO CINEMATOGRÁFICO
   El amarillo sólido queda SOLO para el botón principal y el puesto #1.
   Los acentos de texto pasan a un arena pálido (#e8d9ae), mucho más suave.
   ===================================================================== */
:root{--sand:#e8d9ae;--ink-soft:#d9c98f;}

h1 .accent,.accent,.text-premium,
.ranking-head h1 .text-premium,.ruleta-head h1 .text-premium,.postular-head h1 .text-premium,
.ranking-head h1 span[style*="red-2"],.admin-head h1 span[style*="red-2"]{color:var(--sand)!important;}
.live-dot{background:#3ddc84;}
.brand-tag{background:transparent!important;color:var(--sand)!important;border:1px solid rgba(232,217,174,.5)!important;font-weight:700;}
.shop-balance .amount span,.fichas-amount,.level-badge span{color:var(--sand);}
.members-title>span{background:var(--sand)!important;}
.podium-card.p1{border-color:rgba(232,217,174,.7)!important;}
.podium-card.p1 .podium-points{color:var(--sand)!important;}
.member-rank-card.me,.member-rank-card.owner-member{border-color:rgba(232,217,174,.7)!important;}

/* Menú en píldora: el item activo es claro, no amarillo */
header nav{
  background:rgba(18,18,20,.62);border:1px solid rgba(255,255,255,.12);border-radius:100px;
  padding:4px;gap:2px;flex:0 1 auto;margin:0 auto;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
header .nav-link,header .nav-dropdown-toggle{border-radius:100px;padding:8px 16px;}
header .nav-link.active{background:#f2f2f4;color:#111114;}
header .nav-link.active:hover{background:#fff;color:#111114;}
header .btn-primary{padding:9px 18px;min-height:40px;font-size:14px;}

/* ---------- Hero cinematográfico ---------- */
body.has-cine header{position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);border-bottom:0;}
.cine{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(110px,16vh,150px) clamp(20px,6vw,96px) 150px;
  background:#050506;text-align:left;
}
.cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4;filter:contrast(1.08) brightness(1.05);}
.cine-shade{
  position:absolute;inset:0;z-index:-3;
  background:
    linear-gradient(90deg,rgba(5,5,6,.88) 0%,rgba(5,5,6,.55) 42%,rgba(5,5,6,.15) 72%,rgba(5,5,6,.35) 100%),
    linear-gradient(180deg,rgba(5,5,6,.55) 0%,transparent 28%,transparent 62%,rgba(5,5,6,.95) 100%);
}
.cine-grain{
  position:absolute;inset:0;z-index:-2;opacity:.18;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
}
.cine-word{
  position:absolute;z-index:-1;right:-1vw;bottom:9vh;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(200px,34vw,560px);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);
}
.cine-content{max-width:660px;position:relative;}
.cine-kicker{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.cine-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18);}
.cine-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(52px,9.2vw,138px);line-height:.92;letter-spacing:-.035em;color:#fff;
  margin:0 0 26px;text-shadow:0 4px 40px rgba(0,0,0,.6);max-width:none;text-align:left;
}
.cine-stop{color:var(--y-500);}
.cine-lead{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:#e4e4ea;max-width:520px;margin:0 0 30px;}
.cine-lead b{color:#fff;}
.cine-actions{display:flex;flex-wrap:wrap;gap:14px;}
.cine-side{
  position:absolute;right:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:11.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.cine-bottom{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 clamp(20px,6vw,96px) 30px;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"index sound" "stats stats";gap:18px 24px;align-items:end;
}
.cine-index{grid-area:index;display:flex;align-items:flex-end;gap:clamp(18px,3vw,44px);flex-wrap:wrap;position:relative;padding-top:26px;}
.cine-index-label{position:absolute;top:0;left:0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.cine-index a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:rgba(255,255,255,.55);transition:color .2s,transform .2s;}
.cine-index a b{font-family:var(--font-display);font-size:clamp(26px,3vw,40px);font-weight:300;line-height:1;letter-spacing:-.02em;}
.cine-index a span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.cine-index a:hover{color:#fff;transform:translateY(-3px);}
.cine-stats{
  grid-area:stats;display:flex;gap:0;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;
}
.cine-stats div{flex:1 1 0;display:flex;align-items:baseline;gap:12px;padding-right:20px;}
.cine-stats div+div{padding-left:20px;border-left:1px solid rgba(255,255,255,.12);}
.cine-stats b{font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;}
.cine-stats span{font-size:13px;color:var(--muted);}
.cine-sound{
  grid-area:sound;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(18,18,20,.6);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:10px 18px;font:700 13px/1 var(--font-body);backdrop-filter:blur(10px);
}
.cine-sound:hover{border-color:#fff;background:rgba(255,255,255,.12);}

@media (max-width:900px){
  .cine-word{opacity:.7;font-size:52vw;bottom:24vh;}
  .cine-side{display:none;}
  .cine-bottom{grid-template-columns:1fr;grid-template-areas:"index" "sound" "stats";}
  .cine-stats{flex-direction:column;gap:10px;}
  .cine-stats div,.cine-stats div+div{padding:0;border:0;}
  .cine{padding-bottom:260px;}
  body.has-cine header{position:relative;background:#0b0b0d;}
  .cine{min-height:calc(100svh - 120px);}
}
@media (max-width:560px){
  .cine-actions .btn{width:100%;}
  .cine-index{gap:16px;}
}
@media (prefers-reduced-motion:reduce){.cine-video{display:none;}.cine{background:#050506 url("/public/video/hero-cinematic-poster.jpg") center/cover;}}

/* Ajustes finos del hero y la cabecera */
header .brand-sub{display:none;}
header{gap:14px;}
header .nav-link,header .nav-dropdown-toggle{padding:8px 13px;font-size:14px;}
.reset-countdown{padding:5px 10px;}
@media (max-width:1280px){.reset-countdown{display:none;}}
.cine{justify-content:flex-start;padding-top:clamp(120px,19vh,190px);padding-bottom:210px;}
.cine-title{font-size:clamp(46px,min(8.4vw,14vh),124px);margin-bottom:22px;}
.cine-lead{margin-bottom:26px;}
.cine-kicker{margin-bottom:18px;}
@media (max-height:760px){.cine-lead{display:none;}.cine{padding-bottom:190px;}}

.cine{padding-top:clamp(96px,14vh,150px);padding-bottom:190px;}
.cine-title{font-size:clamp(44px,min(8vw,12.5vh),118px);}
@media (max-width:900px){
  .cine{min-height:0;padding-top:48px;padding-bottom:0;}
  .cine-bottom{position:relative;margin:40px calc(-1 * clamp(20px,6vw,96px)) 0;padding-bottom:26px;}
  .cine-content{max-width:none;}
  header nav{padding:3px;}
  header .nav-link,header .nav-dropdown-toggle{padding:7px 11px;font-size:13.5px;}
}

/* =====================================================================
   V4 — MÁS CLARIDAD Y CRISTAL (glassmorphism)
   ===================================================================== */
.cine-video{filter:brightness(1.4) contrast(1.06) saturate(1.05);}
.cine-shade{
  background:
    radial-gradient(ellipse 55% 60% at 72% 52%,rgba(255,255,255,.10),transparent 70%),
    linear-gradient(90deg,rgba(5,5,6,.78) 0%,rgba(5,5,6,.34) 40%,rgba(5,5,6,.04) 70%,rgba(5,5,6,.2) 100%),
    linear-gradient(180deg,rgba(5,5,6,.45) 0%,transparent 26%,transparent 66%,rgba(5,5,6,.82) 100%);
}
.cine-word{
  color:rgba(255,255,255,.035);
  -webkit-text-stroke:2px rgba(255,255,255,.26);
  text-shadow:0 0 60px rgba(255,255,255,.08);
}
.cine-title{text-shadow:0 6px 50px rgba(0,0,0,.45);}
.cine-lead{color:#f1f1f5;text-shadow:0 1px 18px rgba(0,0,0,.6);}

/* Cristal: mismo lenguaje en todo el hero */
.cine-kicker{
  padding:9px 16px;border-radius:100px;color:#f1f1f5;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.cine .btn-ghost{
  background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.28)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.cine .btn-ghost:hover{background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.5)!important;}
.cine .btn-primary{box-shadow:0 10px 30px -10px rgba(242,194,48,.55);}

.cine-index a{
  min-width:92px;padding:12px 16px;border-radius:16px;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.cine-index a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff;}
.cine-index-label{color:rgba(255,255,255,.6);}
.cine-stats{border-top:0;padding-top:0;gap:14px;}
.cine-stats div,.cine-stats div+div{
  padding:14px 20px;border:1px solid rgba(255,255,255,.16);border-radius:16px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.cine-stats span{color:#dcdce3;}
.cine-sound{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);}
.cine-side{color:rgba(255,255,255,.65);}

/* Cabecera también en cristal */
body.has-cine header{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);}
header nav{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.reset-countdown,.user-chip{background:rgba(255,255,255,.08)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}

/* Compactar la barra inferior para que nada se pise */
.cine{padding-bottom:225px;}
.cine-title{font-size:clamp(44px,min(7.6vw,11.2vh),112px);}
.cine-index{padding-top:30px;}
.cine-index a{padding:8px 14px;min-width:84px;}
.cine-index a b{font-size:clamp(24px,2.4vw,32px);}
.cine-stats div,.cine-stats div+div{padding:10px 18px;}
.cine-bottom{padding-bottom:24px;gap:14px 24px;}
@media (max-height:820px){.cine-lead{display:none;}}

/* =====================================================================
   V5 — CALIDAD TIPOGRÁFICA Y MARCA
   ===================================================================== */
:root{
  --font-display:'Bricolage Grotesque','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hero-serif:var(--font-display);--font-hero-heavy:var(--font-display);
}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;}
body{
  font-family:var(--font-body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01","calt";font-optical-sizing:auto;
}
h1,h2,h3,h4,.brand-name,.podium-name,.member-name,.cine-title,.stat-num,.cine-index b,.cine-stats b{
  font-family:var(--font-display);font-optical-sizing:auto;
}
h1,h2{letter-spacing:-.025em;line-height:1.04;font-weight:800;}
h3,h4{letter-spacing:-.015em;line-height:1.2;font-weight:700;}
p{line-height:1.7;}
.section-head h2{font-size:clamp(32px,4.2vw,52px);}
.section-head p{font-size:17.5px;color:var(--muted);}
.pillar h3,.rule-card h3,.card h3{font-size:22px;}
.pillar p,.rule-card p,.card p{font-size:16px;line-height:1.7;color:var(--muted);}
.nav-link,.nav-dropdown-toggle,.btn,.shop-btn{font-family:var(--font-body);letter-spacing:-.005em;}
.btn{font-weight:650;}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;}
small,.muted{font-size:13.5px;}

/* Marca: wordmark nítido en la cabecera */
.brand{gap:12px;}
.brand-name{gap:12px;}
.brand-wordmark{height:36px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(255,255,255,.12));}
.brand-tag{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;padding:5px 10px!important;border-radius:100px;}
.site-loader-logo{width:auto!important;height:54px!important;filter:drop-shadow(0 0 16px rgba(255,255,255,.25))!important;}
.cine-title{font-weight:800;letter-spacing:-.04em;}
.cine-kicker,.cine-index span,.cine-index-label{font-family:var(--font-body);}
.cine-index a b{font-weight:300;}
.member-name,.podium-name{font-weight:700;letter-spacing:-.01em;}
@media (max-width:560px){.brand-wordmark{height:30px;}}

/* =====================================================================
   V6 — RANKING REDISEÑADO + MÁS CUERPO EN TODO EL SITIO
   ===================================================================== */
:root{
  --gold:#f2c230;--silver:#d9dce3;--bronze:#cf8e57;
  --glass:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
  --glass-line:rgba(255,255,255,.11);
}

/* Ambiente: luz suave arriba y viñeta, para que no se vea plano */
body{
  background:
    radial-gradient(1100px 520px at 50% -140px,rgba(255,255,255,.075),transparent 70%),
    radial-gradient(700px 420px at 100% 35%,rgba(242,194,48,.035),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body.has-cine{background:var(--bg);}

/* Tarjetas con cuerpo: cristal + sombra + elevación */
.pillar,.rule-card,.card,.member-card,.shop-card,.shop-balance,.legend-card,.level-card,.wheel-card,
.postular-form,.admin-card,.ranking-reset-card,.locked-box{
  background:var(--glass)!important;border:1px solid var(--glass-line)!important;border-radius:20px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -26px rgba(0,0,0,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.pillar:hover,.rule-card:hover,.card:hover,.shop-card:hover{
  transform:translateY(-4px);border-color:rgba(255,255,255,.26)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 50px -24px rgba(0,0,0,.95);
}
.section-head h2{position:relative;padding-bottom:18px;}
.section-head h2::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:3px;border-radius:3px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--sand),transparent);}
footer{background:linear-gradient(180deg,transparent,rgba(255,255,255,.03));}

/* ---------- Cabecera del ranking ---------- */
.ranking-head{margin-top:52px!important;margin-bottom:30px!important;gap:10px;}
.ranking-head h1{font-size:clamp(42px,6vw,76px)!important;letter-spacing:-.04em;}
.ranking-sub{margin:0;color:var(--muted);font-size:17px;max-width:520px;}
.live-badge{margin-top:6px;}
.ranking-reset-card{max-width:760px!important;margin:0 auto 54px!important;}

/* ---------- Podio ---------- */
#podium-wrap{margin-bottom:56px;}
.pd{display:flex;justify-content:center;align-items:flex-end;gap:22px;flex-wrap:wrap;}
.pd-card{
  position:relative;overflow:hidden;isolation:isolate;
  flex:0 1 270px;min-width:230px;text-align:center;cursor:pointer;
  padding:30px 22px 26px;border-radius:24px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 30px 60px -34px #000;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  --tone:var(--silver);
}
.pd-card:hover{transform:translateY(-6px);}
.pd-1{--tone:var(--gold);flex-basis:320px;padding-top:40px;padding-bottom:34px;border-color:rgba(242,194,48,.55);
  background:radial-gradient(120% 70% at 50% 0%,rgba(242,194,48,.20),transparent 62%),var(--glass);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 40px 90px -40px rgba(242,194,48,.55),0 30px 60px -34px #000;}
.pd-2{--tone:var(--silver);min-height:330px;}
.pd-3{--tone:var(--bronze);min-height:310px;border-color:rgba(207,142,87,.4);}
.pd-1{min-height:392px;}
.pd-card.me{outline:2px solid rgba(255,255,255,.55);outline-offset:3px;}
.pd-num{
  position:absolute;z-index:-1;right:-6px;bottom:-34px;font-family:var(--font-display);font-weight:800;
  font-size:190px;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--tone) 38%,transparent);opacity:.7;
}
.pd-banner{position:absolute;inset:0 0 auto;height:96px;z-index:-1;opacity:.45;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);}
.pd-medal{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px;}
.pd-medal span{
  display:inline-block;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:800;letter-spacing:.14em;
  background:color-mix(in srgb,var(--tone) 16%,transparent);color:var(--tone);border:1px solid color-mix(in srgb,var(--tone) 55%,transparent);
}
.pd-1 .pd-medal span{background:var(--gold);color:#1a1300;border-color:var(--gold);}
.pd-crown{width:34px;height:34px;fill:var(--gold);filter:drop-shadow(0 4px 14px rgba(242,194,48,.6));}
.pd-ring{
  width:112px;height:112px;margin:0 auto 16px;border-radius:50%;padding:4px;
  background:conic-gradient(from 210deg,var(--tone),color-mix(in srgb,var(--tone) 25%,#111),var(--tone));
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--tone) 70%,transparent);
}
.pd-1 .pd-ring{width:140px;height:140px;}
.pd-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid #0c0c0f;background:#0c0c0f;display:block;}
.pd-name{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15;color:var(--text);word-break:break-word;}
.pd-1 .pd-name{font-size:26px;}
.pd-title{margin-top:6px;}
.pd-handle{margin-top:4px;color:var(--muted-2);font-size:14px;}
.pd-xp{margin-top:18px;display:flex;align-items:baseline;justify-content:center;gap:6px;}
.pd-xp b{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.03em;color:#fff;}
.pd-1 .pd-xp b{font-size:44px;color:var(--gold);}
.pd-xp span{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--muted);}
.pd-lvl{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--glass-line);}
.pd-card .name-title,.pd-card .name-badge,.lb-row .name-title,.lb-row .name-badge{font-size:12px;}

/* ---------- Lista (puestos 4+) ---------- */
.lb-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 16px;}
.lb-title{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.lb-count{font-size:14px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--glass-line);padding:6px 14px;border-radius:100px;}
.members-heading{display:none!important;}
.rank-section.lb{margin-bottom:22px;}
.rank-section-label{margin:18px 6px 12px!important;}
.rank-section-label span{font-size:12.5px!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0!important;border:0!important;}
.rank-section-label em{display:none;}
.rank-grid.lb-list{
  display:flex!important;flex-direction:column;gap:10px!important;grid-template-columns:none!important;
  padding:0;background:none!important;border:0!important;
}
.lb-row{
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  display:grid;grid-template-columns:46px 54px minmax(0,1.4fr) 76px minmax(90px,1fr) 118px;align-items:center;gap:16px;
  padding:12px 20px 12px 14px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.lb-row:hover{transform:translateX(4px);border-color:rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));}
.lb-row.me{border-color:rgba(232,217,174,.65);background:linear-gradient(90deg,rgba(232,217,174,.13),rgba(255,255,255,.03));}
.lb-row.owner .lb-pos{color:var(--gold);}
.lb-banner{position:absolute;inset:0;z-index:-1;opacity:.16;}
.lb-pos{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--muted);text-align:center;}
.lb-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.22);background:#101013;}
.lb-who{min-width:0;}
.lb-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;}
.lb-sub{margin-top:3px;font-size:13.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-tag{font-family:var(--font-body);font-size:10.5px;font-weight:800;letter-spacing:.12em;padding:3px 8px;border-radius:100px;color:#1a1300;background:var(--gold);}
.lb-tag-me{background:var(--sand);}
.lb-lvl{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-align:center;padding:5px 0;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid var(--glass-line);}
.lb-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden;}
.lb-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,rgba(232,217,174,.55),var(--sand));}
.lb-row.owner .lb-bar i,.lb-row.me .lb-bar i{background:linear-gradient(90deg,rgba(242,194,48,.6),var(--gold));}
.lb-xp{text-align:right;display:flex;align-items:baseline;justify-content:flex-end;gap:6px;}
.lb-xp b{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:#fff;}
.lb-xp span{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--muted-2);}
.rank-empty{
  grid-column:1/-1;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:38px 20px;border:1.5px dashed rgba(255,255,255,.18);border-radius:20px;color:var(--muted);
}
.rank-empty b{color:var(--text);font-size:17px;}
.rank-empty span{font-size:14.5px;}

@media (max-width:860px){
  .lb-row{grid-template-columns:36px 46px minmax(0,1fr) 104px;gap:12px;padding:11px 14px 11px 8px;}
  .lb-lvl,.lb-bar{display:none;}
  .lb-avatar{width:46px;height:46px;}
  .lb-name{font-size:16px;}
  .lb-xp b{font-size:18px;}
}
@media (max-width:700px){
  .pd{flex-direction:column;align-items:stretch;gap:16px;}
  .pd-card{flex-basis:auto;min-height:0!important;max-width:420px;margin:0 auto;width:100%;}
  .pd-1{order:-1;}
  .pd-num{font-size:150px;}
  .lb-head{flex-direction:column;gap:10px;align-items:flex-start;}
}

.rank-grid.lb-list{align-items:stretch!important;}
.lb-row{width:100%;}

@media (max-width:560px){
  .ranking-reset-card{flex-direction:column!important;gap:8px!important;text-align:center;padding:16px!important;}
  .ranking-reset-icon{display:none!important;}
  .ranking-reset-copy strong{display:block;}
  .ranking-reset-timer{margin:0!important;text-align:center!important;}
  .ranking-reset-timer b{font-size:26px!important;}
}

/* =====================================================================
   V7 — TIENDA: REDISEÑO "DURO"
   Esquinas cortadas, tipografía pesada en mayúsculas, rareza por precio.
   ===================================================================== */
.sh-wrap{max-width:1180px!important;}
.sh-hero{text-align:center;margin:54px auto 34px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.sh-hero h1{font-size:clamp(46px,7vw,92px);letter-spacing:-.045em;margin:0;line-height:.95;}
.sh-sub{margin:6px 0 0;max-width:560px;color:var(--muted);font-size:17px;}

/* Billetera */
.sh-wallet{
  display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:28px;
  padding:26px 32px;margin-bottom:30px;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);border-left:5px solid var(--gold);border-radius:8px;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
.sh-wallet-label{font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--muted);}
.sh-wallet-amount{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px;}
.sh-wallet-amount b{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,6vw,76px);letter-spacing:-.05em;line-height:1;color:#fff;}
.sh-wallet-amount span{font-weight:800;font-size:16px;letter-spacing:.2em;color:var(--gold);}
.sh-wallet-hint{font-size:13.5px;color:var(--muted-2);}
.sh-wallet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid rgba(255,255,255,.14);}
.sh-wallet-stats div{padding:4px 18px;text-align:left;}
.sh-wallet-stats div+div{border-left:1px solid rgba(255,255,255,.1);}
.sh-wallet-stats b{display:block;font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.1;}
.sh-wallet-stats small{font-size:15px;color:var(--muted-2);font-weight:600;}
.sh-wallet-stats span{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.sh-wallet-cta{display:flex;flex-direction:column;gap:10px;}

/* Pestañas */
.sh-tabs{display:flex;gap:8px;margin:0 0 30px;padding:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;position:sticky;top:12px;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.sh-tab{
  flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;
  font:800 14px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:0;border-radius:6px;cursor:pointer;transition:background .2s,color .2s;
}
.sh-tab em{font-style:normal;font-size:12px;padding:3px 8px;border-radius:100px;background:rgba(255,255,255,.1);color:var(--text);letter-spacing:0;}
.sh-tab:hover{color:#fff;background:rgba(255,255,255,.07);}
.sh-tab.is-active{background:#f2f2f4;color:#111114;}
.sh-tab.is-active em{background:#111114;color:#f2f2f4;}
.sh-tab-ico{font-size:16px;}

/* Paneles */
.sh-js .sh-panel{display:none;}
.sh-js .sh-panel.is-active{display:block;animation:shIn .35s ease;}
@keyframes shIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sh-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 18px;}
.sh-panel-head h2{font-size:clamp(26px,3vw,36px);margin:0;letter-spacing:-.03em;}
.sh-panel-head span{font-size:13px;color:var(--muted-2);font-weight:600;}
.sh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.sh-grid-banner,.sh-grid-title{grid-template-columns:repeat(3,minmax(0,1fr));}

/* Tarjeta */
.sh-card{
  --tc:#8a8a96;position:relative;display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(180deg,#17171b,#101013);
  border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--tc);border-radius:6px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:transform .22s ease,filter .22s ease;
}
.sh-card:hover{transform:translateY(-5px);filter:drop-shadow(0 18px 24px rgba(0,0,0,.65));}
.tier-common{--tc:#7a7a86;}
.tier-rare{--tc:#e9e9ee;}
.tier-epic{--tc:#e8d9ae;}
.tier-leg{--tc:#f2c230;}
.tier-ruleta{--tc:#b46bff;}
.sh-card.is-equipped{box-shadow:inset 0 0 0 2px var(--tc);}
.sh-card-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0;}
.sh-tier{font-size:10.5px;font-weight:800;letter-spacing:.2em;color:var(--tc);}
.sh-state{font-size:10.5px;font-weight:800;letter-spacing:.14em;padding:3px 8px;border-radius:3px;background:rgba(255,255,255,.1);color:var(--text);}
.sh-state-on{background:var(--gold);color:#1a1300;}

.sh-preview{
  position:relative;margin:12px 14px 0;height:112px;border-radius:4px;overflow:hidden;
  display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 6px,transparent 6px 12px),#0b0b0e;
  border:1px solid rgba(255,255,255,.1);
}
.sh-preview-banner{place-items:stretch;}
.sh-banner{position:absolute;inset:0;}
.sh-banner-user{position:absolute;left:12px;bottom:10px;display:flex;align-items:center;gap:8px;}
.sh-banner-user img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);background:#111;}
.sh-banner-user i{display:block;width:70px;height:8px;border-radius:8px;background:rgba(255,255,255,.75);box-shadow:0 2px 8px rgba(0,0,0,.5);}
.sh-color-sample{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.02em;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-badge-sample{font-size:50px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));}
.sh-preview-title .name-title{font-size:15px;padding:7px 14px;}

.sh-card-body{padding:14px 16px 4px;flex:1;}
.sh-name{margin:0 0 8px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff;text-transform:uppercase;line-height:1.15;}
.sh-price{display:flex;align-items:baseline;gap:6px;}
.sh-price b{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1;}
.sh-price span{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--tc);}
.sh-price-wheel{font-size:14px;font-weight:700;color:#d9b8ff;}
.sh-need{height:5px;margin-top:12px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;}
.sh-need i{display:block;height:100%;background:var(--tc);}
.sh-need-text{margin-top:6px;font-size:12.5px;color:var(--muted);}
.sh-need-text b{color:#fff;}
.sh-card-act{padding:12px 16px 16px;}
.sh-card-act form{margin:0;}
.sh-card-act .shop-btn{width:100%;min-height:46px;border-radius:5px;text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:800;text-decoration:none;}

@media (max-width:1060px){
  .sh-wallet{grid-template-columns:1fr auto;}
  .sh-wallet-stats{display:none;}
  .sh-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  .sh-wallet{grid-template-columns:1fr;gap:18px;padding:22px 20px;}
  .sh-wallet-cta{flex-direction:row;}.sh-wallet-cta .btn{flex:1;}
  .sh-grid,.sh-grid-banner,.sh-grid-title{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .sh-tabs{overflow-x:auto;scrollbar-width:none;top:6px;}
  .sh-tab{flex:0 0 auto;padding:12px 14px;font-size:12.5px;}
  .sh-preview{height:96px;margin:10px 10px 0;}
  .sh-card-top{padding:10px 10px 0;}.sh-card-body{padding:12px 12px 4px;}.sh-card-act{padding:10px 12px 14px;}
  .sh-name{font-size:16px;}.sh-price b{font-size:26px;}
  .sh-panel-head{flex-direction:column;gap:2px;}
}
@media (max-width:420px){.sh-grid-banner,.sh-grid-title{grid-template-columns:1fr;}}