/* Página de guantes: puerta de contraseña, rejilla y bloqueo
   (archivo: css/pages/gloves.css) */
/* ============================================================
   GLOVES PAGE — PASSWORD GATE
   ============================================================ */
#slap-view {
  display: none;
  flex-direction: column;
  min-height: 60vh;
  padding: 0;
}
#slap-view.active { display: flex; }

/* ── Gate ── */
#gloves-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 14px;
  padding: 40px 20px;
  animation: cardIn 0.4s ease both;
}
#gloves-gate-icon {
  font-size: 3.5rem;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.4));
}
#gloves-gate-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: var(--yellow-bright);
  text-shadow: 0 0 20px rgba(255,215,0,0.4);
  letter-spacing: 1px;
}
#gloves-gate-sub {
  font-size: 0.88rem;
  color: #666;
  text-align: center;
  line-height: 1.55;
  max-width: 320px;
}
#gloves-gate-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(300px, 90vw);
}
#gloves-gate-input {
  width: 100%;
  background: #1e1e1e;
  border: 3px solid #3a3a3a;
  border-radius: 12px;
  padding: 11px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  color: var(--text-white);
  outline: none;
  text-align: center;
  letter-spacing: 2px;
  transition: border-color .2s, box-shadow .2s;
}
#gloves-gate-input:focus {
  border-color: var(--yellow-bright);
  box-shadow: 0 0 14px rgba(255,215,0,0.28);
}
#gloves-gate-input.error {
  border-color: var(--red-close);
  box-shadow: 0 0 12px rgba(255,51,51,0.35);
  animation: lockShake 0.4s ease;
}
#gloves-gate-error {
  font-size: 0.78rem;
  color: var(--red-close);
  opacity: 0;
  transition: opacity .2s;
  font-family: 'Fredoka One', cursive;
  letter-spacing: 0.5px;
}
#gloves-gate-error.show { opacity: 1; }

/* ============================================================
   GLOVES PAGE — REAL PAGE
   ============================================================ */
#gloves-page {
  width: 100%;
  padding: 14px 20px 60px;
  animation: cardIn 0.35s ease both;
}

/* ── Search bar ── */
#gloves-search-bar-wrap {
  max-width: 560px;
  margin: 0 auto 12px;
}
#gloves-search-input {
  width: 100%;
  background: #1e1e1e;
  border: 3px solid #3a3a3a;
  border-radius: 30px;
  padding: 10px 20px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  color: var(--text-white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#gloves-search-input::placeholder { color: #555; }
#gloves-search-input:focus {
  border-color: var(--yellow-bright);
  box-shadow: 0 0 12px rgba(255,215,0,0.3);
}

/* ── Filtros: botón + menú desplegable multi-selección ── */
#gloves-filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
#gloves-filter-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.88rem;
  letter-spacing: 0.4px;
  background: #222;
  border: 2px solid #383838;
  border-radius: 20px;
  color: #ddd;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .1s;
}
#gloves-filter-toggle-btn:hover { border-color: var(--yellow-bright); color: var(--yellow-bright); }
#gloves-filter-toggle-btn:active { transform: scale(0.96); }
#gloves-filter-wrap:has(#gloves-filter-menu.open) #gloves-filter-toggle-btn {
  border-color: var(--yellow-bright);
  color: var(--yellow-bright);
  background: #1a1500;
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
}
.gloves-filter-chevron { font-size: 0.7rem; transition: transform .18s ease; }
#gloves-filter-wrap:has(#gloves-filter-menu.open) .gloves-filter-chevron { transform: rotate(180deg); }

.gloves-filter-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red-close);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

#gloves-filter-summary {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Panel desplegable de filtros ── */
#gloves-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: min(560px, 92vw);
  max-height: 0;
  overflow: hidden;
  background: #1c1c1c;
  border: 3px solid #333;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, max-height .25s ease;
}
#gloves-filter-menu.open {
  max-height: 72vh;
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, 0);
  overflow-y: auto;
}
#gloves-filter-menu::-webkit-scrollbar { width: 6px; }
#gloves-filter-menu::-webkit-scrollbar-thumb { background: var(--yellow-dark); border-radius: 4px; }

.gfm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-family: 'Fredoka One', cursive;
  color: var(--yellow-bright);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #2a2a2a;
}
.gfm-reset {
  background: none;
  border: 1.5px solid #444;
  border-radius: 8px;
  color: #999;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .1s;
}
.gfm-reset:hover { border-color: var(--yellow-bright); color: var(--yellow-bright); }
.gfm-reset:active { transform: scale(0.94); }

