/* ============================================================================
   ATOUZ — style KAWAII CARTOON B (standard FACETA, cf BACKLOG.md §PIVOT DESIGN,
   4e jeu de la propagation flotte après mahzo/mazz/melz). Remplace le dégradé
   "premium glassmorphism" d'origine (backdrop-filter, ombres glow multi-couches,
   entrées 3D bevel/blur) par le langage visuel sticker : aplats + une ombre
   PLATE (zéro flou), contour épais net, reflet brillant, formes rondes.
   Contour : --toon-outline (ADAPTATIF, or clair sur le tapis sombre / encre foncée
   sur les panneaux clairs) pour panneaux/chips/boutons fantômes ; --toon-outline-ink
   (TOUJOURS foncé) pour les éléments posés sur un fond vif (boutons pleins,
   badges, tuile sélectionnée) où un contour sombre reste lisible dans les deux
   thèmes.
   LE TAPIS reste la scène fixe du jeu de cartes (table, en-tête, HUD, main) :
   comme un vrai tapis de belote il ne suit pas le thème clair/sombre — choix
   d'origine conservé. Seuls les PANNEAUX flottants (accueil, réglages,
   enchères, cosmétiques, toast) suivent le thème EXPLICITE du hub via
   html[data-theme] (posé par /_kit/theme.js), plus l'OS en repli tant qu'aucun
   choix explicite n'a été fait (voir index.html).
   Géométrie/mise en page (taille des cartes, position des sièges, formule
   d'éventail de la main, grilles, points de rupture responsive, RTL) 100%
   CONSERVÉE à l'identique de l'ancien fichier : seul l'HABILLAGE visuel change.
   ========================================================================== */
