/* === Rebondingue : page du prototype ===
   Le socle (conteneur, boutons, couleurs de surface) vient de
   fichiers-partages-des-jeux/css/jeu.css, chargé juste avant par le proxy. On
   ne décrit ici que ce qui est propre au jeu. */

:root {
  --rb-gomme: #ff5a4f;
  --rb-pierre: #a3a3ae;
  --rb-bulle: #8fe3ff;
  --rb-or: #ffd84a;
}

/* ---------- Barre d'outils ---------- */
.rb-barre-outils {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: -6px 0 10px;
}

.rb-outil {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-size: 1.05rem;
  line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--texte);
  cursor: pointer;
}

.rb-outil:hover {
  border-color: var(--line-forte);
}

/* ---------- Choix du niveau ---------- */
#rb-choix h1 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.rb-intro, .rb-touches {
  color: var(--texte-doux);
  line-height: 1.6;
  text-align: left;
  margin-bottom: 12px;
}

.rb-touches kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.8rem;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 4px;
}

.rb-legende {
  list-style: none;
  text-align: left;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.rb-pastille {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -2px;
}

.rb-pastille.rb-mat-0 { background: radial-gradient(circle at 35% 35%, #ffd0c8, var(--rb-gomme) 45%, #a4232a); }
.rb-pastille.rb-mat-1 { background: radial-gradient(circle at 35% 35%, #f1f1f6, var(--rb-pierre) 50%, #4c4c57); }
.rb-pastille.rb-mat-2 { background: radial-gradient(circle at 35% 35%, #fff, rgba(143, 227, 255, 0.4) 55%, var(--rb-bulle)); }

.rb-liste {
  text-align: left;
  margin-top: 18px;
}

.rb-monde h2 {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texte-faible);
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Visiteur : ce qu'un compte ouvre, juste avant le deuxième monde. */
.rb-monde-invite {
  margin: 22px 0 4px;
  padding: 14px 16px;
  text-align: center;
  color: var(--texte-doux);
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 10px;
}

.rb-monde-invite p {
  margin: 0 0 10px;
}

.rb-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.rb-carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  text-align: left;
  font-family: inherit;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.rb-carte:hover:not(:disabled) {
  border-color: var(--color-light);
}

.rb-carte:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rb-carte-finie {
  border-color: color-mix(in srgb, var(--rb-or) 45%, var(--line));
}

.rb-carte-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texte-faible);
}

.rb-carte-nom {
  font-weight: 700;
  font-size: 0.95rem;
}

.rb-carte-etoiles {
  color: var(--rb-or);
  letter-spacing: 2px;
  min-height: 1.2em;
}

.rb-carte-detail {
  font-size: 0.75rem;
  color: var(--texte-doux);
  min-height: 1.1em;
}

.rb-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--texte-doux);
  text-align: left;
}

/* ---------- Partie ---------- */
#rb-jeu {
  background: var(--surface-1);
}

#rb-jeu:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  background: #0b0816;
}

.rb-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  text-align: left;
}

.rb-hud-niveau {
  font-weight: 700;
  margin-right: auto;
}

.rb-hud-lib {
  color: var(--texte-faible);
  font-size: 0.78rem;
}

/* Icônes à la place des libellés quand la place manque (mode immersif). */
.rb-hud-ico {
  display: none;
  font-size: 0.85em;
  margin-right: 2px;
}

.rb-hud-bloc {
  white-space: nowrap;
}

.rb-hud-bloc strong {
  font-variant-numeric: tabular-nums;
}

.rb-hud-matiere {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid var(--line-forte);
}

.rb-hud-matiere.rb-mat-0 { color: #ffd0c8; border-color: var(--rb-gomme); background: color-mix(in srgb, var(--rb-gomme) 22%, transparent); }
.rb-hud-matiere.rb-mat-1 { color: #ececf2; border-color: var(--rb-pierre); background: color-mix(in srgb, var(--rb-pierre) 22%, transparent); }
.rb-hud-matiere.rb-mat-2 { color: #dff7ff; border-color: var(--rb-bulle); background: color-mix(in srgb, var(--rb-bulle) 18%, transparent); }

.rb-hud-actions {
  display: flex;
  gap: 6px;
}

.rb-hud-info {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--texte-doux);
  text-align: left;
  margin-bottom: 6px;
}

.rb-scene {
  width: 100%;
}

.rb-cadre {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  line-height: 0;
}

#rb-canvas {
  display: block;
  border-radius: 6px;
  image-rendering: pixelated;
  touch-action: none;
}

/* Bandeau d'aide, hors du plateau : il ne recouvre jamais le jeu. */
.rb-aides {
  margin: 0 0 8px;
  padding: 7px 12px;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rb-or);
  border-radius: 6px;
}

.rb-aides[hidden] {
  display: none;
}

.rb-aide {
  margin: 0;
}

.rb-aide + .rb-aide {
  margin-top: 4px;
}

.rb-fin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 20, 0.55);
  border-radius: 6px;
  line-height: 1.4;
}

