/* ------------------------------------------- ecrans de menu (feuilles) --- */

/* Meme photo, meme colonne a gauche que l'accueil : on quitte la boite
   centree des panneaux pour que les ecrans s'enchainent sans rupture. */
.screen.sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 3vh, 30px);
  padding: clamp(22px, 5vh, 54px) clamp(26px, 6vw, 92px);
  background: none;
  backdrop-filter: none;
  overflow: hidden;
}
/* Ce `display` porte un identifiant de fait : sans cette ligne l'ecran
   resterait affiche par-dessus les autres, comme l'accueil l'a fait. */
.screen.sheet[hidden] { display: none; }
.screen.sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('menu/principal/menu_background.png') center / cover no-repeat;
}
/* Le voile est plus franc qu'a l'accueil : il y a du texte a lire jusqu'au
   milieu de l'image, et des reglages a distinguer les uns des autres. */
.screen.sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #04060af7 0%, #04060ae6 46%, #04060aa8 72%, #04060a4d 100%);
}

.sheet-head,
.sheet-body,
.sheet-menu {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
}
.sheet-head .eyebrow { margin-bottom: 8px; }
.sheet-head h2 { margin: 0; }
.sheet-body { overflow-y: auto; padding-right: 6px; }
.sheet-body .row { border-color: #ffffff12; }

/* Le pied reprend les entrees de l'accueil, couchees en ligne. */
.sheet-menu {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 40px);
}
.sheet-menu button {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 10px 0 12px;
  font-size: clamp(11.5px, 1.15vw, 14px);
  letter-spacing: .34em;
  color: #c3ccdb;
  opacity: .58;
  text-shadow: 0 2px 14px #000a;
  transition: opacity .18s, color .18s;
}
.sheet-menu button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width .22s ease;
}
.sheet-menu button:hover, .sheet-menu button:focus-visible, .sheet-menu button.pad-focus {
  color: #fff;
  opacity: 1;
  background: none;
  border: 0;
  outline: none;
  transform: none;
}
.sheet-menu button:hover::after, .sheet-menu button:focus-visible::after, .sheet-menu button.pad-focus::after {
  width: 30px;
}

/* Onglets : memes capitales espacees, meme trait orange, sur une rangee. */
.sheet .tabs {
  display: flex;
  gap: clamp(14px, 2.6vw, 34px);
  border: 0;
  margin-bottom: clamp(12px, 2.4vh, 22px);
  padding: 0;
}
.sheet .tabs button {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 6px 0 10px;
  font-size: 11px;
  letter-spacing: .28em;
  color: #c3ccdb;
  opacity: .5;
}
.sheet .tabs button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width .2s ease;
}
.sheet .tabs button.active,
.sheet .tabs button:hover,
.sheet .tabs button.pad-focus,
.sheet .tabs button:focus-visible {
  color: #fff;
  opacity: 1;
  background: none;
  outline: none;
}
.sheet .tabs button.active::after,
.sheet .tabs button:hover::after,
.sheet .tabs button.pad-focus::after,
.sheet .tabs button:focus-visible::after { width: 100%; }

/* Vignettes de stade : plus de cadre, c'est l'image qui parle. Le stade
   vise s'eclaircit et prend le liisere orange. */
.sheet button.stadium {
  border: 1px solid #ffffff1a;
  background: #04060a80;
  opacity: .72;
  transition: opacity .18s, border-color .18s, transform .18s;
}
.sheet button.stadium span { letter-spacing: .06em; }
.sheet button.stadium:hover,
.sheet button.stadium:focus-visible,
.sheet button.stadium.pad-focus {
  opacity: 1;
  border-color: var(--orange);
  outline: none;
  transform: translateY(-2px);
}
.sheet button.stadium.active { border-color: var(--orange); opacity: 1; }
#stadium-list { max-height: none; }

/* Porte du multijoueur : se connecter avant de jouer en ligne. */
.porte-multi { display: grid; gap: 12px; justify-items: start; padding: 6px 0 4px; }
.porte-multi[hidden], #online-nom[hidden], #online-list[hidden] { display: none; }
.porte-titre { margin: 0; font-size: 14px; letter-spacing: .06em; color: var(--ink); }
.porte-multi .note { margin: 0; max-width: 46ch; }
.porte-multi button.google {
  padding: 11px 18px;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: #1f1f1f;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
.porte-multi button.google::before { content: 'G  '; color: #4285f4; font-family: var(--display); }
.porte-multi button.google:hover,
.porte-multi button.google.pad-focus { background: #e8eefc; outline: 2px solid var(--orange); }

/* Personnalisation : la grille des choix a gauche, la voiture equipee en
   grand a droite, nez vers le haut comme sur les planches. */
.sheet-body.garage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 24vw, 320px);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}
#garage-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
button.stadium.voiture img {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  padding: 10px 14px 0;
  background: radial-gradient(circle at 50% 45%, #ffffff14, transparent 70%);
}
#garage-vue { text-align: center; }
#garage-vue img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px #000c);
}
.garage-nom {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}
.garage-bientot { margin: 8px 0 0; }
@media (max-width: 720px) {
  .sheet-body.garage { grid-template-columns: 1fr; }
  #garage-vue { max-width: 200px; margin: 0 auto; }
}

/* Salons et saisie du pseudo, poses sur la photo plutot que dans une boite. */
.sheet .salon { background: #04060a99; border-color: #ffffff1a; }
.sheet input[type="text"] { background: #04060a99; border-color: #ffffff26; }
/* Le corps de la feuille defile deja : ce plafond-la ferait deux
   ascenseurs imbriques, l'un dans l'autre. */
.sheet #settings-body { max-height: none; overflow: visible; }
.sheet .note { margin-top: 12px; }