/* ===========================================================
   LE COFFRE-FORT — salle forte : acier sombre, or et lumière chaude
   =========================================================== */
body.coffre-jeu {
  --theme: #c9a227;
  --theme-2: #f2d27a;
  --or: #f2c94c;
  --acier: #1b2130;
  --panneau: rgba(14, 17, 27, 0.92);
  --gravure: 'Cinzel', var(--serif);
  background: #0b0d14;
}
.salle-forte {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 28%, rgba(242, 201, 76, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, #121624, #07080d);
}
.affiche { margin: 0; font-family: var(--gravure); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); }

/* ---------- Réglages ---------- */
.marque h1 { font-family: var(--gravure); font-weight: 800; letter-spacing: 0.02em; }
.marque h1 em { font-style: normal; color: var(--or); text-shadow: 0 0 24px rgba(242, 201, 76, 0.5); }
.mini-coffre {
  width: 74px; height: 74px; margin: 0 auto; border-radius: 18px; position: relative;
  background: linear-gradient(145deg, #3a4357, #171b27); border: 3px solid #5a6680;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 4px rgba(0, 0, 0, 0.35);
}
.mini-coffre i {
  position: absolute; inset: 18px; border-radius: 50%; border: 4px solid var(--or);
  background: radial-gradient(circle, #2a2f3e 40%, #11141d);
  animation: tourne-lent 6s linear infinite;
}
.mini-coffre i::after { content: ''; position: absolute; left: 50%; top: 2px; width: 3px; height: 10px; margin-left: -1.5px; background: var(--or); border-radius: 2px; }
@keyframes tourne-lent { to { transform: rotate(360deg); } }

/* ---------- Jeu ---------- */
.ecran.jeu { gap: 10px; }
.tableau-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
.joueur {
  --c: var(--p0);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.joueur.p1 { --c: var(--p1); }
.joueur.actif { border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.joueur .perso { grid-row: 1 / 4; width: 40px; height: 52px; }
.joueur .nom { font-weight: 800; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur .or { display: flex; align-items: center; gap: 4px; font-family: var(--gravure); font-size: 1.25rem; color: var(--or); }
.joueur .or i { font-style: normal; font-size: 0.95rem; }
.joueur .jauge { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.joueur .jauge span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8860b, var(--or)); transition: width 0.6s ease; }

.porte-zone {
  --d: min(46vw, 190px, 24dvh);
  position: relative; flex: none; display: grid; grid-template-columns: 1fr var(--d) 1fr; align-items: center; gap: 8px;
}
.porte {
  position: relative; width: var(--d); height: var(--d); border-radius: 50%; grid-column: 2;
  background: radial-gradient(circle at 35% 30%, #4a556d, #232a3a 55%, #12151f);
  border: 6px solid #6b7894; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 0 0 10px rgba(0, 0, 0, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.4s, border-color 0.4s;
}
.porte.ouverte { border-color: var(--or); box-shadow: 0 0 40px rgba(242, 201, 76, 0.55), inset 0 0 0 10px rgba(0, 0, 0, 0.3); }
.porte.piege { border-color: #e5484d; box-shadow: 0 0 40px rgba(229, 72, 77, 0.7); animation: secousse 0.5s; }
@keyframes secousse { 20% { transform: translateX(-6px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.boulon { position: absolute; width: 10%; height: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9d1e3, #59647e); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); }
.b1 { top: 9%; left: 45%; } .b2 { bottom: 9%; left: 45%; } .b3 { left: 9%; top: 45%; } .b4 { right: 9%; top: 45%; }
.cadran {
  position: absolute; inset: 26%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #2b3245 0 4deg, #1a1f2d 4deg 9deg);
  border: 4px solid var(--or); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4), inset 0 0 14px rgba(0, 0, 0, 0.7);
}
.cadran i { position: absolute; left: 50%; top: 6%; width: 4px; height: 26%; margin-left: -2px; border-radius: 2px; background: var(--or); box-shadow: 0 0 6px var(--or); }
.cadran::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--or) 55%, #8a6a12); }
.cadran.tourne { animation: cadran 1.45s cubic-bezier(0.3, 0.1, 0.2, 1); }
@keyframes cadran { 0% { transform: rotate(0); } 45% { transform: rotate(-540deg); } 75% { transform: rotate(-430deg); } 100% { transform: rotate(-470deg); } }

.butin { grid-column: 3; grid-row: 1; }
.risque { grid-column: 1; grid-row: 1; }
.butin, .risque { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.butin small, .risque small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.butin b { font-family: var(--gravure); font-size: 2rem; color: var(--or); text-shadow: 0 0 14px rgba(242, 201, 76, 0.5); }
.risque b { font-family: var(--gravure); font-size: 1.2rem; color: #9bd17c; }
.risque.danger b { color: #ff6b6b; }
.barre-risque { width: 80%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.barre-risque span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7bc96f, #f2c94c, #e5484d); transition: width 0.5s; }

.panneau-jeu {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center;
  padding: 14px; border-radius: 22px; background: var(--panneau); border: 1px solid rgba(242, 201, 76, 0.22);
  overflow-y: auto;
}
.panneau-jeu.entree { animation: entree 0.3s ease; }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panneau-jeu.carte.n2 { border-color: rgba(255, 138, 92, 0.5); }
.panneau-jeu.carte.n3 { border-color: rgba(229, 72, 77, 0.6); box-shadow: 0 0 30px rgba(229, 72, 77, 0.2); }
.panneau-jeu.piege { border-color: #e5484d; background: linear-gradient(180deg, rgba(60, 10, 16, 0.92), rgba(14, 17, 27, 0.92)); }
.panneau-jeu.surprise { border-color: var(--or); }
.p-titre { margin: 0; font-family: var(--gravure); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); text-align: center; }
.panneau-jeu.piege .p-titre { color: #ff8b8f; }
.p-texte, .ordre-boite p, .f-score { font-variant-numeric: lining-nums; }
.p-texte { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 5.4vw, 1.55rem); line-height: 1.25; text-align: center; color: #fff; }
.p-texte:empty { display: none; }
.p-actions { display: grid; gap: 8px; margin-top: auto; position: sticky; bottom: 0; }
.p-actions.n2 { grid-template-columns: 1fr 1fr; }
.p-actions.n3 { grid-template-columns: repeat(3, 1fr); }
.p-actions.n4 { grid-template-columns: repeat(3, 1fr); }
.p-actions.n4 .coffre-btn { grid-column: 1 / -1; }
.p-actions .btn { margin: 0; flex-direction: column; gap: 2px; line-height: 1.15; }
.p-actions .btn small { font-size: 0.7rem; font-weight: 600; opacity: 0.85; }
.btn.niv { color: #fff; border: 0; }
.btn.niv.n1 { background: linear-gradient(180deg, #ff9ab4, #e0436b); }
.btn.niv.n2 { background: linear-gradient(180deg, #ffb070, #ff6a2d); }
.btn.niv.n3 { background: linear-gradient(180deg, #ff6b6b, #b3122e); }
.btn.coffre-btn { color: #1a1204; border: 0; background: linear-gradient(180deg, #fff1b8, var(--or) 55%, #b8860b); box-shadow: 0 6px 0 #6e5108, 0 12px 26px rgba(242, 201, 76, 0.35); }

/* ---------- Fin ---------- */
.fin { justify-content: safe center; overflow-y: auto; gap: 12px; }
.fin h2 { font-family: var(--gravure); font-size: clamp(1.4rem, 7vw, 2rem); color: var(--or); }
.fin-persos { display: flex; justify-content: center; align-items: flex-end; gap: 22px; --fh: clamp(90px, 16dvh, 130px); }
.fin-perso { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fin-perso .perso { height: calc(var(--fh) * 0.8); width: calc(var(--fh) * 0.8 * 100 / 130); }
.fin-perso.gagnant .perso { height: var(--fh); width: calc(var(--fh) * 100 / 130); }
.fin-perso.gagnant span::before { content: '👑 '; }
.fin-perso span { font-weight: 800; font-size: 0.85rem; }
.f-score { margin: 0; font-family: var(--gravure); font-size: 2rem; color: var(--or); }
.ordre-boite { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--or); }
.ordre-boite span { font-family: var(--gravure); font-size: 0.78rem; color: var(--or); letter-spacing: 0.08em; }
.ordre-boite p { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.fin.revele .fin-persos { display: none; }
.fin .actions-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 380px; }
.fin .actions-fin .primary { grid-column: 1 / -1; }
.fin .actions-fin .btn { margin: 0; }

@media (max-height: 700px) {
  .porte-zone { --d: min(40vw, 150px, 20dvh); }
  .joueur .perso { width: 32px; height: 42px; }
  .p-texte { font-size: clamp(1.1rem, 5vw, 1.35rem); }
  .butin b { font-size: 1.6rem; }
}
@media (max-height: 600px) {
  .fin-persos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-coffre i, .cadran.tourne, .porte.piege, .panneau-jeu.entree { animation: none; }
}