.rb-fin[hidden] {
  display: none;
}
.rb-fin-carte {
  width: min(380px, 92%);
  padding: 18px 20px;
  background: var(--surface-1);
  border: 1px solid var(--line-forte);
  border-radius: 10px;
}

.rb-fin-carte h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.rb-fin-etoiles {
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--rb-or);
  margin-bottom: 10px;
}

.rb-fin-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 14px;
  font-size: 0.86rem;
  text-align: left;
}

.rb-fin-stats dt {
  color: var(--texte-faible);
}

.rb-fin-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.rb-fin-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.rb-fin-statut {
  min-height: 1.2em;
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--texte-doux);
}

.rb-fin-invite {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.rb-fin-invite p {
  margin: 0 0 8px;
}

.rb-fin-rang {
  margin: -4px 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--rb-or);
}

.rb-fin-lien {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--color-light);
}

.rb-carte-parfaite {
  border-color: var(--rb-or);
}

.rb-message.rb-message-info {
  color: #9fe3b3;
}

.rb-fin-carte #cta-defi-du-jour {
  margin-top: 12px;
}

/* Compte à rebours de la course, par-dessus le plateau. */
.rb-compte {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.5rem, 12vw, 6rem);
  font-weight: 800;
  color: #fff;
  background: rgba(8, 6, 20, 0.35);
  line-height: 1;
  pointer-events: none;
}

.rb-compte[hidden] {
  display: none;
}

