/* =========================================================
   PLAYER-CARDS.CSS
   Ajustes de UI para:
   - Carta deslizable ("DESLIZÁ PARA REVELAR")
   - Texto revelado debajo (PALABRA / IMPOSTOR)
   ========================================================= */


/* =========================
   (Opcional) ¿Sos AGUS?
   ========================= */
   .whoLine{
    font-size: 30px;
  }
  .whoNameBig{
    text-transform: uppercase;
    font-weight: 800;
  }
  .whoLine .whoThin:last-child{
    margin-left: -4px;
  }

  .whoBig{
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 800;
  }
  
  
  /* =========================
     CARTA DESLIZABLE
     IMPORTANTE: que NO empuje el layout hacia abajo
     ========================= */
  #revealCard{
    /* Se ve como "píldora" arriba, sin ocupar 1/2 pantalla */
    width: min(520px, 92%);
    margin: 0 auto 10px auto; /* espacio chico debajo */
    padding: 0;               /* clave: no inflar alto */
    border-radius: 18px;
  
    background: linear-gradient(
      180deg,
      rgba(14, 18, 15, 0.98),
      rgba(9, 12, 10, 0.98)
    );
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
  
    will-change: transform;
  }
  
  /* Top visible */
  .revealCardTop{
    padding: 16px 18px;
  }
  
  /* Grip */
  .revealCardGrip{
    width: 54px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    margin: 0 auto 10px auto;
  }
  
  /* Textos del top */
  .revealCardTitle{
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    text-align: center;
    font-size: 20px;
  }
  
  .revealCardSub{
    margin-top: 6px;
    color: rgba(255,255,255,.70);
    text-align: center;
    font-size: 14px;
  }
  
  /* Body vacío => que no ocupe alto */
  .revealCardBody{
    display: none;
  }
  
  
  /* =========================
     TEXTO REVELADO (debajo)
     ========================= */
  #revealResult{
    /* ✅ Esto lo deja “en el medio”, y NO pegado al botón */
    margin: 10px 0 16px 0;
  
    text-align: center;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
  
    font-size: clamp(26px, 6vw, 44px);
    line-height: 1.05;
  
    padding: 4px 10px;
    user-select: none;
  }
  
  #revealResult.revealResultCivil{
    color: var(--accent, #6ee7ff);
  }
  
  #revealResult.revealResultImpostor{
    color: var(--danger, #ff6e6e);
  }
  
  
  /* =========================
     BOTÓN "SIGUIENTE JUGADOR"
     (separación)
     ========================= */
  #revealPanel .stackBtns{
    margin-top: 6px;  /* antes era 14px en base.css */
  }
  
  /* Responsive */
  @media (max-width: 520px){
    .revealCardTitle{ font-size: 18px; }
    .revealCardSub{ font-size: 18px; }
    #revealResult{ font-size: clamp(24px, 7vw, 38px); }
  }