/* Mots Compostés — feuille de style */
:root {
  --fond: #f4efe3;
  --fond-2: #e9e0cc;
  --encre: #2e2a22;
  --encre-douce: #6b6352;
  --vert: #3d5a3a;
  --vert-clair: #5f7f4f;
  --case: #e8dfc8;
  --case-bord: #d6caae;
  --mt: #b5532f;   /* mot triple : terre cuite */
  --md: #d99a6c;   /* mot double : argile */
  --lt: #2f6f6a;   /* lettre triple : vert d'eau profond */
  --ld: #9cc0a8;   /* lettre double : sauge */
  --tuile: #f6d99a;
  --tuile-bord: #c79d4f;
  --tuile-pose: #ffe9a8;
  --tuile-dernier: #fff2c4;
  --rouge: #a33a2a;
  --feuille: #4f8a3a;
  --astuce-fond: #eef4e3;
  --astuce-bord: #9cc0a8;
  --ombre: 0 2px 6px rgba(40, 30, 10, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --feuille: #8cc56c; --astuce-fond: #2c3a27; --astuce-bord: #4f6b45;
    --fond: #1f231d; --fond-2: #2a3026; --encre: #efe8d6; --encre-douce: #b5ad99;
    --case: #343a2f; --case-bord: #2a2f25; --vert: #7fa36e; --vert-clair: #93b783;
    --rouge: #e07a66; --ombre: 0 2px 6px rgba(0,0,0,.45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --feuille: #8cc56c; --astuce-fond: #2c3a27; --astuce-bord: #4f6b45;
    --fond: #1f231d; --fond-2: #2a3026; --encre: #efe8d6; --encre-douce: #b5ad99;
    --case: #343a2f; --case-bord: #2a2f25; --vert: #7fa36e; --vert-clair: #93b783;
    --rouge: #e07a66; --ombre: 0 2px 6px rgba(0,0,0,.45); color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond); color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; }
.ecran { display: none; height: 100%; flex-direction: column; }
.ecran.actif { display: flex; }
[hidden] { display: none !important; }

/* Boutons */
.btn {
  border: 1px solid var(--case-bord); background: var(--fond-2); color: var(--encre);
  border-radius: 12px; padding: 12px 16px; font-size: 1rem; cursor: pointer; min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn.principal { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.btn.discret { background: transparent; border-color: transparent; color: var(--encre-douce); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.large { width: 100%; margin-top: 12px; }
.btn.petit { padding: 6px 4px; font-size: .85rem; line-height: 1.15; min-height: 44px; flex: 1; border-radius: 10px; }

/* Accueil */
.accueil { margin: auto; padding: 12px 24px 20px; max-width: 420px; width: 100%; text-align: center; }
.logo { display: flex; justify-content: center; gap: 5px; margin: 2px 0 8px; }
.logo .tuile { width: 38px; height: 38px; font-size: 1.4rem; transform: rotate(-3deg); }
.logo .tuile:nth-child(2) { transform: rotate(2deg) translateY(-4px); }
.logo .tuile:nth-child(3) { transform: rotate(-1deg); }
.logo .tuile:nth-child(4) { transform: rotate(4deg) translateY(-2px); }
.logo .tuile:nth-child(5) { transform: rotate(-2deg) translateY(-3px); }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; margin: 6px 0 4px; color: var(--vert); }
.sous-titre { color: var(--encre-douce); margin: 0 0 18px; line-height: 1.4; }
.menu { display: flex; flex-direction: column; gap: 10px; }

/* Barres */
.barre { display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--vert); color: #fff; }
.barre h2 { margin: 0; font-size: 1.15rem; }
.retour { background: none; border: none; color: #fff; font-size: 1.1rem; padding: 8px; min-width: 44px; min-height: 44px; cursor: pointer; }
.contenu { padding: 16px; overflow-y: auto; max-width: 520px; width: 100%; margin: 0 auto; }
.aide { color: var(--encre-douce); font-size: .92rem; line-height: 1.4; }
.option { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: .95rem; }
.option input { width: 22px; height: 22px; accent-color: var(--vert); }

/* Réglages joueurs */
.joueur { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.joueur input, .joueur select {
  font: inherit; font-size: 1rem; padding: 10px; border-radius: 10px; border: 1px solid var(--case-bord);
  background: var(--fond-2); color: var(--encre); min-height: 44px; min-width: 0;
}
.joueur input { flex: 1; }
.joueur select { flex: 0 0 55%; font-size: .95rem; padding-inline: 8px; }
.joueur .suppr { background: none; border: none; font-size: 1.3rem; color: var(--encre-douce); min-width: 36px; min-height: 44px; cursor: pointer; }

/* Jeu */
.barre.jeu { padding: 4px 6px; padding-top: max(4px, env(safe-area-inset-top)); gap: 4px; }
.scores { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
.score { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.12); font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score b { display: block; font-size: 1.05rem; }
.score .avatar-score { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 4px; object-fit: cover; object-position: center 20%; background: #f6e4cf; }
.score.actif { background: #fff; color: var(--vert); box-shadow: var(--ombre); }
.sac { font-size: .9rem; padding: 0 6px; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.sac .bioseau { width: 20px; height: 20px; }

.zone-plateau { flex: 1; overflow: auto; display: flex; align-items: safe center; justify-content: center; padding: 4px; min-height: 0; }
.plateau {
  --taille: min(calc(100vw - 8px), calc(100dvh - 250px), 640px);
  width: var(--taille); height: var(--taille); flex: none;
  display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); gap: 1px;
  background: var(--case-bord); border: 2px solid var(--case-bord); border-radius: 6px;
  font-size: calc(var(--taille) / 15 * .5);
}
.zoom .plateau { --taille: 165vw; margin: 0 auto; }
@media (min-aspect-ratio: 3/4) { .zoom .plateau { --taille: min(165vw, 160dvh); } }
.case {
  position: relative; background: var(--case); display: flex; align-items: center; justify-content: center;
  font-size: .5em; font-weight: 700; line-height: 1; text-align: center; color: rgba(255,255,255,.95); overflow: hidden;
}
.case.T { background: var(--mt); }
.case.D { background: var(--md); }
.case.t { background: var(--lt); }
.case.d { background: var(--ld); color: #1f3a2a; }
/* la case d'Hector, au centre */
.case.centre::after {
  content: ""; position: absolute; inset: 7%; border-radius: 50%;
  background: #f6e4cf url(img/hector-tete.webp) center 18% / 125% no-repeat;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8);
}
.case.cible { outline: 2px dashed var(--vert); outline-offset: -3px; }

.tuile {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--tuile); border: 1px solid var(--tuile-bord); border-radius: 12%;
  color: #2b2113; font-weight: 700; font-family: Georgia, "Times New Roman", serif; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.tuile sub { position: absolute; right: 7%; bottom: 4%; font-size: .38em; font-family: system-ui, sans-serif; }
.case .tuile { position: absolute; inset: 0; font-size: 2em; border-radius: 10%; }
.case .tuile.joker { color: #4f7a3f; font-style: italic; }
/* un ver de terre posé garde une petite marque verte */
.case .tuile.joker::after {
  content: ""; position: absolute; right: 6%; bottom: 8%; width: 36%; height: 22%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M7 29 C 15 15, 25 35, 35 23 S 49 13, 55 19' fill='none' stroke='%237fa36e' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M7 29 C 15 15, 25 35, 35 23 S 49 13, 55 19' fill='none' stroke='%23d9ead2' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tuile .ver { width: 82%; height: auto; }
.glisse .ver { width: 82%; }
.case .tuile.pose { background: var(--tuile-pose); border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert) inset; }
.case .tuile.dernier { background: var(--tuile-dernier); }

.message { min-height: 1.6em; text-align: center; font-size: .92rem; padding: 2px 8px; color: var(--encre-douce); }
.message.erreur { color: var(--rouge); font-weight: 600; }
.message.bravo { color: var(--vert); font-weight: 600; }

.chevalet-zone { padding: 2px 8px; }
.chevalet { display: flex; justify-content: center; gap: 5px; min-height: 54px; padding: 5px; border-radius: 10px; background: #8a6a3e; box-shadow: inset 0 -4px 0 #6d522c; }
.chevalet .tuile { width: min(12vw, 52px); height: min(12vw, 52px); font-size: min(7vw, 30px); cursor: grab; touch-action: none; }
.chevalet .tuile.choisie { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--vert), var(--ombre); }
.chevalet .tuile.vide { visibility: hidden; }
.petit-chevalet { flex-wrap: wrap; background: var(--fond-2); box-shadow: none; }
.petit-chevalet .tuile.choisie { opacity: .35; transform: none; }

.actions { display: flex; gap: 5px; padding: 6px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }

.glisse { position: fixed; z-index: 50; width: 52px; height: 52px; font-size: 30px; pointer-events: none; transform: translate(-50%, -75%); box-shadow: var(--ombre); opacity: .95; }

/* Fenêtres */
.voile { position: fixed; inset: 0; background: rgba(20, 15, 5, .5); z-index: 20; }
.fenetre {
  position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 440px); max-height: 88dvh; overflow: auto; background: var(--fond); border-radius: 16px;
  padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px;
}
.fenetre h3 { margin: 0 0 4px; font-family: Georgia, serif; color: var(--vert); }
.fenetre.plein { inset: 0; transform: none; width: auto; max-height: none; border-radius: 0; background: var(--vert); color: #fff; justify-content: center; }
.cache-contenu { text-align: center; max-width: 360px; margin: 0 auto; width: 100%; }
.cache-contenu h2 { font-size: 2rem; margin: 6px 0 14px; }
.fenetre.plein .aide { color: rgba(255,255,255,.85); }
.fenetre.plein .btn.principal { background: #fff; color: var(--vert); }
.grille-lettres { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.grille-lettres button { aspect-ratio: 1; font-size: 1.3rem; padding: 0; }
.ligne-btn { display: flex; gap: 8px; justify-content: flex-end; }
.texte-defilant { overflow-y: auto; line-height: 1.5; font-size: .95rem; user-select: text; -webkit-user-select: text; }
.texte-defilant h4 { margin: 14px 0 4px; color: var(--vert); }
.texte-defilant table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.texte-defilant td, .texte-defilant th { padding: 4px 6px; border-bottom: 1px solid var(--case-bord); text-align: left; }
.texte-defilant td.n { text-align: right; font-variant-numeric: tabular-nums; }
.form-mot { display: flex; gap: 8px; }
.form-mot input { flex: 1; min-width: 0; font-size: 1.2rem; padding: 10px; border-radius: 10px; border: 1px solid var(--case-bord); background: var(--fond-2); color: var(--encre); text-transform: uppercase; user-select: text; }
.resultat-mot { font-size: 1.1rem; font-weight: 600; min-height: 1.5em; margin: 4px 0; }
.resultat-mot.oui { color: var(--vert); }
.resultat-mot.non { color: var(--rouge); }
.legende { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.legende span.c { width: 22px; height: 22px; border-radius: 4px; display: inline-block; }

/* Bonus du jardin */
.case .tuile.jardin::before {
  content: ""; position: absolute; left: 7%; top: 7%; width: 24%; height: 24%;
  background: var(--feuille); border-radius: 0 75% 0 75%;
}
.chevalet-zone { position: relative; }
.astuce {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 5;
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  background: var(--astuce-fond); border: 1px solid var(--astuce-bord); border-radius: 12px;
  box-shadow: var(--ombre); font-size: .88rem; line-height: 1.35; cursor: pointer;
}
.astuce b { color: var(--feuille); }
.astuce p { margin: 3px 0 0; }
.astuce .sv { font-weight: 600; }
.astuce .avatar-hector { flex: none; width: 40px; height: 40px; }
.astuce.entre { animation: pousse .35s ease-out; }
@keyframes pousse { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .astuce.entre { animation: none; } }
.option .aide { font-size: .85rem; }

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

/* Hector, la mascotte */
:root { --bulle-fond: #fffaf0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bulle-fond: #2c3a27; } }
:root[data-theme="dark"] { --bulle-fond: #2c3a27; }
.avatar-hector {
  border-radius: 50%; object-fit: cover; object-position: center 20%;
  background: #f6e4cf; box-shadow: 0 0 0 2px var(--astuce-bord);
}
.avatar-hector.grand { width: 84px; height: 84px; box-shadow: 0 0 0 3px #fff; margin-bottom: 6px; }
.hector-scene { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.hector-accueil { width: min(56vw, 215px, 27vh); height: auto; display: block; }
.bulle {
  position: relative; background: var(--bulle-fond); color: var(--encre);
  border: 1px solid var(--astuce-bord); border-radius: 14px; padding: 8px 12px;
  font-size: .92rem; line-height: 1.3; box-shadow: var(--ombre); margin: 0;
}
.bulle-accueil { align-self: flex-end; margin-right: 4%; margin-bottom: 8px; max-width: 220px; text-align: left; }
.bulle-accueil::after {
  content: ""; position: absolute; bottom: -8px; left: 38%; width: 14px; height: 14px;
  background: var(--bulle-fond); border-right: 1px solid var(--astuce-bord); border-bottom: 1px solid var(--astuce-bord);
  transform: rotate(45deg);
}
.bulle-fin { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.bulle-fin .avatar-hector { flex: none; width: 52px; height: 52px; }
.bulle-fin .bulle { flex: 1; }
.tuile-ver { background: #eef4e3; }
@media (prefers-reduced-motion: no-preference) {
  .hector-accueil { animation: hector 3.2s ease-in-out infinite; transform-origin: 60% 100%; }
  @keyframes hector { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.5deg) translateY(-2px); } }
}