/* ═══════════════════════════════════════════════════════════════════
   Dominos — habillage commun (table de jeu, vraies tuiles, chaîne en boucle)
   Chargé APRÈS le <style> de la page : il le complète et le surcharge.
   Les animations (pose, correction, chute finale) sont dans dominos-fx.js.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --dm-ivoire-1:#fffdf6;
  --dm-ivoire-2:#efe7d2;
  --dm-ivoire-bord:#cbbf9f;
  --dm-encre:#1c1712;
  --dm-encre-douce:#3d342a;
  --dm-laiton:#d4a73a;
  --dm-laiton-fonce:#8a6416;
  --dm-feutre-1:#1e7a4c;
  --dm-feutre-2:#0f5434;
  --dm-feutre-3:#0a3d26;
  --dm-bois-1:#7a4a24;
  --dm-bois-2:#5a3418;
  --dm-bois-3:#3f230f;
  --dm-ok:#34d399;
  --dm-ko:#f87171;
}

/* ── Titre et consigne : bandeau sombre, lisible sous tous les thèmes ── */
html body > header:not(.fv-header){
  margin-top:10px;
  background:linear-gradient(180deg,rgba(15,20,40,.92),rgba(12,16,32,.9));
  border:1px solid rgba(212,167,58,.35);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:14px 18px 16px;
  box-sizing:border-box;
}
html body > header:not(.fv-header) h1{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:.2px;
  color:#fde9b0 !important;
  -webkit-text-fill-color:#fde9b0 !important;
  text-shadow:0 2px 0 rgba(0,0,0,.45) !important;
}
html body > header:not(.fv-header) .help,
html body > header:not(.fv-header) .help *{
  color:#dfe6ff !important;
  -webkit-text-fill-color:#dfe6ff !important;
  text-shadow:none !important;
}
html body > header:not(.fv-header) .help strong{
  color:#fde9b0 !important;
  -webkit-text-fill-color:#fde9b0 !important;
}
html body > header:not(.fv-header) .help{ font-size:15px; line-height:1.5; margin-top:10px; }

/* ── La table : cadre en bois, tapis de feutre ── */
html body .board{
  position:relative;
  border:16px solid transparent;
  border-radius:22px;
  padding:22px 24px 24px;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--dm-feutre-1),var(--dm-feutre-2) 60%,var(--dm-feutre-3)) padding-box,
    repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px) border-box,
    repeating-linear-gradient(88deg,rgba(0,0,0,.12) 0 1px,transparent 1px 13px) border-box,
    linear-gradient(180deg,var(--dm-bois-1),var(--dm-bois-2) 55%,var(--dm-bois-3)) border-box;
  box-shadow:
    inset 0 3px 26px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.5),
    0 18px 40px rgba(0,0,0,.35);
}
/* grain du feutre */
html body .board::before{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;z-index:0;
  background:
    repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    radial-gradient(80% 60% at 50% 10%,rgba(255,255,255,.08),transparent 70%);
}
html body .board .mini{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#cfe9d9 !important;-webkit-text-fill-color:#cfe9d9 !important;
  opacity:1;margin:0 0 12px;
}

