:root {
  --vert: #1a5c3a;
  --vert-fonce: #0e3b24;
  --creme: #f7f1e1;
  --or: #e8b64c;
  --rouge: #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(circle at 50% 20%, var(--vert), var(--vert-fonce));
  color: var(--creme);
  min-height: 100vh;
}

#app { max-width: 480px; margin: 0 auto; padding: 16px; }

h1 { text-align: center; font-size: 1.8rem; margin: 12px 0 4px; }
h2 { margin-bottom: 12px; }
.sous-titre { text-align: center; opacity: .8; margin-bottom: 16px; font-size: .9rem; }
.cache { display: none !important; }
.erreur { color: #ff9a8a; text-align: center; min-height: 1.4em; margin-top: 12px; font-size: .9rem; }
.info { text-align: center; opacity: .8; margin-top: 12px; }
.credits { text-align: center; margin-bottom: 12px; }

.carte {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

input {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .3);
  color: var(--creme);
  font-size: 1rem;
}
input::placeholder { color: rgba(247, 241, 225, .5); }

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .15);
  color: var(--creme);
  transition: transform .08s, background .15s;
}
button:active { transform: scale(.96); }
button:disabled { opacity: .4; cursor: default; }
button.gros-bouton { display: block; width: 100%; background: var(--or); color: #2b1d05; }
button.secondaire { display: block; width: 100%; margin-top: 8px; }

.liste-joueurs { list-style: none; margin: 12px 0; }
.liste-joueurs li {
  background: rgba(0, 0, 0, .25);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 6px;
}

#code-affiche {
  color: var(--or);
  letter-spacing: .3em;
  font-size: 1.4rem;
}

.choix-mises { display: flex; gap: 10px; margin-bottom: 10px; }
.bouton-mise { flex: 1; padding: 22px 0; font-size: 1.3rem; background: var(--or); color: #2b1d05; }

/* --- Tableau de jeu --- */

.zone-croupier { text-align: center; margin-bottom: 10px; }
.etiquette { font-size: .85rem; opacity: .8; display: block; margin-bottom: 6px; }

.main-cartes { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }

.acarte {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 62px;
  background: #fff;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.acarte small { font-size: .8rem; font-weight: 400; }
.acarte.rouge { color: var(--rouge); }
.acarte.noire { color: #222; }
.acarte.dos {
  background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 6px, #5c141e 6px, #5c141e 12px);
}

.message-tour {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 10px 0;
  min-height: 1.5em;
}

.table-joueur {
  background: rgba(0, 0, 0, .25);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid transparent;
}
.table-joueur.moi { border-color: rgba(232, 182, 76, .6); }
.table-joueur .nom { display: block; font-size: .85rem; margin-bottom: 6px; }

.mains { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.main { text-align: center; }
.main .score { display: inline-block; margin: 4px 6px 0 0; font-weight: 700; }
.main .mise-main { font-size: .75rem; opacity: .7; margin-right: 6px; }
.main-active { outline: 2px solid var(--or); border-radius: 8px; padding: 4px; }

.resultat { display: block; font-size: .85rem; font-weight: 700; margin-top: 2px; }
.resultat-victoire, .resultat-blackjack { color: #7ddc9a; }
.resultat-defaite { color: #ff9a8a; }
.resultat-egalite { color: var(--or); }

.actions { display: flex; gap: 8px; margin: 14px 0; }
.actions button { flex: 1; padding: 16px 4px; background: var(--or); color: #2b1d05; }
.actions #btn-rester { background: rgba(255, 255, 255, .2); color: var(--creme); }

.score-croupier-bilan { text-align: center; margin-bottom: 12px; }