/* « Huis clos » (nom de travail), id technique murdoku — énigme policière sur
   grille d'après le principe de Murdoku. Ambiance film noir : nuit d'encre,
   plan d'architecte crème posé dessus, rouge sang pour l'accent et les
   erreurs. Special Elite (machine à écrire, Apache 2.0) pour les titres,
   Alegreya Sans (OFL) pour le texte ; polices auto-hébergées. */
@font-face{font-family:'HC Elite';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/murdoku/specialelite.woff2') format('woff2')}
@font-face{font-family:'HC Alegreya';font-style:normal;font-weight:500;font-display:swap;src:url('/joueur/murdoku/alegreyasans-500.woff2') format('woff2')}
@font-face{font-family:'HC Alegreya';font-style:normal;font-weight:800;font-display:swap;src:url('/joueur/murdoku/alegreyasans-800.woff2') format('woff2')}

.hc{--nuit:#110f0d;--panneau:#1d1915;--trait:#4a3f33;--texte:#f3e9d6;--muted:#b3a690;--papier:#f4ead6;--encre:#2a2018;
 --sang:#c9283e;--sang-sombre:#7d1424;--rose:#e6b3ba;--erreur:#ff5a5f;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);
 font:500 16px 'HC Alegreya',system-ui,sans-serif;font-variant-numeric:lining-nums;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  radial-gradient(ellipse at 50% 30%,rgba(255,236,200,.07),transparent 60%),
  repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.012) 22px 23px),
  var(--nuit)}
