:root {
  --felt: #1d5c3f;
  --felt-dark: #154631;
  --felt-light: #2a7350;
  --ink: #1b1f23;
  --paper: #fffdf8;
  --muted: #6b7280;
  --accent: #f2b33d;
  --accent-dark: #b77c0a;
  --red: #c62828;
  --black: #1b1f23;
  --panel: #ffffff;
  --border: #e3e0d8;
  --hl: #3fa9f5;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--felt-dark);
  color: var(--ink);
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.error { color: var(--red); min-height: 1.2em; margin: 8px 0 0; font-size: 14px; }

/* ---------- écrans d'accueil / salon */
.screen { min-height: 100vh; }
#home, #lobby {
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 30%, var(--felt-light), var(--felt-dark));
}
.panel {
  background: var(--panel); border-radius: 16px; padding: 28px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.home-panel, .lobby-panel { width: 100%; max-width: 400px; }
.logo { margin: 0; text-align: center; font-size: 44px; letter-spacing: 6px; color: var(--felt); }
.subtitle { text-align: center; color: var(--muted); margin: 4px 0 24px; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field.inline { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; }
.field.inline span { margin: 0; }
.field.inline input { width: 80px; }
input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; background: #fff;
}
input:focus { outline: 2px solid var(--hl); border-color: transparent; }
.row { display: flex; gap: 8px; }
.code-input { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 600; }
.sep { text-align: center; color: var(--muted); font-size: 13px; margin: 20px 0 12px; position: relative; }
.rules-link { display: block; text-align: center; margin-top: 16px; color: var(--felt); font-size: 14px; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radius);
  border: 1px solid var(--border); background: #f6f4ee; color: var(--ink);
  padding: 10px 16px; transition: transform .05s, background .15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #ece8dc; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent-dark); color: #2b1d00; }
.btn.primary:hover:not(:disabled) { background: #f5c25c; }
.btn.danger { background: var(--red); border-color: #8e1b1b; color: #fff; }
.btn.yaniv { background: #e53935; border-color: #8e1b1b; color: #fff; font-size: 18px; letter-spacing: 2px; }
.btn.wide { width: 100%; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.link { background: none; border: none; color: var(--muted); text-decoration: underline; width: 100%; margin-top: 8px; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.btn.selected { outline: 3px solid var(--hl); }

.room-code { font-size: 48px; font-weight: 800; letter-spacing: 10px; text-align: center; color: var(--felt); }
.lobby-panel > .muted:first-child { text-align: center; margin: 0; }
.share { margin: 8px 0 16px; }
.share input { font-size: 12px; }
.lobby-panel h2 { font-size: 16px; margin: 16px 0 8px; }
.player-list { list-style: none; padding: 0; margin: 0 0 12px; }
.player-list li {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px;
}
.player-list li .grow { flex: 1; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #eee; color: #444; }
.tag.host { background: #fff1cf; color: #7a5300; }
.tag.bot { background: #e3f0ff; color: #164c8a; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.dot.on { background: #22c55e; }

/* ---------- partie */
#game { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: 18px; padding: 8px 16px;
  background: rgba(0,0,0,.25); color: #fff; font-size: 14px;
}
.brand { font-weight: 800; letter-spacing: 3px; color: var(--accent); }
#btn-sound { margin-left: auto; }
.layout { flex: 1; display: flex; min-height: 0; }
.table {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: radial-gradient(ellipse at center, var(--felt-light), var(--felt) 60%, var(--felt-dark));
  padding: 12px 16px; gap: 10px;
}
.side {
  width: 300px; background: #fbfaf6; display: flex; flex-direction: column;
  padding: 12px; overflow: hidden; border-left: 1px solid rgba(0,0,0,.2);
}
.side h3 { margin: 6px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.side-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.side-tab {
  font: inherit; font-size: 13px; font-weight: 600; background: none; border: none; cursor: pointer;
  padding: 6px 10px; color: var(--muted); border-bottom: 3px solid transparent;
}
.side-tab.active { color: var(--felt); border-bottom-color: var(--accent); }
.side-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rules-pane { overflow-y: auto; display: block; font-size: 13px; line-height: 1.45; padding-right: 4px; }
.rules-pane h3 { margin-top: 12px; }
.powers { list-style: none; padding: 0; margin: 0; }
.powers li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed #eee; }
.powers .chip {
  flex: none; width: 26px; height: 34px; border-radius: 5px; border: 1px solid #d8d3c4; background: var(--paper);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.rules-list { padding-left: 18px; margin: 4px 0; }
.rules-list li { margin: 4px 0; }
.log { flex: 1; overflow-y: auto; margin: 0; padding: 0 0 0 4px; list-style: none; font-size: 13px; }
.log li { padding: 3px 0; border-bottom: 1px dashed #eee; }
.log li.round { font-weight: 700; color: var(--felt); border: none; padding-top: 8px; }
.scores-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.scores-table th, .scores-table td { padding: 3px 4px; text-align: center; border-bottom: 1px solid #eee; }
.scores-table th:first-child, .scores-table td:first-child { text-align: left; }
.scores-table td.total { font-weight: 700; }

/* adversaires : autour de la table, comme au poker [E10] (moi en bas ; le joueur suivant à
   gauche, puis en face, puis à droite) ; leurs cases ne prennent de place que si elles servent */
.table {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top top top" "left center right" "prompt prompt prompt" "me me me";
  container: plateau / inline-size;      /* places des côtés plus étroites si la table l'est */
}
.table > .center { grid-area: center; container: centre / inline-size; }   /* tailles de la défausse */
.table > .prompt { grid-area: prompt; }
.table > .me { grid-area: me; }
.opponents { display: contents; }
.opp.seat-top { grid-area: top; justify-self: center; }
.opp.seat-left { grid-area: left; align-self: center; max-width: 250px; }
.opp.seat-right { grid-area: right; align-self: center; max-width: 250px; }
.opp {
  background: rgba(0,0,0,.22); color: #fff; border-radius: 12px; padding: 8px 12px;
  min-width: 170px; border: 2px solid transparent; transition: border-color .2s;
}
.opp.turn { border-color: var(--accent); box-shadow: 0 0 18px rgba(242,179,61,.45); }
.opp.target { cursor: pointer; border-color: var(--hl); }
.opp.target.chosen { background: rgba(63,169,245,.35); }
.opp-head { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.opp-head .score { margin-left: auto; font-weight: 400; opacity: .8; font-size: 13px; }
.opp-cards { display: flex; margin-top: 6px; height: 46px; }
.opp-cards .card { margin-right: -18px; }
/* mode débutant [E7] : bulle au survol d'une carte */
.power-tip {
  position: fixed; z-index: 60; max-width: 280px; pointer-events: none;
  background: var(--panel); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
#btn-beginner.on { background: var(--accent); color: var(--ink); }
/* Pas de survol sur écran tactile : le bouton n'y servirait à rien (et la barre déborderait). */
@media (hover: none), (max-width: 420px) { #btn-beginner { display: none; } }

/* carte que vous seul connaissez [A21] ; valeur connue sans l'enseigne [A22] */
.opp-cards .card.from-me { background: #fdeabf; outline: 2px dashed var(--accent-dark); outline-offset: -2px; }
.opp-cards .card.rank-only { background: #e9eef5; color: var(--ink); outline: 2px dotted var(--muted); outline-offset: -2px; }
.badge-yaniv { background: #e53935; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 4px; }

/* centre */
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; }
.banner {
  background: rgba(0,0,0,.35); color: #fff; padding: 6px 14px; border-radius: 99px; font-size: 14px;
}
.banner.red { background: rgba(198,40,40,.85); }
.banner.black { background: rgba(20,20,20,.85); }
.banner.max7 { background: rgba(120,60,160,.85); }
.banner.yaniv { background: #e53935; font-weight: 700; }
.piles { display: flex; align-items: flex-start; gap: 36px; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pile-label, .group-label { color: rgba(255,255,255,.8); font-size: 12px; }
/* Défausse : elle tient dans la colonne du centre, sans déborder sur les places des côtés.
   Les paquets anciens (« old ») se tassent et glissent sous les suivants quand la place
   manque ; les deux derniers et ceux où un Valet peut reprendre une carte (« has-click »)
   gardent toute leur place (au besoin, ils passent à la ligne). Cartes opaques, pâlies par
   --fade (et non par opacity) : un paquet glissé dessous ne se voit pas au travers. */
.piles { max-width: 100%; }
.discard { display: flex; align-items: flex-end; flex-wrap: wrap; row-gap: 8px; --gap: 18px; }
.group {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: none; margin-left: var(--gap); --fade: 55%;
}
.group.prev { --fade: 85%; }
.group.last { --fade: 100%; }
.group .card {
  background: color-mix(in srgb, var(--paper) var(--fade), var(--felt-light));
  border-color: color-mix(in srgb, #d8d3c4 var(--fade), var(--felt-light));
}
.group .card > *, .group .card::after, .group .group-label { opacity: var(--fade); }
.group:first-child, .group.old:not(.has-click) + .group { margin-left: 0; }
.group.old:not(.has-click) { flex: 1 1 0; min-width: 0; max-width: max-content; align-items: flex-start; }
.group.old:not(.has-click) > .group-cards { padding-right: var(--gap); }
.group.old > .group-label {        /* le nom ne doit pas élargir un paquet ancien */
  align-self: stretch; width: 0; min-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.group.old.has-click > .group-label { text-align: center; }
.group-cards { display: flex; }
.group-cards .card + .card { margin-left: -26px; }
.group.last .group-cards .card + .card { margin-left: -22px; }

/* cartes */
.card {
  position: relative; width: 64px; height: 92px; border-radius: 8px; background: var(--paper);
  box-shadow: 0 2px 5px rgba(0,0,0,.35); flex: none; user-select: none;
  font-weight: 700; color: var(--black); border: 1px solid #d8d3c4;
  transition: transform .12s, box-shadow .12s;
}
.card.red { color: var(--red); }
.card .tl, .card .br { position: absolute; line-height: 1; text-align: center; font-size: 15px; }
.card .tl { top: 5px; left: 6px; }
.card .br { bottom: 5px; right: 6px; transform: rotate(180deg); }
.card .tl small, .card .br small { display: block; font-size: 13px; }
.card .mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.card.big { width: 76px; height: 108px; }
.card.big .mid { font-size: 36px; }
.card.mini { width: 32px; height: 46px; border-radius: 5px; }
.card.mini .tl { font-size: 11px; top: 3px; left: 3px; }
.card.mini .tl small { font-size: 10px; }
.card.mini .mid, .card.mini .br { display: none; }
.card.back {
  background: repeating-linear-gradient(45deg, #8e2430 0 6px, #a3303d 6px 12px);
  border: 3px solid #fff;
}
.card.back span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; text-shadow: 0 1px 3px #000;
}
.card.power::after {
  content: "★"; position: absolute; top: 3px; right: 5px; font-size: 10px; color: var(--accent-dark);
}
.card.mini.power::after { display: none; }
.card.clickable { cursor: pointer; box-shadow: 0 0 0 3px var(--hl), 0 4px 10px rgba(0,0,0,.4); }
.card.clickable:hover { transform: translateY(-6px); }
.card.selected { transform: translateY(-16px); box-shadow: 0 0 0 3px var(--accent), 0 8px 16px rgba(0,0,0,.4); }
.card.dim { opacity: .45; }
.card .order {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  background: var(--hl); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 7px;
}

/* moi */
.me { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 6px; }
.me-info { color: #fff; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.me-info.turn #me-name { color: var(--accent); }
.pill { background: rgba(0,0,0,.3); padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 400; }
.hand { display: flex; gap: 8px; min-height: 118px; align-items: flex-end; flex-wrap: wrap; justify-content: center; padding-top: 16px; }
.hand .card { width: 76px; height: 108px; cursor: default; }
.hand .card .mid { font-size: 36px; }
.hand.selectable .card { cursor: pointer; }
.hand.selectable .card:hover:not(.selected) { transform: translateY(-6px); }

/* zone d'action */
.prompt {
  background: rgba(255,255,255,.95); border-radius: 12px; padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 52px;
  align-self: center; max-width: 900px; width: 100%;
}
.prompt .msg { font-size: 15px; text-align: center; }
.prompt .msg.wait { color: var(--muted); }
.prompt .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.prompt .cards-choice { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.rank-grid { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rank-grid .btn { min-width: 40px; padding: 6px 8px; }

/* overlay fin de manche */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
.result-panel { max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; }
.result-panel h2 { margin-top: 0; }
.result-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; }
.result-row .who { width: 130px; font-weight: 600; }
.result-row .cards { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.result-row .pts { width: 70px; text-align: right; font-weight: 700; }
.result-row.win .who { color: var(--felt); }
.result-row .pts.neg { color: var(--felt); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #2b2b2b; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 20;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); max-width: 90vw;
}

@media (max-width: 900px) {
  .side { position: fixed; right: 0; top: 40px; bottom: 0; z-index: 5; box-shadow: -4px 0 20px rgba(0,0,0,.3); }
  .side.closed { display: none; }
  .card.big, .hand .card { width: 58px; height: 84px; }
  .hand .card .mid, .card.big .mid { font-size: 26px; }
  .opp { min-width: 130px; }
  .topbar { gap: 10px; font-size: 13px; }
}
@media (min-width: 901px) {
  .side.closed { display: none; }
}

/* ---------- PWA / hors ligne */
#btn-install { margin-top: 12px; }
.small-text { font-size: 13px; text-align: center; margin: 8px 0 0; }
.offline {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; text-align: center;
  background: #b45309; color: #fff; padding: 6px 12px; font-size: 14px;
  padding-top: calc(6px + env(safe-area-inset-top));
}
#game { height: 100dvh; }
.topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
.me { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  .topbar .lbl { display: none; }
  .table { padding: 8px 10px; gap: 8px 0; }       /* colonnes des côtés vides : pas d'écart */
  #info-room { display: none; }
  /* Téléphone : pas la place sur les côtés ; une rangée en haut, toujours dans l'ordre du jeu
     (gauche, face, droite). */
  .opponents { display: flex; grid-area: top; justify-content: center; flex-wrap: nowrap; gap: 6px; }
  .opp { min-width: 0; flex: 1 1 0; padding: 6px 8px; font-size: 13px; }
  .opp-head { flex-wrap: wrap; gap: 4px; }
  .opp-head .score { margin-left: 0; width: 100%; font-size: 12px; }
  .opp-cards { height: 34px; }
  .opp-cards .card.mini { width: 24px; height: 34px; }
  .opp-cards .card { margin-right: -14px; }
  .banner { font-size: 13px; text-align: center; }
  .piles { gap: 16px; }
  .discard { --gap: 10px; }
  .group:not(.last):not(.prev):not(.has-click) { display: none; }
  .hand { gap: 4px; padding-top: 12px; min-height: 100px; }
  .hand .card { width: 60px; height: 86px; }
}

/* ---------- réglages du salon */
.settings { border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 12px; margin: 12px 0; }
.settings .field.inline { margin: 10px 0; gap: 10px; }
.settings select { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; max-width: 60%; }
.settings input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--felt); }
.clock-opts { border-top: 1px dashed var(--border); }
.clock-opts .small-text { text-align: left; margin: 0 0 10px; }
.level-select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.tag.level { background: #eef3ea; color: #2f5a2a; }

/* ---------- glisser-déposer, animations */
.hand.selectable .card { touch-action: none; }
.card.dragging { opacity: .25; }
.drag-ghost { position: fixed; z-index: 45; pointer-events: none; display: flex; }
.drag-ghost .card { position: absolute; width: 76px; height: 108px; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.drag-ghost .card .mid { font-size: 36px; }
.discard { min-width: 96px; min-height: 120px; justify-content: center; }
.discard.drop-ready, .opp.drop-ready { outline: 3px dashed rgba(255,255,255,.55); outline-offset: 8px; border-radius: 14px; }
.discard.drop-over, .opp.drop-over { outline-color: var(--accent); background: rgba(242,179,61,.15); }

/* Défausse selon la largeur de la colonne du centre (conteneur « centre ») : cartes plus
   serrées, puis moyennes, puis petites (la pioche suit) ; il reste toujours au moins le coin
   de chaque carte. Paliers choisis pour que deux paquets de 4 cartes tiennent sur une ligne ;
   un cas plus rare (paquets de 5 cartes, plusieurs Valets) passe à la ligne. */
@container centre (max-width: 699px) {
  .piles { gap: 20px; }
  .discard { --gap: 14px; }
  #discard .group-cards .card + .card { margin-left: -32px; }
  #discard .group.last .group-cards .card + .card { margin-left: -34px; }
}
@container centre (max-width: 499px) {
  .piles { gap: 16px; }
  .discard { --gap: 12px; min-height: 104px; }
  #deck.card, #discard .card { width: 56px; height: 80px; }
  #discard .card .mid { font-size: 26px; }
  #discard .group-cards .card + .card, #discard .group.last .group-cards .card + .card { margin-left: -32px; }
  /* Valet : les paquets anciens à reprendre passent déjà en petites cartes (jusqu'à 5). */
  #discard .group.old.has-click .card { width: 44px; height: 63px; border-radius: 6px; }
  #discard .group.old.has-click .card :is(.tl, .br) { font-size: 13px; }
  #discard .group.old.has-click .card :is(.tl, .br) small { font-size: 11px; }
  #discard .group.old.has-click .card .tl { top: 4px; left: 4px; }
  #discard .group.old.has-click .card .br { bottom: 4px; right: 4px; }
  #discard .group.old.has-click .card .mid { font-size: 20px; }
  #discard .group.old.has-click .group-cards .card + .card { margin-left: -24px; }
}
@container centre (max-width: 339px) {
  .piles { gap: 8px; }
  .discard { --gap: 8px; min-width: 64px; min-height: 88px; }
  #deck.card, #discard .card { width: 44px; height: 63px; border-radius: 6px; }
  #deck span { font-size: 16px; }
  #discard .card :is(.tl, .br) { font-size: 13px; }
  #discard .card :is(.tl, .br) small { font-size: 11px; }
  #discard .card .tl { top: 4px; left: 4px; }
  #discard .card .br { bottom: 4px; right: 4px; }
  #discard .card .mid { font-size: 20px; }
  #discard .group-cards .card + .card, #discard .group.last .group-cards .card + .card { margin-left: -24px; }
}
/* Table étroite (conteneur « plateau » : tablette, ordinateur avec le panneau ouvert) : les
   places de gauche et de droite se resserrent comme sur téléphone, pour laisser au centre
   la place de la pioche et des deux derniers paquets. */
@media (min-width: 601px) {
  @container plateau (max-width: 859px) {
    .opp:is(.seat-left, .seat-right) { min-width: 0; max-width: 130px; padding: 6px 8px; font-size: 13px; }
    .opp:is(.seat-left, .seat-right) .opp-head { flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; }
    .opp:is(.seat-left, .seat-right) .opp-head .score { margin-left: 0; width: 100%; font-size: 12px; }
    .opp:is(.seat-left, .seat-right) .opp-cards { height: 34px; }
    .opp:is(.seat-left, .seat-right) .opp-cards .card.mini { width: 24px; height: 34px; }
    .opp:is(.seat-left, .seat-right) .opp-cards .card { margin-right: -14px; }
  }
}
.card.flying { box-shadow: 0 14px 30px rgba(0,0,0,.45); }
canvas.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }

/* annonces, bulles */
.big-announce {
  position: fixed; left: 50%; top: 42%; z-index: 55; pointer-events: none;
  font-size: clamp(48px, 11vw, 120px); font-weight: 900; letter-spacing: 4px; color: #fff;
  text-shadow: 0 4px 0 #8e1b1b, 0 10px 30px rgba(0,0,0,.5);
  animation: announce 1.9s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.big-announce.yaniv { color: #ffe08a; -webkit-text-stroke: 2px #b71c1c; }
.big-announce.reverse { font-size: clamp(80px, 18vw, 180px); text-shadow: 0 8px 30px rgba(0,0,0,.5); animation-name: spin-announce; }
@keyframes announce {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
  32% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(1.05); opacity: 0; }
}
@keyframes spin-announce {
  0% { transform: translate(-50%, -50%) rotate(0) scale(.4); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translate(-50%, -50%) rotate(360deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(400deg) scale(1); opacity: 0; }
}
.bubble {
  position: fixed; z-index: 50; pointer-events: none; background: #fff; color: var(--ink);
  font-weight: 700; padding: 6px 12px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  animation: bubble 1.9s ease forwards;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.bubble.yes { background: #e8f6ee; color: var(--felt); }
.bubble.no { background: #fdecea; color: var(--red); }
@keyframes bubble {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  12% { opacity: 1; transform: none; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* bandeau qui glisse quand il change */
.banner.pop { animation: banner-pop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes banner-pop { from { transform: translateY(-14px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* halo et anneau du joueur actif */
.opp.turn { animation: halo 1.8s ease-in-out infinite; }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 8px rgba(242,179,61,.35); }
  50% { box-shadow: 0 0 26px rgba(242,179,61,.85); }
}
.avatar { position: relative; width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.avatar circle { fill: none; stroke-width: 3; }
.avatar .track { stroke: rgba(255,255,255,.18); }
.avatar .arc { stroke: transparent; transition: stroke-dashoffset .25s linear; }
.avatar.active .arc { stroke: var(--accent); }
.avatar.active.low .arc { stroke: #e53935; }
.avatar .initial { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.avatar.active .initial { background: var(--accent); color: #2b1d00; }
.me-info.turn .pill:first-of-type { box-shadow: 0 0 0 2px var(--accent); }

/* fin de manche animée */
.result-row.enter { opacity: 0; animation: row-in .45s ease forwards; }
@keyframes row-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.card.flip-in { animation: flip-in .35s ease backwards; }
@keyframes flip-in {
  from { transform: rotateY(90deg); background: repeating-linear-gradient(45deg, #8e2430 0 6px, #a3303d 6px 12px); }
  to { transform: rotateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .opp.turn, .banner.pop, .result-row.enter, .card.flip-in { animation: none; opacity: 1; }
}

/* ---------- chronos */
.clock { font-variant-numeric: tabular-nums; }
.opp-head .clock { font-size: 12px; font-weight: 600; background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 99px; }
.clock.running { background: var(--accent); color: #2b1d00; }
.clock.low { background: #e53935; color: #fff; }
.clock.out { background: #6b7280; color: #fff; }
.result-row .pen { font-size: 12px; color: #b45309; margin-left: 4px; }
.prompt .msg.auto { color: #b45309; font-weight: 600; }
.tag.sub { background: #e3f0ff; color: #164c8a; font-size: 11px; }
.sub-btn { margin-top: 6px; padding: 3px 8px; font-size: 12px; }

.tiebreak-note { background: #fff8e6; border-left: 4px solid var(--accent); padding: 8px 12px; border-radius: 0 8px 8px 0; font-weight: 600; }

/* question / réponse du 4 au centre de la table */
.table-talk {
  position: fixed; left: 50%; top: 45%; z-index: 50; pointer-events: none;
  transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: min(90vw, 460px);
}
.bubble.talk { position: static; font-size: 17px; padding: 8px 16px; text-align: center; animation-duration: 2.8s; }
.bubble.talk::after { display: none; }

/* ---------- comptes [F] : accueil, étiquette « invité », fenêtre de connexion */
.account-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  background: #f6f4ee; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin: 0 0 16px; font-size: 14px;
}
.account-box .account-text { flex: 1 1 180px; }
.account-box.guest .account-text { flex-basis: 100%; }
.account-box .account-hint { width: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.account-box .warn { width: 100%; margin: 0; font-size: 13px; color: #b45309; font-weight: 600; }
.account-box a.btn, .keep-game a.btn { text-decoration: none; display: inline-block; }
.home-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; font-size: 14px; }
.home-links a { color: var(--felt); }
.tag.guest { background: #f1efe9; color: #6b6458; font-style: italic; }
.opp-head .tag.guest { background: rgba(255,255,255,.16); color: #fff; }
a.player-link { color: inherit; text-decoration: none; }
a.player-link:hover { text-decoration: underline; }

.modal-back {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--panel); border-radius: 16px; padding: 24px; width: 100%; max-width: 380px;
  max-height: 92vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.modal h2 { margin: 0 0 10px; font-size: 20px; color: var(--felt); }
.modal-intro { margin: 0 0 12px; font-size: 14px; }
.modal-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.modal-tab {
  font: inherit; font-size: 14px; font-weight: 600; background: none; border: none; cursor: pointer;
  padding: 6px 10px; color: var(--muted); border-bottom: 3px solid transparent;
}
.modal-tab.active { color: var(--felt); border-bottom-color: var(--accent); }
.modal-hint { font-size: 12px; color: var(--muted); margin: 0 0 6px; line-height: 1.4; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.modal-actions .btn.link { width: auto; margin: 0; }
.keep-game { margin-top: 14px; padding: 12px; border-radius: var(--radius); background: #f4f8f1; border: 1px solid #d5e5cc; }
.keep-game p { margin: 0 0 8px; }
.keep-game .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- salles publiques [H] : création, liste de l'accueil, salon */
#home { flex-wrap: wrap; align-content: center; align-items: stretch; gap: 16px; }
.create-row { display: flex; gap: 8px; }
.create-row .btn { flex: 1; }
.create-hint { text-align: left; margin: 6px 0 0; font-size: 12px; line-height: 1.4; }
.rooms-panel { width: 100%; max-width: 480px; padding: 20px; display: flex; flex-direction: column; }
.rooms-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.rooms-head h2 { margin: 0; font-size: 18px; color: var(--felt); }
.rooms-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: min(70vh, 640px); }
#rooms-empty { margin: 16px 0; }
.room-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px; background: #fff;
}
.room-card.busy { background: #f8f7f3; }
.room-card.busy .room-title, .room-card.busy .room-players { opacity: .75; }
.room-head { display: flex; align-items: center; gap: 8px; }
.room-chip {
  font-weight: 800; letter-spacing: 2px; color: var(--felt); background: #eef5f0;
  border-radius: 6px; padding: 2px 6px; font-size: 13px;
}
.room-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.room-count { font-size: 13px; color: var(--muted); font-weight: 600; }
.room-head .tag { white-space: nowrap; }
.room-players { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.room-player.bot { color: #164c8a; }
.room-elo { margin-left: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.room-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.info-chip { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #f1efe9; color: #4b4538; white-space: nowrap; }
.info-chip.elo { background: #fff1cf; color: #7a5300; font-weight: 700; }
.info-chip.on { background: #e3f0ff; color: #164c8a; }
.info-chip.off { background: #fde8e8; color: #8e1b1b; }
.visibility { text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.visibility.public { color: var(--felt); font-weight: 600; }
@media (max-width: 420px) {
  .rooms-panel { padding: 16px 12px; }
  .room-title { white-space: normal; }
}
.room-status { font-size: 13px; font-weight: 600; color: #7a5300; }