/* Le Repaire — système de design c4 « Synthèse » (26 oct. 2026), choisi par le propriétaire (maquettes/c4-synthese.html).
   LA RÈGLE (revue le 3 nov. : direction « cartes » validée par le propriétaire) : ce qu'on JOUE a des coins de carte (--r-jeu, 14 px :
   cartes du booster, cases, tuiles, mots, plaques, dés) ; ce qu'on ACTIONNE ou LIT est arrondi aussi (--r-ui, 12 px : boutons, touches,
   onglets, fenêtres, sections, listes ; 8 px pour les petites étiquettes ; --r-key 6 px pour les touches de clavier et les cases de grille). Actions principales en encre, secondaires blanches à ombre douce ;
   pas de rouge pour les boutons (le rouge reste pour les signaux : erreurs, tampon, accents).
   Grille de 8 px (4 et 12 seulement à l'intérieur des composants), marge latérale 16 px, alignement à gauche,
   4 tailles de texte (12 / 14 / 17 / 22), UNE ombre (objets de jeu seulement : la base se sépare par des filets),
   pas d'inclinaison au repos (seul le tampon RÉUSSI ; −1,5° au toucher sur les cartes), icônes d'interface au trait (Jeux.ui).
   Chargée APRÈS les styles des pages ; tout est rangé sous html.rp (posé en dur ; sur les mots fléchés, seulement avec le
   style « Repaire »). Les variables historiques des pages (--bg, --fg, --line…) sont redéfinies pour la palette.
   Les couleurs fonctionnelles des jeux (lettre juste, mal placée…) restent définies par chaque page (mode daltonien compris). */

/* =============================================================== variables */
html.rp {
  /* espacements */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* rayons : 2, pas un de plus */
  --r-ui: 12px; --r-key: 6px; --r-jeu: 14px;
  /* typographie : 4 tailles, interlignes sur la grille de 4 */
  --t-1: 12px; --t-2: 14px; --t-3: 17px; --t-4: 22px;
  --l-1: 16px; --l-2: 20px; --l-3: 24px; --l-4: 28px;
  --serif: Georgia, "Times New Roman", "Noto Serif", FreeSerif, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Open Sans", sans-serif;
  /* une ombre */
  --ombre: 0 1px 0 rgba(34,32,28,.06), 0 6px 14px -8px rgba(34,32,28,.38);
  /* couleurs */
  --c-creme: #fbf4ea; --c-blanc: #fff; --c-encre: #22201c; --c-gris: #5b5349; --c-filet: #e6d9c8; --c-bord: rgba(34,32,28,.22);
  --c-tomate: #b5321f; --c-vert: #2b7350; --c-poignee: #cdbca6;
  --c-ciel: #d8e7f8; --c-ciel-t: #1d4a82; --c-rose: #f8dce7; --c-rose-t: #8f2453; --c-menthe: #d4efe4; --c-menthe-t: #185f54;
  --c-beurre: #fbe7ad; --c-beurre-t: #6e4a00; --c-lilas: #e5def6; --c-lilas-t: #47358a; --c-peche: #fde3d2; --c-peche-t: #8a3a12;
  /* traits de couleur (liserés « Et aussi », sélection) */
  --c-beurre-v: #f5cf58; --c-lilas-v: #c3b4ee; --c-menthe-v: #95d8bd;
  /* anciens noms (pages, scripts) */
  --rp-creme: var(--c-creme); --rp-creme2: #fffaf3; --rp-encre: var(--c-encre); --rp-gris: var(--c-gris); --rp-tomate: var(--c-tomate); --rp-vert: var(--c-vert);
  --rp-filet: var(--c-filet); --rp-ombre: var(--c-filet); --rp-ciel: var(--c-ciel); --rp-ciel-t: var(--c-ciel-t); --rp-rose: var(--c-rose); --rp-rose-t: var(--c-rose-t);
  --rp-menthe: var(--c-menthe); --rp-menthe-t: var(--c-menthe-t); --rp-beurre: var(--c-beurre); --rp-beurre-t: var(--c-beurre-t); --rp-lilas: var(--c-lilas);
  --rp-lilas-t: var(--c-lilas-t); --rp-peche: var(--c-peche); --rp-peche-t: var(--c-peche-t); --rp-serif: var(--serif); --rp-sans: var(--sans);
  --rp-shadow: var(--ombre); --rp-shadow-card: var(--ombre);
}
/* variables historiques des pages (pas sur les mots fléchés, qui ont leur propre style « Repaire ») */
html.rp:not([data-theme]) {
  --bg: #fbf4ea; --bg2: #fbf4ea; --card: #ffffff; --cell: #ffffff; --cell-fg: #22201c;
  --panel: rgba(34,32,28,.06); --panel2: rgba(34,32,28,.1); --fg: #22201c; --muted: #5b5349; --line: #22201c;
  --red: #b5321f; --bad: #b5321f; --focus: #b5321f; --good: #2b7350; --green: #2b7350; --blue: #d8e7f8;
  --word: #fbe7ad; --hl2: #f5cf58; --cb-border: rgba(34,32,28,.22);
  --grad: linear-gradient(#22201c, #22201c); --grad-fg: #ffffff; --grad-shadow: none;
  --accent: linear-gradient(#b5321f, #b5321f); --f-title: Georgia, "Times New Roman", "Noto Serif", FreeSerif, serif;
  background: #fbf4ea;
}
/* fond uni : plus de ronds décoratifs derrière le contenu */
html.rp:not([data-theme]) body { background: var(--c-creme); color: var(--c-encre); }

/* Firefox : les grilles « 1fr » grandissent jusqu'à la largeur de leur contenu ; colonnes bornées, jamais de défilement horizontal */
html.rp, html.rp body { overflow-x: clip; max-width: 100%; }
.rp .wrap, .rp #app, .rp main { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rp .wrap > *, .rp #app > *, .rp main > * { min-width: 0; }
.rp img, .rp svg, .rp canvas { max-width: 100%; }

/* =============================================================== icônes au trait (Jeux.ui) */
.ui { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ui.s { width: 20px; height: 20px; } .ui.xs { width: 16px; height: 16px; }

/* =============================================================== en-tête des pages de jeu (56 px)
   ← · vignette + titre (serif 17) + sous-titre (12) alignés à gauche · boutons au trait */
.rp header.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0; min-height: 56px; margin: 0; padding: 4px;
  border-bottom: 1px solid var(--c-filet); background: rgba(251,244,234,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rp .icon-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-ui); background: transparent; box-shadow: none;
  color: var(--c-encre); font-size: var(--t-4); line-height: 1; }
.rp .icon-btn:active { background: rgba(34,32,28,.08); transform: none; }
.rp header.top .title { flex: 1; min-width: 0; text-align: left; padding: 0 4px; }
.rp header.top .title b { display: block; font: 700 var(--t-3)/var(--l-3) var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.rp header.top .title.rp-fit b { font-size: 15px; }
.rp header.top .title small { display: block; font-size: var(--t-1); line-height: var(--l-1); color: var(--c-gris); white-space: normal; overflow: visible; font-variant-numeric: tabular-nums; }
.rp header.top .title small span { white-space: nowrap; }
.rp header.top .timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-encre); }
.rp header.top .title.rp-wi { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: start; align-items: center; column-gap: 8px; }
.rp header.top .title.rp-wi > :not(.rp-hico) { grid-column: 2; min-width: 0; }
.rp header.top .title.rp-wi > .rp-hico { grid-row: 1 / span 2; line-height: 0; }
.rp header.top .title.rp-wi.rp-noico { column-gap: 0; } .rp header.top .title.rp-wi.rp-noico > .rp-hico { display: none; }
@media (max-width: 400px) { .rp header.top.rp-crowded .rp-hico { display: none; } .rp header.top.rp-crowded .title.rp-wi { column-gap: 0; } }
.rp header.top .lvl { font-size: var(--t-1); border-radius: var(--r-ui); }

/* bandeau « jouez avec un profil » */
.rp #hint { margin: 8px 16px 0; padding: 4px 4px 4px 12px; min-height: 52px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-ui);
  background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); font-size: var(--t-1); line-height: var(--l-1); }
.rp #hint[hidden] { display: none; }
.rp #hint button { min-height: 44px; padding: 0 12px; border-radius: var(--r-ui); background: var(--c-encre); color: #fff; font-size: var(--t-2); font-weight: 700; box-shadow: none; }

/* =============================================================== boutons : principal (encre) / secondaire (bordé), droits, 48 px */
.rp .btn, .rp .jk-btn { min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  border: 0; border-radius: var(--r-ui); background: var(--c-encre); color: #fff; box-shadow: none; font: 700 var(--t-2)/var(--l-2) var(--sans); letter-spacing: 0; text-decoration: none; }
.rp .btn.ghost, .rp .jk-btn.ghost { background: var(--c-blanc); color: var(--c-encre); box-shadow: inset 0 0 0 1px var(--c-bord), var(--ombre); }
.rp .btn:active, .rp .jk-btn:active { transform: none; filter: brightness(.92); }
.rp .btn.small, .rp .jk-small-btn { min-height: 44px !important; font-size: var(--t-2) !important; }
.rp .btn:disabled, .rp .jk-btn:disabled { opacity: .45; }
.rp .btn .ui, .rp .jk-btn .ui { width: 20px; height: 20px; }
.rp .row-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.rp .row-btns > * { min-width: 0; }

/* =============================================================== sections, panneaux (droits, séparés par des filets) */
.rp .card { background: var(--c-blanc); border: 0; border-radius: var(--r-jeu); box-shadow: var(--ombre); padding: 16px; }   /* 3 nov. : comme les cartes de l'accueil */
.rp .muted { color: var(--c-gris); }
.rp .sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 var(--t-1)/var(--l-1) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-gris); }
.rp .kick { font: 700 var(--t-1)/var(--l-1) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-tomate); }

