/* Pantalla de conexión del comprobador de logros
   (archivo: css/components/roblox-check-screen.css) */
/* ══════════ FONDO ══════════ */
#roblox-check-overlay {
  background: rgba(4,4,6,.80);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 16px;
}

/* ══════════ LA CAJA ══════════ */
#roblox-check-modal {
  position: relative;
  width: min(94vw, 660px);
  max-height: min(88vh, 840px);
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: linear-gradient(178deg, #1f1f24 0%, #131317 60%, #0d0d10 100%);
  border: 5px solid #000;
  border-radius: 22px;
  box-shadow: 8px 9px 0 #000,
              0 26px 70px rgba(0,0,0,.85),
              inset 0 3px 0 rgba(255,255,255,.06);
  transform: translateY(20px) scale(.94) rotate(-1deg);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
#roblox-check-overlay.open #roblox-check-modal { transform: rotate(-.35deg); opacity: 1; }

/* cinta de peligro amarilla y negra arriba del todo */
#roblox-check-modal::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9px;
  background: repeating-linear-gradient(45deg,
    var(--yellow-stripe1, #F0B800) 0 12px, #111 12px 24px);
  z-index: 3;
}

/* ══════════ CABECERA ══════════ */
#rcr-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 18px 15px;
  border-bottom: 4px solid #000;
  background: linear-gradient(180deg, rgba(255,215,0,.10), transparent 85%);
  flex-shrink: 0;
}
#rcr-head-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  border: 4px solid #000;
  box-shadow: 0 4px 0 #000, inset 0 3px 0 rgba(255,255,255,.45);
  transform: rotate(-4deg);
  flex-shrink: 0;
}
#rcr-head-text { flex: 1; min-width: 0; }
#roblox-check-modal h2 {
  display: inline-block;
  margin: 0;
  padding: 5px 15px;
  font-size: .96rem;
  line-height: 1.2;
  font-family: 'Fredoka One', cursive;
  letter-spacing: .6px;
  color: #1a1400;
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  border: 3px solid #000;
  border-radius: 999px;
  box-shadow: 0 4px 0 #000;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transform: rotate(-1.6deg);
}
#rcr-head-sub {
  margin-top: 7px;
  font-size: .76rem;
  color: #8b8b95;
  font-family: 'Fredoka', sans-serif;
}
#roblox-check-cancel {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid; place-items: center;
  padding: 0;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #3a3a42, #202026);
  border: 4px solid #000;
  border-radius: 12px;
  box-shadow: 0 4px 0 #000;
  transition: background .15s, transform .12s, box-shadow .12s;
}
#roblox-check-cancel:hover { background: linear-gradient(180deg, #ff5b5b, #b81f1f); transform: translateY(-1px); box-shadow: 0 5px 0 #000; }
#roblox-check-cancel:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }

/* ══════════ ZONA FIJA ══════════ */
#rcr-mode-bar, #roblox-check-input-row, #roblox-check-disclaimer,
#roblox-check-status, #roblox-check-results, #rcr-controls { flex-shrink: 0; }

/* ── Botones de modo ── */
#rcr-mode-bar { margin: 15px 18px 0; gap: 7px; }
#roblox-check-modal .rcr-mode-btn {
  background: linear-gradient(180deg, #35353d, #1e1e24);
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 0 4px 0 #000;
  color: #9a9aa4;
  font-family: 'Fredoka One', cursive;
  font-size: .72rem;
  letter-spacing: .2px;
  padding: 9px 5px;
  transition: transform .12s, box-shadow .12s, background .18s, color .18s;
}
#roblox-check-modal .rcr-mode-btn:hover {
  background: linear-gradient(180deg, #45454f, #26262d);
  color: #e2e2e8;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #000;
}
#roblox-check-modal .rcr-mode-btn.active {
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  color: #1a1400;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 4px 0 #000, 0 0 18px rgba(255,215,0,.3);
}
#roblox-check-modal .rcr-mode-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }

/* ── Buscar usuario ── */
#roblox-check-input-row { margin: 13px 18px 0; gap: 9px; }
#roblox-username-input {
  background: #0f0f13;
  border: 4px solid #000;
  border-radius: 13px;
  padding: 11px 15px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: .93rem;
  color: #fff;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.6);
  transition: box-shadow .18s, background .18s;
}
#roblox-username-input::placeholder { color: #55555e; }
#roblox-username-input:focus {
  border-color: #000;
  background: #131318;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.6), 0 0 0 3px var(--yellow-bright, #FFD700);
}
#roblox-check-submit {
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  color: #1a1400;
  border: 4px solid #000;
  border-radius: 13px;
  padding: 0 22px;
  font-family: 'Fredoka One', cursive;
  font-size: .85rem;
  letter-spacing: .4px;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 5px 0 #000;
  transition: transform .12s, box-shadow .12s, filter .15s;
}
#roblox-check-submit:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 7px 0 #000; }
#roblox-check-submit:active { transform: translateY(5px); box-shadow: 0 0 0 #000; }
#roblox-check-submit:disabled {
  background: linear-gradient(180deg, #3a3a42, #232329);
  color: #77777f; box-shadow: 0 5px 0 #000; filter: none; transform: none;
}

/* ── Aviso ── */
#roblox-check-disclaimer {
  margin: 13px 18px 0;
  padding: 10px 13px;
  font-size: .73rem;
  line-height: 1.5;
  color: #9c8555;
  background: #17130a;
  border: 3px solid #000;
  border-left: 7px solid var(--yellow-dark, #C89A00);
  border-radius: 11px;
  box-shadow: 0 3px 0 #000;
}
#roblox-check-disclaimer strong { color: var(--yellow-bright, #FFD700); }

/* ── Estado ── */
#roblox-check-status {
  margin: 13px 18px 0;
  min-height: 0;
  font-family: 'Fredoka One', cursive;
  font-size: .8rem;
  letter-spacing: .3px;
}
#roblox-check-status:empty { display: none; }
#roblox-check-status:not(:empty) {
  padding: 9px 13px;
  border: 3px solid #000;
  border-radius: 11px;
  background: #1b1b21;
  box-shadow: 0 3px 0 #000;
  animation: rcrPopIn .25s cubic-bezier(.34,1.56,.64,1) both;
}
#roblox-check-status.ok    { background: #14361f; color: #6ee7a0; }
#roblox-check-status.error { background: #3a1414; color: #fca5a5; }
@keyframes rcrPopIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Resumen ── */
#roblox-check-results { margin: 13px 18px 0; gap: 9px; }
#roblox-check-modal .rcr-summary-bar {
  padding: 13px 15px;
  background: linear-gradient(160deg, #24242b, #16161b);
  border: 4px solid #000;
  border-radius: 15px;
  box-shadow: 0 5px 0 #000, inset 0 2px 0 rgba(255,255,255,.05);
  flex-wrap: wrap;
}
#roblox-check-modal .rcr-summary-bar .rcr-sum-label { color: #8b8b95; font-size: .78rem; }
#roblox-check-modal #btn-rcr-mark-all {
  border: 4px solid #000 !important;
  border-radius: 13px !important;
  box-shadow: 0 5px 0 #000;
  font-family: 'Fredoka One', cursive !important;
  transition: transform .12s, box-shadow .12s;
}
#roblox-check-modal #btn-rcr-mark-all:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }

/* ── Buscador y filtros de resultados ── */
#rcr-controls { margin: 13px 18px 0; }
#rcr-search-input {
  background: #0f0f13;
  border: 3px solid #000;
  border-radius: 11px;
  padding: 9px 13px;
  font-family: 'Fredoka', sans-serif;
  color: #fff;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
