/* =========================================================================
   Jeu de l'huissier — feuille dédiée
   Registre visuel : la table de la cuisine, couverte de courriers.
   Papier kraft en fond, plis « recommandé » à liseré rouge, et le carton
   orange de l'avis de réception que tout le monde reconnaît.
   Même famille graphique que resilier.css, jetons séparés.
   ========================================================================= */

.hui-jeu{
  --hui-encre:       #1c2432;
  --hui-kraft:       #ece0c8;   /* la table, ou plutôt le paquet dessus */
  --hui-kraft-trait: #d8c9a8;
  --hui-blanc:       #fdfdfb;
  --hui-rouge:       #c2251a;   /* le liseré des recommandés */
  --hui-ar:          #ffd9a1;   /* le carton orange de l'AR */
  --hui-ar-bord:     #e07b00;
  --hui-ar-texte:    #7a4100;
  --hui-calme:       #2e9e6b;
  --hui-tiede:       #d8a12a;
  --hui-alarme:      #d4453a;
  --hui-tampon:      #b3261e;

  --hui-comique: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE',
                 'Segoe Print', 'Bradley Hand', cursive;
  --hui-chiffres: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hui-rayon: 14px;

  max-width: 880px;
  margin: 0 auto;
}

/* Indispensable : plusieurs blocs ont un display explicite, qui écraserait
   le display:none implicite de l'attribut hidden. */
.hui-jeu [hidden]{ display: none !important; }

/* ---------------------------------------------------------------- ARÈNE -- */

.hui-zone{
  position: relative;
  overflow: hidden;
  min-height: clamp(400px, 64vh, 580px);
  border: 1px solid var(--hui-kraft-trait);
  border-radius: var(--hui-rayon);
  background-color: var(--hui-kraft);
  /* Kraft : fines rayures diagonales, comme le papier d'emballage. */
  background-image: repeating-linear-gradient(45deg,
                    transparent 0 9px,
                    rgba(255, 255, 255, .22) 9px 10px);
  isolation: isolate;
  cursor: crosshair;
}
.hui-zone.jeu-en-cours{ touch-action: manipulation; }

.hui-zone::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(28, 36, 50, .09);
  border-radius: inherit;
}

/* ------------------------------------------------------------------ HUD -- */

.hui-hud{
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem 1.75rem;
  padding: .7rem .95rem;
  color: var(--hui-encre);
  background: linear-gradient(180deg,
              rgba(236, 224, 200, .97) 0%,
              rgba(236, 224, 200, .9) 70%,
              rgba(236, 224, 200, 0) 100%);
  border-radius: var(--hui-rayon) var(--hui-rayon) 0 0;
}

.hui-hud-item{ display: flex; flex-direction: column; gap: .2rem; }
.hui-hud-dette{ flex: 1 1 240px; min-width: 200px; }

.hui-hud-label{
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .68;
}
.hui-hud-label b{
  font-family: var(--hui-chiffres);
  font-size: .95rem;
  letter-spacing: 0;
  color: var(--hui-alarme);
}

.hui-hud-val{
  font-family: var(--hui-chiffres);
  font-size: 1.45rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hui-chrono{ letter-spacing: -.02em; }
.hui-hud-lrar{ font-size: 1.05rem; }

/* La jauge mesure la distance à la saisie : on part au milieu. */
.hui-jauge{
  height: 9px;
  border-radius: 99px;
  background: rgba(28, 36, 50, .14);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(28, 36, 50, .12);
}
.hui-jauge > i{
  display: block;
  height: 100%;
  width: 50%;
  border-radius: inherit;
  background: var(--hui-tiede);
  transition: width .28s cubic-bezier(.2, .9, .3, 1), background-color .4s ease;
}
.hui-jauge[data-niveau="calme"]  > i{ background: var(--hui-calme); }
.hui-jauge[data-niveau="alarme"] > i{ background: var(--hui-alarme); }

.hui-jauge.perte > i{ animation: hui-encaisse .42s ease; }
@keyframes hui-encaisse{
  0%   { filter: brightness(2.1); }
  100% { filter: none; }
}

/* ------------------------------------------------------------- COURRIERS -- */
/* Des boutons, pour rester cliquables au clavier comme au doigt. */

.hui-item{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.hui-recommande{
  max-width: 140px;
  padding: .45rem .55rem .4rem;
  background: var(--hui-blanc);
  border: 1px solid #cfcabb;
  border-top: 7px solid var(--hui-rouge);   /* le liseré rouge du recommandé */
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(28, 36, 50, .22);
  color: var(--hui-rouge);
  font-family: var(--hui-comique);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.15;
}
.hui-recommande small{
  display: block;
  margin-top: .15rem;
  font-family: var(--hui-chiffres);
  font-size: .85rem;
  letter-spacing: .02em;
}

.hui-avis{
  max-width: 150px;
  padding: .45rem .55rem;
  background: var(--hui-ar);
  border: 2px solid var(--hui-ar-bord);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(28, 36, 50, .22);
  color: var(--hui-ar-texte);
  font-family: var(--hui-comique);
  font-weight: 700;
  font-size: .74rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hui-avis b{
  display: block;
  margin-top: .15rem;
  font-family: var(--hui-chiffres);
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: none;
}

.hui-item:focus-visible{ outline: 3px solid var(--hui-encre); outline-offset: 2px; }

/* --------------------------------------------------------------- MENACE -- */

.hui-menace{
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.1rem .7rem;
  min-width: min(320px, 86%);
  background: #7e1410;
  color: #fff;
  border: 3px solid #fff;
  outline: 3px solid #7e1410;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(28, 36, 50, .35);
  text-align: center;
}
.hui-menace-titre{
  margin: 0;
  font-family: var(--hui-comique);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hui-menace-barre{
  width: 100%;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
}
.hui-menace-barre > i{
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: inherit;
}

/* --- Le recours judiciaire : la seule issue, en vert d'espoir ----------
   Volontairement à l'opposé visuel de la menace rouge : c'est la seule
   chose de cette page qui joue en faveur du visiteur. */
.hui-recours{
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 63%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.1rem .7rem;
  min-width: min(320px, 86%);
  background: #14532d;
  color: #fff;
  border: 3px solid #fff;
  outline: 3px solid #14532d;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(28, 36, 50, .35);
  text-align: center;
  animation: hui-recours-pop .28s ease;
}
@keyframes hui-recours-pop{
  from{ transform: translate(-50%, -50%) scale(.85); opacity: 0; }
  to  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
.hui-recours-titre{
  margin: 0;
  font-family: var(--hui-comique);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hui-recours-barre{
  width: 100%;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
}
.hui-recours-barre > i{
  display: block;
  height: 100%;
  width: 100%;
  background: #86efac;
  border-radius: inherit;
}

/* --- Bilan de fin de partie ------------------------------------------- */
.hui-fin-stats{
  list-style: none;
  margin: .9rem 0 .2rem;
  padding: 0;
  display: grid;
  gap: .3rem;
  text-align: left;
  font-size: .93rem;
}
.hui-fin-stats li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .32rem .55rem;
  border-radius: 6px;
  background: rgba(28, 36, 50, .05);
}
.hui-fin-stats li b{
  font-family: var(--hui-chiffres);
  white-space: nowrap;
}
.hui-fin-stats li.alerte{ background: rgba(212, 69, 58, .1); }
.hui-fin-stats li.alerte b{ color: var(--hui-alarme); }

/* --- Prescription et intérêts dans le tableau de bord ------------------ */
.hui-hud-presc{ flex: 1 1 170px; min-width: 150px; }
.hui-interets{ opacity: .72; font-size: .82em; }

/* -------------------------------------------------------------- TAMPON -- */

.hui-tampon{
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  pointer-events: none;
  padding: .5rem 1.1rem;
  color: var(--hui-tampon);
  border: 4px double currentColor;
  border-radius: 6px;
  font-family: var(--hui-comique);
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(-11deg) scale(3);
}
.hui-tampon.frappe{ animation: hui-frappe 1.15s cubic-bezier(.2, 1.4, .3, 1) forwards; }

@keyframes hui-frappe{
  0%   { opacity: 0;   transform: translate(-50%, -50%) rotate(-24deg) scale(3); }
  22%  { opacity: .95; transform: translate(-50%, -50%) rotate(-11deg) scale(.94); }
  30%  { transform: translate(-50%, -50%) rotate(-11deg) scale(1.04); }
  38%  { transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
  75%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(-50%, -50%) rotate(-11deg) scale(1.06); }
}

.hui-zone.secousse{ animation: hui-secousse .34s ease; }
@keyframes hui-secousse{
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  45% { transform: translate(3px, -3px); }
  70% { transform: translate(-2px, 1px); }
}

/* ------------------------------------------------------------ CONSIGNE -- */

.hui-consigne{
  font-family: var(--hui-comique);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
  margin: 1.1rem auto 0;
  max-width: 34ch;
  min-height: 2.7em;
  transform: rotate(-.6deg);
}
.hui-consigne.pouls{ animation: hui-pouls .5s ease; }
@keyframes hui-pouls{
  0%   { transform: rotate(-.6deg) scale(1); }
  35%  { transform: rotate(.8deg)  scale(1.09); }
  100% { transform: rotate(-.6deg) scale(1); }
}

/* ----------------------------------------------------------- FIN / FORM -- */

.hui-fin{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--hui-encre);
  background: rgba(236, 224, 200, .96);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  animation: hui-apparait .3s ease;
}
@keyframes hui-apparait{ from{ opacity: 0; } to{ opacity: 1; } }

.hui-fin-titre{
  font-family: var(--hui-comique);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  margin: 0;
}
.hui-fin-temps{ margin: 0; }
.hui-fin-temps b{ font-family: var(--hui-chiffres); font-size: 1.3rem; }

.hui-fin-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.hui-fin-form label{ display: block; font-size: .85rem; opacity: .75; margin-bottom: .35rem; }
.hui-fin-ligne{ display: flex; gap: .5rem; justify-content: center; }
.hui-fin-ligne input{
  width: 5.5rem;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--hui-chiffres);
  font-size: 1.15rem;
  letter-spacing: .22em;
  padding: .45rem .5rem;
  border: 1px solid var(--hui-encre);
  border-radius: 8px;
  background: transparent;
  color: inherit;
}

/* ------------------------------------------------------------- RECORDS -- */

.hui-records{ margin-top: 1.75rem; }
.hui-classements{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem 2.5rem;
  margin: .75rem 0 .6rem;
}
.hui-classement-groupe h4{
  margin: 0 0 .4rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .68;
}
.hui-classement-groupe h4 a{ color: inherit; }
.hui-classement{ margin: 0; padding-left: 1.5rem; }
.hui-classement .vide{ list-style: none; margin-left: -1.5rem; opacity: .6; }
.hui-classement li{ margin: .25rem 0; }
.hui-classement b{ font-family: var(--hui-chiffres); }
.hui-classement .moi{ font-weight: 700; }
.hui-classement .moi::after{ content: ' ← vous'; font-weight: 400; opacity: .6; }

/* ---------------------------------------------------------- ADAPTATIONS -- */

@media (max-width: 640px){
  .hui-zone{ min-height: clamp(380px, 62vh, 500px); }
  .hui-hud{ gap: .5rem 1rem; padding: .6rem .7rem; }
  .hui-hud-val{ font-size: 1.1rem; }
  .hui-hud-lrar{ font-size: .95rem; }
  .hui-hud-dette{ order: 3; flex-basis: 100%; }
  .hui-recommande{ max-width: 128px; font-size: .74rem; }
  .hui-avis{ max-width: 138px; }
}

@media (prefers-color-scheme: dark){
  .hui-jeu{
    --hui-encre:       #eef1f5;
    --hui-kraft:       #211d15;
    --hui-kraft-trait: #3a3323;
    --hui-blanc:       #2a2a27;
    --hui-ar:          #4a3413;
    --hui-ar-texte:    #ffd9a1;
    --hui-tampon:      #ff6b5e;
  }
  .hui-zone{
    background-image: repeating-linear-gradient(45deg,
                      transparent 0 9px,
                      rgba(255, 255, 255, .05) 9px 10px);
  }
  .hui-zone::after{ box-shadow: inset 0 0 60px rgba(0, 0, 0, .45); }
  .hui-hud{
    background: linear-gradient(180deg,
                rgba(33, 29, 21, .97) 0%,
                rgba(33, 29, 21, .9) 70%,
                rgba(33, 29, 21, 0) 100%);
  }
  .hui-jauge{ background: rgba(238, 241, 245, .14); }
  .hui-recommande{ border-color: #4a4a45; color: #ff8a80; }
  .hui-fin{ background: rgba(33, 29, 21, .96); }
  .hui-tampon{ mix-blend-mode: screen; }
}

@media (prefers-reduced-motion: reduce){
  .hui-jauge > i{ transition: none; }
  .hui-zone.secousse,
  .hui-consigne.pouls,
  .hui-jauge.perte > i,
  .hui-fin{ animation: none; }
  .hui-consigne{ transform: none; }
  .hui-tampon{ transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
  .hui-tampon.frappe{ animation: hui-fondu 1.15s ease forwards; }
  @keyframes hui-fondu{
    0%, 80% { opacity: .95; }
    100%    { opacity: 0; }
  }
}