@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500&display=swap');

/* ═══════════════════════════════════════════
   Les variables --card-w, --card-h, --pile-w,
   --pile-h sont injectées par JS via
   document.documentElement.style.setProperty()
   selon l'espace réel disponible + nb joueurs.
   ═══════════════════════════════════════════ */
:root {
  --card-w: 58px;
  --card-h: 84px;
  --card-r: 9px;
  --card-pad: 5px;
  --card-font: 12px;
  --card-suit: 22px;
  --pile-w: 72px;
  --pile-h: 104px;
  --grid-gap: 5px;
  --label-h: 28px;   /* hauteur nom + score sous/dessus la grille */
  --status-h: 36px;  /* hauteur de la status bar */
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'DM Sans',Arial,sans-serif; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background: radial-gradient(ellipse at 50% 30%, #0a4a2a 0%, #042215 50%, #000 100%);
  color:white;
  touch-action:manipulation;
}

/* ── SETTINGS ── */
.settings-icon {
  position:fixed; top:12px; right:12px;
  font-size:clamp(18px,3vmin,24px);
  cursor:pointer; transition:0.2s; z-index:1000;
}
.settings-icon:hover { transform:rotate(25deg) scale(1.1); }

/* ── MENU ── */
.menu {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  z-index:10;
}
.logo {
  width:min(65vw, 260px);
  margin-bottom:32px;
  filter:drop-shadow(0 0 28px rgba(22,163,74,0.45));
}
.buttons { display:flex; flex-direction:column; gap:12px; width:min(80vw,300px); }
button {
  padding:clamp(10px,2vmin,14px) 20px;
  font-size:clamp(0.88em,2.5vmin,1.05em);
  font-family:'DM Sans',sans-serif; font-weight:500;
  border:none; border-radius:12px;
  background:#15803d; color:white;
  cursor:pointer; transition:0.18s;
}
button:hover { background:#16a34a; transform:translateY(-2px); }
button:active { transform:translateY(0); }

/* ── PLAYER SELECT ── */
.player-select {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.82);
  display:none; justify-content:center; align-items:center; z-index:200;
}
.player-box {
  background:#0d1f14; padding:clamp(20px,4vmin,32px); border-radius:20px;
  width:min(88vw,320px); text-align:center;
  border:1px solid rgba(22,163,74,0.3);
}
.player-display {
  font-family:'Playfair Display',serif; font-size:3em; font-weight:700;
  margin:14px 0; color:#16a34a;
}
input[type="range"] { width:100%; margin-bottom:18px; accent-color:#16a34a; }
.back-btn { background:#2a2a2a; margin-top:8px; }
.back-btn:hover { background:#3a3a3a; transform:none; }

/* ── TABLE SCREEN ── */
.table-screen {
  display:none; position:fixed; inset:0;
}

/* ── PLAYERS CONTAINER ── */
.players-container {
  position:absolute; inset:0; pointer-events:none;
}

/* ── PLAYER ZONE ── */
.player-zone {
  position:absolute;
  display:flex; flex-direction:column;
  align-items:center;
  gap:3px;
  pointer-events:all;
}
.player-name {
  font-size:clamp(7px,1.5vmin,10px);
  letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); font-weight:500;
  white-space:nowrap;
}
.player-total-score {
  font-size:clamp(7px,1.3vmin,9px); color:rgba(255,255,255,0.38);
  letter-spacing:0.04em; text-align:center;
}

/* ── ACTIVE PLAYER ── */
.active-player { filter:drop-shadow(0 0 8px rgba(22,163,74,0.75)); }
.active-player-name { color:#16a34a !important; font-weight:700 !important; }

/* ── CARD GRID ── */
.card-grid {
  display:grid;
  grid-template-columns:repeat(2, var(--card-w));
  grid-template-rows:repeat(2, var(--card-h));
  gap:var(--grid-gap);
}

/* ── CARTE ── */
.card {
  width:var(--card-w);
  height:var(--card-h);
  border-radius:var(--card-r);
  position:relative; user-select:none;
  transition:transform 0.14s, box-shadow 0.14s;
  flex-shrink:0; overflow:hidden;
}
.card.face-down {
  background:linear-gradient(135deg,#1e3a5f 0%,#0f2040 100%);
  border:1px solid rgba(100,150,220,0.4);
  cursor:default;
}
.card.face-down::before {
  content:''; position:absolute; inset:4px; border-radius:5px;
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.04) 1px,
    transparent 1px,transparent 5px);
}
.card.face-up {
  background:#fff;
  border:1px solid rgba(0,0,0,0.14);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  padding:var(--card-pad);
  display:flex; flex-direction:column; justify-content:space-between;
}
.card.face-up:hover {
  transform:scale(1.06) translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
  z-index:10;
}
.card-empty {
  opacity:0 !important; pointer-events:none; visibility:hidden;
  width:var(--card-w); height:var(--card-h);
}

/* ── DESIGN DE CARTE TRADITIONNEL ── */
.card-face {
  width:100%; height:100%; position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
}
/* Coin haut-gauche */
.cf-tl {
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:1.1; font-weight:800; font-size:var(--card-font);
}
.cf-tl .cv { font-size:1em; }
.cf-tl .cs { font-size:0.8em; }
/* Coin bas-droite retourné */
.cf-br {
  display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.1; font-weight:800; font-size:var(--card-font);
  transform:rotate(180deg); align-self:flex-end;
}
.cf-br .cv { font-size:1em; }
.cf-br .cs { font-size:0.8em; }
/* Symbole central */
.cf-center {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:var(--card-suit);
  line-height:1; display:flex; align-items:center; gap:2px;
  pointer-events:none;
}
.cf-special { font-size:calc(var(--card-suit)*0.52); margin-left:2px; }
/* Points */
.cf-pts {
  position:absolute; bottom:2px; right:3px;
  font-size:calc(var(--card-font) * 0.7);
  font-weight:700; color:rgba(0,0,0,0.2); pointer-events:none;
}
/* Couleurs */
.red   { color:#d11a2a; }
.black { color:#111; }

/* ── CENTER ZONE (pioche + défausse) ── */
.center-zone {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); z-index:10;
}
.pile-wrapper {
  display:flex; gap:clamp(10px,2.5vmin,22px); align-items:center;
}
.pile {
  width:var(--pile-w); height:var(--pile-h);
  border-radius:var(--card-r);
  position:relative; cursor:pointer;
  transition:transform 0.14s; flex-shrink:0;
}
.pile:hover { transform:scale(1.05); }

.deck-pile {
  background:linear-gradient(135deg,#1e3a5f 0%,#0f2040 100%);
  border:2px solid rgba(100,150,220,0.5);
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.deck-pile::before {
  content:''; position:absolute; inset:4px; border-radius:5px;
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,0.03) 0,rgba(255,255,255,0.03) 1px,transparent 1px,transparent 6px);
}
.pile-count {
  font-family:'Playfair Display',serif;
  font-size:clamp(1em,3vmin,1.6em); font-weight:700;
  color:rgba(255,255,255,0.85); position:relative; z-index:1;
}
/* Défausse vide */
.discard-pile {
  background:rgba(255,255,255,0.06);
  border:2px dashed rgba(255,255,255,0.2);
  display:flex; justify-content:center; align-items:center;
}
/* Défausse avec carte */
.discard-pile.has-card {
  background:#fff;
  border:1px solid rgba(0,0,0,0.15);
  padding:var(--card-pad);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; cursor:pointer;
}
/* Labels pioche / défausse */
.pile-label, .pile-label-discard {
  position:absolute;
  bottom:calc(-1 * clamp(14px,2.2vmin,20px));
  left:50%; transform:translateX(-50%);
  font-size:clamp(7px,1.3vmin,9px);
  letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); white-space:nowrap;
  pointer-events:none;
}

/* ── DECK / DISCARD ACTIF ── */
.deck-active { box-shadow:0 0 0 3px #16a34a,0 0 18px rgba(22,163,74,0.5); }
.discard-active { box-shadow:0 0 0 3px #f59e0b,0 0 18px rgba(245,158,11,0.5); }

/* ── CARTE PIOCHÉE — zone à côté des piles ── */
.drawn-card-zone {
  position:absolute; z-index:150;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.drawn-label {
  font-size:clamp(7px,1.3vmin,9px); letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.drawn-hint {
  font-size:clamp(7px,1.2vmin,8px); color:rgba(245,158,11,0.75);
  text-align:center; line-height:1.4;
  max-width:calc(var(--pile-w) * 1.8);
}
#drawnCardEl {
  box-shadow:0 0 0 3px #16a34a, 0 5px 18px rgba(0,0,0,0.55);
}

/* ── INTERACTIONS ── */
.swap-target { cursor:pointer !important; animation:swapPulse 1s ease-in-out infinite; }
@keyframes swapPulse {
  0%,100% { box-shadow:0 0 0 2px #f59e0b,0 3px 8px rgba(245,158,11,0.3); }
  50%     { box-shadow:0 0 0 4px #f59e0b,0 5px 16px rgba(245,158,11,0.6); }
}
.peek-selectable { cursor:pointer !important; animation:peekPulse 1.1s ease-in-out infinite; }
@keyframes peekPulse {
  0%,100% { box-shadow:0 0 0 2px rgba(22,163,74,0.5); }
  50%     { box-shadow:0 0 0 4px rgba(22,163,74,0.9),0 0 12px rgba(22,163,74,0.5); }
}
.peek-revealed,.peek-locked { animation:none; box-shadow:none; cursor:default; }
.discard-match { cursor:pointer !important; animation:matchPulse 0.5s ease-in-out infinite; z-index:20; }
@keyframes matchPulse {
  0%,100% { box-shadow:0 0 0 3px #ef4444,0 0 14px rgba(239,68,68,0.5); }
  50%     { box-shadow:0 0 0 5px #ef4444,0 0 26px rgba(239,68,68,0.9); }
}
.jack-selected { box-shadow:0 0 0 3px #a855f7,0 0 16px rgba(168,85,247,0.6) !important; animation:none !important; }

/* ── ANIMATIONS ── */
@keyframes dealPop {
  from { opacity:0; transform:scale(0.5) translateY(-18px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.card.dealt { animation:dealPop 0.26s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.card-flipping { transition:transform 0.14s ease-in; transform:scaleX(0) !important; }

/* ── PEEK TIMER ── */
.peek-card-timer {
  position:absolute; bottom:0; left:0; width:100%; height:4px;
  background:#16a34a; border-radius:0 0 7px 7px;
  transform-origin:left; transform:scaleX(1);
}
.peek-card-timer.running {
  transition:transform 5s linear,background 5s linear;
  transform:scaleX(0); background:#dc2626;
}

/* ── FLYING CARD ── */
.flying-card {
  position:fixed; z-index:400; pointer-events:none;
  background:linear-gradient(135deg,#1e3a5f 0%,#0f2040 100%);
  border:1px solid rgba(100,150,220,0.5);
  border-radius:var(--card-r);
}
.flying-card.face {
  background:#fff !important; border:1px solid rgba(0,0,0,0.14) !important;
  padding:var(--card-pad);
  display:flex; flex-direction:column; justify-content:space-between;
}

/* ── STATUS BAR ── */
.status-bar {
  position:fixed;
  bottom:clamp(5px,1.5vmin,12px);
  left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.72);
  border:1px solid rgba(22,163,74,0.35);
  color:rgba(255,255,255,0.9);
  padding:5px 14px; border-radius:18px;
  font-size:clamp(0.6em,1.6vmin,0.78em);
  z-index:50; pointer-events:none;
  white-space:nowrap;
  max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}

/* ── BOUTON DUTCH! ── */
.dutch-btn {
  position:fixed;
  bottom:clamp(38px,7vmin,60px);
  right:clamp(8px,2.5vmin,18px);
  display:none; flex-direction:column; align-items:center;
  z-index:100; gap:4px;
}
.dutch-btn-inner {
  background:linear-gradient(135deg,#7f1d1d,#991b1b,#b91c1c);
  border:2px solid rgba(255,100,100,0.35);
  border-radius:14px; padding:7px 13px;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(185,28,28,0.55),inset 0 1px 0 rgba(255,255,255,0.1);
  transition:transform 0.14s,box-shadow 0.14s;
  display:flex; align-items:center; justify-content:center;
}
.dutch-btn-inner:hover { transform:scale(1.07); box-shadow:0 6px 28px rgba(185,28,28,0.8); }
.dutch-btn-inner:active { transform:scale(0.96); }
.dutch-logo-img {
  height:clamp(24px,4.5vmin,38px); width:auto;
  display:block;
  /* Pas de filtre : on utilise le logo tel quel */
}
.dutch-hint {
  font-size:clamp(6px,1.2vmin,8px); color:rgba(255,255,255,0.32);
  letter-spacing:0.03em; text-align:center; max-width:90px;
}

/* ── GAME OVER / MANCHE ── */
.gameover-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.87);
  display:flex; justify-content:center; align-items:center; z-index:500;
}
.gameover-box {
  background:#0d1f14; border:1px solid rgba(22,163,74,0.4);
  border-radius:20px; padding:clamp(18px,3.5vmin,32px) clamp(16px,3.5vmin,28px);
  text-align:center; width:min(90vw,380px);
  max-height:88vh; overflow-y:auto;
}
.gameover-msg {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.1em,3.5vmin,1.7em); font-weight:700;
  margin-bottom:18px; color:#fff;
}
.gameover-scores { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.score-row {
  display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-radius:10px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}
.score-row.score-winner { background:rgba(22,163,74,0.15); border-color:rgba(22,163,74,0.4); }
.score-rank { font-size:1em; font-weight:700; color:rgba(255,255,255,0.4); width:16px; }
.score-row.score-winner .score-rank { color:#16a34a; }
.score-name { flex:1; font-weight:500; font-size:0.88em; text-align:left; }
.score-pts-round { font-size:0.78em; color:rgba(255,255,255,0.42); min-width:26px; text-align:right; }
.score-pts { font-family:'Playfair Display',serif; font-size:1em; font-weight:700; color:#16a34a; }
.score-modified { color:#f59e0b !important; font-weight:700; }
.dutch-badge {
  background:#b91c1c; color:white; font-size:8px;
  padding:1px 5px; border-radius:4px; margin-left:4px;
  vertical-align:middle; font-weight:700;
}

/* ── SETTINGS POPUP ── */
.settings-popup {
  position:fixed; inset:0; background:rgba(0,0,0,0.78);
  display:none; justify-content:center; align-items:center; z-index:999;
}
.settings-content {
  background:#0d1f14; padding:clamp(18px,3.5vmin,26px); border-radius:18px;
  width:min(88vw,310px); text-align:center;
  border:1px solid rgba(22,163,74,0.25);
}
.settings-content input {
  width:100%; padding:10px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08); color:white;
  text-align:center; margin:11px 0;
  font-family:'DM Sans',sans-serif; font-size:1em;
}
.version { margin-top:10px; font-size:9px; color:rgba(255,255,255,0.28); }

.settings-content input:disabled { cursor:not-allowed; }
#pseudo-label { font-size:0.85em; color:rgba(255,255,255,0.6); display:block; margin-bottom:2px; }
#musicToggleBtn { width:100%; margin-bottom:8px; font-size:0.92em; }

/* ── ANIMATIONS ── */
.fade-in { animation:fadeIn 0.45s ease; }
.pop-in  { animation:popIn 0.22s ease; }
@keyframes fadeIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes popIn  { from{opacity:0;transform:scale(0.84)} to{opacity:1;transform:scale(1)} }

/* ── RESUME OVERLAY ── */
.resume-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.88);
  display:flex; justify-content:center; align-items:center; z-index:600;
}
.resume-box {
  background:#0d1f14; border:1px solid rgba(22,163,74,0.4); border-radius:20px;
  padding:clamp(22px,4vmin,34px); text-align:center; width:min(88vw,360px);
}
.resume-title { font-family:'Playfair Display',serif; font-size:clamp(1.2em,3.5vmin,1.6em); font-weight:700; margin-bottom:10px; color:#fff; }
.resume-subtitle { font-size:clamp(0.82em,2vmin,0.95em); color:rgba(255,255,255,0.6); margin-bottom:22px; line-height:1.5; }
.resume-btns { display:flex; flex-direction:column; gap:10px; }

/* ── POINTS AU MILIEU-BAS DE LA CARTE ── */
.cf-pts {
  position:absolute;
  bottom:3px;
  left:50%;
  transform:translateX(-50%);
  font-size:calc(var(--card-font)*0.72);
  font-weight:700; color:rgba(0,0,0,0.22); pointer-events:none;
  white-space:nowrap;
}

/* ── BOUTON SKIP (⏩) ── */
.skip-btn {
  position:fixed;
  bottom:clamp(38px,7vmin,60px);
  left:clamp(8px,2.5vmin,18px);
  display:none; justify-content:center; align-items:center;
  z-index:100;
  width:clamp(42px,8vmin,58px); height:clamp(42px,8vmin,58px);
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  border:2px solid rgba(255,255,255,0.25);
  cursor:pointer;
  transition:background 0.2s, border-color 0.2s, transform 0.15s;
  user-select:none;
}
.skip-btn:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.5); transform:scale(1.08); }
.skip-btn:active { transform:scale(0.94); }
.skip-btn.skip-active { background:rgba(245,158,11,0.25); border-color:#f59e0b; }
.skip-label { font-size:clamp(16px,3.5vmin,24px); line-height:1; }

/* ── VOLUME ROW ── */
.volume-row {
  display:flex; align-items:center; gap:8px; margin:8px 0 14px;
  font-size:14px;
}
.volume-row input[type="range"] { flex:1; margin-bottom:0; }

/* ── DUTCH HINT supprimé ── */
.dutch-hint { display:none; }

/* ── DRAWN HINT supprimé ── */
.drawn-hint { display:none; }

/* ── SETTINGS: pseudo label + musicToggleBtn ── */
.settings-content input:disabled { cursor:not-allowed; }
#pseudo-label { font-size:0.84em; color:rgba(255,255,255,0.6); display:block; margin-bottom:2px; }
#musicToggleBtn { width:100%; margin-bottom:6px; font-size:0.9em; }

/* ── BOUTON PASSER VALET J ── */
.jack-skip-btn {
  position: fixed;
  top: clamp(10px, 2vmin, 18px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
  padding: 7px 18px;
  border-radius: 20px;
  font-size: clamp(0.75em, 2vmin, 0.88em);
  cursor: pointer;
  z-index: 120;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.jack-skip-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
}

/* ── DIFFICULTY GRID ── */
.difficulty-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 4px;
}
.diff-btn {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
  border-radius:14px; padding:14px 8px; cursor:pointer; color:white;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:1.4em; transition:background 0.15s, border-color 0.15s, transform 0.15s;
}
.diff-btn span { font-size:0.65em; font-weight:600; line-height:1.2; }
.diff-btn small { font-size:0.45em; color:rgba(255,255,255,0.45); }
.diff-btn:hover { background:rgba(22,163,74,0.2); border-color:rgba(22,163,74,0.5); transform:scale(1.04); }
.diff-btn.selected { background:rgba(22,163,74,0.3); border-color:#16a34a; }

/* ── OVERLAY SCREEN (multijoueur, créer, rejoindre) ── */
.overlay-screen {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  display:flex; justify-content:center; align-items:center; z-index:200;
}
.overlay-box {
  background:#0d1f14; border:1px solid rgba(22,163,74,0.3);
  border-radius:20px; padding:clamp(22px,4vmin,32px);
  width:min(90vw,360px); text-align:center; max-height:90vh; overflow-y:auto;
}
.overlay-box h2 { font-family:'Playfair Display',serif; font-size:1.5em; margin-bottom:16px; }
.multi-btns { display:flex; flex-direction:column; gap:10px; }
.or-separator { color:rgba(255,255,255,0.3); font-size:0.85em; margin:10px 0; }

/* ── ROOM CODE ── */
.room-code-zone { margin:16px 0; }
.room-code {
  font-family:'Playfair Display',serif; font-size:2em; font-weight:700;
  letter-spacing:0.2em; color:#16a34a;
  background:rgba(22,163,74,0.1); border:1px solid rgba(22,163,74,0.3);
  border-radius:12px; padding:12px; margin-bottom:12px;
}
.qr-placeholder {
  background:rgba(255,255,255,0.08); border:1px dashed rgba(255,255,255,0.2);
  border-radius:12px; padding:30px; font-size:2em; margin-bottom:12px;
}
.room-players { text-align:left; }
.room-player-item {
  padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.05);
  font-size:0.88em; margin-bottom:4px; color:rgba(255,255,255,0.7);
}

/* ── VOLUME CUSTOM ── */
.volume-row {
  display:flex; align-items:center; gap:10px; margin:8px 0 14px;
}
.vol-icon { font-size:16px; flex-shrink:0; }
.vol-track {
  flex:1; height:6px; background:rgba(255,255,255,0.12);
  border-radius:3px; position:relative; cursor:pointer;
}
.vol-fill {
  position:absolute; left:0; top:0; height:100%;
  background:#16a34a; border-radius:3px; pointer-events:none;
  transition:width 0.05s;
}
/* Slider custom transparent par-dessus */
.vol-track input[type="range"] {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
}

/* ── FLAG / PAYS ── */
.flag-select-row { margin-bottom:8px; }
.flag-btn {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:10px; padding:8px 16px; cursor:pointer; color:white;
  font-size:1em; width:100%; transition:background 0.15s;
}
.flag-btn:hover { background:rgba(255,255,255,0.15); transform:none; }
.flag-picker {
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  max-height:160px; overflow-y:auto; background:rgba(0,0,0,0.3);
  border-radius:12px; padding:8px; margin-bottom:8px;
}
.flag-option {
  font-size:1.5em; text-align:center; padding:4px;
  border-radius:6px; cursor:pointer; transition:background 0.1s;
}
.flag-option:hover { background:rgba(255,255,255,0.15); }
.flag-option.selected { background:rgba(22,163,74,0.3); outline:1px solid #16a34a; }

/* ── ANIMATIONS FIN DE PARTIE ── */
.win-animation {
  font-size:clamp(2em,6vmin,3.5em);
  min-height:60px; display:flex; justify-content:center; align-items:center;
  margin-bottom:8px; flex-wrap:wrap; gap:4px;
}

/* Manche gagnée : éclat rapide */
@keyframes mancheWin {
  0%   { transform:scale(0) rotate(-10deg); opacity:0; }
  60%  { transform:scale(1.2) rotate(5deg);  opacity:1; }
  100% { transform:scale(1)   rotate(0deg);  opacity:1; }
}
.anim-manche .win-animation span {
  display:inline-block;
  animation:mancheWin 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.anim-manche .win-animation span:nth-child(2) { animation-delay:0.1s; }
.anim-manche .win-animation span:nth-child(3) { animation-delay:0.2s; }

/* Partie gagnée : confettis flottants */
@keyframes confettiFloat {
  0%   { transform:translateY(0)   rotate(0deg)   scale(1);   opacity:1; }
  100% { transform:translateY(-60px) rotate(360deg) scale(0.5); opacity:0; }
}
.anim-win .win-animation span {
  display:inline-block;
  animation:confettiFloat 1.2s ease-out forwards;
}
.anim-win .win-animation span:nth-child(1) { animation-delay:0s; }
.anim-win .win-animation span:nth-child(2) { animation-delay:0.15s; }
.anim-win .win-animation span:nth-child(3) { animation-delay:0.3s; }
.anim-win .win-animation span:nth-child(4) { animation-delay:0.1s; }
.anim-win .win-animation span:nth-child(5) { animation-delay:0.25s; }

/* Partie perdue : shake triste */
@keyframes loseShake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-6px) rotate(-2deg); }
  40%     { transform:translateX(6px)  rotate(2deg); }
  60%     { transform:translateX(-4px) rotate(-1deg); }
  80%     { transform:translateX(4px)  rotate(1deg); }
}
.anim-lose .win-animation {
  animation:loseShake 0.7s ease 0.2s both;
}