:root {
  /* Palette d'identité ATOUZ (inchangée) */
  --bg: #0b1f17;
  --felt-a: #17472f; --felt-b: #0b1f17;        /* tapis (cosmétique, posé par src/game.js) */
  --back-a: #1f6f4a; --back-b: #0e3c28;        /* dos de cartes (cosmétique) */
  --ink: #eef6ef; --muted: #8fae9e;            /* texte / texte atténué */
  --accent: var(--cb-accent, #d4af37);
  --accent-ink: var(--cb-accent-light, #f4dfa6);
  --accent-alt: var(--cb-primary, #38e08b);
  --red: #ff6b63;
  /* Quatre familles de cartes (réglage 4/2 couleurs, src/deck-theme.js) */
  --suit-H: #c8102e; --suit-D: #0b57d0; --suit-S: #14181f; --suit-C: #0b7a3c;
  --ink-H: #ff6a7a;  --ink-D: #7ab2ff;  --ink-S: #eef6ef;  --ink-C: #4fd08a;
  /* Atouts du tarot (cinquième famille, indépendante du réglage 4/2) */
  --suit-T: #7a3fb5; --ink-T: #c79bff;
  /* Cartes responsives : tapis et main (que l'on touche, donc plus grande) */
  --card-w: clamp(54px, 15vw, 78px);
  --hand-w: clamp(64px, 18.5vw, 92px);
  --card-ratio: 1.45;

  /* ---- KAWAII CARTOON B : contour + matière + ombre plate --------------- */
  --toon-outline: var(--accent);
  --toon-outline-ink: #06150e;
  --toon-outline-w: 2.5px;
  --border: var(--toon-outline-w) solid var(--toon-outline);
  --panel: linear-gradient(160deg, #1c3f2c 0%, #10251b 100%);
  --panel-2: linear-gradient(150deg, #234a34 0%, #17331f 100%);
  --field: linear-gradient(165deg, #173324 0%, #0e2119 100%);
  --kawaii-sheen: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 48%);
  --shadow-xs: 0 2px 0 var(--toon-outline-ink);
  --shadow: 0 4px 0 var(--toon-outline-ink);
  --shadow-lg: 0 6px 0 var(--toon-outline-ink);
  --shadow-panel: 0 8px 0 var(--toon-outline-ink);
  --shadow-card: 0 3px 0 rgba(0, 0, 0, 0.3);
  --shadow-card-lg: 0 6px 0 rgba(0, 0, 0, 0.32);

  color-scheme: dark;
}

/* Le TAPIS (table, en-tête, HUD, main) est une SCÈNE fixe comme un tapis de
   belote : il ne suit pas le thème clair/sombre. Les PANNEAUX flottants et le
   toast s'adaptent au thème EXPLICITE du hub (posé sur <html> par
   /_kit/theme.js) — contrastes >= 4.5:1 (AA/AAA) conservés. */
html[data-theme="light"] .overlay > .card {
  --panel: #fffef9;
  --panel-2: #fbf3e2;
  --field: #f5ecd6;
  --toon-outline: #4a3418;
  --toon-outline-ink: #4a3418;
  --ink: #221a10;
  --muted: #6d6451;
  --accent-ink: #a9702b;
}
html[data-theme="light"] .overlay > .card .prompt-err { color: #b3453e; }
html[data-theme="light"] .toast {
  --panel: #fffef9;
  background: #1f6f4a;
  color: #eef6ef;
  border-color: var(--toon-outline-ink, #0c2c1c);
}
html[data-theme="light"] .hand .card.playable { outline-color: #b6862b; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, var(--felt-a) 0%, var(--felt-b) 65%);
  color: var(--ink);
  font-family: var(--cb-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 16px;
  font-weight: var(--cb-font-regular, 400);
  line-height: var(--cb-line-height-normal, 1.4);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#wrap {
  max-width: 520px; margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center;
  gap: var(--cb-gap-md, 8px); min-height: 100%;
}
header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 0; gap: var(--cb-gap-lg, 12px);
}

.brand {
  font-weight: 800; letter-spacing: 2px; font-size: 22px;
  line-height: 1.2;
}

.brand b { color: var(--accent); letter-spacing: -1px; }

.chips {
  display: flex; gap: var(--cb-gap-md, 8px); align-items: center; flex-wrap: wrap;
}

.chip {
  background: var(--kawaii-sheen), var(--field);
  border: var(--border);
  border-radius: var(--cb-radius-pill, 999px);
  padding: 8px 14px;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
  box-shadow: var(--shadow-xs);
  transition: transform var(--cb-duration-fast, 0.12s) ease,
              box-shadow var(--cb-duration-fast, 0.12s) ease,
              filter var(--cb-duration-fast, 0.12s) ease;
}

.chip .ico { display: inline-flex; }
.chip .ico svg { width: 14px; height: 14px; }

/* Solde Gagner : chip accent or, distinct du solde Jouer. */
.chip.earn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--toon-outline-ink));
  background: rgba(212, 175, 55, 0.12);
}

/* Rappel de l'objectif du défi en cours (src/challenges.js) : accent vert,
   pour ne pas se confondre avec le solde Gagner (accent or). */
.chip.challenge {
  color: var(--accent-alt);
  border-color: color-mix(in srgb, var(--accent-alt) 55%, var(--toon-outline-ink));
  background: rgba(56, 224, 139, 0.12);
  font-weight: 600;
}

.chip-btn {
  font-family: inherit; width: auto; margin: 0; padding: 7px 10px;
  font-size: 15px;
  background: var(--kawaii-sheen), var(--field); color: var(--ink);
  cursor: pointer; border: var(--border); border-radius: var(--cb-radius-md, 12px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--cb-duration-fast, 0.12s) ease,
              box-shadow var(--cb-duration-fast, 0.12s) ease;
  box-shadow: var(--shadow-xs);
}
.chip-btn svg { width: 18px; height: 18px; }

.chip-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--toon-outline-ink); }

.chip-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .chip-btn:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
}

footer {
  color: var(--muted); font-size: 12px; text-align: center;
  padding-bottom: 6px; min-height: 16px;
}

/* ---- La table -------------------------------------------------------------
   Aplat matière (2 tons du feutre cosmétique) + contour épais + ombre plate,
   plus de halo tournant ambiant (décor "premium" retiré). */
.table {
  position: relative; width: 100%; aspect-ratio: 1/1; max-height: 52vh;
  border-radius: var(--cb-radius-xl, 20px);
  background: radial-gradient(120% 90% at 50% 40%, var(--felt-a) 0%, var(--felt-b) 100%);
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

.seat {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  inset-inline-start: var(--x, 50%); top: var(--y, 50%);
  transform: translate(-50%, -50%);
}

.seat .ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; color: var(--ink);
  transition: transform var(--cb-duration-normal, 0.18s) var(--cb-easing-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.seat .ava svg { width: 22px; height: 22px; }

.seat .who {
  color: var(--ink); font-size: 12px; font-weight: 700;
}

.seat .cards {
  font-size: 10px; letter-spacing: 1px;
  color: var(--muted);
}

.seat.turn .ava {
  color: var(--accent);
  animation: avatar-pulse 0.65s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) infinite;
}

@keyframes avatar-pulse {
  0%, 100% { transform: scale(1.3); }
  50% { transform: scale(1.42); }
}

.seat.turn .who { color: var(--accent); font-weight: 700; }

.seat.taker .who::after { content: " ♦"; color: var(--accent); }

/* Le pli au centre : une carte par siège */
.trick { position: absolute; inset: 16% 21%; }

.trick .card {
  position: absolute; margin: 0;
  inset-inline-start: var(--x, 50%); top: var(--y, 50%);
  margin-inline-start: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-w) * var(--card-ratio) / -2);
  animation: card-in 0.32s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2));
}

@keyframes card-in {
  0% { opacity: 0; transform: translate(0, 24px) scale(0.65) rotate(-10deg); }
  55% { opacity: 1; transform: translate(0, -6px) scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

.banner {
  position: absolute;
  inset-inline: 0;
  top: 44%;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 3px 0 var(--toon-outline-ink);
  pointer-events: none;
  animation: banner-in 0.4s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2));
  letter-spacing: 2px;
}

@keyframes banner-in {
  0% { opacity: 0; transform: scale(0.45) translateY(-28px); }
  55% { opacity: 1; transform: scale(1.12) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- Cartes ----------------------------------------------------------------
   Une carte se lit à deux niveaux : le GROS symbole de famille au centre
   (coup d'œil) et les indices rang + petit symbole aux coins (visibles en
   éventail). Aplat blanc + contour fin + ombre plate (sticker), zéro biseau. */

.card-face, .card-back {
  border-radius: var(--cb-radius-sm, 8px);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  box-shadow: var(--shadow-card);
  user-select: none;
}

.card {
  width: var(--card-w);
  height: calc(var(--card-w) * var(--card-ratio));
  position: relative;
  background: linear-gradient(160deg, #fefefc 0%, #f2f0ea 100%);
  color: #16181d;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--cb-radius-sm, 8px);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  box-shadow: var(--shadow-card);
  line-height: 1;
  user-select: none;
  transition: transform var(--cb-duration-normal, 0.2s) var(--cb-easing-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--cb-duration-normal, 0.2s) ease,
              filter var(--cb-duration-fast, 0.12s) ease;
}

.card .pip { font-size: calc(var(--card-w) * 0.66); line-height: 1; }

.card .cnr {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; line-height: 1;
}

.card .cnr .r { font-size: calc(var(--card-w) * 0.31); font-weight: 900; }

.card .cnr .s { font-size: calc(var(--card-w) * 0.25); font-style: normal; }

.card .tl { top: 6%; inset-inline-start: 8%; }

.card .br { bottom: 6%; inset-inline-end: 8%; }

/* Les quatre familles portent leur couleur en variable : réglage EN DIRECT */
.card.suit-H { color: var(--suit-H); }
.card.suit-D { color: var(--suit-D); }
.card.suit-S { color: var(--suit-S); }
.card.suit-C { color: var(--suit-C); }
.card.suit-T { color: var(--suit-T); }

.card.back {
  background: linear-gradient(135deg, var(--back-a), var(--back-b));
  color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.16);
}

.card.mini { --card-w: clamp(38px, 10vw, 52px); }

/* Ma main : cartes grandes (à toucher). Chevauchement calculé pour 8 cartes.
   `--fan-count` posé par renderHand() */
.hand {
  width: 100%; display: flex; justify-content: center; align-items: flex-end;
  min-height: calc(var(--hand-w) * var(--card-ratio) + 14px);
  padding: 6px 0 2px;
  --fan-count: 8; --fan: min(100vw, 520px);
  --overlap: calc(max(0px, var(--hand-w) * var(--fan-count) + 26px - var(--fan)) / max(1, var(--fan-count) - 1));
  gap: 0;
}

.hand .card {
  --card-w: var(--hand-w);
  margin-inline-start: calc(-1 * var(--overlap));
  cursor: pointer;
}

.hand .card:first-child { margin-inline-start: 0; }

.hand .card.playable {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  animation: card-highlight 0.55s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) infinite;
}

@keyframes card-highlight {
  0%, 100% { outline-width: 3px; outline-offset: 2px; filter: brightness(1.02); }
  50% { outline-width: 3.5px; outline-offset: 5px; filter: brightness(1.1); }
}

.hand .card.playable:active {
  transform: translateY(-14px) scale(1.08);
  filter: brightness(1.05);
}

/* Conseil : suggestion en VERT pour ne jamais se confondre avec l'or des
   cartes jouables — un pouls net, puis un fondu qui laisse `.playable` reprendre. */
.hand .card.hint {
  outline: 3px solid var(--accent-alt);
  outline-offset: 3px;
  animation: hint-pulse 1.1s var(--cb-easing-ease-out, ease-out) 2;
}

@keyframes hint-pulse {
  0%, 100% { outline-offset: 2px; filter: brightness(1); }
  50% { outline-offset: 5px; filter: brightness(1.12); }
}

.hand .card.muted {
  filter: brightness(0.55) saturate(0.6);
  cursor: default;
  opacity: 0.65;
}

/* Écart du tarot : la carte sortie de l'éventail */
.hand .card.picked {
  transform: translateY(-16px);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.hand .card.pop { animation: pop 0.4s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)); }

