* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0a0f1a;
  color: #e8eef7;
  font-family: system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header { text-align: center; padding: 1.2rem 1rem .4rem; }
header h1 { margin: 0; font-size: 1.6rem; letter-spacing: .08em; color: #fff; }
header p { margin: .2rem 0 0; color: #93a3bb; font-size: .85rem; }

main { width: 100%; max-width: 700px; padding: .8rem 1rem 2rem; flex: 1; }

.ecran { display: none; }
.ecran.actif { display: block; }

/* ---- Menu ---- */
.menu-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .6rem; }
.carte-menu {
  background: #111a2b;
  border: 1px solid #334155;
  border-radius: 12px;
  color: #c6d2e4;
  padding: 1.1rem .8rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  transition: transform .1s, border-color .1s, background .1s;
}
.carte-menu:hover { transform: translateY(-2px); border-color: #3b82f6; background: #16233a; }
.carte-menu .ico { font-size: 1.6rem; }
.carte-menu strong { font-size: .95rem; color: #fff; }
.carte-menu small { color: #7d8db0; font-size: .72rem; text-align: center; }

.note { margin-top: 1rem; color: #64748b; font-size: .78rem; text-align: center; }

/* ---- Tutoriel ---- */
.regles { display: flex; flex-direction: column; gap: .6rem; margin: .6rem 0 1rem; }
.regle { display: flex; gap: .7rem; background: #111a2b; border: 1px solid #243248; border-radius: 10px; padding: .6rem .8rem; }
.regle .num {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.regle p { margin: 0; font-size: .85rem; line-height: 1.4; }
.regle em { color: #93c5fd; font-style: normal; }

.barre { display: flex; gap: .5rem; justify-content: center; margin: .8rem 0; }
.barre button, .barre-actions button {
  border: 1px solid #334155; background: #111a2b; color: #c6d2e4;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; font-size: .9rem;
}
.barre button:hover, .barre-actions button:hover { background: #16233a; border-color: #3b82f6; }

/* ---- Barre info ---- */
#barre-info {
  display: flex; justify-content: space-between; align-items: center;
  background: #111a2b; border: 1px solid #243248; border-radius: 10px;
  padding: .5rem .8rem; margin-bottom: .6rem;
}
#barre-info .infos-gauche, #barre-info .infos-droite { display: flex; align-items: center; gap: .6rem; }
#joueur-encours { font-weight: 700; color: #fff; font-size: .9rem; }
#sens-jeu { color: #3b82f6; }
#annonce { color: #93c5fd; font-size: .82rem; }
#btn-quitter { border: none; background: transparent; color: #64748b; font-size: 1.1rem; cursor: pointer; }

/* ---- La table : trois zones (IA en haut, centre, moi en bas) ---- */
#table {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background:
    radial-gradient(circle at 50% 40%, #0e2a3f 0%, #0a1f30 60%, #081725 100%);
  border: 1px solid #24405c;
  border-radius: 18px;
  padding: .8rem;
}

/* Zone du haut : l'IA */
#zone-ia {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  min-height: 110px;
  border-radius: 12px;
  padding: .5rem;
  background: rgba(0,0,0,.18);
}
#dos-ia { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; }
#dos-ia .dos-carte {
  width: 44px; height: 64px; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #475569 0 6px, #334155 6px 12px);
  border: 1.5px solid #1e293b;
  font-size: 0; cursor: default;
}
#dos-ia .dos-carte.carte-active { box-shadow: 0 0 0 2px #f59e0b, 0 3px 8px rgba(0,0,0,.5); }
#nom-adversaire { color: #93a3bb; font-size: .8rem; }
#info-adversaire { display: flex; gap: .6rem; align-items: center; }
#nom-adversaire { color: #c6d2e4; }
#compteur-adversaire { color: #f59e0b; font-weight: 600; }

/* Zone centrale : défausse + pioche */
#zone-centre {
  flex: 1;
  display: flex; justify-content: center; align-items: center; gap: 2.2rem;
  min-height: 190px;
}
.zone { text-align: center; }
.zone small { display: block; color: #7d8db0; margin-top: .35rem; font-size: .72rem; }

.dos-carte {
  width: 84px; height: 124px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #3b82f6 0 8px, #2b5bd0 8px 16px);
  border: 2px solid #1e3a8a;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: rgba(255,255,255,.75); user-select: none;
  cursor: pointer;
}
.dos-carte.desactive { opacity: .4; cursor: default; }

/* ---- Cartes ---- */
.carte {
  width: 78px; height: 116px; border-radius: 8px;
  background: #f8fafc; color: #0f172a;
  border: 1px solid #334155;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; line-height: 1;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
  user-select: none;
}
.carte .rang { font-size: 1.05rem; margin-top: .3rem; }
.carte.coeur, .carte.carreau { color: #dc2626; }
.carte.pique, .carte.trefle { color: #0f172a; }
.carte.joker {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-size: 1rem;
}
.carte.special { box-shadow: 0 0 0 2px #f59e0b, 0 3px 8px rgba(0,0,0,.5); }

#carte-courante .carte { width: 100px; height: 148px; font-size: 2.2rem; }
#carte-courante .carte .rang { font-size: 1.3rem; }

/* ---- Zone du bas : mes cartes ---- */
#zone-moi {
  background: rgba(0,0,0,.22);
  border-radius: 12px;
  padding: .6rem .4rem .5rem;
}
#cartes-joueur {
  display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; min-height: 126px;
}
#cartes-joueur .carte { cursor: pointer; transition: transform .12s; }
#cartes-joueur .carte:hover { transform: translateY(-10px); }
#cartes-joueur .carte:not(.jouable) { opacity: .38; cursor: default; }
#cartes-joueur .carte:not(.jouable):hover { transform: none; }
#cartes-joueur .carte.jouable { box-shadow: 0 0 0 2px #22c55e, 0 3px 8px rgba(0,0,0,.5); }
#cartes-joueur .carte.jouable:hover { box-shadow: 0 0 0 3px #4ade80, 0 6px 14px rgba(0,0,0,.6); }

.barre-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .6rem; }
.barre-actions button:disabled { opacity: .4; cursor: default; }

/* ---- Choix couleur ---- */
.choix-couleur.cache { display: none; }
.choix-couleur { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.choix-couleur .voile { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.choix-couleur .panneau {
  position: relative; background: #111a2b; border: 1px solid #334155; border-radius: 12px;
  padding: 1.2rem; text-align: center; z-index: 1;
}
.choix-couleur h3 { margin: 0 0 .8rem; font-size: .95rem; color: #fff; }
.choix-couleur .couleurs { display: flex; gap: .6rem; justify-content: center; }
.choix-couleur .couleurs button {
  width: 52px; height: 52px; border-radius: 10px; border: 2px solid rgba(255,255,255,.25);
  font-size: 1.4rem; cursor: pointer;
}
.choix-couleur .couleurs button:hover { transform: scale(1.08); }

footer { color: #475569; font-size: .72rem; padding: .8rem; text-align: center; }

/* ---- Fin de manche ---- */
.fin-manche { text-align: center; padding: 1rem; }
.fin-manche h2 { color: #fff; }
.fin-manche .points { color: #93c5fd; margin: .5rem 0 1rem; }