@import url('cosmeticos.css');
/* Estilos compartidos de la web Chungus Coins */
  :root {
    --bg: #050b16; --card: #0e1626; --gold: #ffd76a; --text: #e8eaf6; --muted: #8b95bd;
    --blue: #3f8cff; --blue2: #69a8ff; --gem: #5bd0ff; --line: rgba(96,146,214,.16);
    --line2: rgba(96,146,214,.34);
    --mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
  }
  * { box-sizing: border-box; }
  /* El navegador da a <figure> 40px de margen lateral por su cuenta. Todas
     las tarjetas de la tienda son <figure>, así que se anula de raíz. */
  figure { margin: 0; }
  /* Estética marino/futurista en toda la web: base oscura + resplandores +
     un mesh geométrico tenue de fondo (fijo, detrás de todo). */
  body {
    margin: 0; color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh;
    background:
      radial-gradient(90% 60% at 20% -5%, rgba(63,140,255,.10), transparent 55%),
      radial-gradient(80% 60% at 100% 0%, rgba(31,111,235,.07), transparent 55%),
      linear-gradient(180deg, #071426, #030812 60%, #010206);
  }
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: url(/img/mesh.svg) center top / cover no-repeat; opacity: .2;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 85%);
    mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 85%);
  }
  /* La página aprovecha el ANCHO de la pantalla: antes todo vivía en una
     columna de 860px y en un monitor normal sobraba media pantalla a los
     lados. Ahora el contenedor es ancho y el contenido se reparte en
     columnas (.cols) en vez de apilarse en una tira vertical. */
  .wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 30px 26px 60px; }

  /* ===== Rejilla de página: repartir el contenido a lo ancho =====
     En pantalla grande, dos columnas; por debajo de 1040px vuelve a una
     sola (móviles y tablets), sin perder el orden de lectura. */
  .cols { display: grid; gap: 26px 30px; align-items: start; }
  .cols > section { min-width: 0; }        /* que las tablas puedan encoger */
  .cols > section > h2:first-child { margin-top: 0; }
  .cols-profile { grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); }
  .cols-legend  { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .cols-even    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  @media (max-width: 1040px) {
    .cols-profile, .cols-legend, .cols-even { grid-template-columns: 1fr; }
  }
  /* Textos largos: aunque la caja sea ancha, la línea no pasa de ~90
     caracteres (más allá cuesta leer y se pierde el renglón). */
  .prose { max-width: 92ch; }
  header { text-align: center; margin-bottom: 36px; }
  header h1 { font-size: 42px; margin: 0; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 14px; }
  header h1 img { width: 58px; height: 58px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
  header p { color: var(--muted); margin: 8px 0 0; }
  .live { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #2c2f4a; color: var(--muted); }
  .live.on { background: #e91e3c; color: #fff; }
  .reg { display: none; margin-top: 10px; margin-left: 8px; padding: 6px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; background: rgba(255,215,106,.12); border: 1px solid rgba(255,215,106,.35); color: var(--gold); }
  .reg strong { font-size: 21px; vertical-align: -1px; letter-spacing: .5px; }
  #authbox { display: none; margin-top: 12px; }
  .tw-btn { display: inline-block; background: #9146ff; color: #fff; font-weight: 800; font-size: 13px; padding: 8px 18px; border-radius: 8px; text-decoration: none; }
  .tw-btn:hover { background: #7c2fff; }
  .me-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(145,70,255,.15); border: 1px solid rgba(145,70,255,.45); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700; }
  .me-chip a { color: var(--muted); font-size: 12px; text-decoration: none; }
  .me-chip a:hover { color: #fff; }
  .preview-tag { background: #e91e3c; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; letter-spacing: .5px; }
  .buy-btn { border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 800; font-size: 12px; cursor: pointer;
             background: linear-gradient(180deg, var(--blue2), var(--blue)); color: #04101f; box-shadow: 0 0 20px -9px var(--blue); }
  .buy-btn:hover { filter: brightness(1.08); }
  .buy-btn.own { background: #2c2f4a; color: var(--text); }
  .buy-btn.equipped { background: rgba(46,204,113,.2); color: #2ecc71; border: 1px solid rgba(46,204,113,.5); cursor: default; }
  .gems-pill { background: rgba(145,70,255,.15); border: 1px solid rgba(145,70,255,.5); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: inline-block; margin-top: 8px; color: #c9a6ff; font-weight: 700; }
  .mygems { background: linear-gradient(135deg, rgba(145,70,255,.2), rgba(232,67,147,.12)); border: 1px solid rgba(145,70,255,.5); border-radius: 14px; padding: 14px 20px; margin-bottom: 16px; font-size: 16px; color: #c9a6ff; font-weight: 700; display: flex; align-items: center; gap: 10px; }
  .mygems strong { font-size: 34px; color: #fff; letter-spacing: .5px; }
  #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #141830; border: 1px solid var(--gold); color: var(--text); padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: transform .3s; z-index: 99; }
  #toast.show { transform: translateX(-50%) translateY(0); }
  /* Accesos a las secciones (Qué es · Coins · Rangos…): bien visibles,
     que se note que se pueden pulsar para ir a lo que te interesa. */
  .nav { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
  .nav a { color: var(--text); text-decoration: none; border: 1px solid rgba(105,168,255,.45);
           background: rgba(63,140,255,.12); padding: 7px 16px; border-radius: 999px;
           font-size: 13px; font-weight: 700; transition: background .15s, border-color .15s, color .15s; }
  .nav a:hover { color: #fff; background: rgba(63,140,255,.28); border-color: var(--blue2);
                 box-shadow: 0 0 16px -6px var(--blue); }
  .gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .gcard { background: #0e1226; border-radius: 12px; padding: 16px; }
  .gcard h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); display: flex; align-items: center; gap: 6px; }
  .gcard h3 img { width: 22px; height: 22px; object-fit: contain; }
  .gcard p, .gcard ul { font-size: 13.5px; margin: 6px 0; line-height: 1.45; }
  .gcard ul { padding-left: 18px; }
  .gcard td, .gcard th { padding: 4px 6px; font-size: 13px; }
  .gcard table { width: 100%; }
  .gcard .sub { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 12px 0 4px; font-weight: 700; }
  .gcard .sub:first-of-type { margin-top: 6px; }
  .gwide { grid-column: 1 / -1; }
  .hl { color: var(--gold); font-weight: 700; }
  .records { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
  .record { background: #0e1226; border: 1px solid rgba(255,215,106,.18); border-radius: 12px; padding: 16px; text-align: center; }
  .record .ricon { font-size: 30px; }
  .record .rtitle { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 6px; }
  .record .rholder { font-size: 19px; font-weight: 800; color: var(--gold); margin-top: 6px; }
  .record .rvalue { font-size: 14px; color: var(--text); margin-top: 2px; }
  .legends-hall { margin-top: 14px; background: linear-gradient(135deg, #16122b, #0e1226); border: 1px solid rgba(255,215,106,.3); border-radius: 12px; padding: 18px; text-align: center; }
  .legends-hall .names { font-size: 18px; font-weight: 800; color: var(--gold); margin-top: 8px; }

  /* ---- Tienda ---- */
  .shop-type { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 800; margin: 18px 0 8px; }
  .shop-type:first-of-type { margin-top: 0; }
  /* Hueco generoso: los bordes por canvas se salen de la tarjeta (el gato
     sube, la aura 36px por lado, la aureola flota arriba, la cola cuelga).
     Con 2 columnas y ~80px de separación, ningún efecto invade a su vecino
     (antes iban a 20px y la aura se comía la animación de al lado). */
  .shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
               column-gap: 80px; row-gap: 104px; justify-content: center; }
  .shop-item { background: #0e1226; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
  .shop-item .iname { font-weight: 800; font-size: 14px; }
  .shop-item .icode { font-size: 12px; color: var(--muted); background: #131832; border-radius: 6px; padding: 3px 8px; align-self: flex-start; font-family: Consolas, monospace; }
  .shop-item .iprice { color: var(--gold); font-weight: 800; font-size: 14px; margin-top: auto; }
  .swatch { width: 22px; height: 22px; border-radius: 6px; display: inline-block; vertical-align: -5px; margin-right: 6px; }
  .title-line { font-style: italic; color: var(--gold); font-size: 14px; margin-top: 2px; }
  .wallet-pill { background: rgba(255,215,106,.12); border: 1px solid rgba(255,215,106,.35); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: inline-block; margin-top: 8px; }

  /* Todos los títulos de sección van CENTRADOS en toda la web */
  h2 { color: var(--gold); font-size: 20px; letter-spacing: 1px; margin: 36px 0 14px; text-align: center; }
  h2 img { width: 28px; height: 28px; object-fit: contain; vertical-align: -8px; margin-right: 4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
  /* position:relative para poder colgar la burbujita de ayuda (?) */
  .card { position: relative; border-radius: 16px; padding: 20px; }
  /* El fondo y el borde propios SOLO cuando la tarjeta no lleva un marco de
     CSS (raro/épico). Esos marcos se pintan CON el fondo (dos capas: relleno
     en padding-box y estampado en border-box) y un borde de 9px transparente;
     como .card va después en el archivo, se los comía y del marco solo
     quedaba el resplandor. Le pasaba a la ficha del buscador de la portada y
     a la del perfil. Misma exclusión que ya tenían .sdemo y .pv-card. */
  .card:not([class*="pb-r-"]):not([class*="pb-e-"]) {
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
  }

  /* ===== Burbujita de AYUDA (?) =====
     Va arriba a la derecha del cuadro y lleva al apartado de la guía que
     explica esa sección, para quien tenga dudas. */
  .ayuda { position: absolute; top: 10px; right: 12px; z-index: 6;
           width: 23px; height: 23px; border-radius: 50%; display: inline-flex;
           align-items: center; justify-content: center; text-decoration: none;
           font-size: 13px; font-weight: 900; line-height: 1; color: var(--blue2);
           background: rgba(63,140,255,.14); border: 1px solid rgba(105,168,255,.55);
           transition: background .15s, color .15s, box-shadow .15s; }
  .ayuda:hover { color: #04101f; background: var(--blue2); border-color: transparent;
                 box-shadow: 0 0 16px -4px var(--blue); }
  /* variante en línea (junto a un texto, no en la esquina de un cuadro) */
  .ayuda-inline { position: static; width: 20px; height: 20px; font-size: 12px;
                  vertical-align: middle; margin-left: 7px; }
  /* La burbuja se sienta encima de la esquina: se aparta la cabecera de
     la tabla que hay debajo para que no la tape. */
  .ayuda + table thead th:last-child { padding-right: 30px; }
  @media (max-width: 620px) { .ayuda { top: 8px; right: 8px; width: 21px; height: 21px; } }
  table { width: 100%; border-collapse: collapse; }
  td, th { padding: 10px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
  .rank-icon { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
  .rank-icon-sm { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 6px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
  .rank-icon-lg { width: 46px; height: 46px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
  th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
  tr.top3 td { color: var(--gold); font-weight: 700; }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
  .search { display: flex; gap: 10px; }
  .search input { flex: 1; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: #0e1226; color: var(--text); font-size: 15px; }
  .search button { padding: 12px 22px; border-radius: 10px; border: 0; background: linear-gradient(180deg, var(--blue2), var(--blue)); color: #04101f; font-weight: 800; cursor: pointer; box-shadow: 0 0 22px -10px var(--blue); }
  #results { margin-top: 14px; display: none; }
  .result-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
  .result-row:hover { background: #1a1f3d; border-color: rgba(255,215,106,.25); }
  .result-row img { width: 26px; height: 26px; object-fit: contain; }
  .result-row .rname { font-weight: 700; flex: 1; }
  .result-row .rmeta { color: var(--muted); font-size: 13px; }
  /* La tarjeta "TU PERFIL" (buscador + perfil) se estrecha para que el fondo
     del buscador tenga el mismo ancho que el perfil, sin margen sobrante. */
  .profilecard { max-width: 460px; margin-left: auto; margin-right: auto; }
  /* El título "TU PERFIL" se centra sobre la tarjeta (que es estrecha y va
     centrada); si no, el título quedaba pegado a la izquierda y descuadraba. */
  h2.ph2-center { text-align: center; }

  /* Perfil COMPACTO y casi cuadrado: el borde se ve grande en relación a la
     tarjeta y es fácil de enmarcar. Llena el ancho de la tarjeta exterior. */
  #profile { margin: 14px auto 0; display: none; }
  #profile .phead, .pcard .phead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  #profile .phead .pname, .pcard .phead .pname { font-size: 22px; font-weight: 800; line-height: 1.15; }
  #profile .phead .prank, .pcard .phead .prank { color: var(--muted); font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
  #profile .grid, .pcard .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  #profile .stat, .pcard .stat { background: #0e1226; border-radius: 12px; padding: 13px 12px; text-align: center; }
  #profile .stat .label, .pcard .stat .label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
  #profile .stat .value, .pcard .stat .value { font-size: 21px; font-weight: 800; margin-top: 3px; }
  #profile .pnext { text-align: center; }
  #profile .gems-pill, .pcard .gems-pill { display: block; text-align: center; margin: 12px auto 0; }
  .muted { color: var(--muted); }

  /* ===== Navegación principal (secciones grandes del sitio) ===== */
  .mainnav { display: flex; justify-content: center; gap: 30px; padding: 6px 0 18px; }
  .mainnav a { font-size: 16px; font-weight: 900; letter-spacing: 2.5px; color: var(--muted); text-decoration: none; padding: 8px 4px 6px; border-bottom: 3px solid transparent; }
  .mainnav a.active { color: var(--blue2); border-bottom-color: var(--blue); }
  .mainnav a:hover { color: var(--text); }

  /* ===== Tienda: acordeón por rareza ===== */
  .shop-type-big { font-size: 22px; font-weight: 900; letter-spacing: 3px; color: var(--gold); margin: 4px 0 14px; }
  .rarity-section { margin-bottom: 10px; }
  .rarity-toggle { width: 100%; display: flex; align-items: center; gap: 12px; background: #0e1226; border: 1px solid rgba(255,255,255,.08); border-left: 4px solid var(--rc); border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--text); font-family: inherit; transition: background .15s; }
  .rarity-toggle:hover { background: #141a34; }
  .rarity-toggle .rt-name { font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--rc); }
  .rarity-toggle .rt-meta { color: var(--muted); font-size: 13px; font-weight: 600; margin-left: auto; }
  .rarity-toggle .rt-arrow { color: var(--muted); font-size: 13px; transition: transform .2s; }
  .rarity-section.open .rt-arrow { transform: rotate(90deg); }
  /* padding = hueco arriba/abajo para el desborde de la primera y última
     fila (si no, pisan el botón de la rareza). Legendario lleva el gato,
     que sube más, así que reserva más arriba y abajo. */
  /* Lados a 40px: el efecto más ancho (aura, 36px/lado) de las tarjetas de
     los extremos cae en este hueco y no se sale de la tarjeta contenedora. */
  .rarity-body { padding: 48px 40px 44px; }
  .rarity-section[data-r="legendario"] .rarity-body { padding-top: 96px; padding-bottom: 60px; }
  .rarity-section[data-r="legendario"] .shop-grid { row-gap: 132px; }

  /* ===== Tienda v2: escaparates =====
     Cada borde se enseña como una VISTA PREVIA de la tarjeta de perfil
     (con tu nombre y rango), y cada rareza tiene su color con brillo. */
  .shop-sub { text-align: center; color: var(--muted); font-size: 13.5px; margin: 2px 0 20px; }
  .shop-type-big { text-align: center; letter-spacing: 5px; }
  /* Hueco amplio entre el marco y su título: los efectos que se salen por
     abajo (cola del gato, aura, limo) bajan bastante y, con poco hueco, se
     pegaban al nombre. */
  .sitem { display: flex; flex-direction: column; gap: 46px; margin: 0; }
  /* Casi cuadrada (ratio 418/481) como la tarjeta de perfil REAL, para que
     el borde se vea igual que luego en tu perfil. Nombre y rango centrados,
     igual que en el perfil. */
  .sdemo { position: relative; border-radius: 16px; padding: 18px; aspect-ratio: 418 / 481;
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           text-align: center; gap: 5px; }
  /* El fondo/borde de tarjeta solo cuando NO lleva un patrón de borde CSS
     (raro/épico): esos patrones ya pintan su propio fondo y borde de 9px,
     y .sdemo va después en el archivo, así que si no los excluyo se los
     tapa (se veían en blanco). Común y fx-* sí usan este fondo. */
  .sdemo:not([class*="pb-r-"]):not([class*="pb-e-"]) {
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
  }
  .sdemo .sd-name { font-weight: 800; font-size: 15.5px; position: relative; z-index: 1; }
  .sdemo .sd-meta { color: var(--muted); font-size: 12px; position: relative; z-index: 1; }
  /* la etiqueta va POR ENCIMA de los efectos que desbordan de otras tarjetas */
  .scap { display: flex; align-items: center; gap: 10px; position: relative; z-index: 3; }
  .scap .sname { font-weight: 800; font-size: 14px; flex: 1; }
  .scap .sprice { color: #c9a6ff; font-weight: 800; font-size: 13px; white-space: nowrap; }
  .scap .buy-btn { white-space: nowrap; }

  /* Cabeceras de rareza con su color: degradado, filo y resplandor */
  .rarity-toggle {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 16%, #0e1226), #0e1226 62%);
    border: 1px solid color-mix(in srgb, var(--rc) 32%, rgba(255,255,255,.08));
    border-left: 4px solid var(--rc);
    box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 10%, transparent);
  }
  .rarity-toggle:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 24%, #0e1226), #10152c 62%); }
  .rarity-section.open .rarity-toggle {
    box-shadow: 0 0 26px color-mix(in srgb, var(--rc) 24%, transparent);
  }
  .rarity-toggle .rt-name { text-shadow: 0 0 14px color-mix(in srgb, var(--rc) 50%, transparent); }
  .rt-chip { background: color-mix(in srgb, var(--rc) 16%, transparent);
             color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
             border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 3px 10px;
             white-space: nowrap; }
  @media (max-width: 620px) {
    /* aire lateral en móvil: el efecto más ancho (aura, 36px por lado)
       tiene que caber sin provocar scroll horizontal */
    .rarity-body { padding-left: 36px; padding-right: 36px; }
  }

  /* ===== MÓVIL: la web se adapta a pantallas pequeñas ===== */
  @media (max-width: 620px) {
    .wrap { padding: 16px 12px 40px; }

    /* Cabecera y navegación */
    header { margin-bottom: 22px; }
    header h1 { font-size: 25px; gap: 8px; }
    header h1 img { width: 34px; height: 34px; }
    header p { font-size: 12.5px; }
    .mainnav { gap: 12px; padding: 4px 0 14px; flex-wrap: wrap; }
    .mainnav a { font-size: 12.5px; letter-spacing: 1.2px; padding: 6px 2px 5px; }
    .nav { gap: 6px; margin-top: 12px; }
    .nav a { font-size: 11.5px; padding: 4px 10px; }
    .live, .reg { font-size: 11.5px; padding: 4px 10px; margin-left: 0; }
    .reg strong { font-size: 17px; }

    /* Contenido */
    h2 { font-size: 16px; margin: 26px 0 10px; letter-spacing: .5px; }
    h2 img { width: 22px; height: 22px; vertical-align: -6px; }
    .card { padding: 14px; border-radius: 12px; }
    td, th { padding: 8px 4px; font-size: 13px; }
    th { font-size: 9.5px; letter-spacing: .3px; }
    .rank-icon { width: 24px; height: 24px; }
    .rank-icon-lg { width: 34px; height: 34px; }
    .num { font-size: 12.5px; }

    /* Perfil y buscador */
    .search { flex-direction: column; }
    .search input, .search button { width: 100%; }
    #profile .grid, .pcard .grid { grid-template-columns: 1fr 1fr; }
    #profile .stat .value, .pcard .stat .value { font-size: 17px; }

    /* Tienda: 1 sola columna en móvil (con 2, los bordes animados se
       solaparían y se comerían la animación del de al lado). */
    .shop-grid { grid-template-columns: 1fr; }
    .mygems strong { font-size: 26px; }
    .counter { font-size: 44px; }
    .big-btn { padding: 12px 18px; font-size: 15px; }
    .btn-draw { font-size: 18px; padding: 16px 26px; }
    .records { grid-template-columns: 1fr 1fr; }
    .gcards { grid-template-columns: 1fr; }
  }

  /* Clasificación: en móvil se ocultan las columnas secundarias para que
     entren los datos importantes (puesto, nombre, rango y coins) */
  @media (max-width: 620px) {
    .c-racha { display: none; }
    .rk-txt { display: none; }
    #tbl td:first-child { white-space: nowrap; }
    .pbtn { padding: 7px 10px; font-size: 12px; }
  }
  @media (max-width: 400px) {
    .shop-grid { grid-template-columns: 1fr; }
    .records { grid-template-columns: 1fr; }
    #profile .grid, .pcard .grid { grid-template-columns: 1fr; }
  }

  /* ===== Distribución de gente por rango (encima de la clasificación) ===== */
  .dist-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
  .dist-item { background: #0e1226; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 10px 4px; text-align: center; position: relative; overflow: hidden; }
  .dist-item.mine { border-color: rgba(145,70,255,.7); box-shadow: 0 0 14px rgba(145,70,255,.25); }
  .dist-item .dbar { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,215,106,.13); }
  .dist-item img { width: 26px; height: 26px; object-fit: contain; position: relative; }
  .dist-item .dcount { font-size: 19px; font-weight: 900; color: var(--gold); margin-top: 3px; position: relative; }
  .dist-item .dname { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; position: relative; line-height: 1.2; }
  .dist-item .dpct { font-size: 10px; color: var(--muted); opacity: .75; position: relative; }
  .dist-item.empty .dcount { color: var(--muted); opacity: .5; }
  @media (max-width: 720px) {
    .dist-grid { grid-template-columns: repeat(5, 1fr); }
    .dist-item .dcount { font-size: 16px; }
    .dist-item img { width: 22px; height: 22px; }
  }
  @media (max-width: 400px) {
    .dist-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* Rareza aún sin bordes: se ve apagada ("Próximamente") */
  .rarity-section.soon .rarity-toggle { opacity: .55; }
  .rarity-section.soon .rt-meta { font-style: italic; }

  /* ===== Tienda por SECCIONES (Marcos, Avatares) ===== */
  .shop-section { margin: 6px 0 30px; }
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .sec-title { font-size: 22px; font-weight: 900; letter-spacing: 4px; color: var(--gold); }
  .sec-more { background: none; border: 1px solid rgba(255,215,106,.4); color: var(--gold);
              font-family: inherit; font-weight: 800; font-size: 12.5px; padding: 6px 15px;
              border-radius: 999px; cursor: pointer; white-space: nowrap; }
  .sec-more:hover { background: rgba(255,215,106,.12); }
  .shop-section .shop-sub { text-align: left; margin: 4px 0 2px; }

  /* Tira deslizable: se ve un vistazo y se desliza (swipe) para ir mirando */
  .sec-strip { display: flex; overflow-x: auto; overflow-y: hidden; gap: 20px;
               padding: 14px 4px 18px; scroll-snap-type: x proximity;
               -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .sec-strip::-webkit-scrollbar { height: 8px; }
  .sec-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
  .sec-strip::-webkit-scrollbar-track { background: transparent; }
  .sec-strip .sitem, .sec-strip .aitem { scroll-snap-align: center; }
  /* Marcos: los animados se salen del marco → tira con MUCHO hueco arriba
     (el gato sube) y a los lados (la aura 36px), y separación entre tarjetas
     para que no se coman la animación de la vecina. */
  .shop-section[data-sec="marcos"] .sec-strip { gap: 74px; padding: 86px 40px 50px; }
  .sec-strip .sitem { flex: 0 0 210px; width: 210px; }
  .sec-strip .aitem { flex: 0 0 150px; width: 150px; }

  /* Avatares: foto de perfil cuadrada */
  .aitem { display: flex; flex-direction: column; gap: 10px; margin: 0; }
  .ademo { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
           background: #0e1226; border: 1px solid rgba(255,255,255,.08); }
  .aimg { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* El nombre nunca empuja al botón fuera de la tarjeta (puede encoger). */
  .scap .sname { min-width: 0; }
  .scap .buy-btn, .scap .price-tag, .scap .sprice { flex: 0 0 auto; }
  /* Avatares: tarjetas estrechas → nombre arriba (recortado con … si es largo)
     y botón debajo a todo el ancho, para que "Equipado" y los nombres largos
     no se salgan ni invadan al avatar de al lado. */
  .aitem { min-width: 0; }
  .aitem .scap { flex-direction: column; align-items: stretch; gap: 7px; }
  .aitem .sname { flex: none; text-align: center; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aitem .buy-btn, .aitem .price-tag { width: 100%; text-align: center; }
  .avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 16px; padding: 12px 4px; }

  @media (max-width: 620px) {
    .sec-title { font-size: 18px; letter-spacing: 2px; }
    .avatar-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  }

  /* ===== TIENDA OFICIAL: saldo de gemas, pestañas y "próximamente" ===== */
  /* La tienda es un escaparate: usa aún más ancho que el resto. */
  .wrap-wide { max-width: 1680px; }
  .brand-mini { font-family: var(--mono); letter-spacing: .3em; font-size: 12px; color: var(--muted); text-transform: uppercase; }
  .brand-mini b { color: var(--text); font-weight: 600; }
  .price-tag { font-family: var(--mono); font-size: 13px; color: var(--gem); white-space: nowrap; }
  .shop-balance { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 6px 0 14px; }
  .bal-row { display: flex; align-items: center; gap: 14px; }
  .shop-gem { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(75,214,255,.5)); }
  .bal-num { font-family: var(--mono); font-weight: 700; font-size: clamp(40px,9vw,54px); line-height: 1;
             color: #eaf6ff; text-shadow: 0 0 26px rgba(75,214,255,.4); font-variant-numeric: tabular-nums; }
  /* inline-flex + gap: la burbujita (?) queda centrada con el texto y sin
     el hueco de más que dejaba el espaciado entre letras. */
  .bal-lbl { display: inline-flex; align-items: center; justify-content: center; gap: 3px;
             font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
             text-transform: uppercase; color: var(--gem); }
  .bal-lbl .ayuda-inline { margin-left: 0; }

  .shop-tabs { display: flex; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 100%;
               margin: 0 auto 8px; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: rgba(6,14,26,.72); }
  .stab { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--muted);
          background: none; border: 0; padding: 10px 20px; border-radius: 2px; cursor: pointer; transition: .16s;
          display: flex; align-items: center; gap: 8px; }
  .stab .c { font-family: var(--mono); font-size: 11px; color: #525d80; }
  .stab:hover { color: var(--text); }
  .stab.active { color: #04101f; background: linear-gradient(180deg, var(--blue2), var(--blue)); box-shadow: 0 0 22px -8px var(--blue); }
  .stab.active .c { color: #0a2246; }

  .shop-view { margin-top: 18px; }
  .shop-view[hidden] { display: none; }
  .shop-row { margin-bottom: 4px; }
  .sec-strip.strip-marcos { gap: 74px; padding: 84px 40px 48px; }
  .seeall { font-family: var(--mono); font-size: 11.5px; color: var(--blue2); background: none; border: 0; cursor: pointer; letter-spacing: .05em; }
  .seeall:hover { color: #fff; }

  .shop-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
               min-height: 150px; margin-top: 12px; border: 1px dashed var(--line2); border-radius: 18px; background: rgba(63,140,255,.04); padding: 26px; }
  .shop-soon.full { min-height: 220px; margin-top: 18px; }
  .shop-soon .ss-badge { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line2);
                         display: flex; align-items: center; justify-content: center; color: var(--blue2); background: rgba(63,140,255,.06); }
  .shop-soon h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
  .shop-soon p { margin: 0; color: var(--muted); font-size: 13.5px; }

  /* filtro de rarezas dentro de Marcos */
  .rar-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 2px; }
  .rchip { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted);
           background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px;
           padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s; }
  .rchip:hover { color: var(--text); border-color: var(--line2); }
  .rchip.active { color: #04101f; background: var(--rc, var(--blue)); border-color: transparent; }
  .rchip .rc-p { font-size: 11px; opacity: .85; }

  /* rejilla plana de marcos (Ver todos): mismo hueco generoso que la tira.
     auto-FILL (no auto-fit): con auto-fit, si solo hay UN marco la única
     columna se estiraba a todo el ancho y la tarjeta salía gigantesca
     (el marco es casi cuadrado, así que crecía también a lo alto). */
  .grid-marcos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
                 column-gap: 80px; row-gap: 100px; justify-content: center; padding: 60px 40px 30px; }
  .mrar { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
          padding: 2px 6px; border-radius: 4px; margin-left: 4px; color: var(--rc, var(--muted)); background: color-mix(in srgb, var(--rc, var(--muted)) 15%, transparent); }
  @media (max-width: 620px) {
    .shop-tabs { gap: 2px; padding: 3px; }
    .stab { padding: 9px 12px; font-size: 13px; }
    .sec-strip.strip-marcos { gap: 40px; padding-left: 36px; padding-right: 36px; }
    .grid-marcos { grid-template-columns: 1fr; }
  }

  /* ===== Vista previa "Asi se vera tu perfil" (perfil nuevo con banner) ===== */
  .pv-wrap { max-width: 440px; margin: 46px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
  .pv-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue2); margin: 0 0 4px; text-align: center; }
  .pv-title { font-size: 20px; margin: 0 0 22px; font-weight: 800; text-align: center; color: var(--text); letter-spacing: 0; }
  /* overflow visible: el marco animado se sale de la tarjeta y debe verse */
  .pv-card { position: relative; border-radius: 20px; box-shadow: 0 18px 44px -22px #000; }
  /* El fondo/borde propio de la tarjeta SOLO cuando no lleva un marco de
     CSS (raro/épico): esos pintan su propio fondo y su borde de 9px, y
     como .pv-card va después en el archivo, si no se excluye se los come
     y el marco no se ve (le pasaba al Mármol, al Carbono, al Holo...).
     Los marcos de canvas (fx-*) no se ven afectados: van por encima. */
  .pv-card:not([class*="pb-r-"]):not([class*="pb-e-"]) {
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
  }
  .pv-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 22px 20px 0; margin-top: 0; min-width: 0; }
  .pv-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--blue), 0 0 22px -6px var(--blue); background: #0a1220; }
  .pv-id { padding-bottom: 6px; min-width: 0; flex: 1; }
  .pv-name { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; line-height: 1.1; min-width: 0; }
  /* Un nombre largo NO puede salirse de la tarjeta: se recorta con "…" */
  .pv-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                                padding: 14px 12px; margin: -14px -12px; }
  .pv-name .pv-emb, .pv-name .subtag { flex: 0 0 auto; }
  .pv-emb { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
  .pv-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--gold);
    border: 1px solid rgba(255,209,90,.32); background: rgba(255,209,90,.06); padding: 2px 10px; border-radius: 999px; margin-top: 7px; }
  .pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 20px; position: relative; z-index: 1; }
  .pv-stat { background: #0a1220; border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
  .pv-stat .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .pv-stat .v { font-size: 20px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .pv-gems { margin: 0 20px 20px; padding: 9px 13px; border-radius: 12px; position: relative; z-index: 1;
    background: rgba(63,140,255,.1); border: 1px solid rgba(63,140,255,.3); color: #bcd4ff; font-size: 13px; font-weight: 700; }
  .pv-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }

  /* Inventario: encabezado de cada categoría */
  .inv-cat { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
             color: var(--muted); margin: 24px 0 2px; display: flex; align-items: center; gap: 8px; }
  .inv-cat span { color: #04101f; background: var(--blue2); font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }

  /* Catálogo: estado "lo tienes / no lo tienes" */
  /* ===== Catálogo tipo ÁLBUM =====
     Salen TODOS los objetos del juego. Los que TIENES se ven a todo
     color y destacan; los que NO, apagados y en gris — reconocibles,
     pero se nota al instante lo que te falta. */
  .cat-have { font-family: var(--mono); font-size: 11px; font-weight: 800; color: #2ecc71; white-space: nowrap; }
  .cat-locked { font-family: var(--mono); font-size: 13px; color: var(--muted); }

  /* --- lo que NO tienes: apagado --- */
  .cat-dim { opacity: .62; transition: opacity .18s, filter .18s; }
  .cat-dim .ademo, .cat-dim .sdemo, .cat-dim .placa { filter: grayscale(.9) brightness(.68); }
  .cat-dim .sname { color: var(--muted); font-weight: 600; }
  /* al pasar el ratón se despierta un poco: deja verlo bien antes de tenerlo */
  .cat-dim:hover { opacity: .95; }
  .cat-dim:hover .ademo, .cat-dim:hover .sdemo, .cat-dim:hover .placa { filter: grayscale(.25) brightness(.95); }

  /* --- lo que SÍ tienes: a todo color y con marca --- */
  .cat-own .ademo, .cat-own .placa { box-shadow: 0 0 0 2px rgba(46,204,113,.5), 0 0 20px -7px rgba(46,204,113,.8); }
  .cat-own .sname { color: var(--text); font-weight: 800; }

  /* ===== Sobres (drops) ===== */
  /* El cofre va ARRIBA, centrado; la tienda semanal debajo a todo el ancho. */
  .sobre-panel { text-align: center; max-width: 460px; margin: 12px auto; padding: 28px 26px;
                 border: 1px solid var(--line); border-radius: 18px; background: rgba(63,140,255,.05); }
  .sobre-big { font-size: 56px; line-height: 1; }
  .sobre-count-txt { font-size: 16px; margin-top: 8px; }
  .sobre-count-txt strong { color: var(--gem); font-size: 24px; font-variant-numeric: tabular-nums; }
  .sobre-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
  .open-btn { font-size: 15px; padding: 12px 26px; }
  .buy-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; box-shadow: none; }
  .tradeup-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                 margin: 10px 0 6px; padding: 12px 16px; border: 1px solid var(--line2); border-radius: 12px;
                 background: rgba(63,140,255,.06); font-size: 14px; }

  /* Ruleta estilo Rocket League */
  .reel-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
                padding: 20px; background: rgba(2,4,10,.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .reel-modal[hidden] { display: none; }
  .reel-modal-inner { position: relative; width: min(520px, 94vw); }
  /* destello blanco al caer en la rareza */
  .reel-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; border-radius: 14px; }
  .reel-flash.go { animation: reel-flash .5s ease-out; }
  @keyframes reel-flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
  .reel-wrap[hidden] { display: none; }

  /* Cofre: en la seccion flota; al abrir tiembla y estalla */
  .sobre-chest { width: 150px; max-width: 60vw; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); animation: chest-bob 3s ease-in-out infinite; }
  @keyframes chest-bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
  .chest-stage { display: flex; align-items: center; justify-content: center; min-height: 240px; }
  .chest-stage[hidden] { display: none; }
  .chest-img { width: 240px; max-width: 72vw; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); }
  .chest-img.shake { animation: chest-shake 1.3s cubic-bezier(.36,.07,.19,.97) both; }
  @keyframes chest-shake {
    0% { transform: rotate(0) scale(1); }
    12% { transform: rotate(-4deg) scale(1.02); } 24% { transform: rotate(4deg); }
    36% { transform: rotate(-6deg) scale(1.03); } 48% { transform: rotate(6deg); }
    60% { transform: rotate(-8deg) scale(1.05); } 74% { transform: rotate(8deg); }
    88% { transform: rotate(-6deg) scale(1.04); } 100% { transform: rotate(0) scale(1.06); }
  }
  .chest-img.burst { animation: chest-burst .42s ease-in forwards; }
  @keyframes chest-burst {
    0% { transform: scale(1.06); opacity: 1; filter: brightness(1) drop-shadow(0 14px 34px rgba(0,0,0,.6)); }
    55% { transform: scale(1.32); opacity: 1; filter: brightness(2.2) drop-shadow(0 0 30px rgba(255,255,255,.8)); }
    100% { transform: scale(1.7); opacity: 0; filter: brightness(3); }
  }
  /* ===== Sorteo de rareza: UN cuadro que va cambiando de color y frena
     en el color del premio (estilo drops de Rocket League). ===== */
  /* El color se cambia por JS (background-color inline): el parpadeo es
     SECO, sin transición — con transition sobre un var() el fondo se
     quedaba pegado y no llegaba a pintar el color del premio. */
  .flash-box { position: relative; margin: 0 auto; width: min(300px, 82vw); aspect-ratio: 1 / 1;
               border-radius: 22px; display: flex; align-items: center; justify-content: center;
               background-color: #2a3350; border: 3px solid rgba(255,255,255,.22);
               box-shadow: 0 0 60px -12px var(--c, #2a3350), inset 0 0 60px -20px rgba(255,255,255,.5); }
  .flash-box[hidden] { display: none; }
  .flash-box .fb-q { font-size: 90px; font-weight: 900; color: rgba(255,255,255,.85);
                     text-shadow: 0 6px 20px rgba(0,0,0,.5); }
  /* al acertar la rareza: golpe de zoom + destello */
  .flash-box.hit { animation: fb-hit .55s cubic-bezier(.2,1.4,.4,1); }
  @keyframes fb-hit {
    0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1.06); }
  }
  .flash-box .fb-rar { position: absolute; bottom: -34px; left: 0; right: 0; text-align: center;
                       font-family: var(--mono); font-size: 13px; letter-spacing: .18em;
                       text-transform: uppercase; color: var(--c); opacity: 0; }
  .flash-box.hit .fb-rar { animation: fb-in .4s ease forwards; }
  @keyframes fb-in { to { opacity: 1; } }
  /* Al final el cuadro se ENCOGE hasta desaparecer. Al encogerse, el
     premio que hay debajo sube solo con el hueco — suave y sin saltos.
     (Antes se movía el premio con transform y se quitaba el cuadro a la
     vez: los dos cambios no caían en el mismo fotograma y daba un
     latigazo.) Va después de .hit para ganarle el transform. */
  /* La transición vive en la clase base y el encogido lo aplica el JS con
     estilos en línea: si los valores finales estuvieran aquí, el
     max-height en línea (que hace falta para tener un punto de partida)
     les ganaría por especificidad y no se animaría nada. */
  .flash-box.vanish {
    animation: none; overflow: hidden;
    transition: max-height .65s cubic-bezier(.4,0,.2,1),
                opacity .45s ease, transform .55s ease;
  }

  .reel-wrap { position: relative; overflow: hidden; border: 1px solid var(--line2); border-radius: 14px;
               background: #060b16; height: 96px; box-shadow: 0 0 40px -10px var(--blue); }
  .reel-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
                 background: #fff; box-shadow: 0 0 12px 2px #fff; z-index: 2; }
  .reel-marker::before, .reel-marker::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 7px solid transparent; }
  .reel-marker::before { top: -1px; border-top-color: #fff; }
  .reel-marker::after { bottom: -1px; border-bottom-color: #fff; }
  .reel-strip { display: flex; gap: 8px; height: 100%; align-items: center; padding-left: 8px; will-change: transform; }
  .reel-cell { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; background: var(--c); box-shadow: 0 0 16px -4px var(--c); }
  .reel-cell.reel-win { outline: 2px solid #fff; transform: scale(1.06); }

  .reel-reward { position: relative; margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
                 opacity: 0; transform: scale(.7); }
  .reel-reward[hidden] { display: none; }
  .reel-reward.show { animation: rw-pop .55s cubic-bezier(.18,1.35,.4,1) forwards; }
  @keyframes rw-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
  /* halo del color de la rareza detrás del objeto */
  .rw-glow { position: absolute; top: 40px; left: 50%; width: 230px; height: 230px; margin-left: -115px; z-index: -1;
             border-radius: 50%; pointer-events: none; filter: blur(8px);
             background: radial-gradient(circle, color-mix(in srgb, var(--rc) 60%, transparent), transparent 68%);
             animation: rw-glow 2.4s ease-in-out infinite; }
  @keyframes rw-glow { 0%,100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
  .rw-avatar img { width: 118px; height: 118px; border-radius: 16px; object-fit: cover; box-shadow: 0 0 30px -8px var(--blue); }
  .rw-marco { width: 200px; }
  .rw-name { font-size: 20px; font-weight: 800; }
  .rw-rar { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }
  .rw-tag { font-family: var(--mono); font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; color: #04101f; }
  .rw-tag.new { background: #2ecc71; }
  .rw-tag.dup { background: var(--gem); }

  /* ===== Tienda semanal (dentro de la pestaña "Cofre y Tienda") =====
     Los objetos tienen FORMAS distintas, así que no caben todos en cajas
     iguales: las placas son tiras 4:1 (muy anchas) y en una tarjeta
     estrecha se quedaban en un sello ilegible. Se separan en dos zonas,
     como en la tienda de Rocket League:
       · DESTACADOS  → las placas, en tarjetas anchas arriba.
       · OBJETOS     → marcos y avatares, rejilla de tarjetas iguales. */
  .week-shop { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
  .week-head { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .week-head .sec-title { font-size: 20px; }
  .week-count { font-family: var(--mono); font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
                background: rgba(63,140,255,.12); border: 1px solid rgba(63,140,255,.32); color: var(--blue2); }
  .week-count b { color: var(--text); }

  /* Rótulo de zona CENTRADO, con una línea a cada lado (simétrico) */
  .wk-sub { display: flex; align-items: center; gap: 12px; margin: 22px 0 0;
            font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
            text-transform: uppercase; color: var(--blue2); }
  .wk-sub::before { content: ''; flex: 1; height: 1px; background: var(--line); }
  .wk-sub::after { content: ''; flex: 1; height: 1px; background: var(--line); }

  /* --- DESTACADOS: placas (tiras anchas) ---
     Flex CENTRADO en vez de rejilla: cada fila queda simétrica (mismo
     margen a los dos lados) y si una placa queda sola en la última fila,
     se CENTRA — nada de la "L invertida" (dos arriba y una suelta a la
     izquierda). */
  .week-featured { display: flex; flex-wrap: wrap; justify-content: center;
                   gap: 20px; padding: 16px 0 4px; }
  .week-featured .wkf-card { flex: 1 1 400px; max-width: 560px; }
  /* margin:0 es OBLIGATORIO: son <figure> y el navegador les mete 40px de
     margen a cada lado por su cuenta — sin esto la tarjeta sale 80px más
     estrecha que su hueco y la rejilla queda descuadrada. */
  .wkf-card { margin: 0; background: var(--card); border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
              padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 12px;
              box-shadow: 0 14px 34px -24px #000; }
  .wkf-card .placa { border-radius: 12px; }
  .wkf-foot { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
  .wkf-foot .wk-name { flex: 1; min-width: 0; justify-content: flex-start; text-align: left;
                       font-size: 15px; min-height: 0; }

  /* --- OBJETOS: marcos y avatares, tarjetas de tamaño idéntico ---
     El hueco de la vista previa es alto y con aire de sobra porque los
     marcos animados se salen de su recuadro (el gato saca la cabeza ~46px
     por arriba y el aura 36px por cada lado): así el efecto se ve entero
     y cae dentro de la tarjeta, sin recortes ni pisar al vecino. */
  /* Igual que las placas: filas centradas y simétricas; las tarjetas son
     de ancho FIJO para que ninguna fila "gotee" hacia un lado. */
  .week-grid { display: flex; flex-wrap: wrap; justify-content: center;
               gap: 24px; padding: 16px 0 10px; }
  .week-grid .wk-card { width: 232px; flex: 0 1 auto; }
  .wk-card { margin: 0; background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
             padding: 12px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px;
             box-shadow: 0 12px 30px -22px #000; }
  .wk-preview { width: 100%; height: 210px; display: flex; align-items: center; justify-content: center; }
  .wk-preview .wk-img { width: 130px; height: 130px; border-radius: 18px; object-fit: cover;
                        border: 2px solid rgba(255,255,255,.1); box-shadow: 0 0 20px -6px var(--blue); }
  /* bajado un poco: deja sitio arriba para los efectos que sobresalen */
  .wk-preview .wk-marco { width: 104px; aspect-ratio: 418 / 481; padding: 10px; margin-top: 14px; }
  .wk-preview .wk-marco .sd-name { font-size: 11.5px; }
  .wk-card .wk-name { font-weight: 800; font-size: 13.5px; text-align: center; line-height: 1.3;
                      display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
                      gap: 2px; min-height: 36px; }
  /* el botón queda siempre abajo del todo → todas las tarjetas casan */
  .wk-card .buy-btn, .wk-card .price-tag { margin-top: auto; }

  @media (max-width: 620px) {
    .week-featured { gap: 14px; }
    .week-grid { gap: 16px; }
    .week-grid .wk-card { width: calc(50% - 8px); }  /* 2 por fila, centradas */
    .wk-preview { height: 172px; }
    .wk-preview .wk-img { width: 104px; height: 104px; }
    .wk-preview .wk-marco { width: 86px; margin-top: 10px; }
  }

  /* ===== Modal de compra de la tienda semanal =====
     Nada se compra con un solo clic: objeto → visualizar / comprar →
     "¿seguro? sí/no" → compra. */
  .item-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center;
                justify-content: center; padding: 20px; background: rgba(2,4,10,.86);
                -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .item-modal[hidden] { display: none; }
  .im-card { width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; position: relative;
             background: var(--card); border: 1px solid var(--line2); border-radius: 18px;
             padding: 24px 22px 22px; text-align: center; box-shadow: 0 24px 60px -20px #000; }
  .im-close { position: absolute; top: 10px; right: 12px; background: none; border: 0;
              color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
  .im-close:hover { color: #fff; }
  .im-name { font-size: 20px; font-weight: 800; }
  /* hueco alto: los marcos animados desbordan (gato, aura…) y deben caber */
  .im-preview { margin: 10px auto 4px; display: flex; align-items: center; justify-content: center;
                min-height: 250px; }
  .im-preview .placa { width: 100%; max-width: 460px; }
  .im-preview .pv-card { width: 100%; max-width: 380px; text-align: left; }
  .im-note { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
  .im-note strong { color: var(--gem); }
  .im-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
  .im-actions .buy-btn { font-size: 14px; padding: 11px 18px; }
  /* "Así te quedaría": tu perfil con el objeto ya puesto, debajo del
     objeto y del botón de comprar (sin tener que pulsar nada). */
  .im-yo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .im-yo-tit { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
               text-transform: uppercase; color: var(--blue2); margin-bottom: 4px; }
  /* HUECO para los marcos animados: se salen de la tarjeta (el gato saca
     la cabeza ~84px por arriba, el aura 36px por lado, el fuego 26px).
     Con este colchón el efecto se ve entero y no pisa el título ni el
     borde del modal. */
  .im-yo-stage { padding: 84px 40px 40px; }
  .im-yo .pv-card { max-width: 300px; margin: 0 auto; text-align: left; }
  .im-yo .im-placa { max-width: 380px; margin: 0 auto; }
  /* la placa y el avatar no desbordan: no necesitan tanto colchón */
  .im-yo-stage:has(.im-placa) { padding: 14px 0 4px; }
  @media (max-width: 620px) { .im-yo-stage { padding: 78px 30px 34px; } }

  /* ===== Los DOS cofres (plata y oro) ===== */
  .chest-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 10px; }
  .chest-card { flex: 1 1 300px; max-width: 400px; text-align: center; padding: 22px 20px 20px;
                border: 1px solid var(--line); border-radius: 18px; background: rgba(63,140,255,.05); }
  .chest-card.chest-oro { border-color: rgba(255,215,106,.4); background: rgba(255,190,60,.06);
                          box-shadow: 0 0 30px -18px var(--gold); }
  .chest-pic { width: 128px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); animation: chest-bob 3s ease-in-out infinite; }
  .chest-oro .chest-pic { animation-delay: 1.5s; }
  .chest-name { font-weight: 900; font-size: 17px; letter-spacing: .5px; margin-top: 8px; }
  .chest-oro .chest-name { color: var(--gold); }
  .chest-count { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
  .chest-count strong { color: var(--gem); font-size: 20px; font-variant-numeric: tabular-nums; }
  .chest-odds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
  .odds-chip { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px;
               color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent);
               border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); white-space: nowrap; }

  /* La tarjeta de "Ventajas de ser sub" en la guía: marco morado que
     brilla suavemente para que destaque del resto de secciones. */
  .card-sub { border: 1px solid rgba(145,70,255,.55);
              box-shadow: 0 0 26px -6px rgba(145,70,255,.55), inset 0 0 40px -30px rgba(145,70,255,.9);
              animation: sub-glow 3.4s ease-in-out infinite; }
  @keyframes sub-glow {
    0%, 100% { box-shadow: 0 0 22px -8px rgba(145,70,255,.45), inset 0 0 40px -30px rgba(145,70,255,.8); }
    50%      { box-shadow: 0 0 34px -4px rgba(145,70,255,.8),  inset 0 0 40px -26px rgba(145,70,255,1); }
  }
  @media (prefers-reduced-motion: reduce) { .card-sub { animation: none; } }

  /* Ventanita flotante de la portada → lleva a /guia#subs */
  /* La caja se ajusta a su contenido y va centrada: sin hueco muerto
     entre el texto y la flecha. Y con más brillo, que destaque. */
  .sub-float { display: flex; align-items: center; justify-content: center; gap: 14px;
               width: fit-content; max-width: 100%; margin: 0 auto 8px;
               padding: 12px 22px; border-radius: 14px; text-decoration: none; color: var(--text);
               border: 1px solid rgba(145,70,255,.6);
               background: linear-gradient(135deg, rgba(145,70,255,.2), rgba(232,67,147,.1));
               box-shadow: 0 0 24px -6px rgba(145,70,255,.6), 0 10px 30px -18px #000;
               animation: sf-glow 3.2s ease-in-out infinite;
               transition: transform .15s, box-shadow .15s, border-color .15s; }
  @keyframes sf-glow {
    0%, 100% { box-shadow: 0 0 20px -8px rgba(145,70,255,.55), 0 10px 30px -18px #000; }
    50%      { box-shadow: 0 0 34px -4px rgba(145,70,255,.95), 0 10px 30px -18px #000; }
  }
  .sub-float:hover { transform: translateY(-2px); border-color: rgba(145,70,255,.95);
                     box-shadow: 0 0 34px -4px rgba(145,70,255,.95); }
  @media (prefers-reduced-motion: reduce) { .sub-float { animation: none; } }
  /* El logo Chungus de sub, con brillo (antes era un corazón morado) */
  .sf-ico { width: 42px; height: 42px; flex: 0 0 auto; font-size: 0;
            background: url(/img/sub.png) center / contain no-repeat;
            filter: drop-shadow(0 0 9px rgba(145,70,255,.95)); }
  @media (max-width: 620px) { .sf-ico { width: 34px; height: 34px; } }
  /* sin flex:1 → el texto no estira la caja y la flecha queda pegada a él */
  .sf-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .sf-txt strong { font-size: 15px; color: #d9c2ff; }
  .sf-txt span { font-size: 12.5px; color: var(--muted); }
  .sf-go { color: #c9a6ff; font-size: 20px; font-weight: 900; }
  @media (max-width: 620px) { .sf-txt span { font-size: 11.5px; } }

  /* Ventajas de ser sub (tienda): tarjeta morada compacta */
  .sub-perks { max-width: 640px; margin: 18px auto 0; padding: 14px 18px; text-align: center;
               border: 1px solid rgba(145,70,255,.45); border-radius: 14px;
               background: linear-gradient(135deg, rgba(145,70,255,.14), rgba(232,67,147,.07)); }
  .sp-title { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; font-weight: 700;
              color: #c9a6ff; margin-bottom: 8px; }
  .sp-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
             font-size: 13.5px; color: var(--text); }
  .sp-item strong { color: #c9a6ff; }

  /* Inventario: mis cofres sin abrir, arriba */
  .inv-chests { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 14px; }
  .inv-chest { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px;
               border: 1px solid var(--line); border-radius: 14px; background: rgba(63,140,255,.05); }
  .inv-chest.inv-chest-oro { border-color: rgba(255,215,106,.35); background: rgba(255,190,60,.05); }
  .inv-chest img { width: 46px; }
  .inv-chest strong { color: var(--gem); font-size: 17px; }

  /* En el INVENTARIO los marcos van pequeños, del tamaño de los avatares
     (en la tienda siguen grandes: allí son el escaparate). El hueco de la
     columna se mantiene para que los marcos animados quepan enteros. */
  #inv-zone .grid-marcos { row-gap: 76px; padding: 52px 40px 24px; }
  #inv-zone .grid-marcos .sdemo { width: 140px; margin: 0 auto; padding: 12px; }
  #inv-zone .grid-marcos .sdemo .sd-name { font-size: 12.5px; }
  #inv-zone .grid-marcos .sdemo .sd-meta { font-size: 10.5px; }
  #inv-zone .grid-marcos .scap { justify-content: center; }

  /* Inventario: tarjetas que se tocan para el intercambio */
  .inv-selectable { position: relative; cursor: pointer; }
  .inv-selectable.selected { outline: 2px solid var(--gem); outline-offset: 5px; border-radius: 14px; }
  .qty-badge { position: absolute; top: -9px; left: -9px; z-index: 4; font-family: var(--mono);
               font-size: 11px; font-weight: 800; background: #22283f; border: 1px solid var(--line2);
               color: var(--text); padding: 2px 8px; border-radius: 999px; }
  .sel-badge { position: absolute; top: -9px; right: -9px; z-index: 4; font-family: var(--mono);
               font-size: 11px; font-weight: 800; background: var(--gem); color: #04101f;
               padding: 2px 8px; border-radius: 999px; display: none; }
  .inv-selectable.selected .sel-badge { display: inline-block; }
  /* Pista de "puedes añadir otra copia": aparece al seleccionar una de
     varias, y desaparece cuando ya has cogido todas las que tienes. */
  .add-hint { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); z-index: 4;
              display: none; align-items: center; gap: 4px; white-space: nowrap;
              font-family: var(--mono); font-size: 10.5px; font-weight: 800;
              background: #16203a; color: var(--gem); border: 1px solid var(--gem);
              padding: 2px 9px; border-radius: 999px; box-shadow: 0 0 12px -4px var(--gem); }
  .inv-selectable.can-add .add-hint { display: inline-flex; }

  /* Barra del intercambio 5 → 1 */
  .trade-bar { border: 1px solid var(--line2); border-radius: 14px; background: rgba(63,140,255,.06);
               padding: 16px; margin: 4px 0 20px; text-align: center; }
  .tb-head { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
  .tb-slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 8px; }
  .tb-slot { font-family: var(--mono); font-size: 12.5px; padding: 6px 14px; border-radius: 999px;
             border: 1px dashed var(--line2); color: var(--muted); }
  .tb-slot.full { border-style: solid; color: var(--rc);
                  border-color: color-mix(in srgb, var(--rc) 45%, transparent);
                  background: color-mix(in srgb, var(--rc) 12%, transparent); }
  .tb-odds { font-size: 14px; font-weight: 700; color: var(--blue2); min-height: 20px; margin-bottom: 12px; }

  /* La placa como premio en la ruleta */
  .rw-placa { width: min(440px, 82vw); }

  /* ===== Burbuja "TU PERFIL" (fija arriba a la derecha, en todas partes) ===== */
  .topbar { position: fixed; top: 12px; right: 14px; z-index: 120; }
  .me-bubble { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 6px;
               border-radius: 999px; text-decoration: none; color: var(--text);
               background: rgba(10,18,32,.88); border: 1px solid var(--line2);
               box-shadow: 0 8px 24px -10px #000; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
               transition: border-color .15s, box-shadow .15s; }
  .me-bubble:hover { border-color: var(--blue2); box-shadow: 0 0 22px -6px var(--blue); }
  .mb-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: flex;
           align-items: center; justify-content: center; background: #0a1220;
           border: 2px solid var(--blue); box-shadow: 0 0 12px -4px var(--blue); }
  .mb-ico { font-size: 17px; }
  /* Logo de sub a la izquierda del avatar, del mismo tamaño */
  .mb-sub { width: 34px; height: 34px; flex: 0 0 auto; margin-left: -2px;
            background: url(/img/sub.png) center / contain no-repeat;
            filter: drop-shadow(0 0 6px rgba(145,70,255,.85)); }
  .mb-name { font-weight: 800; font-size: 13.5px; max-width: 140px; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
  .mb-login .mb-av { border-color: #9146ff; box-shadow: 0 0 12px -4px #9146ff; }
  /* En MÓVIL la burbuja NO va flotando: tapaba el menú (Chungus Coins ·
     Guía · Clasificación). Se coloca en el flujo, arriba a la derecha,
     y el menú queda debajo, libre. */
  @media (max-width: 760px) {
    .topbar { position: static; display: flex; justify-content: flex-end;
              padding: 10px 14px 0; }
    .me-bubble .mb-name { max-width: 130px; font-size: 12.5px; }
    .mb-av, .mb-sub { width: 28px; height: 28px; }
  }

  /* ===== Insignia de suscriptor: el logo Chungus morado =====
     Es un <span> con la imagen de fondo y font-size:0, así el 💜 que
     había dentro queda oculto y NO hay que tocar cada sitio donde sale.
     La imagen vive en public/img/sub.png (fondo transparente). */
  .subtag { display: inline-block; width: 17px; height: 17px; vertical-align: -3.5px;
            background: url(/img/sub.png) center / contain no-repeat; font-size: 0;
            filter: drop-shadow(0 0 5px rgba(145,70,255,.8)); flex: 0 0 auto; }
  /* En los títulos va CENTRADO con el texto (no colgando por debajo) */
  .subtag-lg { width: 26px; height: 26px; vertical-align: middle; }
  h2 .subtag { vertical-align: middle; }
  /* ===== Insignia de sub en GRANDE (tu perfil y las placas de nombre) =====
     sub.png lleva mucho aire transparente alrededor: el logo de verdad sólo
     ocupa 57x74 de los 96x96. Metido en una caja cuadrada se pintaba a ~10px
     (diminuto) y un pelín caído, porque el aire de arriba (13px) no es el
     mismo que el de abajo (9px). Aquí se usa sub-recortado.png (recortado al
     logo) y una caja con SU misma proporción, así llena el hueco entero y
     queda centrada con el nombre. La altura se ajusta con --st-h. */
  .subtag-xl,
  .placa .pl-name .subtag {
    --st-h: 26px;
    height: var(--st-h); width: calc(var(--st-h) * 57 / 74);
    background-image: url(/img/sub-recortado.png);
    filter: drop-shadow(0 0 7px rgba(145,70,255,.85));
    vertical-align: middle;
  }
  /* al no tener ya aire propio, el hueco hasta el nombre se abre un poco */
  .placa .pl-name .nm-row { gap: 7px; }
  @media (max-width: 620px) { .placa .pl-name .subtag { --st-h: 22px; } }
  /* Nombre + insignia SIEMPRE en la misma línea y centrados entre sí.
     Sin esto la insignia caía por debajo del nombre (o lo partía en dos
     líneas) en la clasificación y el Top 10. */
  .nm-row { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
  /* La insignia va junto al PUESTO (nº), no junto al nombre */
  .c-pos { white-space: nowrap; }
  .c-pos .subtag { width: 15px; height: 15px; }

  /* ===== Selector de color del nombre: circulito + ventana pequeña =====
     El circulito va junto a tu nombre y enseña el color que llevas. */
  .nc-dot { display: inline-flex; align-items: center; justify-content: center; vertical-align: -4px;
            width: 19px; height: 19px; margin-left: 7px; padding: 0; cursor: pointer;
            border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
            background: var(--dc, #6c7591); box-shadow: 0 0 8px -1px var(--dc, #6c7591); }
  .nc-dot:hover { border-color: #fff; transform: scale(1.12); }
  .nc-dot.is-rainbow { background: conic-gradient(#ff5a5a, #ffd76a, #2ecc71, #00e5ff, #b678ff, #ff6bcb, #ff5a5a);
                       box-shadow: 0 0 10px -1px #b678ff; }
  .nc-pop { position: relative; max-width: 340px; margin: 12px auto 0; padding: 14px 16px; text-align: left;
            border: 1px solid var(--line2); border-radius: 14px; background: #0b1424;
            box-shadow: 0 18px 40px -20px #000; }
  .nc-pop[hidden] { display: none; }
  .nc-pop h4 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
  .nc-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Cada opción es un círculo del color; el activo lleva marco */
  .nc-opt { width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
            border: 2px solid rgba(255,255,255,.25); background: var(--oc); }
  .nc-opt:hover { border-color: #fff; }
  .nc-opt.active { border-color: var(--gem); box-shadow: 0 0 0 2px var(--gem); }
  .nc-opt.neon { box-shadow: 0 0 10px 1px var(--oc); }
  .nc-opt.neon.active { box-shadow: 0 0 0 2px var(--gem), 0 0 10px 1px var(--oc); }
  .nc-opt.rainbow { background: conic-gradient(#ff5a5a, #ffd76a, #2ecc71, #00e5ff, #b678ff, #ff6bcb, #ff5a5a); }
  .nc-tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
             color: var(--muted); margin: 14px 0 6px; }
  .nc-tier:first-of-type { margin-top: 0; }
  .nc-locked { color: var(--muted); font-size: 12.5px; font-style: italic; }
  .nc-quitar { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer;
               margin-top: 12px; text-decoration: underline; font-family: inherit; }
  .nc-quitar:hover { color: #ff6b6b; }

  /* ===== Leaderboard: tarjetita al pasar el ratón (foto + placa) =====
     Solo en pantallas con ratón: la fila se "ensancha" y aparece la placa
     de nombre del viewer con su avatar. En táctil no existe el hover. */
  .c-name { position: relative; }
  .lb-peek { display: none; }
  /* En ORDENADOR se abre al pasar el ratón; en MÓVIL (donde no hay ratón)
     se abre al TOCAR la fila — el JS le pone la clase .peek-open. */
  @media (hover: hover) and (pointer: fine) {
    tr:hover .lb-peek { display: block; padding: 8px 0 4px; }
  }
  tr.peek-open .lb-peek { display: block; padding: 8px 0 4px; }
  .lp-placa { position: relative; display: flex; align-items: center; gap: 10px;
              width: min(340px, 92%); aspect-ratio: 4 / 1; border-radius: 10px; overflow: hidden;
              padding: 0 12px; background: linear-gradient(90deg, #0a1220, #131a30);
              background-size: cover; background-position: right center;
              border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 24px -14px #000; }
  .lp-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
           background: rgba(8,14,26,.72); border: 2px solid rgba(255,255,255,.6);
           box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.5); }
  /* sin avatar propio: se enseña su emblema de rango, sin recortar */
  .lp-hueco { object-fit: contain; padding: 4px; }
  /* sin placa: tira lisa con un degradado suave */
  .lp-lisa { background: linear-gradient(90deg, #101a30, #1b2748); }
  /* El recorte de los puntos suspensivos cortaba el resplandor del neón y
     del arcoíris, que se sale de las letras. El relleno le deja aire y el
     margen negativo lo compensa para que nada se mueva de sitio (el mismo
     truco que ya usa .placa .pl-name). */
  .lp-nombre { font-weight: 800; font-size: 14px; color: #fff; white-space: nowrap;
               min-width: 0; overflow: hidden; text-overflow: ellipsis;
               padding: 14px 12px; margin: -14px -12px;
               text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6); }
  /* pista de que se puede tocar (solo donde no hay ratón) */
  @media (hover: none) { .c-name { cursor: pointer; } }
  /* En móvil la columna del nombre es estrecha: la tarjeta se ensancha
     hacia la derecha con margen negativo (invade el hueco del rango, que
     está vacío mientras la fila está abierta) sin ensanchar la tabla. */
  @media (max-width: 620px) {
    tr.peek-open .lb-peek { margin-right: -120px; }
    .lp-placa { width: 100%; max-width: 250px; }
    .lp-av { width: 32px; height: 32px; }
    .lp-nombre { font-size: 13px; }
  }

  /* ===== Racha de cofres (perfil): burbujas + cofres en los días 5 y 7 =====
     El día 5 es el cofre de plata de los SUBS: con candado si no lo eres,
     brillando si lo eres. El día 7 es el cofre de oro de todos. */
  .mis-track { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
               gap: 2px; padding: 6px 0 2px; }
  .mis-step { position: relative; display: flex; flex-direction: column; align-items: center; }
  .mis-bub { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
             justify-content: center; font-weight: 900; font-size: 14px; color: var(--muted);
             background: #0a1220; border: 2px solid var(--line2); }
  .mis-bub.fill { color: #04101f; background: linear-gradient(180deg, var(--blue2), var(--blue));
                  border-color: transparent; box-shadow: 0 0 18px -4px var(--blue); }
  .mis-line { width: 16px; height: 2px; background: var(--line2); flex: 0 0 auto; }
  .mis-cofre { position: relative; width: 48px; display: flex; align-items: center; justify-content: center; }
  .mis-cofre img { width: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  .mis-cofre.big img { width: 54px; }
  /* sin ser sub: el cofre del día 5 está cerrado con candado y apagado */
  .mis-cofre.locked img { filter: grayscale(.7) brightness(.55); }
  .mis-lock { position: absolute; right: -4px; bottom: -4px; font-size: 15px;
              filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
  /* siendo sub (o al completar el ciclo): brillan */
  .mis-cofre.glow img { filter: drop-shadow(0 0 14px rgba(255,215,106,.85)); animation: chest-bob 2.2s ease-in-out infinite; }
  .mis-info { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }
  .mis-info strong { color: var(--blue2); }
  /* Versión VERTICAL (columna del perfil): la escalera baja día a día */
  .mis-track.vert { flex-direction: column; gap: 0; padding: 2px 0; }
  .mis-track.vert .mis-line { width: 2px; height: 13px; }
  @media (max-width: 620px) {
    .mis-bub { width: 32px; height: 32px; font-size: 12.5px; }
    .mis-line { width: 8px; }
    .mis-track.vert .mis-line { width: 2px; height: 11px; }
    .mis-cofre { width: 40px; } .mis-cofre img { width: 36px; } .mis-cofre.big img { width: 44px; }
  }

  /* ===== Perfil propio (/perfil): TRES columnas centradas =====
     perfil | racha (vertical) | amigos — y el inventario debajo a lo
     ancho. El conjunto se centra y no se estira más de la cuenta. */
  .perfil-cols { display: grid; grid-template-columns: minmax(320px, 420px) minmax(230px, 280px) minmax(300px, 460px);
                 gap: 24px 30px; align-items: start; justify-content: center;
                 max-width: 1260px; margin: 10px auto 0; }
  @media (max-width: 1150px) { .perfil-cols { grid-template-columns: 1fr; max-width: 560px; } }
  /* la lista de amigos, en su columna, va de una en una */
  .perfil-cols .fr-grid { grid-template-columns: 1fr; }
  .pcard { margin: 0; }
  /* modo "Placa": cómo te ve el resto (tu placa con tu foto y tu nombre) */
  .modo-placa { padding: 26px 0 10px; }
  .modo-placa .placa { max-width: 440px; margin: 0 auto; }
  .mi-placa { margin: 0 auto 14px; max-width: 460px; }
  .mi-placa .pl-av img, .placa .pl-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
  .mi-card { margin-top: 0; }
  /* ===== Cabecera de ficha de perfil =====
     Se lee de arriba abajo: foto GRANDE · nombre (con la insignia de sub y
     el circulito del color) · y debajo el emblema del rango con su nombre.
     La usan LAS DOS fichas y a propósito: la tuya en /perfil (.mi-card) y la
     que sale al buscar a alguien en la portada (#profile). Así cuando buscas
     a otro lo ves tal y como se ve él en su propio perfil. */
  .mi-card .phead, #profile .phead { gap: 9px; }
  .mi-av { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
           border: 3px solid var(--blue); box-shadow: 0 0 26px -6px var(--blue); background: #0a1220; }
  /* flex + centrado: la insignia y el circulito quedan a la altura del nombre.
     Con el nombre en bloque se colgaban por debajo de la línea. */
  .mi-card .phead .pname, #profile .phead .pname { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
  .mi-card .phead .pname .nm-row, #profile .phead .pname .nm-row { gap: 8px; min-width: 0; }
  /* Un nombre muy largo (Twitch admite 25 letras) ensanchaba la tarjeta y la
     sacaba de la pantalla en móvil. Con esto se parte en dos líneas y la
     tarjeta se queda dentro. */
  .mi-card .phead .pname, #profile .phead .pname { overflow-wrap: anywhere; }
  .mi-card .phead .pname .nm-row > span, #profile .phead .pname .nm-row > span { min-width: 0; }
  /* El circulito del color vive en la misma fila que el nombre y lo empujaba
     13px a la izquierda del eje de la foto. Este hueco a la izquierda deja el
     NOMBRE centrado con la foto y el rango, y el circulito colgando a la
     derecha. Con :has() sólo se aplica cuando el circulito existe de verdad. */
  .mi-card .phead .pname:has(.nc-dot) { padding-left: 26px; }
  .mi-card .phead .pname .subtag-xl, #profile .phead .pname .subtag-xl { --st-h: 30px; }
  .mi-card .phead .prank, #profile .phead .prank { font-size: 15px; gap: 9px; }
  @media (max-width: 620px) {
    .mi-av { width: 88px; height: 88px; }
    .mi-card .phead .pname .subtag-xl, #profile .phead .pname .subtag-xl { --st-h: 26px; }
  }

  /* ================================================================
     BANDA DE ÚLTIMOS BOTINES (la tira que desliza arriba del todo)
     La monta public/js/drops-band.js. El movimiento es una animación
     CSS pura: no se congela si el navegador deja de pintar.
     ================================================================ */
  .drops-band { position: relative; display: flex; align-items: stretch; overflow: hidden; z-index: 110;
                background: linear-gradient(180deg, rgba(10,18,32,.96), rgba(6,12,22,.96));
                border-bottom: 1px solid var(--line2);
                box-shadow: 0 10px 30px -22px #000; }
  .drops-band[hidden] { display: none; }
  /* En ORDENADOR la banda se queda pegada arriba: así siempre hay algo
     moviéndose y la burbuja del perfil (que va flotando) tiene un sitio
     fijo debajo. En MÓVIL no se pega —comería demasiada pantalla— y ahí
     la burbuja tampoco flota, así que no se pisan.
     Sticky en vez de JS a propósito: no depende de eventos de scroll. */
  @media (min-width: 721px) { .drops-band { position: sticky; top: 0; } }

  /* El rótulo fijo de la izquierda */
  .db-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; z-index: 2;
             padding: 0 16px; border-right: 1px solid var(--line);
             background: linear-gradient(90deg, #0a1424, rgba(10,20,36,.9)); }
  .db-txt { font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
            text-transform: uppercase; color: var(--blue2); white-space: nowrap; }
  /* Aviso de que lo que se está viendo NO es lo que ve el resto: hay
     botines de la cuenta de pruebas, que el público no ve. */
  .drops-band.db-preview .db-head::after {
    content: "SOLO TÚ"; font-family: var(--mono); font-size: 8.5px; font-weight: 800;
    letter-spacing: .1em; color: #04101f; background: var(--gold);
    padding: 1px 5px; border-radius: 4px; }

  /* La ventana por la que asoma la tira. El degradado de los lados hace
     que las tarjetas aparezcan y desaparezcan sin corte seco. */
  .db-view { position: relative; flex: 1 1 auto; overflow: hidden; min-width: 0; padding: 9px 0;
             -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
             mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
  .db-track { display: flex; gap: 10px; width: max-content; padding-left: 10px;
              animation: db-desliza var(--db-dur, 60s) linear infinite; }
  .db-copia { display: flex; gap: 10px; flex: 0 0 auto; }
  @keyframes db-desliza {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--db-ciclo, 1000px))); }
  }
  /* Al pasar el ratón se para, para poder leer lo que ha caído */
  .drops-band:hover .db-track { animation-play-state: paused; }

  /* ----- cada tarjeta ----- */
  .db-card { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
             padding: 7px 13px 7px 9px; border-radius: 12px; overflow: hidden;
             background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 13%, #0c1524), #0b1220);
             border: 1px solid color-mix(in srgb, var(--rc) 38%, transparent); }
  /* la banderita de rareza del borde izquierdo */
  .db-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                     background: var(--rc); box-shadow: 0 0 10px var(--rc); }

  /* el cuadradito del objeto */
  .db-tile { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
             overflow: hidden; background: #0a1220; display: block; }
  .db-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* las placas son apaisadas (4:1): se enseña el arte, que va a la derecha */
  .db-tile-placa { background-size: cover; background-position: right center; background-repeat: no-repeat;
                   border: 1px solid rgba(255,255,255,.14); }
  /* los marcos de CSS pintan su propio borde de 9px: a este tamaño sobra */
  .db-tile-marco { overflow: visible; }
  .db-tile-marco[class*="pb-r-"], .db-tile-marco[class*="pb-e-"] { border-width: 5px; }
  /* los marcos de canvas (fx-*) no se pueden pintar aquí sin cargar el
     lienzo en todas las páginas: llevan un aro con su color de rareza */
  .db-tile-fx { border: 2px solid var(--rc);
                box-shadow: inset 0 0 0 3px #0a1220, inset 0 0 0 5px color-mix(in srgb, var(--rc) 55%, transparent),
                            0 0 14px -3px var(--rc);
                background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 30%, transparent), #0a1220 72%); }

  /* ----- los textos ----- */
  .db-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .db-item { font-size: 12.5px; font-weight: 800; color: var(--rc); line-height: 1.2;
             max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .db-who { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
  /* Igual que arriba: aire para que no se corte el resplandor. El ancho
     máximo sube lo mismo que el relleno para que quepan las mismas letras. */
  .db-who .db-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.4;
                     max-width: 152px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     padding: 11px 11px; margin: -11px -11px; }
  .db-who .subtag { width: 12px; height: 15.6px; background-image: url(/img/sub-recortado.png);
                    vertical-align: middle; filter: drop-shadow(0 0 5px rgba(145,70,255,.85)); }
  .db-src { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
            color: var(--muted); white-space: nowrap; }

  /* ----- premios gordos: épicos y legendarios llaman la atención ----- */
  .db-card[data-rar="epico"], .db-card[data-rar="legendario"] {
    border-color: color-mix(in srgb, var(--rc) 70%, transparent);
    box-shadow: 0 0 20px -6px var(--rc), inset 0 0 22px -14px var(--rc); }
  /* un brillo que recorre la tarjeta de lado a lado */
  .db-card[data-rar="epico"]::after, .db-card[data-rar="legendario"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--rc) 45%, transparent) 50%, transparent 62%);
    transform: translateX(-120%); animation: db-brillo 3.4s ease-in-out infinite; }
  .db-card[data-rar="legendario"]::after { animation-duration: 2.6s; }
  @keyframes db-brillo {
    0%, 55% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
  }

  /* ----- recién caído: destella un momento y se calma ----- */
  .db-nuevo { animation: db-entra 1s ease-out; }
  @keyframes db-entra {
    0%   { box-shadow: 0 0 0 2px #fff, 0 0 26px -2px var(--rc); }
    100% { box-shadow: 0 0 20px -6px var(--rc); }
  }

  /* ----- móvil: más bajita y sin el rótulo, que come ancho ----- */
  @media (max-width: 720px) {
    /* sin rótulo: en móvil el ancho se aprovecha entero para las tarjetas */
    .db-head { display: none; }
    .db-view { padding: 7px 0; }
    .db-card { padding: 6px 11px 6px 8px; gap: 8px; }
    .db-tile { width: 36px; height: 36px; border-radius: 9px; }
    .db-item { font-size: 11.5px; max-width: 130px; }
    .db-who .db-name { font-size: 11px; max-width: 127px; }
  }

  /* ----- a quien le moleste el movimiento, se le queda quieta ----- */
  @media (prefers-reduced-motion: reduce) {
    .db-track { animation: none; }
    .db-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .db-card[data-rar="epico"]::after, .db-card[data-rar="legendario"]::after { animation: none; opacity: 0; }
    .db-nuevo { animation: none; }
  }

  /* Con la banda puesta, la burbuja del perfil (que va flotando arriba a
     la derecha) baja para no montarse encima. En móvil la burbuja no
     flota, así que no hace falta tocar nada. */
  body.con-banda .topbar { top: 86px; }

  /* ===== Lista de amigos (placas de nombre + en línea) ===== */
  .fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px 20px; }
  .fr-item { display: flex; flex-direction: column; gap: 7px; }
  .fr-placa { text-decoration: none; }
  .fr-noplaca { background: linear-gradient(90deg, #0a1220, #17203a); }
  .fr-dot { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
            width: 12px; height: 12px; border-radius: 50%; background: #4a5170;
            border: 2px solid rgba(0,0,0,.4); }
  .fr-dot.on { background: #2ecc71; box-shadow: 0 0 10px rgba(46,204,113,.9); }
  .fr-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); padding: 0 2px; }
  .fr-meta .fr-on { color: #2ecc71; font-weight: 700; }
  .fr-quitar { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.14);
               color: var(--muted); border-radius: 999px; font-size: 11px; padding: 3px 10px; cursor: pointer; }
  .fr-quitar:hover { color: #ff6b6b; border-color: rgba(255,107,107,.5); }
  @media (max-width: 620px) { .fr-grid { grid-template-columns: 1fr; } }

  /* ===== Sub-pestañas del Catálogo ===== */
  .cat-subtabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 20px; }
  .csub { font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 10px;
          border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; transition: .15s; }
  .csub:hover { color: var(--text); border-color: var(--line2); }
  .csub.active { color: #04101f; background: linear-gradient(180deg, var(--blue2), var(--blue));
                 border-color: transparent; box-shadow: 0 0 20px -8px var(--blue); }
  .csub .c { opacity: .7; font-size: 11px; margin-left: 3px; }
  .csub.active .c { opacity: .9; }
  .cat-panel { animation: catfade .2s ease; }
  @keyframes catfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }