:root {
  --bg-felt: #0d6b3a;
  --bg-felt-dark: #074a26;
  --surface: #ffffff;
  --border: #1c4b30;
  --text: #111827;
  --muted: #cbd5e1;
  --primary: #f59e0b;
  --primary-hover: #d97706;
  --card-bg: #fdfdfd;
  --card-back: #1e3a8a;
  --card-back-pattern: #1d4ed8;
  --red: #c1121f;
  --black: #111827;
  --radius: 8px;
  --bubble-bg: rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg-felt);
  color: var(--text);
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: column;
}

.app-header {
  background: var(--bg-felt-dark);
  color: #fff;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  z-index: 5;
}
.app-header h1 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -.01em;
  font-weight: 600;
}

.score-display {
  margin-left: auto;
  display: flex;
  gap: .8rem;
  font-size: .8rem;
}
.score-team strong {
  font-size: 1rem;
  color: var(--primary);
  margin-left: .2rem;
}

.user-area {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--muted);
}

.icon-btn {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: .95rem;
  cursor: pointer;
  line-height: 1;
}
.icon-btn:hover { background: rgba(255,255,255,.18); }

.setting-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  font-size: .9rem;
}
.setting-row input[type=checkbox] {
  width: 18px;
  height: 18px;
}

.modal-content-narrow {
  max-width: 360px;
}
.remaining-list {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  line-height: 1.6;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: 0 0 .8rem;
  white-space: pre;
  overflow-x: auto;
}
.remaining-list .row { display: block; }
.remaining-list .suit-h, .remaining-list .suit-d { color: var(--red); }
.remaining-list .suit-s, .remaining-list .suit-c { color: #111827; }
.remaining-list .empty { color: #999; font-style: italic; }

/* Bouton "ℹ" à côté du nom de chaque IA */
/* Bouton ℹ retiré, remplacé par éléments inline */

/* Header de chaque siège (nom + notes) */
.seat-header {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.seat-header.vertical {
  flex-direction: column;
  gap: .15rem;
}
.seat-notes {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .7rem;
  font-family: inherit;
  width: 130px;
  max-width: 100%;
}
.seat-notes::placeholder { color: rgba(255,255,255,.45); font-style: italic; }
.seat-notes:focus {
  outline: 1px solid var(--primary);
  background: rgba(255,255,255,.15);
}

/* Mini-cartes "déjà jouées" sous/à côté de la main */
.played-row, .played-col {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  align-items: center;
  margin-top: 3px;
  min-height: 16px;
}
.played-col {
  flex-direction: column;
  margin-top: 0;
  margin-left: 4px;
}
.mini-card {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.3);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: .7rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  line-height: 1;
  min-height: 16px;
}
.mini-card.validated {
  background: #86efac;
  border-color: #166534;
  box-shadow: 0 0 0 1px #16653480;
}
.mini-card.suit-h, .mini-card.suit-d { color: var(--red); }
.mini-card.suit-s, .mini-card.suit-c { color: var(--black); }

/* Pour Est/Ouest, on garde le layout vertical natif du seat. Le played-col empile sous la main. */
.played-col {
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 0;
  margin-top: 3px;
  max-width: 90px;
}

/* Modale infos joueur */
.player-section {
  margin: .8rem 0;
  border-top: 1px solid #e5e7eb;
  padding-top: .6rem;
}
.player-section:first-of-type { border-top: none; padding-top: 0; }
.player-section h4 {
  margin: 0 0 .4rem;
  font-size: .85rem;
  color: #444;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.played-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 32px;
}
.played-card-mini {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .85rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.played-card-mini.suit-h, .played-card-mini.suit-d { color: var(--red); }
.played-card-mini.empty {
  color: #999;
  font-style: italic;
  background: transparent;
  border: none;
}

/* Picker valeur (rang) — boutons générés dynamiquement */
.empty-rank { color: #999; font-style: italic; font-size: .85rem; }

.guesses {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.guesses li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f9fafb;
  border-radius: 4px;
  font-size: .9rem;
  font-family: ui-monospace, monospace;
}
.guesses li.confirmed { background: #d1fae5; color: #065f46; }
.guesses li.suit-h, .guesses li.suit-d { color: var(--red); }
.guesses li.confirmed.suit-h, .guesses li.confirmed.suit-d { color: #065f46; }
.guesses .guess-text { flex: 1; }
.guesses .guess-status { font-size: .75rem; }
.guesses .guess-delete {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
}
.guesses .guess-delete:hover { color: var(--red); }
.guesses .empty {
  color: #999;
  font-style: italic;
  background: transparent;
}

.guess-picker {
  background: #f9fafb;
  border-radius: 6px;
  padding: .5rem .6rem;
  margin-top: .4rem;
}
.picker-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.picker-label {
  font-size: .8rem;
  color: #555;
  width: 60px;
}
.pick-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 28px;
  font-family: ui-monospace, monospace;
}
.pick-btn:hover { background: #fef3c7; border-color: var(--primary); }
.pick-btn.selected {
  background: var(--primary);
  color: #1c1917;
  border-color: var(--primary);
}
.pick-btn.suit-h, .pick-btn.suit-d { color: var(--red); }
.pick-btn.suit-h.selected, .pick-btn.suit-d.selected { color: #fff; background: var(--red); border-color: var(--red); }

#guess-add {
  margin-top: 6px;
  width: 100%;
  font-size: .85rem;
  padding: .45rem;
}

#player-notes {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: .9rem;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 6px 8px;
}
#player-notes:focus {
  outline: 2px solid var(--primary);
  border-color: var(--primary);
}
.user-area #user-email { font-weight: 500; color: #fff; }

.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

/* ===== Table de jeu ===== */
.table {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(60px, 1fr) 4fr minmax(60px, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    ".    north  .   "
    "west center east"
    ".    south  .   ";
  gap: .4rem;
  padding: .5rem;
  background:
    radial-gradient(ellipse at center, #137a44 0%, var(--bg-felt) 60%, var(--bg-felt-dark) 100%);
  overflow: hidden;
  position: relative;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.seat-north { grid-area: north; }
.seat-south { grid-area: south; }
.seat-west { grid-area: west; }
.seat-east { grid-area: east; }
.center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}

.seat-label {
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.dealer-tag {
  display: inline-block;
  background: var(--primary);
  color: #000;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .65rem;
  margin-left: .25rem;
}
.dealer-tag[hidden] { display: none; }

/* Bulles d'annonces affichées au-dessus des joueurs */
.bid-bubble {
  position: absolute;
  background: var(--bubble-bg);
  color: #fff;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.bid-bubble.visible {
  opacity: 1;
  transform: scale(1);
}
.bid-bubble.pass { background: rgba(120,120,120,.7); }
.bid-bubble.coinche { background: #e11d48; }

/* Position des bulles selon le siège (au-dessus, vers le centre) */
.seat-north .bid-bubble { top: calc(100% + 4px); left: 50%; transform: translateX(-50%) scale(.8); }
.seat-north .bid-bubble.visible { transform: translateX(-50%) scale(1); }
.seat-south .bid-bubble { bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) scale(.8); }
.seat-south .bid-bubble.visible { transform: translateX(-50%) scale(1); }
.seat-west .bid-bubble { left: calc(100% + 6px); top: 30%; }
.seat-east .bid-bubble { right: calc(100% + 6px); top: 30%; }

/* ===== Mains ===== */
.hand {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hand-horizontal { flex-direction: row; }
.hand-vertical { flex-direction: column; }
/* Hand classique (Sud) : overlap */
.hand-horizontal .card-tile + .card-tile { margin-left: -28px; }
.hand-vertical .card-tile + .card-tile { margin-top: -54px; }
/* Hand "spaced" (N/E/O avec suppositions cliquables) : pas d'overlap, 2px d'écart */
.hand.spaced.hand-horizontal .card-tile + .card-tile { margin-left: 2px; }
.hand.spaced.hand-vertical .card-tile + .card-tile { margin-top: 2px; }
.hand.spaced .card-tile {
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.hand.spaced .card-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}

/* ===== Carte ===== */
.card-tile {
  width: 50px;
  height: 72px;
  border-radius: 6px;
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px #0006;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  transition: transform .15s ease;
}

.card-tile.back {
  background: repeating-linear-gradient(45deg, var(--card-back) 0 6px, var(--card-back-pattern) 6px 12px);
  border: 2px solid #fff;
}

.card-tile.face {
  background: var(--card-bg);
  border: 1px solid #0008;
}
.card-tile.face .corner {
  position: absolute;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-tile.face .corner.tl { top: 3px; left: 4px; }
.card-tile.face .corner.br { bottom: 3px; right: 4px; transform: rotate(180deg); }
.card-tile.face .pip-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
}
.card-tile.face.red { color: var(--red); }
.card-tile.face.black { color: var(--black); }

/* Sud */
.seat-south .card-tile {
  width: 56px;
  height: 80px;
  cursor: pointer;
}
.seat-south .card-tile:hover {
  transform: translateY(-8px);
}
.seat-south .hand-horizontal .card-tile + .card-tile { margin-left: -22px; }

.seat-north .card-tile,
.seat-east .card-tile,
.seat-west .card-tile {
  width: 42px;
  height: 60px;
}

/* ===== Centre / contrat ===== */
.contract-display {
  background: var(--bubble-bg);
  color: #fff;
  border-radius: 10px;
  padding: .4rem .7rem;
  font-size: .8rem;
  text-align: center;
  max-width: 200px;
}
.contract-display .contract-big {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .02em;
}
.contract-display .contract-team {
  display: block;
  font-size: .65rem;
  opacity: .8;
  margin-top: 2px;
}

/* ===== Pli central ===== */
.trick-area {
  position: relative;
  width: 160px;
  height: 160px;
}
.trick-slot {
  position: absolute;
  width: 50px;
  height: 72px;
}
.trick-slot.trick-N { top: 0; left: 50%; transform: translateX(-50%); }
.trick-slot.trick-S { bottom: 0; left: 50%; transform: translateX(-50%); }
.trick-slot.trick-O { left: 0; top: 50%; transform: translateY(-50%); }
.trick-slot.trick-E { right: 0; top: 50%; transform: translateY(-50%); }

.trick-slot .card-tile {
  width: 50px;
  height: 72px;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}

/* Mise en évidence du gagnant du pli */
.trick-slot.winner .card-tile {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

.trick-counter {
  display: flex;
  gap: 1rem;
  color: #fff;
  font-size: .75rem;
  background: rgba(0,0,0,.4);
  padding: .25rem .6rem;
  border-radius: 6px;
}
.trick-counter strong {
  color: var(--primary);
  margin-left: 3px;
}

/* Cartes jouables / non-jouables pour Sud */
.seat-south .card-tile.playable {
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--primary), 0 1px 4px rgba(0,0,0,.4);
}
.seat-south .card-tile.playable:hover {
  transform: translateY(-12px);
}
.seat-south .card-tile.not-playable {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.5);
}
.seat-south .card-tile.not-playable:hover {
  transform: none;
}

.prompt {
  color: #fff;
  font-size: .85rem;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  text-align: center;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.20);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10;
  padding: 60px 1rem 1rem;
  pointer-events: none;
}
.modal[hidden] { display: none; }
.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  max-width: 480px;
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  pointer-events: auto;
}
.modal-content h3 {
  margin: 0 0 .3rem;
  font-size: 1.15rem;
}
.modal-sub {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: #555;
}

.bid-grid { display: flex; flex-direction: column; gap: .4rem; max-height: 55vh; overflow-y: auto; padding: 2px; }
.bid-row {
  display: grid;
  grid-template-columns: 60px repeat(4, 1fr);
  gap: 5px;
  align-items: center;
}
.bid-row .bid-value {
  font-weight: 700;
  text-align: center;
  background: #f3f4f6;
  border-radius: 5px;
  padding: 4px 0;
  font-size: .9rem;
}
.bid-row button.bid-suit {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 5px;
  padding: 6px 0;
  font-size: 1rem;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.bid-row button.bid-suit:hover {
  background: #fef3c7;
  border-color: var(--primary);
}
.bid-row button.bid-suit.suit-hearts,
.bid-row button.bid-suit.suit-diamonds { color: var(--red); }
.bid-row button.bid-suit.suit-na { font-size: .65rem; font-weight: 700; padding: 8px 0; }

.modal-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.btn {
  border: none;
  padding: .55rem 1rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary {
  background: #e5e7eb;
  color: var(--text);
}
.btn-secondary:hover { background: #d1d5db; }
.btn-coinche {
  background: #e11d48;
  color: #fff;
}
.btn-coinche:hover { background: #be123c; }
.btn.primary {
  background: var(--primary);
  color: #1c1917;
}
.btn.primary:hover { background: var(--primary-hover); }

/* ===== Footer ===== */
.app-footer {
  padding: .35rem 1rem;
  color: var(--muted);
  font-size: .65rem;
  background: var(--bg-felt-dark);
  text-align: center;
  flex-shrink: 0;
}

/* ===== Mobile ===== */
@media (max-width: 480px) {
  .app-header h1 { font-size: .9rem; }
  .score-team strong { font-size: .9rem; }
  .table {
    grid-template-columns: minmax(48px, .8fr) 4fr minmax(48px, .8fr);
    gap: .25rem;
    padding: .3rem;
  }
  .card-tile { width: 42px; height: 60px; }
  .seat-south .card-tile { width: 48px; height: 70px; }
  .seat-north .card-tile,
  .seat-east .card-tile,
  .seat-west .card-tile {
    width: 30px;
    height: 44px;
  }
  .hand-horizontal .card-tile + .card-tile { margin-left: -18px; }
  .hand-vertical .card-tile + .card-tile { margin-top: -38px; }
  .bid-row {
    grid-template-columns: 40px repeat(6, 1fr);
    gap: 3px;
  }
  .bid-row .bid-value { font-size: .8rem; padding: 3px 0; }
  .bid-row button.bid-suit { padding: 5px 0; font-size: .85rem; }
  .bid-row button.bid-suit.suit-na { font-size: .58rem; padding: 6px 0; }
  .modal-content { padding: .9rem; }
  .modal-content h3 { font-size: 1rem; }
}

@media (max-width: 360px) {
  .seat-south .card-tile { width: 42px; height: 62px; }
  .seat-north .card-tile,
  .seat-east .card-tile,
  .seat-west .card-tile {
    width: 26px;
    height: 38px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .app-header { padding: .3rem 1rem; }
  .app-header h1 { font-size: .85rem; }
  .table { gap: .2rem; padding: .2rem; }
  .card-tile { width: 40px; height: 58px; }
  .seat-south .card-tile { width: 46px; height: 66px; }
}