@keyframes pop {
  0% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1); }
  45% { transform: translateY(-18px) scale(1.18) rotate(2deg); filter: brightness(1.25); }
  100% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1); }
}

/* ---- HUD ------------------------------------------------------------------- */
.hud {
  width: 100%;
  display: flex;
  gap: var(--cb-gap-md, 10px);
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.score {
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.score.end { text-align: end; }

.score .lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
  font-weight: 600;
}

.score .val {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--accent-ink);
  letter-spacing: 0.5px;
}

.score.pulse .val {
  animation: score-pulse 0.5s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) forwards;
}

@keyframes score-pulse {
  0% { transform: scale(1) translateY(0); }
  35% { transform: scale(1.22) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}

.chip.trump {
  font-size: 16px;
  font-weight: 700;
  min-width: 44px;
  text-align: center;
  letter-spacing: 1px;
}

.chip.pulse, .score.pulse {
  animation: chip-pop 0.5s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2));
}

@keyframes chip-pop {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.2) rotate(3deg); }
  60% { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---- Overlays ---------------------------------------------------------------
   Voile plat (zéro flou), panneau en aplat matière + reflet + contour épais +
   ombre plate — patron kawaii identique aux autres jeux de la flotte. */
.overlay {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 12, 8, 0.86);
  z-index: 5;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.overlay.show { display: flex; animation: fade-in var(--cb-duration-normal, 0.18s) ease-out; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Le panneau uniquement, PAS les cartes à jouer qu'il contient */
.overlay > .card {
  background: var(--kawaii-sheen), var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius: var(--cb-radius-card, 18px);
  padding: 24px 20px;
  width: min(380px, 92vw);
  max-height: 94vh;
  overflow-y: auto;
  text-align: center;
  height: auto;
  box-shadow: var(--shadow-panel);
  color: var(--ink);
  font-weight: 400;
  display: block;
  animation: card-rise 0.4s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) forwards;
}

@keyframes card-rise {
  0% { opacity: 0; transform: translateY(32px) scale(0.88); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay h2 {
  margin: 0 0 4px; font-size: 25px;
  font-weight: 700; letter-spacing: -0.3px;
}

.overlay .big {
  font-size: 38px; font-weight: 800;
  color: var(--accent-ink); margin: 12px 0 4px;
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
  animation: big-float 0.5s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) forwards;
}

@keyframes big-float {
  0% { opacity: 0; transform: translateY(16px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay .sub {
  color: var(--muted); font-size: 13px; margin-bottom: 14px;
  line-height: 1.4;
}

button {
  border: 0; border-radius: var(--cb-radius-btn, 14px);
  padding: 13px 16px; font-size: 16px; font-weight: 700;
  width: 100%;
  cursor: pointer; margin-top: var(--cb-space-6, 9px);
  font-family: inherit;
  transition: transform var(--cb-duration-fast, 0.12s) ease,
              box-shadow var(--cb-duration-fast, 0.12s) ease,
              filter var(--cb-duration-fast, 0.12s) ease;
  line-height: 1.2;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
}

button:active { transform: translateY(3px); }

button:disabled { opacity: var(--cb-disabled-opacity, 0.5); cursor: default; }

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  box-shadow: var(--shadow);
  font-weight: 800;
}
.btn-primary:active { box-shadow: 0 1px 0 var(--toon-outline-ink); }

.btn-ghost {
  background: var(--kawaii-sheen), var(--field); color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:active { box-shadow: 0 0 0 var(--toon-outline-ink); }

.btn-ghost.on {
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  border-color: var(--toon-outline-ink);
  box-shadow: var(--shadow);
  font-weight: 700;
}

.btn-rewarded {
  background: var(--kawaii-sheen), linear-gradient(180deg, #52f5a5 0%, #2fbf78 100%);
  color: #062015;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  box-shadow: 0 4px 0 #0b3b26;
  font-weight: 700;
}
.btn-rewarded:active { box-shadow: 0 1px 0 #0b3b26; }

/* Souris/trackpad : feedback visuel riche, sans glow */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover, .chip-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
  }
  .btn-primary:not(:disabled):active,
  .btn-ghost:not(:disabled):active,
  .btn-rewarded:not(:disabled):active { transform: translateY(1px); }

  .btn-ghost:not(:disabled):hover {
    background: var(--kawaii-sheen), color-mix(in srgb, var(--accent) 14%, var(--field));
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  .hand .card.playable:hover { transform: translateY(-10px); }

  .suits button:not(.on):hover, .values button:not(.on):hover,
  .bids button:not(.on):hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
  }
}

/* Clavier : anneau focus cohérent */
.field:focus-visible, .hand .card.playable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-rewarded small {
  display: block; font-weight: 600; opacity: 0.85; font-size: 11px;
}

.row {
  display: flex; gap: var(--cb-gap-sm, 9px);
  flex-wrap: wrap;
}

.row .half, .row button {
  flex: 1; width: auto; min-width: 100px;
}

.overlay > .card.home {
  padding: 22px 20px 18px;
  max-height: 90vh;
}

.logo {
  font-weight: 800; letter-spacing: var(--cb-letter-spacing-caps, 0.05em);
  font-size: 38px; line-height: 1.1;
  margin-bottom: 8px;
  color: var(--ink);
}

.logo b { color: var(--accent-ink); font-weight: 800; }

.field-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
  margin: 12px 0 8px; text-align: start;
  font-weight: 600;
}

.badge {
  display: inline-block;
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: var(--cb-letter-spacing-caps, 0.05em);
  text-transform: uppercase;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius: var(--cb-radius-pill, 999px);
  padding: 8px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  animation: badge-pop 0.5s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) forwards;
}

@keyframes badge-pop {
  0% { opacity: 0; transform: scale(0.55) translateY(-20px) rotate(-18deg); }
  55% { opacity: 1; transform: scale(1.15) rotate(6deg); }
  85% { transform: scale(1.04) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Série de victoires (écran de fin) : une phrase, pas un mot — trop longue pour
   le pill doré du capot. Ton vert « gain », casse normale, largeur libre. */
.badge.streak {
  display: block;
  width: fit-content;
  max-width: 92%;
  margin: 0 auto 12px;
  padding: 7px 16px;
  background: rgba(56, 224, 139, 0.16);
  border: 1.5px solid rgba(56, 224, 139, 0.4);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}

/* Enchères : le panneau se pose EN HAUT, sans voile ni flou,
   pour que la MAIN reste visible dessous. Seul le panneau capte le doigt. */
.overlay.sheet {
  inset: 0 0 auto;
  align-items: flex-start;
  background: none;
  pointer-events: none;
  padding: calc(env(safe-area-inset-top) + 48px) 12px 0;
}

/* Le panneau reste AU-DESSUS de la main, même sur écran court */
.overlay.sheet > .card {
  pointer-events: auto;
  padding: 16px 18px 14px;
  max-height: calc(100vh - var(--hand-w) * var(--card-ratio) - 160px);
  overflow-y: auto;
  box-shadow: var(--shadow-panel);
}

.overlay.sheet h2 { font-size: 21px; }

.overlay.sheet .sub { margin-bottom: 8px; }

.retourne {
  display: flex; justify-content: center;
  margin: 8px 0 4px;
  gap: var(--cb-gap-sm, 6px);
}

.retourne .card { --card-w: clamp(66px, 19vw, 96px); }

.suits {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--cb-gap-md, 8px);
  margin: 10px 0 2px;
}

.suits button, .values button, .bids button {
  margin: 0;
  background: var(--kawaii-sheen), var(--field); color: var(--ink);
  border-radius: var(--cb-radius-md, 12px);
  border: var(--border);
  box-shadow: var(--shadow-xs);
  transition: filter var(--cb-duration-fast, 0.12s) ease, transform var(--cb-duration-fast, 0.12s) ease;
}

.suits button { padding: 12px 4px; font-size: 28px; min-height: 48px; }

.suits button.on, .values button.on, .bids button.on {
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  border-color: var(--toon-outline-ink);
  font-weight: 700;
}

.suits button.suit-H { color: var(--ink-H); }
.suits button.suit-D { color: var(--ink-D); }
.suits button.suit-S { color: var(--ink-S); }
.suits button.suit-C { color: var(--ink-C); }

.suits button.on.suit-H,
.suits button.on.suit-D,
.suits button.on.suit-S,
.suits button.on.suit-C { color: #241a02; }

/* Coinche : paliers annonçables en grille compacte */
.values {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--cb-gap-xs, 6px);
  margin: 10px 0 2px;
}

.values button { padding: 10px 2px; font-size: 14px; min-height: 42px; }

.values button.capot { grid-column: span 2; font-size: 13px; }

/* Tarot : les quatre contrats, deux par ligne */
.bids {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--cb-gap-md, 8px);
  margin: 10px 0 2px;
}

.bids button { padding: 12px 4px; font-size: 14px; min-height: 48px; }

.chien {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 5px; margin: 8px 0 4px;
}

/* Comptage de fin de manche */
.tally, .funs {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  text-align: start;
  font-size: 14px;
}

.tally li, .funs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cb-radius-md, 12px);
  font-variant-numeric: tabular-nums;
  transition: transform var(--cb-duration-normal, 0.18s) ease;
  border-inline-start: 3px solid transparent;
}

.tally li:nth-child(odd), .funs li:nth-child(odd) {
  background: var(--field);
  border-inline-start-color: rgba(212, 175, 55, 0.35);
}

.tally li:nth-child(even), .funs li:nth-child(even) {
  background: rgba(212, 175, 55, 0.07);
}

.tally li:hover, .funs li:hover {
  transform: translateX(6px);
  border-inline-start-color: var(--accent);
}

.tally li b {
  font-weight: 700;
  color: var(--accent-ink);
}

/* Tournoi : rappel, podium, titres du récap' */
.tour-resume {
  color: var(--accent-ink); font-weight: 700;
  margin: -2px 0 12px;
  font-size: 13px;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
}

/* Podium : 2-1-3 (vainqueur au milieu, position haute) */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 6px;
}