.gfm-section { padding: 12px 16px; border-bottom: 1px solid #262626; }
.gfm-section:last-of-type { border-bottom: none; }
.gfm-section-title {
  font-family: 'Fredoka One', cursive;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}
.gfm-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.gfm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  background: #262626;
  border: 2px solid #3a3a3a;
  border-radius: 18px;
  color: #999;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.gfm-chip:hover { border-color: #555; color: #ccc; }
.gfm-chip:active { transform: scale(0.96); }
.gfm-chip input { display: none; }
.gfm-chip .gfm-count { opacity: 0.65; font-size: 0.74rem; }

/* Tinte genérico cuando está marcado (fallback) */
.gfm-chip:has(input:checked) {
  background: #1a1500;
  border-color: var(--yellow-bright);
  color: var(--yellow-bright);
}
/* Tinte específico por valor cuando está marcado */
.gfm-chip[data-val="slaps"]:has(input:checked)        { background:#0e1800; border-color:#4ade80; color:#4ade80; }
.gfm-chip[data-val="robux"]:has(input:checked)        { background:#0a1228; border-color:#60a5fa; color:#60a5fa; }
.gfm-chip[data-val="logro"]:has(input:checked)        { background:#1a1000; border-color:#fbbf24; color:#fbbf24; }
.gfm-chip[data-val="otro"]:has(input:checked)         { background:#160a22; border-color:#c084fc; color:#c084fc; }
.gfm-chip[data-val="staff"]:has(input:checked)        { background:#240a38; border-color:#FFD700; color:#FFD700; box-shadow:0 0 10px rgba(255,215,0,0.25); }
.gfm-chip[data-val="royale"]:has(input:checked)       { background:#1a1a1a; border-color:#9ca3af; color:#e5e7eb; box-shadow:0 0 10px rgba(156,163,175,0.25); }
.gfm-chip[data-val="owned"]:has(input:checked)        { background:#0e2210; border-color:#4ade80; color:#4ade80; }
.gfm-chip[data-val="notowned"]:has(input:checked)     { background:#200a0a; border-color:#f87171; color:#f87171; }
.gfm-chip[data-val="unobtainable"]:has(input:checked) { background:#1a0a0a; border-color:#ff6b6b; color:#ff6b6b; }
.gfm-chip[data-val="scavenger"]:has(input:checked)    { background:#100319; border-color:#B66FED; color:#B66FED; }
.gfm-chip[data-val="halloween"]:has(input:checked)    { background:#1a0d00; border-color:var(--text-orange); color:var(--text-orange); }
.gfm-chip[data-val="christmas"]:has(input:checked)    { background:#1a0404; border-color:var(--red-close); color:var(--red-close); }

.gfm-footer { padding: 10px 16px 14px; }
.gfm-close-btn {
  width: 100%;
  background: #2a2a2a;
  border: 2px solid #3a3a3a;
  border-radius: 10px;
  color: #ccc;
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  padding: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gfm-close-btn:hover { border-color: var(--yellow-bright); color: var(--yellow-bright); }

/* ── Grid ── */
#gloves-grid-wrap { max-width: 1600px; margin: 0 auto; }
#gloves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
#gloves-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-family: 'Fredoka One', cursive;
  font-size: 1.35rem;
  display: none;
}

/* ── Glove Card ── */
.glove-card {
  background: var(--bg-card);
  border: 4px solid #111;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .25s;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: cardIn 0.4s ease both;
}
.glove-card:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 14px 34px rgba(0,0,0,0.7), var(--shadow-glow);
  border-color: var(--yellow-bright);
}
/* Type-colored border when hovered */
.glove-card[data-type="slaps"]:hover  { border-color: #4ade80; box-shadow: 0 14px 34px rgba(0,0,0,0.7), 0 0 18px rgba(74,222,128,0.35); }
.glove-card[data-type="robux"]:hover  { border-color: #60a5fa; box-shadow: 0 14px 34px rgba(0,0,0,0.7), 0 0 18px rgba(96,165,250,0.35); }
.glove-card[data-type="logro"]:hover  { border-color: #fbbf24; box-shadow: 0 14px 34px rgba(0,0,0,0.7), 0 0 18px rgba(251,191,36,0.35); }
.glove-card[data-type="otro"]:hover   { border-color: #c084fc; box-shadow: 0 14px 34px rgba(0,0,0,0.7), 0 0 18px rgba(192,132,252,0.35); }
.glove-card[data-type="staff"]:hover  { border-color: #FFD700; box-shadow: 0 14px 34px rgba(0,0,0,0.7), 0 0 18px rgba(255,215,0,0.4), 0 0 32px rgba(168,85,247,0.3); }
.glove-card[data-type="royale"]:hover { border-color: #9ca3af; box-shadow: 0 14px 34px rgba(0,0,0,0.7), 0 0 18px rgba(156,163,175,0.4), 0 0 32px rgba(31,41,55,0.5); }

/* ── Tarjeta morada para guantes de Staff-only ── */
.glove-card[data-type="staff"] {
  background: linear-gradient(160deg, #2c1248 0%, #190a2c 100%);
  border-color: #4c1d8a;
}

/* ── Tarjeta negro-gris para guantes de Slap Royale ── */
.glove-card[data-type="royale"] {
  background: linear-gradient(160deg, #2b2b2e 0%, #0a0a0b 100%);
  border-color: #3f3f46;
}

.glove-card-top {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 411;
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glove-card-banner {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .18s ease, transform .18s ease;
  filter: none;
}
.glove-card:hover .glove-card-banner { transform: scale(1.04); filter: none; }
.glove-card-banner-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(-45deg,#1e1600 0,#1e1600 18px,#130f00 18px,#130f00 36px);
  font-size: 3rem;
}

/* ── Banner en blanco y negro con toques dorados (duotono) para Staff-only ──
   El banner es el mismo archivo que la contraparte normal (default_(baseId).png):
   se pasa a B&N con "filter" y se tiñe de dorado con un overlay en
   mix-blend-mode:color (técnica de duotono — sustituye el negro casi
   absoluto por dorado en vez de dejarlo en gris/negro puro).
   Nota: se usa !important + prefijo #slap-view porque hay una regla más
   arriba (#slap-view .glove-card-banner { filter:none !important; }) que
   si no, ganaría por especificidad y anularía este efecto. */
#slap-view .glove-card[data-type="staff"] .glove-card-banner {
  filter: grayscale(1) contrast(1.05) brightness(1.08) !important;
}
.glove-card[data-type="staff"] .glove-card-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFD700;
  mix-blend-mode: color;
  z-index: 1;
  pointer-events: none;
}

/* Type ribbon top-left */
.glove-type-ribbon {
  position: absolute;
  top: 12px; left: -30px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.65rem;
  letter-spacing: 1px;
  padding: 4px 40px;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 2;
}
.gribbon-slaps { background: #4ade80; color: #061a0a; }
.gribbon-robux { background: #60a5fa; color: #030d1a; }
.gribbon-logro { background: #fbbf24; color: #1a0e00; }
.gribbon-otro  { background: #c084fc; color: #0e0618; }
.gribbon-staff { background: linear-gradient(135deg, #FFD700, #a855f7); color: #1f0a33; }
.gribbon-royale { background: linear-gradient(135deg, #6b7280, #0a0a0b); color: #f3f4f6; }

/* Segundo ribbon (esquina opuesta) con la SUBCATEGORÍA de los guantes de
   Slap Royale. No es una pastilla de estado: es un ribbon igual en forma
   al principal, pero en la esquina contraria y con los colores del tipo
   normal correspondiente (slaps/robux/logro). */
.glove-subtype-ribbon {
  position: absolute;
  top: 12px; right: -30px; left: auto;
  transform: rotate(45deg);
}
.gribbon-sub-slaps { background: #4ade80; color: #061a0a; }
.gribbon-sub-robux { background: #60a5fa; color: #030d1a; }
.gribbon-sub-logro { background: #fbbf24; color: #1a0e00; }

/* Type accent bar at bottom of banner */
.glove-card[data-type="slaps"] .glove-card-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,0.6); z-index:3; }
.glove-card[data-type="robux"] .glove-card-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#60a5fa; box-shadow:0 0 8px rgba(96,165,250,0.6); z-index:3; }
.glove-card[data-type="logro"] .glove-card-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,0.6); z-index:3; }
.glove-card[data-type="otro"]  .glove-card-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#c084fc; box-shadow:0 0 8px rgba(192,132,252,0.6); z-index:3; }
.glove-card[data-type="staff"] .glove-card-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#FFD700,#a855f7); box-shadow:0 0 8px rgba(255,215,0,0.5); z-index:3; }
.glove-card[data-type="royale"] .glove-card-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#6b7280,#0a0a0b); box-shadow:0 0 8px rgba(107,114,128,0.55); z-index:3; }

.glove-card-body {
  padding: 13px 15px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.glove-card-name {
  font-family: 'Fredoka One', cursive;
  font-size: 1.38rem;
  color: var(--text-white);
  text-shadow: 1px 1px 0 #000;
  line-height: 1.1;
}
.glove-card-type-label {
  font-family: 'Fredoka One', cursive;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.glove-tl-slaps { color: #4ade80; }
.glove-tl-robux { color: #60a5fa; }
.glove-tl-logro { color: #fbbf24; }
.glove-tl-otro  { color: #c084fc; }
.glove-tl-staff { color: #FFD700; }
.glove-tl-royale { color: #d1d5db; }

/* ── Fila de meta-datos en la tarjeta: precio + estado ── */
.glove-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.glove-card-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.78rem;
  color: var(--text-yellow);
  background: #1a1500;
  border: 2px solid #3d3000;
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}
.glove-card-price.price-slaps { color: #4ade80; background: #0a1a0e; border-color: #1f5c34; }
.glove-card-price.price-robux { color: #60a5fa; background: #0a1228; border-color: #1c3a66; }
.glove-card-price.price-logro { color: #fbbf24; background: #1a1300; border-color: #5c4a1f; }
.glove-card-price img { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
/* Fix: #slap-view img (placeholder) tenía más especificidad y forzaba un ancho enorme al icono de slaps */
#slap-view .glove-card-price img { width: 13px; height: 13px; opacity: 1 !important; }
.glove-card-price.price-logro img { width: 28px; height: 24px; }
#slap-view .glove-card-price.price-logro img { width: 28px; height: 24px; }

.glove-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid;
  white-space: nowrap;
}
.gstatus-unobtainable { color: #ff6b6b; border-color: #5c1f1f; background: #1a0a0a; }
.gstatus-scavenger     { color: #B66FED; border-color: #6000B0; background: #100319; }
.gstatus-halloween    { color: var(--text-orange); border-color: #5c3a00; background: #1a0d00; }
.gstatus-christmas    { color: var(--red-close);   border-color: #5c1f1f; background: #1a0404; }

.glove-card-footer {
  display: flex;
  gap: 8px;
  padding: 0 13px 11px;
  align-items: stretch;
}
.btn-glove-mastery {
  background: #1a1500;
  color: var(--yellow-bright);
  border: 2px solid #3d3000;
  border-radius: var(--radius-btn);
  font-family: 'Fredoka One', cursive;
  font-size: 0.82rem;
  padding: 7px 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: filter .15s, transform .1s, border-color .2s;
  white-space: nowrap;
  flex-grow: 0;
  flex-shrink: 0;
  width: auto;
}
.btn-glove-mastery:hover { filter: brightness(1.25); border-color: var(--yellow-bright); }
.btn-glove-mastery:active { transform: scale(0.93); }
.btn-glove-mastery-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   GLOVE CARD — LOCK SYSTEM
   (reutiliza .card-lock-overlay, .card-lock-icon y las
   keyframes lockShake / lockBorderFlash definidas en maestrías)
   ══════════════════════════════════════════════════════════════ */
.glove-card.locked {
  cursor: default;
}
/* Bloquea el hover lift/glow */
.glove-card.locked:hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
  border-color: #111 !important;
}
/* Banner en escala de grises + oscuro; al hover se revela */
.glove-card.locked .glove-card-banner {
  filter: brightness(0.2) saturate(0.92);
  transform: none !important;
}
.glove-card.locked:hover .glove-card-banner {
  filter: brightness(1) saturate(1);
  transform: none !important;
}
/* Overlay oscuro (usa la clase compartida .card-lock-overlay) */
.glove-card.locked:hover .card-lock-overlay {
  background: rgba(0, 0, 0, 0.0);
}
/* Icono 🔒 centrado → esquina al hover (usa .card-lock-icon compartida) */
.glove-card.locked:hover .card-lock-icon {
  transform: translate(0, 0);
  font-size: 0.85rem;
  opacity: 0.7;
}
/* Botones del footer — desactivados visualmente */
.glove-card.locked .glove-card-footer .btn {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7;
  filter: grayscale(0.25);
}
/* Animación de rechazo */
.glove-card.lock-denied {
  animation: lockBorderFlash 0.7s ease forwards !important;
}
.glove-card.lock-denied .card-lock-icon {
  animation: lockShake 0.45s ease !important;
}

/* ── Type badge in detail ── */
.glove-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 2px solid;
  margin: 3px 0 6px;
}
.gtbadge-slaps { color: #4ade80; background: #061a0a; border-color: #4ade80; }
.gtbadge-robux { color: #60a5fa; background: #030d1a; border-color: #60a5fa; }
.gtbadge-logro { color: #fbbf24; background: #1a0e00; border-color: #fbbf24; }
.gtbadge-otro  { color: #c084fc; background: #0e0618; border-color: #c084fc; }
.gtbadge-staff { color: #FFD700; background: #1f0a33; border-color: #a855f7; }
.gtbadge-royale { color: #e5e7eb; background: #111114; border-color: #6b7280; }