/* Rejoindre : même habillage que l'accueil du portail (profil.css) — fond à
   halos, panneaux arrondis, intitulés en petites capitales espacées. */
.rejoindre-header {
  position: relative; z-index: 1; padding: max(12px, env(safe-area-inset-top)) 16px 0;
  display: flex; align-items: center; gap: 11px;
}
.rejoindre-back {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(6,6,18,.48);
  color: #ffe600; font: 900 19px/1 Nunito,sans-serif; cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.rejoindre-back:active { transform: scale(.96); }
.rejoindre-titles { min-width: 0; flex: 1; }
.rejoindre-title { margin-top: 4px; color: #fff; font-size: 21px; line-height: 1.05; font-weight: 900; }
.rejoindre-wrap { position: relative; z-index: 1; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 11px; }

.rejoindre-section { margin: 4px 3px -3px; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.rejoindre-section span { color: #ffe600; }
.rejoindre-section small { margin-left: 6px; color: #747491; font-size: 9.5px; font-weight: 800; letter-spacing: 0; }

/* Deux onglets en haut de page : Réflexion (par défaut) / Arcade. Même gabarit que le bouton retour
   (38 px, rayon 13, fond sombre, filet clair) ; l'onglet actif prend le jaune du portail en liseré et en texte. */
.rejoindre-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rejoindre-onglet {
  position: relative; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(6,6,18,.48);
  color: #aaaac2; font: 900 11px Nunito, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.05); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rejoindre-onglet:active { transform: scale(.98); }
.rejoindre-onglet.actif {
  border-color: rgba(255,230,0,.55); color: #ffe600;
  background: linear-gradient(160deg, rgba(255,230,0,.14), rgba(255,230,0,.05)); box-shadow: inset 0 1px rgba(255,230,0,.12);
}
/* Petite bannière « New! » en travers du coin de l'onglet (ARCADE_NOUVEAU dans rejoindre-scene.js). */
.rejoindre-new {
  position: absolute; top: -6px; right: -3px; padding: 2px 6px 1px; border-radius: 6px; transform: rotate(7deg);
  background: #ff2d78; color: #fff; font: 900 8.5px/1.2 Nunito, sans-serif; letter-spacing: .03em; text-transform: none;
  box-shadow: 0 2px 6px rgba(255,45,120,.45); pointer-events: none;
}
.rejoindre-onglet-contenu { display: flex; flex-direction: column; gap: 11px; }
.rejoindre-onglet-contenu[hidden] { display: none; }

/* Une catégorie de jeux solos = un panneau, comme « Pour toi » sur l'accueil. */
.rejoindre-categorie {
  padding: 9px 9px 11px; border: 1px solid rgba(255,255,255,.10); border-radius: 19px;
  background: linear-gradient(160deg, rgba(28,28,53,.96), rgba(13,13,29,.96));
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.045);
}
.rejoindre-categorie-titre { padding: 0 3px 8px; }
.rejoindre-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 7px; }

.rejoindre-vide { padding: 10px 0; color: #767690; font-size: 11px; text-align: center; }
.rejoindre-actualiser {
  margin-top: 2px; padding: 11px; border: 1px solid rgba(255,255,255,.10); border-radius: 13px;
  background: rgba(6,6,18,.48); color: #aaaac2; font: 800 12px Nunito,sans-serif; cursor: pointer; touch-action: manipulation;
}

/* Jeu en maintenance : ruban en travers de l'icône, fenêtre au toucher. */
.rejoindre-maintenance-ruban { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 17%; background: repeating-linear-gradient(135deg, #f2c84b 0 6px, #1a1a1a 6px 12px); box-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.rejoindre-maintenance-ruban svg { display: block; width: 100%; height: 100%; }
.rejoindre-maintenance-ruban text { font: 900 11px Nunito, system-ui, sans-serif; fill: #fff; stroke: #000; stroke-width: 2.2px; paint-order: stroke; }
.rejoindre-maintenance { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,4,10,.72); }
.rejoindre-maintenance > div { width: 100%; max-width: 320px; box-sizing: border-box; padding: 20px; border-radius: 18px; background: #15152a; border: 1px solid #f2c84b66; color: #e8e8f0; text-align: center; font-family: Nunito, system-ui, sans-serif; }
.rejoindre-maintenance h2 { margin: 0 0 8px; font-size: 18px; color: #f2c84b; }
.rejoindre-maintenance p { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: #c9c9da; }
.rejoindre-maintenance button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px; background: #f2c84b; color: #15152a; font: 900 15px Nunito, system-ui, sans-serif; cursor: pointer; }