.podium .step {
  flex: 1;
  min-width: 0;
  background: var(--field);
  border: var(--border);
  border-bottom: 0;
  border-radius: var(--cb-radius-md, 12px) var(--cb-radius-md, 12px) 0 0;
  padding: 12px 6px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform var(--cb-duration-normal, 0.18s) ease;
}

.podium .step:hover { transform: translateY(-4px); }

.podium .medal {
  display: inline-flex;
  animation: medal-spin 0.7s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) forwards;
}
.podium .medal svg { width: 26px; height: 26px; }
.podium .medal [class^="medal-"] { display: inline-flex; }
.podium .medal .medal-1 { color: #f4d15c; }
.podium .medal .medal-2 { color: #dfe2e6; }
.podium .medal .medal-3 { color: #dd9c66; }

/* Icône posée en ligne dans une phrase traduite (ex. « Récupérer <icône> 40 »). */
.ic-inline { width: 13px; height: 13px; vertical-align: -2px; display: inline-block; }

@keyframes medal-spin {
  0% { transform: scale(0.05) rotate(-220deg) translateY(-24px); opacity: 0; }
  55% { opacity: 1; }
  80% { transform: scale(1.18) rotate(15deg); }
  100% { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; }
}

.podium .who {
  font-size: 12px;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
}

.podium .pts {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.podium .p1 {
  padding-bottom: 30px;
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  border-color: var(--toon-outline-ink);
  transform: translateY(-12px);
  font-weight: 700;
}

.podium .p1:hover { transform: translateY(-16px); }

.podium .p1 .pts { color: #241a02; opacity: 0.75; }

.podium .p2 { padding-bottom: 18px; }

.podium .p3 { padding-bottom: 8px; }

/* Titres amusants : icône + action + joueur */
.funs .ico {
  display: inline-flex; flex: none; color: var(--accent);
  animation: ico-bounce 0.9s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2)) infinite;
}
.funs .ico svg { width: 20px; height: 20px; }

@keyframes ico-bounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  30% { transform: translateY(-6px) scale(1.12) rotate(4deg); }
  65% { transform: translateY(1px) scale(0.95); }
}

.funs .txt { flex: 1; }

.funs .who {
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
}

/* Défis : même liste que les à-côtés du tournoi, avec un état "pas encore
   réussi" — atténué, sans l'animation de l'icône. */
#challenges-list li.locked { opacity: 0.55; }

#challenges-list li.locked .ico { animation: none; filter: grayscale(1); }

#challenges-list li.done .who { color: var(--ink-C); }

/* Gain quotidien */
.dots {
  display: flex; gap: 6px; justify-content: center;
  margin: 10px 0 4px;
}

.dots .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--field); color: var(--muted);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--cb-duration-fast, 0.12s) ease;
  border: var(--border);
  cursor: default;
  letter-spacing: 0.5px;
}