/* =============================================================== écran de départ des jeux (aligné à gauche) */
.rp .start { gap: 12px; text-align: left; justify-items: stretch; padding: 16px; }
.rp .start .rp-big, .rp .start .em { justify-self: start; line-height: 0; animation: none; }
.rp .start .tag { justify-self: start; display: inline-block; padding: 4px 8px; border-radius: var(--r-ui); background: var(--c-tomate); color: #fff; transform: none;
  font: 700 var(--t-1)/var(--l-1) var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.rp .start .tag.libre { background: var(--c-ciel); color: var(--c-ciel-t); }
.rp .start h2 { font: 700 var(--t-4)/var(--l-4) var(--serif); }
.rp .start p.muted { text-align: left; font-size: var(--t-2); line-height: var(--l-2); }
.rp .start .lead { font: 600 var(--t-3)/var(--l-3) var(--sans); color: var(--c-encre); text-align: left; }
.rp .start p.meta { justify-content: flex-start; font-size: var(--t-1); line-height: var(--l-1); }
.rp .start ul { margin: 0 0 0 18px; max-width: none; font-size: var(--t-2); line-height: var(--l-2); color: var(--c-encre); gap: 4px; }
.rp .start .btn { width: 100%; max-width: none; min-height: 52px; }

/* =============================================================== fenêtres : feuillets droits qui montent du bas, avec une poignée */
.rp .back, .rp .jk-back, .rp .backdrop, .rp .backdrop.center { background: rgba(34,32,28,.5); align-items: flex-end; justify-content: center; padding: 0; }
.rp .backdrop > .modal { margin: 0; }
.rp .modal, .rp .jk-box { width: 100%; max-width: 560px; max-height: calc(var(--app-h, 100dvh) - 24px); overflow-y: auto; display: grid; gap: 16px; text-align: left;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-ui) var(--r-ui) 0 0; background: var(--c-creme); color: var(--c-encre);
  box-shadow: 0 -1px 0 var(--c-filet); animation: rp-up .25s ease; }
.rp .modal::before, .rp .jk-box::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: var(--r-ui); background: var(--c-poignee); }
@keyframes rp-up { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 700px) {
  .rp .back, .rp .jk-back, .rp .backdrop, .rp .backdrop.center { align-items: center; padding: 16px; }
  .rp .modal, .rp .jk-box { max-width: 480px; border-radius: var(--r-ui); padding-bottom: 24px; }
  .rp .modal::before, .rp .jk-box::before { display: none; }
}
.rp .modal h3, .rp .jk-box h3 { font: 700 var(--t-4)/var(--l-4) var(--serif); text-align: left; }
.rp .modal p, .rp .jk-box p { color: var(--c-gris); font-size: var(--t-2); line-height: var(--l-2); text-align: left; }
.rp .modal .rules { text-align: left; gap: 8px; font-size: var(--t-2); line-height: var(--l-2); }
.rp .modal .rules p { color: var(--c-encre); }
.rp .modal .em, .rp .jk-guide-e, .rp .jk-inst-ico, .rp .bdg-big { text-align: left; justify-self: start; }
.rp .modal .answer { border: 0; border-radius: var(--r-jeu); background: var(--c-beurre); box-shadow: var(--ombre); text-align: center; }
.rp .modal .choices, .rp .modal .lens { gap: 8px; }
.rp .jk-box input, .rp .jk-box textarea, .rp .modal input { background: var(--c-blanc); border: 1px solid var(--c-bord); border-radius: var(--r-ui); font-size: 16px; }
.rp .jk-box input:focus, .rp .jk-box textarea:focus { border-color: var(--c-encre); outline: 2px solid var(--c-encre); outline-offset: -1px; }
.rp .jk-err { text-align: left !important; }
.rp .jk-small { font-size: var(--t-1) !important; line-height: var(--l-1); }
.rp-endico { justify-self: start; line-height: 0; }
/* en-tête de feuillet (posé par jeux-kit.js) : vignette 32 + titre serif 17 + sous-titre 12 · ✕ */
.rp .sh-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-filet); }
.rp .sh-h > .rp-ico, .rp .sh-h > .sh-e { flex: none; line-height: 0; }
.rp .sh-h > .sh-e { font-size: 28px; line-height: 32px; }
.rp .sh-h > div { flex: 1; min-width: 0; }
.rp .sh-h > div > b { display: block; font: 700 var(--t-3)/var(--l-3) var(--serif); overflow-wrap: anywhere; }
.rp .sh-h > div > small { display: block; font-size: var(--t-1); line-height: var(--l-1); color: var(--c-gris); }
.rp .sh-h .sh-x { flex: none; width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center; border-radius: var(--r-ui); color: var(--c-encre); background: none; border: 0; cursor: pointer; }
.rp .sh-r { position: relative; display: grid; gap: 4px; }
.rp .sh-r.won { padding-right: 112px; min-height: 44px; }
.rp .sh-r > h3 { margin: 0; }
.rp .sh-r .rp-stamp { right: 4px; top: 4px; transform: rotate(-10deg); font-size: var(--t-2); line-height: var(--l-2); padding: 4px 12px; border-width: 3px; }
/* avatars, choix d'humeur : réactions = émojis, cases droites */
.rp .jk-av { gap: 4px; }
.rp .jk-av button { border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); }
.rp .jk-av button.on { background: var(--c-beurre); box-shadow: inset 0 0 0 2px var(--c-tomate); }
.rp .jk-ess { background: var(--c-blanc); color: var(--c-encre); border-radius: var(--r-ui); border-top: 3px solid var(--c-beurre-v); padding: 12px 16px; gap: 8px; }
.rp .jk-ess-l b { font: 700 var(--t-1)/var(--l-1) var(--sans); letter-spacing: .08em; color: var(--c-gris); opacity: 1; }
.rp .jk-ess-l span { font: 600 var(--t-3)/var(--l-3) var(--sans); color: var(--c-encre); }
/* « En savoir plus » : le détail des règles, replié (ux3) */
.rp .jk-plus > summary { font: 700 var(--t-2)/var(--l-2) var(--sans); color: var(--c-encre); border-top: 1px solid var(--c-filet); }
.rp .jk-plus > div { font-size: var(--t-2); line-height: var(--l-2); }
.rp .jk-plus > div p { color: var(--c-encre); margin: 0; }
.rp .modal .rules.jk-plus, .rp .jk-plus .rules { gap: 8px; }
.rp .jk-guide { font-size: var(--t-2); line-height: var(--l-2); gap: 8px; }
.rp .jk-steps { background: var(--c-blanc); border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--c-filet); font-size: var(--t-2); }
.rp .jk-share { border-radius: var(--r-ui); }

