/* =================================================================
   DÉMINEUROMANY — champ de mines militaire
   Kaki, sable, pochoir. Cases en herbe, sable une fois creusées,
   coordonnées d'état-major, panneau « danger mines ».
   (s'ajoute à fonts.css + style.css)
   ================================================================= */
html[data-jeu="demineur"] {
    --kaki: #5B6236;
    --kaki-f: #434A26;
    --kaki-ff: #353B1E;
    --sable: #D9C79B;
    --terre: #B9A06C;
    --rouge: #C4161C;
    --noir: #1C1D14;
    --blanc: #F4F1E6;
    --orange: #E86A17;

    --dem: var(--orange);
    --dem-dark: #A9470B;
    --fam-danger: var(--rouge);
    --fam-boisson: #D9A21B;
    --fam-regle: #3B5B8C;
    --fam-piege: var(--orange);
    --fam-objet: #4F8A73;
    --fam-calme: #8C8F86;
    --fam-succes: #4F8A3A;

    --fond: var(--kaki-f);
    --fond-motif: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 6px);
    --surface: var(--blanc);
    --surface-encre: var(--noir);
    --encre: var(--blanc);
    --encre-douce: #C9C7AE;
    --trait: var(--noir);
    --trait-epaisseur: 3px;
    --accent: var(--orange);
    --accent-encre: var(--noir);
    --accent-2: var(--sable);
    --accent-2-encre: var(--noir);
    --rayon: 0px;
    --police-titre: 'Saira Stencil', 'Saira', sans-serif;
    --police-texte: 'Saira', system-ui, sans-serif;
    --police-chiffres: 'Saira', system-ui, sans-serif;
    --casse-titre: uppercase;
    --graisse-titre: 400;
    --text-secondary: var(--encre-douce);
}
html[data-jeu="demineur"] body { font-stretch: 87%; font-weight: 500; }
.st { font-family: 'Saira Stencil', sans-serif; text-transform: uppercase; font-weight: 400; }

/* ---------- CARTE D'ÉTAT-MAJOR (grille + coordonnées) ---------- */
.dem-carte-zone { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 4px 6px; width: 100%; }
.dem-axe-h { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); text-align: center; font-family: 'Saira Stencil'; color: var(--sable); font-size: clamp(.8rem, 1.8vmin, 1.3rem); padding: 0 clamp(5px, 1vmin, 10px); }
.dem-axe-v { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(var(--n, 7), 1fr); align-items: center; font-family: 'Saira Stencil'; color: var(--sable); font-size: clamp(.8rem, 1.8vmin, 1.3rem); padding: clamp(5px, 1vmin, 10px) 0; }
.dem-carte-zone .dem-grille { grid-column: 2; grid-row: 2; }

/* ---------- GRILLE ---------- */
.dem-grille {
    --n: 7;
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    grid-template-rows: repeat(var(--n), 1fr);
    gap: clamp(2px, .6vmin, 5px);
    width: 100%;
    aspect-ratio: 1;
    padding: clamp(5px, 1vmin, 10px);
    background: var(--noir);
    border: 4px solid var(--noir);
}