.dots .dot:hover { transform: scale(1.08); }

.dots .dot.on {
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  border-color: var(--toon-outline-ink);
  animation: dot-pop 0.35s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2));
  font-weight: 700;
}

@keyframes dot-pop {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Cosmétiques */
.shop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-top: 1.5px solid var(--toon-outline-ink);
  text-align: start;
}

.shop-row .nm {
  flex: 1; font-weight: 800; font-size: 14px;
}

.shop-row .ds {
  display: flex; align-items: center; gap: 3px;
  font-weight: 600; font-size: 11px;
  color: var(--muted); margin-top: 2px;
}
.shop-row .ds svg { width: 11px; height: 11px; }

.shop-row button {
  width: auto; flex: none; margin: 0; padding: 9px 14px;
  font-size: 13px; white-space: nowrap;
  border-radius: var(--cb-radius-md, 12px);
}

.shop-row .owned {
  color: var(--accent-ink); font-weight: 800; font-size: 13px;
}

.shop-row.locked { opacity: 0.45; }

.shop-row.locked button { cursor: default; }

.swatch {
  width: 40px; height: 54px;
  border-radius: var(--cb-radius-md, 12px);
  border: var(--toon-outline-w) solid var(--toon-outline-ink); flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform var(--cb-duration-normal, 0.18s) var(--cb-easing-ease-out, ease-out);
  cursor: pointer;
  background: var(--kawaii-sheen), var(--field);
}
.swatch svg { width: 22px; height: 22px; }