#rcr-search-input:focus { box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px var(--yellow-bright, #FFD700); }
#roblox-check-modal .rcr-filter-btn {
  background: linear-gradient(180deg, #2c2c34, #1b1b21);
  border: 3px solid #000;
  border-radius: 999px;
  box-shadow: 0 3px 0 #000;
  padding: 6px 14px;
  font-family: 'Fredoka One', cursive;
  font-size: .72rem;
  color: #9a9aa4;
  transition: transform .12s, box-shadow .12s, background .16s, color .16s;
}
#roblox-check-modal .rcr-filter-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #000; color: #e2e2e8; }
#roblox-check-modal .rcr-filter-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #000; }
#roblox-check-modal .rcr-filter-btn.active          { background: linear-gradient(180deg, #FFD700, #C89A00); color: #1a1400; }
#roblox-check-modal .rcr-filter-btn.complete.active { background: linear-gradient(180deg, #6ee7a0, #15803d); color: #04240f; }
#roblox-check-modal .rcr-filter-btn.partial.active  { background: linear-gradient(180deg, #fdba74, #c2410c); color: #2a1002; }
#roblox-check-modal .rcr-filter-btn.pending.active  { background: linear-gradient(180deg, #cbd5e1, #64748b); color: #0f172a; }

/* ── Lista (lo único que hace scroll) ── */
#rcr-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 20px;
}
#rcr-scroll::-webkit-scrollbar { width: 12px; }
#rcr-scroll::-webkit-scrollbar-track { background: #0d0d10; border-radius: 99px; }
#rcr-scroll::-webkit-scrollbar-thumb {
  background: var(--yellow-dark, #C89A00);
  border: 3px solid #000;
  border-radius: 99px;
}
#rcr-scroll::-webkit-scrollbar-thumb:hover { background: var(--yellow-bright, #FFD700); }

/* ── Filas ── */
#roblox-check-modal .rcr-glove-row {
  background: linear-gradient(160deg, #22222a, #16161b);
  border: 4px solid #000;
  border-radius: 15px;
  box-shadow: 0 5px 0 #000;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .16s;
}
#roblox-check-modal .rcr-glove-row:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #000, 0 10px 22px rgba(0,0,0,.5); }
#roblox-check-modal .rcr-glove-row.open  { box-shadow: 0 5px 0 #000, 0 0 0 3px rgba(255,215,0,.25); }
#roblox-check-modal .rcr-glove-header { padding: 12px 14px; }
#roblox-check-modal .rcr-glove-header:hover { background: rgba(255,215,0,.05); }
#roblox-check-modal .rcr-glove-name {
  font-family: 'Fredoka One', cursive;
  font-size: .93rem;
  color: #ffe9a8;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
#roblox-check-modal .rcr-status-pill {
  font-family: 'Fredoka One', cursive;
  font-size: .66rem;
  padding: 4px 11px;
  border: 2.5px solid #000 !important;
  box-shadow: 0 2px 0 #000;
}
#roblox-check-modal .rcr-status-pill.complete { background: #4ade80; color: #06280f; }
#roblox-check-modal .rcr-status-pill.partial  { background: #fb923c; color: #2a1002; }
#roblox-check-modal .rcr-status-pill.pending  { background: #6b6b76; color: #14141a; }
#roblox-check-modal .rcr-chevron { color: var(--yellow-bright, #FFD700); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
#roblox-check-modal .rcr-badge-list { border-top: 3px solid #000; }
#roblox-check-modal .rcr-badge-item {
  padding: 9px 14px;
  border-bottom: 2px solid rgba(0,0,0,.55);
  transition: background .15s;
}
#roblox-check-modal .rcr-badge-item:hover { background: rgba(255,215,0,.05); }
#roblox-check-modal .rcr-badge-date { color: #6ee7a0; font-weight: 600; }
#roblox-check-modal .rcr-badge-thumb { border: 3px solid #000 !important; box-shadow: 0 0 0 2px var(--yellow-bright, #FFD700); }

