/* Pack libre-service — joyeux, autoportant. Utilisé par le cockpit (index.html) et les 10 mini-jeux.
   Zéro dépendance externe, zéro police web : system-ui + emojis = léger et universel. */

:root {
  --rose: #ff6b9d; --orange: #ffa94d; --jaune: #ffd43b; --vert: #8ce99a;
  --bleu: #74c0fc; --violet: #b197fc; --crème: #fff8ec; --nuit: #1a1420;
  --carte: #ffffff; --mut: #857a90; --txt: #231a2e;
  --ombre: 0 8px 24px rgba(90, 50, 120, .15);
  --radius: 18px;
  /* Variables unifiées --jk-* (utilisées par card_player.css et intégrations externes) */
  --jk-bg:      var(--crème,  #fff8ec);
  --jk-surface: var(--carte,  #ffffff);
  --jk-gold:    var(--orange, #ffa94d);
  --jk-text:    var(--txt,    #231a2e);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--txt);
  font: 16px/1.5 system-ui, "Segoe UI", -apple-system, sans-serif;
  background:
    radial-gradient(circle at 10% 10%, #ffd4e5 0, transparent 40%),
    radial-gradient(circle at 90% 20%, #d4e5ff 0, transparent 40%),
    radial-gradient(circle at 50% 90%, #ffe8c7 0, transparent 50%),
    var(--crème);
  min-height: var(--jk-vh, 100vh);
}
body.sombre { background: #0f0a16; color: #f1efea; --txt: #f1efea; --carte: #1f1a28; --mut: #a89cb4; }

header {
  display: flex; align-items: center; gap: 14px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px;
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(10px); background: rgba(255, 248, 236, .8);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
body.sombre header { background: rgba(31, 26, 40, .85); border-color: rgba(255, 255, 255, .05); }
header h1 { margin: 0; font-size: 20px;
  background: linear-gradient(90deg, var(--rose), var(--orange), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
header .retour {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--carte); color: var(--txt); font-weight: 500; font-size: 14px;
  box-shadow: var(--ombre); border: 1px solid rgba(0, 0, 0, .05);
}
header .retour:hover { transform: translateY(-1px); }
header .fil { color: var(--mut); font-size: 13px; margin-left: auto; }

main { padding: 24px 18px 48px; max-width: 920px; margin: 0 auto; }

/* === Cockpit === */
.grille-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.carte-jeu {
  background: var(--carte); border-radius: var(--radius); padding: 16px;
  text-decoration: none; color: inherit; box-shadow: var(--ombre);
  border: 1px solid rgba(0, 0, 0, .04); transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 8px; min-height: 170px;
}
.carte-jeu:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(90, 50, 120, .22); }
.carte-jeu .emoji { font-size: 48px; line-height: 1; }
.carte-jeu h3 { margin: 0; font-size: 17px; }
.carte-jeu p { margin: 0; color: var(--mut); font-size: 13px; flex-grow: 1; }
.carte-jeu .meta { font-size: 11px; color: var(--mut); display: flex; gap: 8px; }
.carte-jeu .meta span { padding: 2px 8px; background: rgba(177, 151, 252, .15); border-radius: 999px; }

/* === Composants communs des jeux === */
.scene {
  background: var(--carte); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--ombre); min-height: 320px; display: flex; flex-direction: column; gap: 14px;
}
h2 { margin: 0; font-size: 22px; }
button.primaire {
  padding: 12px 22px; font-size: 16px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 999px; color: #fff;
  background: linear-gradient(90deg, var(--rose), var(--orange));
  box-shadow: 0 4px 16px rgba(255, 107, 157, .35);
}
button.primaire:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 107, 157, .5); }
button.primaire:active { transform: translateY(0); }
button.ghost {
  padding: 10px 18px; font-size: 14px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px;
  background: transparent; color: var(--txt);
}
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.badge.ok { background: var(--vert); color: #1a3b1a; }
.badge.bof { background: #ffd3d3; color: #701a1a; }
.score { font-size: 32px; font-weight: 700;
  background: linear-gradient(90deg, var(--orange), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

.compteur { display: flex; gap: 20px; align-items: baseline; }
.compteur dt { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .5px; }
.compteur dd { margin: 0; font-size: 24px; font-weight: 700; }

/* === Animations communes === */
@keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }
.pop { animation: pop .35s ease-out; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.shake { animation: shake .3s ease-in-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.fade-in { animation: fadeIn .3s ease-out; }
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(115vh) rotate(720deg); opacity: 0; }
}
.confetti { position: fixed; top: -5vh; width: 12px; height: 16px; z-index: 20000 !important; pointer-events: none;
  animation: confetti-fall 2.5s linear forwards !important; }
@media (prefers-reduced-motion: reduce) {
  .pop, .shake, .fade-in, .confetti { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* === Bouton muet commun === */
.jk-mute-btn {
  background: var(--carte); border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
  width: 36px; height: 36px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(90,50,120,.08); transition: transform .15s;
}
.jk-mute-btn:hover { transform: translateY(-1px); }
.jk-theme-btn {
  background: var(--carte); border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
  width: 36px; height: 36px; min-width: 36px; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(90,50,120,.08); transition: transform .15s;
}
.jk-theme-btn:hover { transform: translateY(-1px); }
.jk-theme-btn.fixe { position: fixed; left: 10px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); top: auto; right: auto; z-index: 2147482900; }

/* === Barre d'état de jeu === */
.jk-status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: rgba(177,151,252,.08); border: 1px solid rgba(177,151,252,.12);
  min-height: 38px; text-align: center;
}
.jk-status--turn { color: var(--violet); }
.jk-status--wait { color: var(--mut); }
.jk-status--win { background: rgba(140,233,154,.12); border-color: rgba(140,233,154,.2); color: #1a6b2a; }
.jk-status--lose { background: rgba(255,107,157,.08); border-color: rgba(255,107,157,.15); color: #a01a3a; }
.jk-status--draw { background: rgba(255,212,59,.1); border-color: rgba(255,212,59,.2); color: #7a6000; }
body.sombre .jk-status--win { background: rgba(140,233,154,.08); color: #8ce99a; }
body.sombre .jk-status--lose { background: rgba(255,107,157,.06); color: #ff6b9d; }
body.sombre .jk-status--draw { background: rgba(255,212,59,.06); color: #ffd43b; }

/* === Dialog fin de partie ===
 * Règle anti-popup « une ligne » (correctif Gemini, 2026-11-12) :
 * - la carte garde une hauteur intrinsèque : height:auto + min-height:min-content ;
 * - le scroll est sur la carte, jamais sur un parent flex sans hauteur ;
 * - display:flex column + gap pour empiler les blocs sans les comprimer ;
 * - max-height:calc(100dvh - safe-area) et overflow-y:auto ;
 * - largeur min(94vw, 540px), padding responsive et zones sûres.
 * Ne pas remettre height:fit-content, flex:1 ou height:100% sur la carte.
 */
.jk-game-over {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.jk-game-over.actif { display: flex; }
.jk-game-over-card {
  background: var(--carte); color: var(--txt); border-radius: 28px;
  padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 32px);
  text-align: center; max-width: min(94vw, 540px); width: 100%;
  height: auto; min-height: min-content; max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 72px rgba(0,0,0,.35); animation: pop .35s ease-out;
}
.jk-game-over-card h2 { margin: 0; font-size: clamp(26px, 7vw, 36px); line-height: 1.25; }
.jk-game-over-card p { margin: 0; font-size: clamp(16px, 4.5vw, 19px); line-height: 1.5; color: var(--mut); }
.jk-game-over-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; width: 100%; }
.jk-game-over-actions button, .jk-game-over-actions .retour { min-height: 52px; padding: 12px clamp(20px, 5vw, 32px); font-size: clamp(16px, 4.5vw, 18px); border-radius: 999px; }

/* === Rideau pass-and-play === */
.jk-curtain {
  position: fixed; inset: 0; z-index: 180;
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
  background: var(--crème); color: var(--txt); text-align: center;
}
body.sombre .jk-curtain { background: var(--nuit); }
.jk-curtain.actif { display: flex; }
.jk-curtain h2 { margin: 0; font-size: 20px; }

/* === Accessibilité : region screen-reader === */
.jk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* cockpit */
.ls-intro { color: var(--mut); text-align: center; margin: 0 0 20px; }
.ls-astuce { color: var(--mut); text-align: center; margin: 40px 0 0; font-size: 13px; }

/* jeux — utilitaires */
.jeu-fin { text-align: center; font-size: 18px; }
.jeu-fin--mut { text-align: center; font-size: 18px; color: var(--mut); }
.jeu-instr { text-align: center; color: var(--mut); }
.jeu-verdict { text-align: center; font-size: 18px; min-height: 1.5em; }
.jeu-feedback { text-align: center; min-height: 1.5em; }
.jeu-h3-mut { margin: 0; text-align: center; color: var(--mut); }
.jeu-btn-ctr { align-self: center; }
.jeu-btn-ctr--cache { align-self: center; display: none; }
.compteur--ctr { justify-content: center; }
.btn-row { display: flex; gap: 10px; justify-content: center; }
.indice-p { margin: 0; font-size: 17px; }
.score { text-align: center; }
.jeu-aide { margin-bottom: 4px; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 8px 12px; background: rgba(255,215,0,.06); }
.jeu-aide summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.jeu-aide ul { margin: 8px 0 2px; padding-left: 18px; font-size: 13px; line-height: 1.7; }

/* === Thème sombre (auto + classe) === */
@media (prefers-color-scheme: dark) {
  body:not(.clair) {
    background: #0f0a16; color: #f1efea;
    --txt: #f1efea; --carte: #1f1a28; --mut: #a89cb4;
    --jk-bg: #0F172A; --jk-surface: #1E293B; --jk-gold: #FBBF24; --jk-text: #F8FAFC;
  }
  body:not(.clair) header { background: rgba(31, 26, 40, .85); border-color: rgba(255,255,255,.05); }
}
body.sombre {
  background: #0f0a16; color: #f1efea; --txt: #f1efea; --carte: #1f1a28; --mut: #a89cb4;
  --jk-bg: #0F172A; --jk-surface: #1E293B; --jk-gold: #FBBF24; --jk-text: #F8FAFC;
}
body.sombre header { background: rgba(31, 26, 40, .85); border-color: rgba(255,255,255,.05); }

/* === Score widget jk.score.widget() === */
.jk-hist-wrap { margin-top: 14px; padding: 12px 14px; background: rgba(177,151,252,.08); border-radius: 12px; border: 1px solid rgba(177,151,252,.18); }
.jk-hist-rang { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--orange); text-align: center; }
.jk-hist-titre { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; }
.jk-hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.jk-hist th { padding: 3px 8px; text-align: left; color: var(--mut); border-bottom: 1px solid rgba(0,0,0,.07); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.jk-hist td { padding: 5px 8px; }
.jk-hist tr.jk-hist-actuel td { font-weight: 700; color: var(--violet); }
body.sombre .jk-hist-wrap { background: rgba(177,151,252,.06); border-color: rgba(177,151,252,.15); }
body.sombre .jk-hist th { border-bottom-color: rgba(255,255,255,.07); }
@media (prefers-color-scheme: dark) {
  body:not(.clair) .jk-hist-wrap { background: rgba(177,151,252,.06); border-color: rgba(177,151,252,.15); }
  body:not(.clair) .jk-hist th { border-bottom-color: rgba(255,255,255,.07); }
}

/* ═══ Paysage (téléphone couché, hauteur ≤ 560px) : on gagne de la place et le plateau passe à gauche ═══
   Titre masqué (le son est dans la barre), cartes compactes ; pour les jeux à plateau unique :
   plateau à gauche (taille calée sur la HAUTEUR), commandes et infos à droite. `body[data-jeu]` est posé par jk.js. */
@media (min-width: 561px) and (max-height: 560px) {
  main { padding: 4px 8px 6px; max-width: none; }
  .scene { padding: 6px 10px; min-height: 0; gap: 4px; border-radius: 12px; }

  /* jeux à plateau unique : 2 colonnes */
  body[data-jeu="dames"] .scene, body[data-jeu="sokoban"] .scene, body[data-jeu="2048"] .scene,
  body[data-jeu="serpent"] .scene, body[data-jeu="memory"] .scene, body[data-jeu="wordle"] .scene, body[data-jeu="p4"] .scene {
    display: grid; grid-template-columns: auto minmax(160px, 1fr); column-gap: 16px; row-gap: 0; align-items: start; align-content: start;
  }
  body[data-jeu="dames"] .scene > *, body[data-jeu="sokoban"] .scene > *, body[data-jeu="2048"] .scene > *,
  body[data-jeu="serpent"] .scene > *, body[data-jeu="memory"] .scene > *, body[data-jeu="wordle"] .scene > *, body[data-jeu="p4"] .scene > * { grid-column: 2; margin-top: 0; margin-bottom: 6px; }

  body[data-jeu="dames"] .dames-plateau,
  body[data-jeu="sokoban"] .sok-grille,
  body[data-jeu="2048"] .g2048-plateau,
  body[data-jeu="memory"] .plateau,
  body[data-jeu="wordle"] .wordle-grille,
  body[data-jeu="serpent"] #jeu,
  body[data-jeu="p4"] .p4-grille {
    grid-column: 1; grid-row: 1 / span 8; margin: 0;
    width: min(calc(var(--jk-vh, 100vh) - 58px), 56vw); max-width: none; height: auto;
  }
  body[data-jeu="serpent"] #jeu { height: min(calc(var(--jk-vh, 100vh) - 58px), 56vw); }
  body[data-jeu="wordle"] .wordle-grille { width: min(calc((var(--jk-vh, 100vh) - 64px) * 5 / 6), 56vw); }   /* 5 colonnes × 6 lignes */
  body[data-jeu="p4"] .p4-grille { width: min(calc(var(--jk-vh, 100vh) - 104px), 56vw); }
  body[data-jeu="p4"] .p4-colonnes { grid-column: 1; grid-row: 9; width: min(calc(var(--jk-vh, 100vh) - 100px), 56vw); max-width: none; margin: 4px 0 0; }
  body[data-jeu="p4"] .p4-grille { grid-row: 1 / span 8; }
}