.swatch:hover { transform: translateY(-3px) scale(1.05); }

.swatch.active {
  border-color: var(--accent);
  transform: scale(1.08);
  animation: swatch-pop 0.4s var(--cb-easing-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.2));
}

@keyframes swatch-pop {
  0% { transform: scale(0.75) rotate(-12deg); }
  55% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1.08) rotate(0deg); }
}

.lb {
  list-style: none; margin: 0; padding: 0;
  max-height: 34vh; overflow-y: auto; text-align: start;
}

.lb li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 11px; border-radius: var(--cb-radius-md, 10px);
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: transform var(--cb-duration-normal, 0.18s) ease;
  border-inline-start: 3px solid transparent;
}

.lb li:nth-child(odd) {
  background: var(--field);
  border-inline-start-color: rgba(255, 210, 63, 0.2);
}

.lb li:nth-child(even) { background: rgba(255, 210, 63, 0.05); }

.lb li:hover { transform: translateX(6px); border-inline-start-color: var(--accent); }

.lb li.me {
  background: var(--kawaii-sheen), linear-gradient(180deg, var(--accent) 0%, #c19a2c 100%);
  color: #241a02;
  font-weight: 700;
  border-inline-start-color: var(--toon-outline-ink);
}

.lb .rank { width: 20px; color: var(--muted); font-weight: 800; }

.lb li.me .rank { color: #241a02; }

.lb .who {
  flex: 1; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lb .pts { font-size: 12px; color: var(--muted); }

.lb li.me .pts { color: #241a02; opacity: 0.75; }

.lb .empty { color: var(--muted); font-size: 13px; padding: 8px 9px; }

/* Invite de saisie */
.field {
  width: 100%;
  border-radius: var(--cb-radius-btn, 12px);
  border: var(--border);
  background: var(--field); color: var(--ink);
  padding: 13px 14px; font-size: 17px;
  font-family: inherit; font-weight: 700; text-align: center;
  transition: border-color var(--cb-duration-normal, 0.18s) ease;
}

.field:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.prompt-err {
  color: #ff8fa3; font-size: 12px; font-weight: 700;
  margin-top: 8px;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Notification passagère + gain qui monte */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  max-width: 88vw;
  background: #17472f;
  color: var(--ink);
  border: var(--toon-outline-w) solid #4fd08a;
  border-radius: var(--cb-radius-pill, 999px);
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
  z-index: 9;
  box-shadow: var(--shadow);
  animation: toast-in var(--cb-duration-normal, 0.3s) var(--cb-easing-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.fx-pop {
  position: fixed;
  transform: translate(-50%, -100%);
  color: var(--accent); font-weight: 800;
  font-size: 22px; pointer-events: none; z-index: 10;
  text-shadow: 0 2px 0 var(--toon-outline-ink);
  animation: fx-rise var(--cb-duration-slow, 1s) var(--cb-easing-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
  font-variant-numeric: tabular-nums;
}

@keyframes fx-rise {
  0% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -160%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(0.7); }
}

/* Défis solo (src/challenges.js) : grille de niveaux, 4 par ligne. Verrouillé
   = cadenas et bouton inerte ; réussi = étoiles pleines/vides sur fond ghost
   « on » — le même langage visuel que les autres sélecteurs de l'accueil. */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cb-gap-sm, 9px);
  margin: 4px 0 14px;
}

.challenges-grid button {
  width: auto; margin-top: 0; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px;
}

.challenges-grid .n { font-size: 14px; font-weight: 800; }
.challenges-grid .game { font-size: 9px; text-transform: uppercase; opacity: 0.75; letter-spacing: 0.04em; }
.challenges-grid .stars { font-size: 11px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 2px; }
.challenges-grid .stars svg { width: 12px; height: 12px; }

.challenges-grid button.locked { opacity: var(--cb-disabled-opacity, 0.5); }

/* Petit écran mobile : optimisations supplémentaires (fusion des deux blocs
   dupliqués de l'ancien fichier) */
@media (max-width: 360px) {
  :root {
    --card-w: clamp(48px, 14vw, 72px);
    --hand-w: clamp(58px, 16vw, 84px);
  }
  .brand { font-size: 18px; }
  .chips { gap: 6px; }
  .chip { padding: 6px 12px; font-size: 12px; }
  .overlay > .card { padding: 16px 12px; width: 96vw; }
  .logo { font-size: 32px; }
  .overlay h2 { font-size: 20px; }
  button { padding: 12px 14px; font-size: 15px; }
}

/* Écran court : réduction de la table plutôt que de la main (on touche la main) */
@media (max-height: 680px) {
  .table { max-height: 40vh; }
  :root {
    --card-w: clamp(48px, 12.5vw, 64px);
    --hand-w: clamp(54px, 15vw, 74px);
  }
  .overlay > .card { padding: 16px 14px; max-height: 90vh; }
  .overlay.sheet > .card { max-height: calc(100vh - var(--hand-w) * var(--card-ratio) - 140px); }
}

/* Support iPad & tablette : espacement riche */
@media (min-width: 600px) {
  .overlay > .card { width: min(440px, 90vw); padding: 28px 24px; }
  button { padding: 15px 18px; font-size: 16px; }
}

/* Grandes fenêtres : meilleure utilisation de l'espace */
@media (min-width: 1024px) {
  #wrap { max-width: 720px; }
  .table { max-height: 600px; }
  .overlay > .card { min-width: 500px; }
}

@media (min-width: 1440px) {
  #wrap { max-width: 900px; }
}

/* Mode paysage : adaptation du layout */
@media (orientation: landscape) and (max-height: 500px) {
  .table { max-height: 40vh; aspect-ratio: auto; }
  .hand { min-height: auto; margin-top: 8px; }
}

/* RTL (arabe) : flux logique et miroir d'interface */
html[dir="rtl"] { text-align: right; }

html[dir="rtl"] .logo,
html[dir="rtl"] .field-label,
html[dir="rtl"] .seat .who,
html[dir="rtl"] .score,
html[dir="rtl"] .tally li,
html[dir="rtl"] .funs li,
html[dir="rtl"] .lb li,
html[dir="rtl"] .shop-row {
  text-align: right;
}

html[dir="rtl"] .score.end { text-align: left; }

html[dir="rtl"] .podium .who { direction: rtl; unicode-bidi: embed; }

html[dir="rtl"] .hand { flex-direction: row-reverse; }

/* Éviter les chevrons RTL mal orientés en jeu de direction CSS */
html[dir="rtl"] [class*="btn"] { direction: ltr; }

/* Respect du mode prefers-reduced-motion : pas d'animations décoratives */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessibilité : focus visible cohérent partout */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media print {
  body, html { background: white; color: black; }
  .chip-btn, canvas.fx { display: none; }
}

/* Retour au hub (`_shared/game-bridge.js`) : la pastille est peinte par le
   fichier PARTAGÉ, qui ne déclare pas de largeur — sans cette ligne, notre
   règle `button { width:100% }` l'étirait en barre pleine largeur en bas de
   l'écran. Le fichier partagé n'a pas à connaître nos styles : c'est ici que
   ça se corrige. */
#cb-back { width: auto; margin: 0; }