.dem-case {
    position: relative;
    border: none;
    border-radius: 0;
    font-size: calc(100cqi / var(--n) * 0.46);
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    color: var(--noir);
    padding: 0;
    min-width: 0; min-height: 0;
    user-select: none;
    touch-action: manipulation;
    transition: background .25s ease, filter .15s ease;
}
/* Herbe : deux trames de points décalées */
.dem-case.cachee {
    background-color: var(--kaki);
    background-image: radial-gradient(rgba(255,255,255,.08) 18%, transparent 20%), radial-gradient(rgba(0,0,0,.14) 18%, transparent 20%);
    background-size: calc(100cqi / var(--n) / 3) calc(100cqi / var(--n) / 3), calc(100cqi / var(--n) / 2.3) calc(100cqi / var(--n) / 2.3);
    background-position: 0 0, 30% 45%;
}
.dem-grille.cliquable .dem-case.cachee { cursor: pointer; }
.dem-grille.cliquable .dem-case.cachee:hover { filter: brightness(1.18); }
.dem-case.selection { outline: 5px solid var(--orange); outline-offset: -5px; filter: brightness(1.25); z-index: 2; animation: dem-cible 1s ease-in-out infinite; }
@keyframes dem-cible { 50% { outline-color: #FFC266; } }

/* Sable creusé ; la famille se lit sur le liseré du bas */
.dem-case.revelee { background: var(--sable); box-shadow: inset 0 -5px 0 transparent; animation: dem-creuse .3s ease-out; }
@keyframes dem-creuse { from { background: var(--terre); transform: scale(.9); } to { transform: none; } }
.dem-case.revelee.fam-boisson { box-shadow: inset 0 -6px 0 var(--fam-boisson); }
.dem-case.revelee.fam-regle   { box-shadow: inset 0 -6px 0 var(--fam-regle); }
.dem-case.revelee.fam-piege   { box-shadow: inset 0 -6px 0 var(--fam-piege); }
.dem-case.revelee.fam-objet   { box-shadow: inset 0 -6px 0 var(--fam-objet); }
.dem-case.revelee.fam-calme   { background: #E3D4AC; }
.dem-case.revelee.fam-danger  { background: #E3D4AC; }
.dem-case.revelee.explosee    { background: var(--rouge); }
.dem-case.revelee.neutralisee { background: #A7B98A; box-shadow: inset 0 0 0 4px var(--fam-succes); }
.dem-case.revelee.restante { background: repeating-linear-gradient(-45deg, rgba(196,22,28,.18) 0 6px, transparent 6px 12px), #E3D4AC; }
.dem-case.revelee.restante .dem-emoji { opacity: .55; }
.dem-case.derniere { outline: 4px solid #fff; outline-offset: -4px; z-index: 2; }

.dem-emoji { line-height: 1; }
.dem-emoji.faible { opacity: .3; }
.dem-chiffre { position: absolute; top: 5%; left: 7%; font-family: 'Saira Stencil'; font-size: .5em; }
.dem-gros-chiffre { font-family: 'Saira Stencil'; font-size: 1.1em; }
.dem-oeil { position: absolute; bottom: 4%; right: 6%; font-size: .38em; }
.dem-case.radar { outline: 3px dashed var(--fam-objet); outline-offset: -4px; }
.dem-case.radar .dem-emoji { opacity: .6; }
.dem-case.radar-danger { outline-color: var(--rouge); }

/* Chiffres : les couleurs du démineur d'origine, version encre sur sable */
.c1 { color: #1D4E9E; } .c2 { color: #2E7D32; } .c3 { color: #C4161C; } .c4 { color: #4A148C; }
.c5 { color: #7B1F1F; } .c6 { color: #00695C; } .c7 { color: #1C1D14; } .c8 { color: #6B6B6B; }

/* ---------- CARTE RÉVÉLÉE : ordre de mission ---------- */
.dem-carte {
    --fam: var(--orange);
    background: #EDE4C8;
    color: var(--noir);
    border: 4px solid var(--noir);
    border-top: 18px solid var(--fam);
    padding: 22px 24px 22px;
    text-align: center;
    box-shadow: 10px 10px 0 rgba(0,0,0,.45);
    animation: dem-carte-in .35s cubic-bezier(.3,1.5,.6,1);
}
.dem-carte.fam-danger  { --fam: var(--fam-danger); }
.dem-carte.fam-boisson { --fam: var(--fam-boisson); }
.dem-carte.fam-regle   { --fam: var(--fam-regle); }
.dem-carte.fam-piege   { --fam: var(--fam-piege); }
.dem-carte.fam-objet   { --fam: var(--fam-objet); }
.dem-carte.fam-calme   { --fam: var(--fam-calme); }
.dem-carte.fam-succes  { --fam: var(--fam-succes); }
@keyframes dem-carte-in { from { transform: translateY(30px) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }

.dem-carte-joueur { color: #5D5A48; font-weight: 700; font-size: 1rem; }
.dem-carte-emoji { font-size: 5rem; line-height: 1.1; margin: 6px 0 2px; }
.dem-carte-titre { font-family: 'Saira Stencil'; font-weight: 400; text-transform: uppercase; color: var(--fam); font-size: 2.3rem; line-height: 1.05; margin-bottom: 10px; }
.dem-carte.fam-boisson .dem-carte-titre, .dem-carte.fam-calme .dem-carte-titre { color: var(--noir); }
.dem-carte-texte { font-size: 1.35rem; font-weight: 600; line-height: 1.35; }
.dem-carte-voisines { margin-top: 12px; font-weight: 700; color: #5D5A48; }
.dem-carte-malus { margin-top: 12px; color: var(--rouge); font-weight: 800; }
.dem-carte-alerte { margin-top: 12px; padding: 10px; background: var(--rouge); color: #fff; font-weight: 800; }
.dem-carte-parade { margin-top: 12px; padding: 10px; background: var(--fam-objet); color: #fff; font-weight: 800; }
.dem-carte.annulee .dem-carte-texte { text-decoration: line-through; opacity: .5; }
.dem-de { font-size: 1.5rem; margin-bottom: 8px; }
.dem-de b { display: inline-block; min-width: 2em; padding: 2px 8px; background: var(--noir); color: var(--blanc); font-family: 'Saira Stencil'; animation: dem-roule .6s ease-out; }
@keyframes dem-roule { from { transform: rotate(-540deg) scale(.4); } to { transform: none; } }

/* ---------- BOUTONS ---------- */
.dem-btn {
    cursor: pointer; font-family: 'Saira Stencil'; font-weight: 400; text-transform: uppercase; letter-spacing: .5px;
    color: var(--noir); background: var(--sable); border: 3px solid var(--noir); border-bottom-width: 7px;
    padding: 12px 18px; font-size: 1.15rem; line-height: 1.05;
    transition: transform .06s ease, border-bottom-width .06s ease;
    touch-action: manipulation;
}
.dem-btn:active { transform: translateY(4px); border-bottom-width: 3px; }
.dem-btn.principal { background: var(--orange); }
.dem-btn.danger { background: var(--rouge); color: #fff; }
.dem-btn.objet { background: var(--fam-objet); color: #fff; }
.dem-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.dem-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-weight: 700; background: var(--kaki-ff); border: 2px solid var(--noir); color: var(--blanc); }

/* ---------- LÉGENDE ---------- */
.dem-legende { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; text-align: left; }
.dem-leg-groupe { background: rgba(0,0,0,.18); padding: 10px 12px; border-top: 5px solid var(--fam, #888); }
.dem-leg-groupe.fam-danger { --fam: var(--fam-danger); } .dem-leg-groupe.fam-boisson { --fam: var(--fam-boisson); }
.dem-leg-groupe.fam-regle { --fam: var(--fam-regle); } .dem-leg-groupe.fam-piege { --fam: var(--fam-piege); }
.dem-leg-groupe.fam-objet { --fam: var(--fam-objet); } .dem-leg-groupe.fam-calme { --fam: var(--fam-calme); }
.dem-leg-groupe h4 { font-family: 'Saira Stencil'; font-weight: 400; text-transform: uppercase; color: var(--blanc); margin-bottom: 6px; font-size: 1.05rem; }
.dem-leg-groupe h4 small { font-family: 'Saira'; text-transform: none; color: var(--encre-douce); font-weight: 600; }
.dem-leg-groupe ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.dem-leg-groupe li { display: flex; gap: 8px; font-size: .9rem; color: var(--encre-douce); line-height: 1.25; }
.dem-leg-groupe li b { color: var(--blanc); }
.dem-leg-e { width: 1.4em; flex-shrink: 0; text-align: center; font-size: 1.05rem; }

/* ---------- PANNEAU DANGER ---------- */
.panneau-mines { width: 64px; height: 58px; flex: none; }

/* ---------- EXPLOSION ---------- */
.dem-secousse { animation: dem-secoue .5s ease-in-out; }
@keyframes dem-secoue {
    10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); }
    30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); }
}
.dem-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9000; background: radial-gradient(circle, rgba(255,214,140,.95), rgba(196,22,28,.6) 45%, transparent 75%); animation: dem-flash .7s ease-out forwards; }
@keyframes dem-flash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Visée en direct (mode tour) et cases réservées (mode simultané) ---------- */
.dem-case { position: relative; }
.dem-etiquette {
    position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); max-width: 94%;
    font-family: 'Saira'; font-stretch: 87%; font-weight: 800; font-size: clamp(.55rem, calc(100cqi / var(--n) * .17), 1rem);
    line-height: 1.15; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--noir); color: var(--blanc); pointer-events: none;
}
.dem-case.visee { outline: 5px solid var(--blanc); outline-offset: -5px; filter: brightness(1.3); z-index: 2; animation: dem-cible 1s ease-in-out infinite; }
.dem-case.visee .dem-etiquette { background: var(--blanc); color: var(--noir); }
.dem-case.reservee { background-color: var(--terre); filter: none; }
.dem-case.reservee .dem-etiquette { background: var(--noir); }
.dem-case.reservee.prete .dem-etiquette { background: var(--orange); color: var(--noir); }
.dem-case.reservee.a-moi { outline: 5px solid var(--orange); outline-offset: -5px; z-index: 2; }
.dem-grille.cliquable .dem-case.reservee:not(.a-moi) { cursor: not-allowed; }