/* ══════════════════════════════════════════════════════════════
   PANTALLA DE CONEXIÓN  (Slap Battles ⚡ Roblox)
   ══════════════════════════════════════════════════════════════ */
#rcr-loader {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8,8,11,.93);
}
#rcr-loader.on { display: flex; animation: rcrPopIn .2s ease both; }

#rcr-load-card {
  width: min(420px, 100%);
  padding: 26px 22px 20px;
  text-align: center;
  background: linear-gradient(170deg, #23232a, #111115);
  border: 5px solid #000;
  border-radius: 20px;
  box-shadow: 7px 8px 0 #000, 0 20px 50px rgba(0,0,0,.7), inset 0 3px 0 rgba(255,255,255,.06);
  transform: rotate(-.8deg);
  animation: rcrCardIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rcrCardIn { from { opacity: 0; transform: rotate(-5deg) scale(.85); } to { opacity: 1; transform: rotate(-.8deg) scale(1); } }

#rcr-load-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}

/* los dos logos */
.rcr-load-logo {
  position: relative;
  width: 82px; height: 82px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #2e2e36, #17171c);
  border: 4px solid #000;
  border-radius: 18px;
  box-shadow: 0 5px 0 #000, inset 0 3px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
.rcr-load-logo img { width: 76%; height: 76%; object-fit: contain; display: block; }
.rcr-load-logo .rcr-logo-fb { display: none; font-size: 2.1rem; line-height: 1; }
.rcr-load-logo.fallback img { display: none; }
.rcr-load-logo.fallback .rcr-logo-fb { display: block; }
#rcr-logo-slaps  { animation: rcrLogoL 1.5s ease-in-out infinite; }
#rcr-logo-roblox { animation: rcrLogoR 1.5s ease-in-out infinite; }
@keyframes rcrLogoL {
  0%,100% { transform: translateX(0)    rotate(-3deg); }
  50%     { transform: translateX(5px)  rotate(3deg); }
}
@keyframes rcrLogoR {
  0%,100% { transform: translateX(0)    rotate(3deg); }
  50%     { transform: translateX(-5px) rotate(-3deg); }
}

/* el cable entre ambos */
#rcr-load-wire {
  position: relative;
  flex: 1 1 auto;
  height: 82px;
  min-width: 70px;
  display: grid;
  place-items: center;
}
.rcr-wire-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 8px;
  margin-top: -4px;
  background: #0b0b0e;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  border-radius: 4px;
}
.rcr-wire-flow {
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg,
    var(--yellow-bright, #FFD700) 0 9px, transparent 9px 20px);
  animation: rcrFlow .55s linear infinite;
  opacity: .85;
}
@keyframes rcrFlow { to { background-position: 20px 0; } }

/* chispas que viajan de Slaps a Roblox */
.rcr-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px; height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 0 0 12px var(--yellow-bright, #FFD700);
  animation: rcrPulse 1.35s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes rcrPulse {
  0%   { transform: translateX(-4px) scale(.3); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(var(--rcr-run, 70px)) scale(.3); opacity: 0; }
}
#rcr-wire-bolt {
  position: relative;
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(255,215,0,.75));
  animation: rcrBolt .7s ease-in-out infinite;
}
@keyframes rcrBolt {
  0%,100% { transform: scale(1) rotate(-6deg); opacity: .95; }
  50%     { transform: scale(1.28) rotate(6deg); opacity: 1; }
}

#rcr-load-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.02rem;
  letter-spacing: 1.4px;
  color: var(--yellow-bright, #FFD700);
  text-shadow: 0 3px 0 #000;
}
.rcr-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: baseline; }
.rcr-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-bright, #FFD700);
  animation: rcrDot 1s ease-in-out infinite;
}
.rcr-dots i:nth-child(2) { animation-delay: .18s; }
.rcr-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes rcrDot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