/* =============================================================== fin de partie : gain d'XP, « Ce jeu vous a plu ? », suite */
.rp .jk-gain { display: grid; gap: 8px; padding: 12px; background: var(--c-blanc); border-radius: var(--r-ui); box-shadow: none; text-align: left; }
.rp .jk-gain .g-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.rp .jk-gain .big { font: 700 var(--t-4)/var(--l-4) var(--serif); color: var(--c-vert); text-align: left; }
.rp .jk-gain .big.zero { color: var(--c-gris); }
.rp .jk-gain .g-top span { font-size: var(--t-1); line-height: var(--l-1); color: var(--c-gris); }
.rp .jk-gain .lines { gap: 0; font-size: var(--t-1); line-height: var(--l-2); }
.rp .jk-gain .lines div { color: var(--c-gris); }
.rp .jk-gain .lines b { color: var(--c-encre); font-variant-numeric: tabular-nums; }
.rp .jk-gain .lines div.calc { margin: 2px 0 0; padding: 4px 8px; border-radius: var(--r-ui); background: var(--c-creme); }
.rp .jk-gain p { font-size: var(--t-1) !important; line-height: var(--l-1) !important; }
.rp .jk-bar { height: 4px; border-radius: var(--r-ui); background: var(--c-filet); }
.rp .jk-bar i { border-radius: var(--r-ui); background: var(--c-tomate); }
.rp .jk-lv { font-size: var(--t-1); line-height: var(--l-1); }
.rp .jk-up { background: var(--c-beurre); color: var(--c-beurre-t); border-radius: var(--r-ui); transform: none; font-size: var(--t-2); text-align: left; padding: 8px 12px; }
.rp .jk-badges { justify-content: flex-start; gap: 4px; }
.rp .jk-badges span { border-radius: var(--r-ui); background: var(--c-lilas); color: var(--c-lilas-t); box-shadow: none; font-size: var(--t-1); }
.rp .jk-fun { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0; background: none; border-radius: 0; font-size: var(--t-2); color: var(--c-encre); }
.rp .jk-fun > span { flex: 1 1 auto; }
.rp .jk-fun-row { width: auto; gap: 4px; justify-content: flex-start; }
.rp .jk-fun-row:has(input) { width: 100%; }
.rp .jk-fun-row button { width: 44px; height: 44px; border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); font-size: var(--t-4); }
.rp .jk-fun-row input { border-radius: var(--r-ui); border: 1px solid var(--c-bord); background: var(--c-blanc); }
.rp .jk-fun-row .jk-btn { width: auto; min-height: 44px; }
.rp .jk-end { display: grid; gap: 16px; }
.rp .jk-end-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.rp .jk-end-row > * { min-width: 0; padding: 0 8px !important; }
.rp .jk-end-row > :only-child { grid-column: 1 / -1; }
.rp .jk-end-row.n3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rp .jk-end-row.n3 > :last-child { grid-column: 1 / -1; }
.rp .jk-end2 { gap: 8px; }
.rp .jk-suite { display: grid; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; }
.rp .jk-suite > p { margin-bottom: 8px; text-align: left !important; font: 700 var(--t-1)/var(--l-1) var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gris) !important; }
.rp .jk-suite > p small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--c-gris); }
.rp .jk-suite a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 0;
  background: var(--c-blanc); border-top: 1px solid var(--c-filet); font-size: var(--t-2); color: var(--c-encre); text-decoration: none; }