.hc *{box-sizing:border-box}
.hc button{font:800 15.5px 'HC Alegreya',system-ui,sans-serif;letter-spacing:.2px;color:var(--texte);background:var(--panneau);border:1.5px solid var(--trait);border-radius:3px;
 min-height:44px;padding:8px 12px 7px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 #000}
.hc button:active{transform:translateY(1px);filter:brightness(1.2)}
.hc button:disabled{opacity:.35;cursor:default}
.hc button:focus-visible{outline:2px solid var(--sang);outline-offset:2px}
.hc button.primary{background:var(--sang);border-color:#e05a6b;color:#fff8ee;box-shadow:0 3px 0 var(--sang-sombre)}
.hc button.primary:active{box-shadow:0 1px 0 var(--sang-sombre);transform:translateY(2px)}

/* En-tête : bandeau de scène de crime. */
.hc header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:#000;
 font:400 22px 'HC Elite',monospace;letter-spacing:2px;color:var(--papier)}
.hc header::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:5px;z-index:2;background:repeating-linear-gradient(135deg,#e8c547 0 8px,#000 8px 16px)}
.hc header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:500 30px/1 'HC Alegreya',sans-serif;color:var(--papier)}
.hc header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:3px}
.hc header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--papier);color:var(--papier);font:800 17px/1 'HC Alegreya',sans-serif;box-shadow:none}
.hc main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:7px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.hc .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.hc .pad{padding:16px}
.hc .eyebrow{font:400 11.5px 'HC Elite',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--rose)}
.hc .hero{display:flex;align-items:center;gap:14px}
.hc .hero img{width:76px;height:76px;flex-shrink:0;border-radius:14px;box-shadow:0 0 0 2px var(--papier),4px 5px 0 2px var(--sang-sombre)}
.hc h1{margin:4px 0 0;white-space:nowrap;font:400 31px/1 'HC Elite',monospace;letter-spacing:1px;color:var(--papier)}
.hc .devise{margin-top:5px;color:var(--muted);font:italic 500 15.5px 'HC Alegreya',sans-serif}
.hc .pitch{margin:0;font-size:15.5px;line-height:1.35;color:#e2d7c2}
.hc .pitch b{color:#fff6e6;font-weight:800}
.hc .stats{display:flex;gap:8px}
.hc .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:3px;font:800 9.5px 'HC Alegreya',sans-serif;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}
.hc .stats b{display:block;font:800 20px 'HC Alegreya',sans-serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.hc button.grand{min-height:54px;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap;padding-left:6px;padding-right:6px}
.hc button.grand small{font:500 12.5px 'HC Alegreya',sans-serif;letter-spacing:.3px;opacity:.9}
.hc .row{display:flex;gap:8px}
.hc .row>*{flex:1}
.hc .note{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.35;border-top:1.5px solid var(--trait);padding-top:8px}
.hc .note.hors-ligne{color:var(--rose)}

/* Le dossier : chaque enquête résolue reçoit son tampon rouge. */
.hc .pagination{display:flex;align-items:center;gap:8px}
.hc .pagination h2{flex:1;text-align:center;margin:0;font:400 21px 'HC Elite',monospace;color:var(--papier)}
.hc .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.hc .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.hc .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:400 11px 'HC Elite',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--rose)}
.hc .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:2px;font:800 13px 'HC Alegreya',sans-serif;background:#18140f;color:#5d5246;border-color:#2c251d;box-shadow:none}
.hc .carte-niveaux .case.faite{background:var(--sang);color:#fff8ee;border-color:#e05a6b}
.hc .carte-niveaux .case.ouverte{background:var(--papier);color:var(--encre);border:2px solid var(--sang)}
.hc .carte-niveaux .case:disabled{opacity:1}

/* ── Enquête ─────────────────────────────────────────────────────────────── */
.hc .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.hc .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:7px 14px 3px}
.hc .hud .niv{font:400 24px/1 'HC Elite',monospace;color:var(--papier)}
.hc .hud small{display:block;font:800 9.5px 'HC Alegreya',sans-serif;letter-spacing:1.4px;color:var(--muted);margin-top:4px;text-transform:uppercase}
.hc .hud .chrono{font:800 24px/1 'HC Alegreya',sans-serif;font-variant-numeric:tabular-nums lining-nums;text-align:right}
.hc .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Le plan, posé sur la table d'enquête. */
.hc .cadre{padding:5px;border-radius:3px;background:var(--papier);box-shadow:0 0 0 1px #000,0 10px 26px rgba(0,0,0,.75),0 0 0 6px rgba(244,234,214,.06)}
.hc svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.hc svg.grille .papier{fill:var(--papier)}
.hc svg.grille .obj{filter:drop-shadow(.35px .55px .45px rgba(42,32,24,.28));opacity:.92}
.hc svg.grille .obj.tapis{opacity:.8}
.hc svg.grille .mur{stroke:var(--encre);stroke-width:1;stroke-linecap:square}
.hc svg.grille .joint{stroke:rgba(42,32,24,.16);stroke-width:.25}
.hc svg.grille .enceinte{fill:none;stroke:var(--encre);stroke-width:1.5}
.hc svg.grille .etiquette{fill:rgba(42,32,24,.62);font-family:'HC Alegreya',sans-serif;font-weight:800;letter-spacing:.1px;pointer-events:none}
.hc svg.grille .pris{fill:rgba(42,32,24,.2)}
.hc svg.grille .croix{stroke:#5b4b3c;stroke-width:1;stroke-linecap:round;fill:none}
.hc svg.grille .vide{fill:rgba(201,40,62,.28);stroke:var(--sang);stroke-width:.35}
/* Initiales des personnes à placer (notes, 2026-10-20) : allumées tant que la
   case reste possible, presque effacées une fois éliminées par le joueur. */
.hc svg.grille .plaque{fill:var(--papier);fill-opacity:.82;pointer-events:none}
/* Discrètes (Stan, 2026-10-20) : police des noms de pièces sans graisse, encre
   neutre, sans couleur ; fin liseré blanc (Stan, même jour) ; allumées bien
   sombres, éliminées à peine visibles. */
.hc svg.grille .initiale{font-family:'HC Alegreya',sans-serif;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:rgba(42,32,24,.85);
 paint-order:stroke;stroke:#fff;stroke-width:.32;stroke-linejoin:round}
.hc svg.grille .initiale.barree{opacity:.14}
.hc svg.grille .initiale.sienne{fill:#1a120c}
.hc svg.grille .cercle{fill:#fff;stroke:rgba(42,32,24,.7);stroke-width:.22;pointer-events:none}
.hc svg.grille .zone{fill:none;stroke:var(--sang);stroke-width:1.1}
.hc svg.grille .curseur{fill:none;stroke:var(--sang);stroke-width:.9;stroke-dasharray:1.6 .9}
.hc svg.grille .pion circle{stroke:#fffaf0;stroke-width:.6;filter:drop-shadow(0 .5px .6px rgba(0,0,0,.55))}
.hc svg.grille .pion text{font:800 4px 'HC Alegreya',sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.hc svg.grille .pion.victime circle{stroke:#a3172f;stroke-width:.8}
.hc svg.grille .pion.choisi circle{stroke:#e8c547;stroke-width:1.1}
.hc svg.grille .pion.conflit circle{stroke:var(--erreur);stroke-width:1.1;stroke-dasharray:1.2 .7}
.hc svg.grille .pion.efface{opacity:.35}
.hc svg.grille .pion.coupable circle{stroke:#a3172f;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:hc-pouls 1.1s ease-in-out infinite}
@keyframes hc-pouls{50%{transform:scale(1.18)}}
.hc .plateau.suppose .cadre{background:#cfd8ea;box-shadow:0 0 0 2px #6a85c9,0 10px 26px rgba(0,0,0,.75)}
.hc .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),0 10px 26px rgba(0,0,0,.75)}

/* Les témoins : une ligne par personne, pastille, nom et indices. */
.hc .temoins{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;padding:4px 10px 0}
.hc .temoins .temoin{display:flex;align-items:flex-start;gap:7px;min-height:0;padding:3px 6px 3px 4px;text-align:left;border-radius:3px;
 background:transparent;border:1px solid transparent;box-shadow:none;font:500 13.5px/1.25 'HC Alegreya',sans-serif;color:#e2d7c2}
.hc .temoins .temoin:active{transform:none}
.hc .temoins .temoin.choisi{background:#2d2318;border-color:#e8c547}
.hc .temoins .pastille{flex:0 0 auto;width:19px;height:19px;margin-top:-1px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 font:800 11.5px/1 'HC Alegreya',sans-serif;color:var(--pion);border:2px solid var(--pion);background:var(--papier);opacity:.85}
.hc .temoins .temoin.pose .pastille{background:var(--pion);color:#fffaf0;border-color:#fffaf0;opacity:1}
.hc .temoins .temoin.victime.pose .pastille{background:#f6ecd9;color:#a3172f;border-color:#a3172f}
/* Personne placée (Stan, 2026-10-19 : la pastille pleine ne suffisait pas) :
   ligne éteinte, coche verte sur la pastille, liseré à gauche. Un indice
   démenti reste rouge vif ; reprise en main, la ligne se rallume. Coche au
   bout de la ligne : sur la pastille, elle cachait l'initiale. */
.hc .temoins .pastille{position:relative}
.hc .temoins .temoin.pose{border-left:3px solid #3fae5a;border-radius:0 3px 3px 0;padding-left:3px}
.hc .temoins .temoin.pose .dit,.hc .temoins .temoin.pose .dit b,.hc .temoins .temoin.pose .dit i.rien{color:#7d7262}
.hc .temoins .temoin.victime.pose .dit b{color:#a8616b}
.hc .temoins .temoin.pose .dit em{opacity:.55}
.hc .temoins .temoin.pose::after{content:'✓';flex:0 0 auto;align-self:center;margin-left:auto;width:16px;height:16px;border-radius:50%;
 background:#3fae5a;color:#fff;font:800 11px/16px 'HC Alegreya',sans-serif;text-align:center}
.hc .temoins .temoin.pose.choisi .dit,.hc .temoins .temoin.pose.choisi .dit b{color:#fff6e6}
.hc .temoins .temoin.pose .indice.faux{color:var(--erreur)}
.hc .temoins.illu .temoin.pose{border-left:0;padding-left:4px}
.hc .temoins.illu .temoin.pose .dit,.hc .temoins.illu .temoin.pose .dit b{color:#e2d7c2}
.hc .temoins.illu .temoin.pose .dit b{color:#fff6e6}
.hc .temoins.illu .temoin.pose::after{display:none}
.hc .temoins .dit b{font-weight:800;color:#fff6e6}
.hc .temoins .temoin.victime .dit b{color:#ff8b98}
.hc .temoins .dit i.rien{color:var(--muted)}
.hc .temoins .dit em{font-style:normal;padding:0 3px;border-radius:2px;background:var(--sol);color:var(--encre);font-weight:800;white-space:nowrap}
.hc .temoins .indice.faux{color:var(--erreur);text-decoration:line-through;text-decoration-thickness:1.5px}
.hc .temoins.serre{gap:0}
.hc .temoins.serre .temoin{padding-top:2px;padding-bottom:2px;font-size:13px}

/* Hauteur fixe : un message qui change ne déplace pas le plan. */
.hc .message{flex:0 0 auto;height:26px;padding:5px 12px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:14px;line-height:1.3;color:var(--muted)}
.hc .message.alerte{color:#ff9aa0}
.hc .message.conseil{color:#f3d67a}
.hc .message.suppose{color:#b9c8f0}
.hc .message.gagne{color:var(--papier);font:italic 800 14.5px/1.3 'HC Alegreya',sans-serif}
.hc .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:2px 12px 6px}
.hc .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.hc .outils.trois{grid-template-columns:1fr 1fr 1fr;padding-bottom:12px}
.hc .outils.quatre{grid-template-columns:1fr 1fr 1fr 1.3fr;gap:5px}
.hc .outils.quatre button{font-size:14px;padding-left:2px;padding-right:2px}
.hc .outils button.notes.outil{font-size:14.5px}
/* Cinq boutons : la largeur va aux libellés qui portent l'initiale (« O
   présente » au féminin est le plus long). */
.hc .outils.notes-rangee{grid-template-columns:.86fr .66fr 1.08fr 1.14fr .84fr;gap:4px;padding-bottom:12px}
.hc .outils.notes-rangee button{font-size:13px;padding-left:1px;padding-right:1px;letter-spacing:0}
.hc .outils button.notes.vider{color:#e2d7c2;border-color:#4a3f33}
/* Outil retenu, crayon éteint : liseré jaune (le choix reste visible). */
.hc .outils button.notes.retenu{border-color:#e8c547;box-shadow:inset 0 0 0 1px #6b5a2a}
.hc .outils .what-if{text-overflow:ellipsis}
/* Notes (2026-10-19) : bouton crayon, allumé en jaune quand le mode est actif. */
.hc .outils button.notes{color:#f3d67a;border-color:#6b5a2a}
.hc .outils button.notes.active{background:#e8c547;color:#1d1915;border-color:#fff1b0}
.hc .plateau.crayon .cadre{box-shadow:0 0 0 3px #e8c547,0 10px 26px rgba(0,0,0,.75)}
.hc .outils button{min-height:42px;padding:8px 4px 6px;font-size:15px;white-space:nowrap;overflow:hidden}
.hc .outils button.large{grid-column:1/-1}
.hc .outils button.what-if{color:#b9c8f0;border-color:#3b4a73}
.hc .outils button.what-if.active{background:#3b5bb5;color:#fff;border-color:#b9c8f0}
.hc .outils button.what-if.faux{background:#9b1b2b;color:#fff3ee;border-color:#ff9aa0}

/* Victoire : fiche de police tamponnée. */
.hc .sacre{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:auto;
 background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);opacity:0;animation:hc-fondu .3s ease .9s forwards}
.hc .sacre.congedie{animation:hc-congedie .3s ease forwards;pointer-events:none}
.hc .sacre .carte{position:relative;min-width:240px;padding:18px 22px 16px;text-align:center;border-radius:2px;color:var(--encre);
 background:var(--papier);box-shadow:0 14px 34px rgba(0,0,0,.75);transform:rotate(-2deg) scale(.4);animation:hc-fiche .5s cubic-bezier(.2,1.4,.4,1) .9s forwards}
.hc .sacre .titre{font:400 25px/1.15 'HC Elite',monospace;white-space:nowrap}
.hc .sacre .detail{margin-top:6px;font:italic 500 15.5px 'HC Alegreya',sans-serif;color:#5b4b3c}
.hc .sacre .tampon{position:absolute;right:-14px;top:-16px;padding:3px 9px 1px;border:3px solid #b3122a;border-radius:4px;color:#b3122a;
 font:400 18px 'HC Elite',monospace;letter-spacing:2px;text-transform:uppercase;background:rgba(244,234,214,.6);opacity:0;transform:rotate(14deg) scale(2.4);
 animation:hc-tampon .25s ease-in 1.45s forwards}
@keyframes hc-fondu{to{opacity:1}}
@keyframes hc-congedie{from{opacity:1}to{opacity:0}}
@keyframes hc-fiche{to{transform:rotate(-2deg) scale(1)}}
@keyframes hc-tampon{to{opacity:.92;transform:rotate(14deg) scale(1)}}

/* ── Scores ──────────────────────────────────────────────────────────────── */
.hc .scores{gap:10px}
.hc h2.titre-scores{margin:0;font:400 25px 'HC Elite',monospace;color:var(--papier)}
.hc .resultat{border-radius:2px;padding:10px;text-align:center;color:var(--encre);background:var(--papier);box-shadow:0 4px 0 var(--sang-sombre)}
.hc .resultat .temps{font:800 38px 'HC Alegreya',sans-serif;font-variant-numeric:tabular-nums lining-nums}
.hc .resultat p{margin:2px 0 0;font-size:15px}
.hc .resultat .record{color:#a3172f;font-weight:800}
.hc .outils.bas{margin-top:auto;padding:0}
.hc .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.hc .tuto{gap:11px}
.hc h2.titre-tuto{margin:0;font:400 24px 'HC Elite',monospace;color:var(--papier)}
.hc .tuto .cadre{align-self:center;margin:2px 0 4px}
.hc svg.grille.illu{width:200px;height:200px}
.hc .illu-bloc{display:flex;flex-direction:column;align-items:center;gap:4px}
.hc .illu-bloc .cadre{margin:0}
.hc .illu-bloc svg.grille.illu{width:170px;height:170px}
.hc .temoins.illu{padding:0;align-self:stretch;pointer-events:none}
.hc .temoins.illu .temoin{padding-top:1px;padding-bottom:1px;font-size:13px}
.hc .points{display:flex;justify-content:center;gap:8px}
.hc .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.hc .points i.on{background:var(--sang)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.hc .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.8);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.hc .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:2px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:var(--papier);color:var(--encre);box-shadow:0 12px 40px rgba(0,0,0,.7)}
.hc .fenetre h2{margin:0;font:400 24px 'HC Elite',monospace}
.hc .fenetre p{margin:0;font-size:15px;line-height:1.4;color:#4a3c2f}
.hc .fenetre button:not(.primary){background:#e8dcc4;color:var(--encre);border-color:#c9b99c;box-shadow:0 2px 0 #b5a483}

/* Écrans bas : chaque pixel gagné va au plan. */
.hc.compact header{height:44px;font-size:20px}
.hc.compact .hud{padding:4px 14px 2px}
.hc.compact .hud .niv,.hc.compact .hud .chrono{font-size:20px}
.hc.compact .hud small{margin-top:2px}
.hc.compact .temoins .temoin{font-size:12.8px;padding-top:2px;padding-bottom:2px}
.hc.compact .temoins.serre .temoin{font-size:12.3px;padding-top:1px;padding-bottom:1px;line-height:1.2}
.hc.compact .temoins .pastille{width:17px;height:17px;font-size:10.5px}
.hc.compact .message{height:23px;padding-top:4px;font-size:13.5px}
.hc.compact .outils{gap:6px;padding-bottom:5px}
.hc.compact .outils button{min-height:37px;padding:6px 4px 5px}
.hc.compact .outils.deux,.hc.compact .outils.trois,.hc.compact .outils.notes-rangee{padding-bottom:7px}
.hc.compact .home{gap:6px;padding:9px 16px 8px}
.hc.compact .hero img{width:64px;height:64px}
.hc.compact .pitch{font-size:14.5px;line-height:1.3}
.hc.compact .stats span{padding:4px 9px 3px}
.hc.compact .stats b{font-size:18px}
.hc.compact button.grand{min-height:50px}
.hc.compact .home>.row>button{min-height:40px}
.hc.compact .note{font-size:12.5px;padding-top:6px}
.hc.compact .home.accueil>.note:not(.hors-ligne){display:none}
@media (prefers-reduced-motion:reduce){.hc .sacre,.hc .sacre .carte,.hc .sacre .tampon,.hc svg.grille .pion.coupable circle{animation-duration:.01s;animation-delay:0s;animation-iteration-count:1}}