html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #eef8cd;
  overscroll-behavior: none;
}

#screen {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  image-rendering: pixelated;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Saisie du nom du tama, par-dessus le jeu. */
#name-form {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 220px;
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #eef8cd;
  border: 4px solid #5b6346;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  text-transform: uppercase;
  color: #5b6346;
}

/* Sans cette règle, display: flex annulerait l'attribut hidden. */
#name-form[hidden] {
  display: none;
}

#name-input {
  background: #ffffff;
  border: 2px solid #5b6346;
  border-radius: 0;
  outline: none;
  padding: 8px;
  font: inherit;
}

#name-form button {
  background: #5b6346;
  color: #eef8cd;
  border: 0;
  border-radius: 0;
  padding: 10px;
  font: inherit;
}

/* Menu de réglages et feuille « Amis », même présentation que la saisie
   du nom. */
#menu,
#friends {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 220px;
  height: max-content;
  max-height: 80dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #eef8cd;
  border: 4px solid #5b6346;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  text-transform: uppercase;
  color: #5b6346;
}

#menu h1,
#friends h1 {
  font-size: 20px;
  margin: 0;
  font-weight: normal;
}

#menu-native {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#menu button,
#menu a,
#friends button,
#friends a {
  background: #5b6346;
  color: #eef8cd;
  border: 0;
  border-radius: 0;
  padding: 10px;
  font: inherit;
  text-align: center;
  text-decoration: none;
  text-transform: inherit;
  display: block;
}

/* Deux identifiants : sinon « #menu button » l'emporte et le bouton reste plein. */
#menu #menu-reset {
  background: transparent;
  color: #5b6346;
  border: 2px solid #5b6346;
}

/* Bouton discret de la feuille « Amis » (retirer un ami). */
#friends button.quiet {
  background: transparent;
  color: #5b6346;
  border: 2px solid #5b6346;
  font-size: 12px;
  padding: 6px;
}

#menu p,
#friends p {
  margin: 0;
  text-align: center;
  font-size: 12px;
}

/* Sans cette règle, display: flex / block annulerait l'attribut hidden. */
#menu[hidden],
#menu [hidden],
#friends[hidden],
#friends [hidden] {
  display: none;
}

/* Feuille « Amis » : formulaires, code, liste d'amis. */
#friends form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#friends input {
  background: #ffffff;
  border: 2px solid #5b6346;
  border-radius: 0;
  outline: none;
  padding: 8px;
  font: inherit;
  text-transform: uppercase;
}

/* Deux identifiants : sinon « #friends p » l'emporte et le code reste petit. */
#friends #friends-code {
  font-size: 28px;
  letter-spacing: 4px;
  text-align: center;
  margin: 0;
}

#friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#friends-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 2px solid #5b6346;
  padding-top: 10px;
}

#friends-note {
  min-height: 1em;
  font-size: 12px;
  margin: 0;
}

/* Le bloc du joueur inscrit : même colonne que le reste de la feuille. */
#friends-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}