/* ============================================================
   QUIZ ARENA v2.1 — STYLES FOR NEW FEATURES
   ============================================================ */

/* ==== Profile ID Card ==== */
.profileIdCard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  text-align: center;
}

.profileIdCard .eyebrow {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.idBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
}

.idBox code {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  user-select: all;
}

.copyBtn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.copyBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.profileIdCard small {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 8px;
}

/* ==== Avatar Picker ==== */
.avatarGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  margin: 16px 0;
}

.avatarChoice {
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  transition: all 0.2s;
  padding: 8px;
  overflow: hidden;
}

.avatarChoice svg {
  width: 100%;
  height: 100%;
  display: block;
}

.avatarChoice:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.avatarChoice.selected {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.2);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

/* ==== Name Field Edit ==== */
.nameField,
.nameFieldEdit {
  position: relative;
  margin: 16px 0;
}

.nameField input {
  padding-right: 48px;
}

.editBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.editBtn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.nameFieldEdit {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nameFieldEdit input {
  flex: 1;
}

.nameActions {
  display: flex;
  gap: 4px;
}

.confirmBtn,
.cancelBtn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirmBtn:hover {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
}

.cancelBtn:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: #ff6464;
}

/* ==== Friends Tab v3 ==== */
.friendsTabBar {
  display: flex;
  gap: 6px;
  margin: 16px 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 4px;
}

.friendsTabBar button {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 6px;
  font-size: 13px;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.friendsTabBar button.on {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
  font-weight: 600;
}

.tabBadge {
  display: inline-block;
  background: #ff4757;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
}

.friendsCount {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 10px;
}

.friendsSearch {
  margin: 16px 0 10px;
}

.friendsSearch input {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.searchBoxWrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* La loupe est un vrai bouton cliquable : elle lance la recherche
   immédiatement (sans attendre le debounce) et donne un vrai retour
   au toucher, comme dans les apps mobiles où appuyer dessus "fait
   quelque chose" plutôt que d'être juste décorative. */
.searchIconBtn {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  opacity: 0.65;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 2;
}

.searchIconBtn:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.08);
}

.searchIconBtn:active,
.searchIconBtn.pressed {
  opacity: 1;
  background: rgba(0, 255, 136, 0.22);
  transform: translateY(-50%) scale(0.88);
}

.searchBoxWrap input {
  padding-left: 42px;
  padding-right: 38px;
  width: 100%;
}

.searchClearBtn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  opacity: 0.7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 2;
}

.searchClearBtn:hover {
  opacity: 1;
  background: rgba(255, 100, 100, 0.2);
}
.searchClearBtn.hidden {
  display: none;
}

/* ==== Onboarding — étape avatar ==== */
.onboardStepLabel {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin: 18px 0 8px;
  text-align: center;
}

.searchState {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  opacity: 0.6;
  font-size: 13px;
}

.searchSpinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: fspin 0.7s linear infinite;
  display: inline-block;
}

@keyframes fspin {
  to {
    transform: rotate(360deg);
  }
}

.friendCard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.friendCard:last-child {
  border-bottom: none;
}

.friendAvatar {
  position: relative;
  font-size: 28px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onlineDot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  background: #2ed573;
  border: 2px solid #130c24;
  border-radius: 50%;
}

.friendInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.friendInfo b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friendInfo small {
  opacity: 0.6;
  font-size: 11px;
}

.friendActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.fBtnPrimary,
.fBtnAccept,
.fBtnDecline,
.fBtnGhost {
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  white-space: nowrap;
  padding: 8px 12px;
  gap: 4px;
}

.fBtnPrimary {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.35);
  color: #00ff88;
}

.fBtnPrimary:hover {
  background: rgba(0, 255, 136, 0.22);
  transform: scale(1.03);
}

.fBtnAccept {
  background: #2ed573;
  border-color: #2ed573;
  color: #0a1f0f;
}

.fBtnAccept:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

.fBtnDecline {
  background: rgba(255, 71, 87, 0.12);
  border-color: rgba(255, 71, 87, 0.4);
  color: #ff4757;
}

.fBtnDecline:hover {
  background: rgba(255, 71, 87, 0.22);
  transform: scale(1.03);
}

.fBtnGhost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 34px;
  height: 34px;
  padding: 0;
}

.fBtnGhost:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: rgba(255, 100, 100, 0.3);
}

.fPending {
  font-size: 11px;
  opacity: 0.6;
  white-space: nowrap;
  margin-right: 4px;
}

.fPending.fOk {
  color: #2ed573;
  opacity: 1;
}

.friendsList {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.friendsSectionTitle {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin: 20px 0 10px;
}

.emptyState {
  text-align: center;
  padding: 32px 16px;
  opacity: 0.7;
}

.emptyState b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.emptyState p {
  font-size: 13px;
  opacity: 0.8;
}

/* ==== Écran de jeu (solo + duel) ==== */
/* Un ciblage précédent visait des classes (.quizScreen, .qCard,
   .responseOptions, .response) qui n'existent nulle part dans le HTML
   réel — sans effet. Une tentative de correction avait ensuite forcé
   les réponses tout en bas de l'écran via margin-top:auto sur un
   conteneur en flex — ça créait un vide énorme entre la question et
   les réponses dès que la question était courte. Retiré : le flux
   naturel (pas de poussée forcée) est plus fiable que le calcul en
   CSS pur, qui ne sait pas si le contenu déborde ou non. */
.liveGameScreen .questionVisual {
  margin-top: 4px;
}

/* La croix (quitter) reste en haut à gauche comme en solo, le 🚩
   (signaler) part à l'opposé : impossible de quitter un duel en
   visant le mauvais bouton. */
.liveTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.liveQuitBtn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: #22163f;
  color: #bcafdc;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.liveQuitBtn:hover {
  background: #2d1e56;
  color: #fff;
}
.liveQuitBtn:active {
  transform: scale(0.92);
}

/* ==== Duel 1v1 — choix bot / ami + sous-catégories ==== */
.jouteChoiceGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 4px;
}

.jouteChoice {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px 12px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: all 0.2s;
}

.jouteChoice:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.jouteChoiceIcon {
  font-size: 30px;
  margin-bottom: 4px;
}

.jouteChoice b {
  font-size: 14px;
}

.jouteChoice small {
  opacity: 0.65;
  font-size: 11px;
}

.jouteSubAll {
  border-color: rgba(0, 255, 136, 0.35) !important;
}

/* Boutons "Classique en duel" (bot / ami) sur l'écran de catégorie */
.duelEntryRow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.duelEntryBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.duelEntryBtn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.duelEntryBtn .modeIcon {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.duelEntryBtn span > b {
  display: block;
  font-size: 14px;
}

.duelEntryBtn span > small {
  opacity: 0.6;
  font-size: 12px;
}

.duelEntryBtn .chev {
  margin-left: auto;
  opacity: 0.4;
}

.duelEntryBtn.bot {
  border-color: rgba(0, 255, 136, 0.25);
}
.duelEntryBtn.friend {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Mobile responsive */
@media (max-width: 390px) {
  .avatarGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .nameFieldEdit {
    flex-wrap: wrap;
  }

  .nameFieldEdit input {
    flex-basis: 100%;
  }

  .nameActions {
    width: 100%;
    justify-content: flex-end;
  }
}