#rcr-load-user {
  margin-top: 7px;
  min-height: 1em;
  font-family: 'Fredoka', sans-serif;
  font-size: .8rem;
  color: #8b8b95;
}
#rcr-load-bar {
  position: relative;
  height: 14px;
  margin-top: 15px;
  background: #0b0b0e;
  border: 3px solid #000;
  border-radius: 99px;
  overflow: hidden;
}
#rcr-load-bar i {
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--yellow-dark, #C89A00), var(--yellow-bright, #FFD700));
  animation: rcrBar 1.15s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes rcrBar {
  0%   { left: -42%; }
  100% { left: 102%; }
}

/* ── enganchado: el momento en que conecta ── */
#rcr-loader.done #rcr-load-card { animation: rcrCardPop .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes rcrCardPop { 0% { transform: rotate(-.8deg) scale(1); } 45% { transform: rotate(.6deg) scale(1.06); } 100% { transform: rotate(-.8deg) scale(1); } }
#rcr-loader.done #rcr-logo-slaps  { animation: rcrJoinL .4s cubic-bezier(.34,1.56,.64,1) forwards; }
#rcr-loader.done #rcr-logo-roblox { animation: rcrJoinR .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes rcrJoinL { to { transform: translateX(14px) rotate(-6deg) scale(1.06); } }
@keyframes rcrJoinR { to { transform: translateX(-14px) rotate(6deg) scale(1.06); } }
#rcr-loader.done .rcr-pulse { display: none; }
#rcr-loader.done .rcr-wire-flow { animation: none; background: var(--yellow-bright, #FFD700); opacity: 1; box-shadow: 0 0 16px rgba(255,215,0,.8); }
#rcr-loader.done #rcr-wire-bolt { animation: rcrBoltDone .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes rcrBoltDone { to { transform: scale(1.9) rotate(0deg); filter: drop-shadow(0 0 22px rgba(255,215,0,1)); } }
#rcr-loader.done #rcr-load-title { color: #6ee7a0; }
#rcr-loader.done #rcr-load-bar i { animation: none; left: 0; width: 100%; }
#rcr-loader.fail #rcr-load-title { color: #fca5a5; }
#rcr-loader.fail .rcr-wire-flow,
#rcr-loader.fail .rcr-pulse { display: none; }
#rcr-loader.fail #rcr-wire-bolt { animation: none; filter: grayscale(1); opacity: .5; }
#rcr-loader.fail #rcr-load-bar i { animation: none; left: 0; width: 100%; background: #b91c1c; }

/* ══════════ MÓVIL ══════════ */
@media (max-width: 560px) {
  #roblox-check-overlay { padding: 0; align-items: flex-end; }
  #roblox-check-modal {
    width: 100vw;
    max-height: 93vh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    transform: translateY(30px);
    box-shadow: 0 -10px 40px rgba(0,0,0,.8);
  }
  #roblox-check-overlay.open #roblox-check-modal { transform: none; }
  #rcr-head { padding: 18px 13px 13px; }
  #rcr-mode-bar, #roblox-check-input-row, #roblox-check-disclaimer,
  #roblox-check-status, #roblox-check-results, #rcr-controls { margin-left: 13px; margin-right: 13px; }
  #rcr-scroll { padding: 13px 13px 20px; }
  #roblox-check-modal .rcr-mode-btn { font-size: .64rem; padding: 8px 3px; }
  #roblox-check-input-row { flex-wrap: wrap; }
  #roblox-check-submit { flex: 1; padding: 11px 20px; }
  .rcr-load-logo { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  #roblox-check-modal { transition: opacity .15s; transform: rotate(-.35deg); }
  #rcr-logo-slaps, #rcr-logo-roblox, #rcr-wire-bolt, .rcr-wire-flow,
  .rcr-pulse, .rcr-dots i, #rcr-load-bar i { animation: none !important; }
}