:root {
  --felt: #14402e;
  --felt-light: #1d5a41;
  --ink: #f3efe4;
  --muted: #a9c2b5;
  --card: #fbf8f1;
  --card-ink: #1c1c1c;
  --red: #c0392b;
  --accent: #e8b84a;
  --danger: #e57361;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at center, var(--felt-light), var(--felt) 70%);
  color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app {
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
button {
  font: inherit;
  color: inherit;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.08);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
}
button:disabled { opacity: 0.35; cursor: default; }
button.primary { background: var(--accent); color: #2a2110; border-color: transparent; font-weight: 600; }
button.selected { outline: 2px solid var(--accent); }
input {
  font: inherit;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(0 0 0 / 0.2);
  color: inherit;
  width: 100%;
}
h1 { font-size: 1.6rem; margin: 0.5em 0; }
.muted { color: var(--muted); font-size: 0.9rem; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Accueil et salle d'attente */
.home { margin: auto 0; text-align: center; gap: 20px; }
.share { display: flex; gap: 8px; }
.share input { flex: 1; font-size: 0.85rem; }
.lobby-table {
  display: grid;
  grid-template: 'n n' auto 'w e' auto 's s' auto / 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
}
.lobby-seat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px; border-radius: var(--radius); background: rgb(0 0 0 / 0.18);
}
.lobby-seat .team { font-size: 0.75rem; color: var(--muted); }
.lobby-seat.you { outline: 2px solid var(--accent); }

/* Table de jeu */
.topbar { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; }
.scores b { font-size: 1rem; }
.contract { text-align: right; }
.table {
  flex: 1;
  display: grid;
  grid-template: '. top .' auto 'left trick right' 1fr '. bottom .' auto / 1fr 2fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-height: 300px;
  margin: 8px 0;
}
.player { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.85rem; text-align: center; }
.player .name { padding: 2px 8px; border-radius: 999px; }
.player.turn .name { background: var(--accent); color: #2a2110; font-weight: 600; }
.player.offline .name { opacity: 0.5; }
.dealer { font-size: 0.7rem; background: rgb(255 255 255 / 0.2); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.bubble {
  background: var(--card); color: var(--card-ink); border-radius: 8px;
  padding: 2px 8px; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.bubble.belote { background: var(--accent); color: #2a2110; }
.count { color: var(--muted); font-size: 0.75rem; }
.trick {
  grid-area: trick;
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
}
.trick .card { position: absolute; transform: translate(-50%, -50%); }
.trick .at-0 { left: 50%; top: 78%; }
.trick .at-1 { left: 20%; top: 50%; }
.trick .at-2 { left: 50%; top: 22%; }
.trick .at-3 { left: 80%; top: 50%; }
.trick.past .card { opacity: 0.55; }
.trick .caption { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-size: 0.75rem; color: var(--muted); }

.card {
  width: 46px; height: 66px;
  border-radius: 6px;
  background: var(--card); color: var(--card-ink);
  border: 1px solid rgb(0 0 0 / 0.25);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; font-weight: 700; line-height: 1;
}
.card .rank { font-size: 1.05rem; }
.card .suit { font-size: 1.3rem; }
.card.red { color: var(--red); }
.card.trump { box-shadow: 0 0 0 2px var(--accent), 0 2px 4px rgb(0 0 0 / 0.3); }

.hand { display: flex; justify-content: center; flex-wrap: nowrap; padding: 8px 0 4px; }
.hand .card { margin-left: -8px; transition: transform 0.12s; }
.hand .card:first-child { margin-left: 0; }
.hand .card.playable { transform: translateY(-10px); cursor: pointer; }
.hand .card.blocked { filter: brightness(0.6); }
.hand.my-turn .card:not(.playable) { cursor: not-allowed; }
@media (min-width: 420px) {
  .card { width: 54px; height: 78px; }
  .hand .card { margin-left: -4px; }
}

/* Enchères */
.bidding { background: rgb(0 0 0 / 0.25); border-radius: var(--radius); padding: 10px; gap: 8px; }
.bidding .values button { padding: 8px 10px; min-width: 48px; }
.bidding .suits button { font-size: 1.4rem; padding: 6px 14px; }
.bidding .suits .red { color: #ff8a7a; }
.history { font-size: 0.8rem; color: var(--muted); }

/* Fenêtres */
.overlay {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
.dialog { background: var(--felt-light); border-radius: 14px; padding: 20px; max-width: 360px; width: 100%; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--danger); color: #fff; padding: 8px 14px; border-radius: var(--radius); z-index: 20;
  max-width: calc(100% - 32px);
}
.status { font-size: 0.8rem; color: var(--muted); text-align: center; min-height: 1.2em; }

/* Historique */
.history-list { text-align: left; margin-top: 16px; gap: 6px; }
.history-list h2 { font-size: 1.1rem; margin: 12px 0 2px; }
.history-game { padding: 8px 10px; border-radius: var(--radius); background: rgb(0 0 0 / 0.18); }