.rb-resume, .rb-message {
  text-align: left;
  min-height: 1.2em;
  margin: 4px 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.rb-message {
  color: #e8a0a0;
}

.rb-lien-defi {
  margin-top: 18px;
  text-align: left;
}

/* Pendant une partie, les bandeaux latérales du réseau se retirent : ils
   reviennent sur l'écran de choix. */
body.rb-en-jeu .bandeau-infos-wrap,
body.rb-en-jeu .bloc-jeux-une-wrap {
  display: none !important;
}

/* ---------- Course : salon, salle, résultats ---------- */
.rb-salon-blocs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rb-salon-bloc {
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.rb-salon-bloc h2 {
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.rb-case {
  display: block;
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--texte-doux);
}

.rb-form-code {
  display: flex;
  gap: 8px;
}

.rb-form-code input, .rb-partage input, #rb-choix-niveau {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  color: var(--texte);
  background: var(--surface-0);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
}

.rb-form-code input {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 700;
}

.rb-publiques {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rb-publiques li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.rb-salle-code {
  letter-spacing: 0.15em;
  color: var(--rb-or);
}

.rb-partage {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.rb-salle-joueurs, .rb-course-classement {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
}

.rb-joueur, .rb-course-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.rb-joueur-absent {
  opacity: 0.5;
}

.rb-joueur-couleur {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
}

.rb-joueur-pseudo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-joueur-tag {
  font-size: 0.72rem;
  padding: 1px 6px;
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  color: var(--texte-doux);
}

.rb-course-classement {
  counter-reset: rang;
}

.rb-course-ligne::before {
  counter-increment: rang;
  content: counter(rang) '.';
  width: 1.6em;
  font-weight: 700;
  color: var(--texte-faible);
}

.rb-course-temps {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}

.rb-connexion {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(179, 40, 58, 0.25);
  border: 1px solid #b3283a;
  font-size: 0.85rem;
}

.rb-connexion[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .rb-salon-blocs { grid-template-columns: 1fr; }
}

/* ---------- Commandes tactiles ---------- */
.rb-tactile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.rb-tactile[hidden] {
  display: none;
}

.rb-tactile-dir {
  display: flex;
  gap: 10px;
}

.rb-touche {
  width: 76px;
  height: 76px;
  font-size: 1.7rem;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 14px;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.rb-touche-action {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  font-size: 2rem;
  border-color: var(--rb-gomme);
}

.rb-touche.rb-presse {
  background: var(--surface-0);
  border-color: var(--color-light);
  transform: scale(0.96);
}

/* ---------- Panneau de réglage ---------- */
.rb-reglages {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 100%;
  overflow-y: auto;
  /* Au-dessus de la barre du compte (auth-nav), qui est fixe en haut à droite. */
  z-index: 100000;
  padding: 12px 14px 24px;
  background: var(--surface-1);
  border-left: 1px solid var(--line-forte);
  font-size: 0.8rem;
  text-align: left;
}

.rb-reglages[hidden] {
  display: none;
}

.rb-reg-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.rb-reg-fermer {
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.rb-reg-bloc {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.rb-reg-titre {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--texte-doux);
}

.rb-reg-boutons {
  display: flex;
  gap: 6px;
}

.rb-reg-btn {
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  cursor: pointer;
}

.rb-reg-btn:hover {
  border-color: var(--color-light);
}

.rb-reg-m0 { border-color: var(--rb-gomme); }
.rb-reg-m1 { border-color: var(--rb-pierre); }
.rb-reg-m2 { border-color: var(--rb-bulle); }

.rb-reg-case {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}

.rb-reg-groupe {
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
}

.rb-reg-groupe summary {
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}

.rb-reg-ligne {
  display: grid;
  grid-template-columns: 1fr 96px 70px;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.rb-reg-ligne input[type="range"] {
  width: 100%;
}

.rb-reg-val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--texte-doux);
}

.rb-reg-modifie .rb-reg-lib,
.rb-reg-modifie .rb-reg-val {
  color: var(--rb-or);
}

.rb-reg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 0;
}

.rb-reg-import {
  width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--texte);
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px;
}

.rb-reg-message {
  width: 100%;
  min-height: 1.2em;
  color: var(--texte-doux);
}

/* ---------- Mode immersif : la partie prend tout l'écran ----------
   Indépendant de l'API plein écran, que Safari sur iPhone refuse aux éléments
   de page. Portrait : plateau sur toute la largeur, boutons dans le reste.
   Paysage : plateau au centre, direction à gauche, action à droite. */
body.rb-immersif {
  overflow: hidden;
  overscroll-behavior: none;
}

body.rb-immersif #rb-jeu {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  /* minmax(0, …) : sans lui, la colonne prend la largeur du canvas encore à
     sa taille par défaut, et le plateau déborde de l'écran en portrait. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "hud" "info" "scene" "aides" "tactile";
  gap: 6px;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: #0b0816;
  touch-action: none;
}

body.rb-immersif .rb-hud { grid-area: hud; margin: 0; font-size: 0.8rem; gap: 4px 10px; flex-wrap: nowrap; overflow: hidden; }
body.rb-immersif .rb-hud-lib { display: none; }
body.rb-immersif .rb-hud-ico { display: inline; }
body.rb-immersif .rb-hud-niveau { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.rb-immersif .rb-hud .rb-outil { min-width: 34px; height: 34px; }
body.rb-immersif .rb-hud-info { grid-area: info; margin: 0; }
body.rb-immersif .rb-scene { grid-area: scene; min-width: 0; overflow: hidden; }
body.rb-immersif .rb-aides { grid-area: aides; margin: 0; font-size: 0.8rem; padding: 5px 10px; }
/* L'écran de fin défile s'il est plus haut que l'écran (téléphone en paysage :
   le titre et l'encart du défi sortaient de l'écran, sans défilement possible).
   La marge automatique de la carte la centre quand elle tient, et la laisse
   partir du haut quand elle déborde. */
body.rb-immersif .rb-fin { position: fixed; z-index: 99995; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); }
body.rb-immersif .rb-fin-carte { margin: auto; }

body.rb-immersif .rb-tactile {
  grid-area: tactile;
  margin: 0;
  align-items: stretch;
}

body.rb-immersif .rb-tactile-dir {
  flex: 1 1 60%;
  gap: 10px;
}

body.rb-immersif .rb-touche {
  flex: 1;
  width: auto;
  height: auto;
  min-height: 90px;
  max-height: 280px;
  font-size: 2.2rem;
}

body.rb-immersif .rb-touche-action {
  flex: 0 0 34%;
  border-radius: 24px;
}

@media (orientation: landscape) {
  body.rb-immersif #rb-jeu {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "hud hud hud" "info info info" "aides aides aides" "gauche scene action";
    column-gap: 10px;
  }
  body.rb-immersif .rb-scene { display: flex; align-items: center; justify-content: center; min-height: 0; }
  body.rb-immersif .rb-tactile { display: contents; }
  body.rb-immersif .rb-tactile-dir { grid-area: gauche; align-self: end; flex: none; }
  body.rb-immersif .rb-touche { flex: none; width: 74px; height: 96px; min-height: 0; }
  body.rb-immersif .rb-touche-action { grid-area: action; align-self: end; width: 104px; height: 104px; border-radius: 50%; }
}

/* Téléphone en paysage : le bandeau d'aide passe dans la colonne de gauche,
   au-dessus des flèches, au lieu de prendre une ligne entière au-dessus du
   plateau ; le plateau gagne toute cette hauteur. */
@media (orientation: landscape) and (pointer: coarse) {
  body.rb-immersif #rb-jeu {
    grid-template-areas: "hud hud hud" "info info info" "aides scene action" "gauche scene action";
  }
  body.rb-immersif .rb-aides { width: 168px; align-self: start; font-size: 0.74rem; line-height: 1.35; padding: 5px 8px; }
}

/* Écran de fin sur un écran bas (paysage) : plus compact. */
@media (orientation: landscape) and (max-height: 520px) {
  .rb-fin-carte { width: min(560px, 94%); padding: 10px 16px; }
  .rb-fin-carte h2 { font-size: 1.15rem; }
  .rb-fin-etoiles { font-size: 1.4rem; margin-bottom: 4px; }
  .rb-fin-stats { grid-template-columns: auto 1fr auto 1fr; margin-bottom: 8px; }
}

@media (max-width: 600px) {
  .rb-reglages { width: 100%; }
  .rb-touche { width: 68px; height: 68px; }
  .rb-touche-action { width: 84px; height: 84px; }
}