.rp .jk-suite > p + a { border-top: 0; }
.rp .jk-suite a .rp-ico, .rp .jk-suite a .ui { line-height: 0; justify-self: center; }
.rp .jk-suite a small { font-size: var(--t-1); font-weight: 700; color: var(--c-gris); }
.rp .jk-suite a.hub { grid-template-columns: 32px minmax(0, 1fr); text-align: left; background: var(--c-blanc); color: var(--c-encre); font-weight: 700; }
.rp .jk-cta { background: var(--c-blanc); border: 0; border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--c-filet); text-align: left; font-size: var(--t-2); }
.rp .jk-players { border: 0; border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--c-filet); background: var(--c-blanc); padding: 12px; gap: 0; }
.rp .jk-players h3 { font: 700 var(--t-3)/var(--l-3) var(--serif); margin-bottom: 4px; }
.rp .jk-players div { border-radius: 0; border-top: 1px solid var(--c-filet); padding: 8px 4px; font-size: var(--t-2); }
.rp .jk-players div.moi { background: var(--c-beurre); }
.rp .jk-players small { font-size: var(--t-1); margin-top: 4px; }
/* avis, sondage éclair, catégories */
.rp .jk-mood { justify-content: flex-start; gap: 4px; }
.rp .jk-mood button { width: 48px; height: 48px; border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); font-size: var(--t-4); transform: none; }
.rp .jk-mood button.on { background: var(--c-beurre); box-shadow: inset 0 0 0 2px var(--c-tomate); transform: none; }
.rp .jk-cats { justify-content: flex-start; gap: 4px; }
.rp .jk-cats button { min-height: 44px; border-radius: var(--r-ui); border: 0; box-shadow: inset 0 0 0 1px var(--c-bord); background: var(--c-blanc); font-size: var(--t-2); }
.rp .jk-cats button.on { background: var(--c-encre); color: #fff; box-shadow: none; }
.rp .jk-pulse { border: 0; border-radius: var(--r-ui); background: var(--c-blanc); border-top: 3px solid var(--c-lilas-v); padding: 12px; font-size: var(--t-2); }
.rp .jk-pulse .x { width: 44px; height: 44px; border-radius: var(--r-ui); background: none; }
.rp .jk-pulse .jk-mood button { width: 44px; height: 44px; }
.rp .jk-toast, .rp .msg { background: var(--c-encre); color: #fff; border-radius: var(--r-ui); box-shadow: var(--ombre); font-size: var(--t-2); font-weight: 700; }

/* =============================================================== composants réutilisables */
/* tampon « RÉUSSI ✓ » : le seul objet penché au repos */
.rp-stamp { position: absolute; right: 8px; top: 8px; display: inline-block; transform: rotate(-8deg); border: 2px solid #b5321f; outline: 1px solid #b5321f;
  outline-offset: 2px; border-radius: 2px; padding: 4px 8px; background: rgba(255,255,255,.8); color: #b5321f;
  font: 800 12px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
/* étiquette droite (NOUVEAU, BONUS, EN ATTENTE…) */
.rp-tag { display: inline-block; padding: 4px 8px; border-radius: 8px; background: #fbe7ad; color: #6e4a00; box-shadow: inset 0 0 0 1px rgba(110,74,0,.22);
  font: 700 12px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rp-tag.blanc { background: rgba(255,255,255,.85); color: #22201c; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: #fff; color: #5b5349;
  font: 700 12px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.rp-chip.tomate { background: #b5321f; color: #fff; }
/* vignettes de jeux */
.rp-ico { display: inline-block; line-height: 0; flex: none; }
.rp-ico svg { display: block; }
/* segments de progression (carte bonus) */
.rp-segs { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; }
.rp-segs i { height: 4px; border-radius: 8px; background: #e6d9c8; }
.rp-segs i.on { background: #b5321f; }

/* notification de la mission du jour (d2) : bandeau sombre au-dessus de la barre du bas, coche verte, croix */
.jk-mt { position: fixed; left: 12px; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 80; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 8px 4px 8px 16px; border-radius: 2px; background: #22201c; color: #fff;
  box-shadow: 0 12px 28px -8px rgba(34,32,28,.6); font: 400 14px/20px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; animation: jkmt .35s cubic-bezier(.2,1.2,.5,1); transition: opacity .3s, transform .3s; }
.jk-mt.out { opacity: 0; transform: translateY(12px); }
@keyframes jkmt { from { opacity: 0; transform: translateY(24px); } }
.jk-mt-ok { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #2b7350; display: grid; place-items: center; }
.jk-mt-ok .ui { width: 20px; height: 20px; stroke-width: 2.6; color: #fff; }
.jk-mt > div { flex: 1; min-width: 0; display: grid; }
.jk-mt b { font-weight: 700; }
.jk-mt small { font-size: 12px; line-height: 16px; color: #e4dccd; }
.jk-mt-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 2px; background: none; color: #e4dccd; cursor: pointer; }
.jk-mt-x .ui { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .jk-mt { animation: none; } }

/* =============================================================== objets de jeu communs
   Touches = commandes (droites, 2 px, même hauteur partout) ; cases et tuiles = objets (14 px, une ombre) */
.rp .kbd { gap: 8px; background: none; border-radius: 0; box-shadow: none; }
.rp .kbd .r, .rp .kbd .row { gap: 4px; }
.rp .kbd .key, .rp .kbd button { height: 48px; border-radius: var(--r-key); font: 700 var(--t-3)/1 var(--sans); color: var(--c-encre); }
.rp .kbd .key:not(.g):not(.y):not(.n):not(.on), .rp .kbd button:not(.g):not(.y):not(.n):not(.on) { background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); }
.rp .kbd .key.g, .rp .kbd .key.y, .rp .kbd .key.n { box-shadow: none; }
.rp .kbd .key.wide { font-size: var(--t-1); letter-spacing: .02em; }
.rp .kbd .key:active, .rp .kbd button:active { transform: none; filter: brightness(.94); }
@media (max-height: 700px) { .rp .kbd .key, .rp .kbd button { height: 44px; } }
/* pavé numérique du sudoku et outils */
.rp .pad button { height: 52px; border-radius: var(--r-key); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); font-family: var(--sans); }
.rp .pad button:active { transform: none; filter: brightness(.94); }
@media (max-height: 720px) { .rp .pad button { height: 44px; } }
.rp .tool { min-height: 48px; border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-bord); color: var(--c-encre); font-size: var(--t-1); font-weight: 700; }
.rp .tool.on { background: var(--c-encre); color: #fff; box-shadow: none; }
/* rangées d'outils des pages */
.rp #app .tools, .rp #app .mode { gap: 8px; }
.rp #app .tools button.on, .rp #app .mode button.on { outline: 0; background: var(--c-encre); color: #fff; box-shadow: none; }
/* saisie et suggestions (villes, pays) */
.rp #app .ask input { border: 1px solid var(--c-bord); border-radius: var(--r-ui); background: var(--c-blanc); font-size: 16px; }
.rp #app .ask input:focus { border-color: var(--c-encre); outline: 2px solid var(--c-encre); outline-offset: -1px; }
.rp #app .sugg { gap: 0; }
.rp #app .sugg button { min-height: 48px; border-radius: 0; background: var(--c-blanc); border-top: 1px solid var(--c-filet); font-size: var(--t-2); }
.rp #app .sugg button:first-child { background: var(--c-beurre); border-top: 0; }
.rp #app .give { font-size: var(--t-1); }
/* indices (villes, pays) */
.rp #app .hints div { border-radius: var(--r-ui); background: var(--c-beurre); font-size: var(--t-1); }
.rp #app .hints div.lock { background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); }
/* étiquettes de mots trouvés */
.rp #app .chips span, .rp #app .words span { border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); }
.rp #app .chips span.new, .rp #app .chips span.top { background: var(--c-beurre); }
.rp #app .words span.ok { background: var(--c-menthe); box-shadow: none; }
.rp #app .lives, .rp #app .tries { font-size: var(--t-1); color: var(--c-gris); }
/* cartes géographiques = objets */
.rp #app .map { border: 0; border-radius: var(--r-jeu); box-shadow: var(--ombre); overflow: hidden; }

/* --- Le compte est bon : cible et plaques = objets ; opérations = commandes */
.rp #app .target { border: 0; border-radius: var(--r-jeu); background: var(--c-beurre); box-shadow: var(--ombre); padding: 8px 24px; }
.rp #app .target small { color: var(--c-beurre-t); }
.rp #app .plate { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); font-family: var(--sans); }
.rp #app .plate.big { background: var(--c-creme); box-shadow: var(--ombre), inset 0 0 0 1px var(--c-filet); }
.rp #app .plate.new { background: var(--c-ciel); }
.rp #app .plate.sel { background: var(--c-encre); color: #fff; transform: none; box-shadow: var(--ombre); }
.rp #app .plate.hit { background: var(--c-menthe); }
.rp #app .plate.empty { box-shadow: inset 0 0 0 1.5px var(--c-filet); background: transparent; }
.rp #app .ops { gap: 8px; }
.rp #app .op { aspect-ratio: auto; width: 100%; min-height: 48px; max-width: none; border-radius: var(--r-ui); background: var(--c-encre); color: #fff; box-shadow: none; font-size: var(--t-4); }
.rp #app .op.idle { background: var(--c-blanc); color: var(--c-encre); box-shadow: inset 0 0 0 1px var(--c-bord); }
.rp #app .op.sel { background: var(--c-tomate); color: #fff; transform: none; }
.rp #app .steps div { border-bottom: 1px solid var(--c-filet); }
/* --- Boggle : dés = objets */
.rp #app .grid > button:not(.c) { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .grid > button.on:not(.c) { background: var(--c-beurre-v); transform: none; }
.rp #app .grid > button.last:not(.c) { background: #f7b48c; }
.rp #app .clock .bar { height: 4px; border-radius: var(--r-ui); }
/* --- Le mot le plus long : lettres = objets */
.rp #app .draw .L { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .draw .L.v { background: var(--c-rose); }
.rp #app .word { border-bottom: 2px solid var(--c-encre); }
.rp #app .word .len { border-radius: var(--r-ui); }
/* --- L'échelle : cases = objets */
.rp #app .ladder .w i, .rp #app .ladder + .w i { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .w.start i { background: var(--c-ciel); } .rp #app .w.end i { background: var(--c-beurre); }
.rp #app .w.step i.ch, .rp #app .w.win i, .rp #app .w.edit i.ch { background: var(--c-menthe); }
.rp #app .w.edit i { box-shadow: var(--ombre), inset 0 0 0 1.5px var(--c-encre); }
.rp #app .w.edit i.sel { background: var(--c-beurre-v); transform: none; }
/* --- Classe-les, plus ou moins, villes et pays devinés : lignes = objets */
.rp #app .it { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .it.ok { background: var(--c-menthe); } .rp #app .it.ko { box-shadow: var(--ombre), inset 0 0 0 2px var(--c-tomate); }
.rp #app .it button { border-radius: var(--r-key); background: var(--c-creme); box-shadow: inset 0 0 0 1px var(--c-filet); }
.rp #app .duel button { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .duel button:active { transform: none; filter: brightness(.95); }
.rp #app .hist > div:has(small) { border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); }
.rp #app .hist > div.ko { background: #fbe3e3; }
.rp #app .guesses > .g, .rp #app .list > .g { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .guesses > .g.win, .rp #app .list > .g.win { background: var(--c-menthe); }
.rp #app .guesses > .g.empty, .rp #app .list > .g.empty { box-shadow: inset 0 0 0 1.5px var(--c-filet); background: none; }
/* --- Code secret : rangées = objets ; palette de couleurs = pièces */
.rp #app .rows > .row:has(> .pegs) { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .palette button { border-radius: var(--r-jeu); box-shadow: var(--ombre); }
/* --- Démineur, mots mêlés : la grille est l'objet (14 px), les cases restent presque carrées */
.rp #app .board { border-radius: var(--r-jeu); box-shadow: var(--ombre); overflow: hidden; }
.rp #app .board button { border-radius: var(--r-key); }
.rp #app .grid > i { border-radius: var(--r-key); background: var(--c-blanc); }
.rp #app .grid > i.sel { background: var(--c-beurre-v); }
/* --- Les paires : cartes = objets (dos comme le booster) */
.rp #app .cards button { border-radius: var(--r-jeu); box-shadow: var(--ombre); }
.rp #app .cards button:not(.up):not(.done) { background: var(--c-beurre) radial-gradient(circle, rgba(181,50,31,.2) 1.4px, transparent 1.8px) 0 0 / 13px 13px; border: 0; }
.rp #app .cards button:not(.up):not(.done)::after { color: var(--c-tomate); }
.rp #app .cards button.up { border: 0; background: var(--c-blanc); }
.rp #app .cards button.done { border: 0; background: var(--c-menthe); }
/* --- Les mots mélangés : lignes = objets */
.rp #app .list > .w { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); padding: 12px; }
.rp #app .list > .w.ok { background: var(--c-menthe); }
.rp #app .list > .w .mix i { border: 0; border-radius: var(--r-ui); background: var(--c-beurre); box-shadow: none; }
.rp #app .list > .w.ok .mix i { background: #fff; }
.rp #app .list > .w input { border: 1px solid var(--c-bord); border-radius: var(--r-ui); background: var(--c-blanc); }
.rp #app .list > .w .btn { min-height: 44px; }
/* --- Les 4 familles : mots et familles = objets */
.rp #app .words button { border-radius: var(--r-jeu); background: var(--c-blanc); color: var(--c-encre); box-shadow: var(--ombre); }
.rp #app .words button.on { background: var(--c-encre); color: #fff; transform: none; }
.rp #app .words button:not(.long):not(.xlong) { font-size: clamp(12px, 3.3vw, 15px); }
.rp #app .words button.long { font-size: clamp(12px, 2.9vw, 13px); letter-spacing: -.01em; }
.rp #app .fam { border-radius: var(--r-jeu); }
.rp #app .levels span { border-radius: var(--r-ui); }

/* --- Sudoku : la grille est l'objet (14 px) */
.rp #app .grid:has(> .c) { border-radius: var(--r-jeu); box-shadow: var(--ombre); overflow: hidden; }
/* --- Mots fléchés (style « Repaire ») : barre de définition = lecture, droite */
.rp[data-theme="repaire"] .cluebar { border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--c-filet); background: var(--c-blanc); }
.rp[data-theme="repaire"] .cluebar .nav { width: 44px; border-radius: var(--r-ui); }
.rp[data-theme="repaire"] .cluebar .cb { min-height: 44px; }
.rp[data-theme="repaire"] .sheet { border-radius: var(--r-ui) var(--r-ui) 0 0; background: var(--c-creme); box-shadow: 0 -1px 0 var(--c-filet); }
.rp[data-theme="repaire"] .sheet .grab { width: 40px; height: 4px; border-radius: var(--r-ui); background: var(--c-poignee); }
.rp[data-theme="repaire"] .sheet h3 { font: 700 var(--t-3)/var(--l-3) var(--serif); }
.rp[data-theme="repaire"] .opt { border-radius: var(--r-ui); background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-filet); }
@media (min-width: 700px) { .rp[data-theme="repaire"] .sheet { border-radius: var(--r-ui); } }

/* --- réponses à minuit (pierre-feuille-ciseaux…) : choix = pièces de jeu */
.rp #app .opts button { border: 0; border-radius: var(--r-jeu); background: var(--c-blanc); box-shadow: var(--ombre); }
.rp #app .opts button.on { background: var(--c-beurre); box-shadow: var(--ombre), inset 0 0 0 2px var(--c-tomate); }
.rp #app .verdict { border-radius: var(--r-ui); }
.rp #app .bars i { border-radius: var(--r-ui); }

/* --- encadrés des jeux de la communauté */
.rp .end { border: 0; border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--c-filet); background: var(--c-blanc); }
.rp .board-players { border: 0; border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--c-filet); }

/* =============================================================== ux3b (27 oct.) : briques communes « montrer plutôt qu'expliquer »
   Jeux.jauge() = objectif + rail de cases ; Jeux.say() = consigne de quelques mots ; Jeux.arm() = action en deux appuis. */
.ux-goal { display: flex; align-items: center; gap: 8px; min-height: 32px; font: 600 14px/20px var(--sans); color: var(--c-gris); }
.ux-goal .ux-lb { white-space: nowrap; }
.ux-goal .ux-ic { display: grid; flex: none; color: var(--c-encre); }
.ux-goal .ux-ic svg { width: 18px; height: 18px; }
.ux-pips { display: flex; gap: 4px; flex: 1; min-width: 40px; max-width: 200px; }
.ux-pips i { flex: 1; height: 8px; border-radius: var(--r-ui); background: rgba(34,32,28,.12); }
.ux-pips i.on { background: var(--c-vert); }
.ux-pips i.full { background: var(--c-encre); }
.ux-pips i.warn, .ux-pips i.over { background: var(--c-tomate); }
.ux-pips.bar { position: relative; height: 8px; border-radius: var(--r-ui); background: rgba(34,32,28,.12); overflow: hidden; }
.ux-pips.bar > i { position: absolute; left: 0; top: 0; bottom: 0; height: auto; flex: none; }
.ux-goal .ux-n { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ux-goal .ux-n b { color: var(--c-encre); }
.ux-say { min-height: 24px; text-align: center; font: 600 15px/24px var(--sans); color: var(--c-encre); }
.ux-say.ko { color: var(--c-tomate); }
.ux-say.ok { color: var(--c-vert); }
.ux-shake { animation: ux-shake .4s; }
@keyframes ux-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ux-arm { box-shadow: inset 0 0 0 2px var(--c-tomate) !important; color: var(--c-tomate) !important; background: var(--c-blanc) !important; font-weight: 700; }   /* lisible aussi sur un bouton plein */
html.dalto .ux-pips i.on { background: #1d4a82; }
html.dalto .ux-pips i.warn, html.dalto .ux-pips i.over { background: #d55e00; }
html.dalto .ux-say.ko { color: #a14400; }
html.dalto .ux-say.ok { color: #1d4a82; }

/* =============================================================== télé : contour de focus bien visible */
.rp.tv button:focus, .rp.tv a:focus, .rp.tv summary:focus, .rp.tv input:focus, .rp.tv [tabindex="0"]:focus { outline: 4px solid var(--c-tomate); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rp .modal, .rp .jk-box { animation: none; } }

/* ---------- Plateaux standard (3 nov., demande du propriétaire : « pour TOUS les jeux, des cases et boutons standard, qui parlent
   aux joueurs ») : les pièces de jeu reprennent l'apparence classique de leur jeu ; le style du Repaire reste pour l'interface autour.
   Picross, sudoku, mot du jour et mots fléchés gardent leur style d'origine (déjà standard). */
/* Démineur classique : cases grises en relief, cases ouvertes plates, chiffres aux couleurs habituelles */
html.rp #app .board { border-radius: 0; box-shadow: none; overflow: visible; gap: 0 !important; padding: 0; background: #7b7b7b;
  border: 3px solid; border-color: #7b7b7b #fff #fff #7b7b7b; }
html.rp #app .board button { border-radius: 0; background: #c0c0c0; box-shadow: inset -3px -3px 0 #7b7b7b, inset 3px 3px 0 #fff;
  font: 800 clamp(14px, 4.6vw, 20px)/1 Tahoma, Verdana, Arial, sans-serif; color: #000; }
html.rp #app .board button.o, html.rp #app .board button.m { background: #d6d6d6; box-shadow: inset 0 0 0 .5px #8a8a8a; }
html.rp #app .board button.x { background: #ff1a1a; box-shadow: inset 0 0 0 .5px #8a8a8a; }
html.rp #app .board button.fl { color: #e00000; }
html.rp #app .board .n1 { color: #0000ff; } html.rp #app .board .n2 { color: #008000; } html.rp #app .board .n3 { color: #ff0000; } html.rp #app .board .n4 { color: #000080; }
html.rp #app .board .n5 { color: #800000; } html.rp #app .board .n6 { color: #008080; } html.rp #app .board .n7 { color: #000; } html.rp #app .board .n8 { color: #808080; }
/* Mots mêlés : des lettres sur une feuille, sans tuiles (sélection et mots trouvés surlignés comme avant) */
html.rp #app .grid:has(> i) { background: #fff; border: 1px solid #d6d0c4; border-radius: 4px; padding: 6px; gap: 0; }
html.rp #app .grid > i { border-radius: 0; background: transparent; box-shadow: none; }
html.rp #app .grid > i.sel { background: #ffe08a; }
/* Code secret : pions ronds */
html.rp #app .palette button { border-radius: 50%; }
/* Lettres (échelle, mots mélangés) : tuiles carrées à peine arrondies, comme des lettres de jeu */
html.rp #app .ladder .w i, html.rp #app .ladder + .w i, html.rp #app .list > .w .mix i { border-radius: 4px; }