/* ── La chaîne : cases en creux, piste en boucle (dessinée par dominos-fx.js) ── */
html body .zones{
  position:relative;
  gap:30px 34px;
  padding:14px 6px;
}
html body .zone{
  border:0;
  border-radius:14px;
  background:radial-gradient(120% 120% at 50% 0%,#11502f,#0b3f25);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.25);
  overflow:visible;
  z-index:2;
}
html body .zone .placeholder{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:800;font-size:15px;
  color:rgba(220,240,228,.55) !important;
  -webkit-text-fill-color:rgba(220,240,228,.55) !important;
  border:2px solid rgba(220,240,228,.22);
}
html body .zone.start-zone{ border:0; box-shadow:inset 0 3px 10px rgba(0,0,0,.45); }
html body .zone.start-zone::after{
  top:-12px;left:10px;z-index:30;
  background:linear-gradient(180deg,#f8d47a,var(--dm-laiton));
  color:#2a1c04 !important;-webkit-text-fill-color:#2a1c04 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* piste : rectangle arrondi qui passe par le centre de toutes les cases */
.dm-piste{
  position:absolute;z-index:1;pointer-events:none;
  border:3px dashed rgba(253,233,176,.28);
  border-radius:40px;
}
/* jonctions entre deux dominos consécutifs : chevron = sens de lecture */
.dm-jonction{
  position:absolute;z-index:3;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#f8dc8c,var(--dm-laiton) 55%,var(--dm-laiton-fonce));
  box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 -2px 2px rgba(0,0,0,.25);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.dm-jonction i{
  display:block;width:8px;height:8px;
  border-right:3px solid #3a2706;border-bottom:3px solid #3a2706;
  transform:translateX(-1px) rotate(-45deg);
}
.dm-jonction.ok{
  background:radial-gradient(circle at 35% 30%,#b9f6dc,var(--dm-ok) 55%,#047857);
  box-shadow:0 0 0 4px rgba(52,211,153,.25),0 0 16px rgba(52,211,153,.8);
  transform:scale(1.25);
}
.dm-jonction.ko{
  background:radial-gradient(circle at 35% 30%,#fecaca,var(--dm-ko) 55%,#b91c1c);
  box-shadow:0 0 0 4px rgba(248,113,113,.25),0 0 16px rgba(248,113,113,.8);
  transform:scale(1.25);
}
.dm-jonction.ok i,.dm-jonction.ko i{ display:none; }
.dm-jonction.ok::after{ content:"✓"; font-weight:900; font-size:15px; color:#053b2a; }
.dm-jonction.ko::after{ content:"✗"; font-weight:900; font-size:15px; color:#4c0606; }

/* ── Les tuiles : ivoire, relief, séparation noire et rivet de laiton ── */
html body .domino{
  border-radius:12px;
  border:1px solid var(--dm-ivoire-bord);
  background:
    radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.9),transparent 55%),
    linear-gradient(180deg,var(--dm-ivoire-1),var(--dm-ivoire-2));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 0 rgba(120,100,60,.18),
    0 4px 0 #b9ab86,
    0 6px 0 #9d8f6b,
    0 12px 18px rgba(0,0,0,.4);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.3),box-shadow .18s ease,filter .18s ease;
  min-height:62px;
}
html body .domino .half{ position:relative; padding:10px 8px; }
/* un calcul ne se coupe jamais au milieu d'un nombre (« 6000÷1 / 0 ») */
html body .domino .half.right,
html body .zone .domino .half.right{
  white-space:nowrap; word-break:normal; overflow-wrap:normal;
  font-size:.95em; letter-spacing:-.2px; font-variant-numeric:tabular-nums;
}
html body .domino .half.left strong{ font-size:1.45em; }
html body .domino .half,
html body .domino .half *{
  color:var(--dm-encre) !important;
  -webkit-text-fill-color:var(--dm-encre) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9) !important;
}
html body .domino .half.right,
html body .domino .half.right *{
  color:var(--dm-encre-douce) !important;
  -webkit-text-fill-color:var(--dm-encre-douce) !important;
}
html body .domino .split{
  position:relative;width:0;margin:8px 0;
  border-left:3px solid #1c1712;opacity:.9;
  box-shadow:1px 0 0 rgba(255,255,255,.7);
}
html body .domino .split::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -7.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fbe7a8,var(--dm-laiton) 50%,var(--dm-laiton-fonce));
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
html body .domino .half.right.dm-long{ font-size:.82em; letter-spacing:-.4px; }
/* fractions (dominos 6 à 8) : barre de fraction à l'encre, pas en blanc sur l'ivoire */
html body .domino .frac .bar{ background:var(--dm-encre) !important; opacity:.85; }
/* ligne du bas (lue de droite à gauche) : tuile retournée, calcul à gauche */
html body .zone.dm-retour .domino{ flex-direction:row-reverse; }
html body .zone.dm-retour .domino .split{ box-shadow:-1px 0 0 rgba(255,255,255,.7); }
/* tuile posée : elle garde son relief */
html body .domino.in-slot{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 0 rgba(120,100,60,.18),
    0 3px 0 #b9ab86,
    0 8px 14px rgba(0,0,0,.4);
}
html body .domino.locked-start{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 3px 0 #b9ab86,
    0 0 0 3px var(--dm-laiton),
    0 0 18px rgba(212,167,58,.55),
    0 8px 14px rgba(0,0,0,.4);
}
/* tuile prise en main : elle se soulève */
html body .domino.selected{
  outline:none;filter:none;
  transform:translateY(-8px) scale(1.05) rotate(-1.2deg);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 0 0 3px #7dd3fc,
    0 0 22px rgba(125,211,252,.7),
    0 22px 26px rgba(0,0,0,.45);
  z-index:20;
}
@media (hover:hover){
  html body .rack .domino:hover:not(.selected){ transform:translateY(-3px); }
}
/* pose : petit rebond */
html body .domino.dm-pose{ animation:dmPose .36s cubic-bezier(.2,.9,.3,1.4); }
@keyframes dmPose{
  0%{ transform:translateY(-14px) scale(1.08); }
  60%{ transform:translateY(2px) scale(.98); }
  100%{ transform:none; }
}
/* correction : la tuile s'illumine au passage du balayage */
html body .domino.dm-balaye{ animation:dmBalaye .45s ease; }
@keyframes dmBalaye{
  0%,100%{ filter:none; }
  40%{ filter:brightness(1.12) drop-shadow(0 0 10px rgba(253,233,176,.9)); }
}

/* ── Chute finale : l'effet domino ── */
html body .domino.dm-tombe{
  animation:dmTombe 1.15s cubic-bezier(.55,0,.4,1) forwards;
  transform-origin:50% 100%;
}
@keyframes dmTombe{
  0%{ transform:perspective(500px) rotateX(0); }
  38%{ transform:perspective(500px) rotateX(78deg) translateY(6px); filter:brightness(.8); }
  55%{ transform:perspective(500px) rotateX(70deg) translateY(4px); }
  100%{ transform:perspective(500px) rotateX(0); filter:none;
        box-shadow:inset 0 2px 0 rgba(255,255,255,.95),0 0 0 3px var(--dm-laiton),0 0 22px rgba(212,167,58,.7),0 8px 14px rgba(0,0,0,.4); }
}
.dm-bravo{
  position:absolute;left:50%;top:50%;z-index:40;pointer-events:none;
  transform:translate(-50%,-50%) scale(.6);opacity:0;
  padding:16px 28px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,14,4,.92),rgba(40,28,8,.92));
  border:2px solid var(--dm-laiton);
  box-shadow:0 0 40px rgba(212,167,58,.55),0 20px 40px rgba(0,0,0,.5);
  text-align:center;white-space:nowrap;
  animation:dmBravo .6s cubic-bezier(.2,.9,.3,1.3) forwards;
}
.dm-bravo b{ display:block;font-size:26px;color:#fde9b0 !important;-webkit-text-fill-color:#fde9b0 !important; }
.dm-bravo span{ font-size:15px;color:#e7dcc0 !important;-webkit-text-fill-color:#e7dcc0 !important; }
@keyframes dmBravo{ to{ transform:translate(-50%,-50%) scale(1);opacity:1; } }

/* ── La pioche : une boîte en bois ── */
html body .rack{
  margin-top:10px;
  padding:16px;
  border-radius:14px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 11px),
    linear-gradient(180deg,#4a2a12,#5c3618);
  box-shadow:inset 0 4px 14px rgba(0,0,0,.55),inset 0 -2px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.12);
  gap:14px;
  min-height:70px;
}

/* bouton son */
.dm-son{
  margin-left:auto;
  background:rgba(0,0,0,.25) !important;color:#e5ecff !important;
  border:1px solid rgba(255,255,255,.2) !important;
}

/* ── Écran étroit (téléphone, iPad portrait) ── */
@media (max-width:820px){
  html body .zones{ gap:26px 30px; }
  html body .zone{ aspect-ratio:3/1.05; }
  html body .board{ border-width:10px; padding:16px 14px; }
}

/* ── Mouvements réduits : on garde les couleurs, pas les mouvements ── */
@media (prefers-reduced-motion:reduce){
  html body .domino,html body .domino.selected{ transition:none; }
  html body .domino.dm-pose,html body .domino.dm-balaye,html body .domino.dm-tombe{ animation:none; }
}

/* ── Bouton Valider, sous la chaîne ── */
.dm-valider-zone{ display:flex; justify-content:center; margin:6px 0 4px; position:relative; z-index:5; }
html body #validate.dm-valider{
  min-width:280px; min-height:52px; margin:0; padding:12px 26px;
  border-radius:999px; font-size:17px; font-weight:800; letter-spacing:.2px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28) !important;
  color:rgba(230,240,235,.75) !important; -webkit-text-fill-color:rgba(230,240,235,.75) !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
  cursor:default;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease;
}
html body #validate.dm-valider.pret{
  cursor:pointer;
  border-color:#fbe7a8;
  background:linear-gradient(180deg,#fbe7a8,var(--dm-laiton) 55%,#b8861f) !important;
  color:#2a1c04 !important; -webkit-text-fill-color:#2a1c04 !important;
  box-shadow:0 5px 0 var(--dm-laiton-fonce),0 10px 24px rgba(0,0,0,.4),0 0 0 0 rgba(251,231,168,.6);
  animation:dmAppel 1.6s ease-in-out infinite;
}
html body #validate.dm-valider.pret:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--dm-laiton-fonce),0 6px 14px rgba(0,0,0,.4); }
@keyframes dmAppel{
  0%,100%{ box-shadow:0 5px 0 var(--dm-laiton-fonce),0 10px 24px rgba(0,0,0,.4),0 0 0 0 rgba(251,231,168,.55); }
  50%{ box-shadow:0 5px 0 var(--dm-laiton-fonce),0 10px 24px rgba(0,0,0,.4),0 0 0 12px rgba(251,231,168,0); }
}
@media (prefers-reduced-motion:reduce){ html body #validate.dm-valider.pret{ animation:none; } }