/* ═══════════════════════════════════════════════════════════════════════
   panelnoir.css — Don Mafio
   Le cadre PanelNoir du jeu, appliqué au site.

   ── Pourquoi un fichier séparé, et chargé en DERNIER ────────────────────
   Première tentative : le bloc était à la fin de style.css. Il n'a rien
   changé, et c'était normal — home.css est chargé après et cible
   `.home .feature-card`, plus spécifique que `.feature-card`. Une règle
   plus spécifique gagne quel que soit l'ordre des fichiers. D'où les
   sélecteurs `:is(.home, body)` ci-dessous : même poids que ceux de
   home.css, mais ce fichier passe après, donc c'est lui qui l'emporte.

   ── Le principe ─────────────────────────────────────────────────────────
   `border-image` est l'équivalent exact de l'Image.Type.Sliced d'Unity :
   les quatre coins sont posés tels quels, les côtés étirés dans un seul
   sens. Le liseré garde donc son épaisseur quelle que soit la taille du
   bloc — c'est tout l'intérêt.

   Le fichier utilisé est PanelNoir-web.png : c'est ton PanelNoir.png
   RECADRÉ sur sa zone opaque (386x464 au lieu de 410x482). L'original
   traînait une marge transparente d'une douzaine de pixels, héritée de
   l'atlas Unity, et c'est elle qui faisait déborder le fond et l'ombre
   autour du cadre. Une fois recadré, la découpe tombe juste : 14 px
   pile sur les quatre côtés, exactement la bordure déclarée dans Unity.
   L'original n'a pas été touché.

   `background-clip: padding-box` est indispensable ici : par défaut le
   fond d'un élément est peint SOUS sa bordure, donc le rouge du bouton
   ressortait tout autour du cadre.

   ⚠️ PAS de mot-clé `fill` : sans lui, seul le CADRE est dessiné et le
      fond de l'élément reste visible au centre. C'est ce qui préserve le
      grain de la refonte. Avec `fill`, le centre du PNG (#121212 plat)
      recouvrirait tout.

   ⚠️ Avec border-image, la `border-color` ne se voit plus. Les survols
      passent donc par la luminosité, pas par la couleur.

   Pour tout annuler : retirer le <link> de ce fichier dans les pages.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --panel-noir: url('images/PanelNoir-web.png');
  --panel-slice: 14;
  --panel-frame: 14px;      /* 1:1 avec le fichier = cadre net */
  --panel-frame-btn: 14px;  /* idem */
}

/* ── Panneaux et cartes ──────────────────────────────────────────────── */
:is(.home, body) :is(.feature-card, .mode-card, .hq-card, .rank-card,
                     .weapon-card, .rank-dialog-panel, .weapon-dialog-panel) {
  border-style: solid;
  border-color: transparent;
  border-width: var(--panel-frame);
  border-image-source: var(--panel-noir);
  border-image-slice: var(--panel-slice);
  border-image-width: var(--panel-frame);
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  /* ⭐ L'OMBRE EST UNE RÉPLIQUE DU PANNEAU, PAS UN RECTANGLE.
     box-shadow dessine toujours la BOÎTE de l'élément : avec un cadre
     découpé, on voyait deux bandes et un trou dans l'angle. drop-shadow,
     lui, suit la silhouette RÉELLEMENT dessinée, cadre compris — c'est
     donc exactement le PanelNoir recopié en noir plein et décalé.
     Le liseré clair du haut reste en box-shadow intérieur. */
  box-shadow: inset 0 2px 0 #f0e6d21a;
  filter: drop-shadow(6px 8px 0 #000);
  padding: 16px 18px;
}

/* Les petits angles dorés de la refonte tombaient DANS le motif du cadre.
   Le liseré du PanelNoir fait déjà ce travail. Une ligne à retirer si tu
   veux les récupérer. */
:is(.home, body) :is(.feature-card, .mode-card, .hq-card, .rank-card)::before {
  display: none;
}

:is(.home, body) :is(.feature-card, .mode-card, .hq-card, .rank-card):hover {
  border-color: transparent;
  filter: brightness(1.15) drop-shadow(9px 12px 0 #000);
  box-shadow: inset 0 2px 0 #f0e6d21a;
}

/* ── Boutons ─────────────────────────────────────────────────────────────
   Le cadre remplace la double bordure dorée. Le fond du bouton (rouge pour
   l'action principale, charbon pour la secondaire) reste visible au centre,
   puisqu'il n'y a pas de `fill`. */
:is(.home, body) .btn {
  border-style: solid;
  border-color: transparent;
  border-width: var(--panel-frame-btn);
  border-image-source: var(--panel-noir);
  border-image-slice: var(--panel-slice);
  border-image-width: var(--panel-frame-btn);
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: none;
  filter: drop-shadow(5px 7px 0 #000);
  min-height: 44px;
  padding: 10px 20px;
}
/* ⚠️ background-clip est RÉPÉTÉ sur chaque état. Écrire `background: #8b0000`
   en raccourci remet background-clip à sa valeur initiale (border-box) : sans
   ce rappel, le rouge ressortait tout autour du cadre dès le survol — c'est
   le débordement rouge visible sur la capture. */
:is(.home, body) .btn:hover,
:is(.home, body) .btn:focus,
:is(.home, body) .btn:focus-visible,
:is(.home, body) .btn:active {
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: none;
  filter: brightness(1.15) drop-shadow(7px 9px 0 #000);
}

/* ── Mobile : on ne change pas la DÉCOUPE (ça déformerait le motif),
      seulement l'échelle à laquelle le cadre est dessiné. ─────────────── */
@media (max-width: 720px) {
  :root { --panel-frame: 12px; --panel-frame-btn: 11px; }
  :is(.home, body) :is(.feature-card, .mode-card, .hq-card, .rank-card,
                       .weapon-card) { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.home, body) :is(.feature-card, .mode-card, .hq-card, .rank-card):hover,
  :is(.home, body) .btn:hover { filter: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PROGRESSION DE QG (Cabane → Quartier → Empire → Hôtel)
   Mise en cadre, chaque étape devenait un gros panneau : les quatre blocs
   masquaient la tour, écrasaient les flèches et mettaient les quatre
   niveaux sur le même plan. Or cette rangée raconte une PROGRESSION, pas
   une liste — d'où les flèches, les icônes petites et le dernier palier
   qui s'allume. On lui rend sa forme d'origine : ici, pas de panneau.
   ═══════════════════════════════════════════════════════════════════════ */
:is(.home, body) .hq-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  padding: 0;
  height: auto;
  gap: 8px;
}
:is(.home, body) .hq-card::before,
:is(.home, body) .hq-card::after { content: none; display: none; }
:is(.home, body) .hq-card img {
  width: 110px;
  height: 110px;
  margin-top: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
:is(.home, body) .hq-card-final img {
  filter: drop-shadow(0 0 16px rgba(232, 185, 35, 0.5));
}
:is(.home, body) .hq-card-final .hq-label { color: var(--gold); }
/* Les flèches redeviennent visibles : c'est elles qui disent « ça monte ». */
:is(.home, body) .hq-arrow { display: block; }
:is(.home, body) .hq-card:hover {
  transform: translateY(-6px) scale(1.05);
  filter: none;
  box-shadow: none;
}
:is(.home, body) .hq-card:hover img {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}

/* La grille en 4 colonnes avait été taillée pour 4 panneaux, flèches masquées.
   En rendant les flèches, on se retrouvait à 7 enfants dans 4 colonnes : la
   séquence passait sur deux lignes et ne voulait plus rien dire. La rangée
   redevient une LIGNE souple, et le bandeau translucide à liserés dorés
   revient poser les étapes devant la tour. */
:is(.home, body) .empire-progression {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px;
  margin: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
}
:is(.home, body) .hq-arrow {
  align-self: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: var(--gold-dim);
}

@media (max-width: 720px) {
  /* Sur mobile tout rétrécit pour que les quatre étapes et leurs flèches
     tiennent sur une ligne le plus longtemps possible : si la séquence se
     coupe en deux, on ne lit plus une progression. */
  :is(.home, body) .empire-progression { gap: 10px; padding: 16px 10px; }
  :is(.home, body) .hq-card img { width: 78px; height: 78px; }
  :is(.home, body) .hq-arrow { margin-bottom: 26px; font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TITRES DE SECTION
   Le cartouche à filet doré fin ne parlait pas la même langue que les
   cartes qu'il annonce. Même cadre pour tout le monde : c'est ce qui fait
   qu'on lit UN site et pas une collection de blocs.
   ═══════════════════════════════════════════════════════════════════════ */
:is(.home, body) .section-title,
:is(.home, body) .ranks .section-title {
  border-style: solid;
  border-color: transparent;
  border-width: var(--panel-frame);
  border-image-source: var(--panel-noir);
  border-image-slice: var(--panel-slice);
  border-image-width: var(--panel-frame);
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: inset 0 2px 0 #f0e6d21a;
  filter: drop-shadow(6px 8px 0 #000);
  padding: 12px 28px;
}
/* Le petit trait doré sous le titre saute : le cadre PanelNoir souligne déjà
   le titre, et un trait de plus faisait doublon. */
:is(.home, body) .section-title::after { display: none; content: none; }

/* ═══════════════════════════════════════════════════════════════════════
   DON WIKI
   Les blocs de capture et les titres reçoivent le même cadre que le reste
   du site : le wiki était la dernière page à parler une autre langue.
   ═══════════════════════════════════════════════════════════════════════ */
body .wiki-gallery .screen-block {
  background: transparent;
  border-style: solid;
  border-color: transparent;
  border-width: var(--panel-frame);
  border-image-source: var(--panel-noir);
  border-image-slice: var(--panel-slice);
  border-image-width: var(--panel-frame);
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: inset 0 2px 0 #f0e6d21a;
  filter: drop-shadow(6px 8px 0 #000);
  /* 32 px de marge intérieure + 14 px de cadre creusaient le bloc. */
  padding: 18px;
}
body :is(.wiki-gallery, .wiki-arsenal) > .container > h2 {
  display: table;           /* le cartouche épouse le texte au lieu de
                               traverser toute la largeur */
  margin-inline: auto;
  border-style: solid;
  border-color: transparent;
  border-width: var(--panel-frame);
  border-image-source: var(--panel-noir);
  border-image-slice: var(--panel-slice);
  border-image-width: var(--panel-frame);
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: inset 0 2px 0 #f0e6d21a;
  filter: drop-shadow(6px 8px 0 #000);
  padding: 12px 28px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION « CE QU'ON TROUVE DANS L'HÔTEL » (don-wiki)
   Une grille d'objets, une phrase chacun. Les descriptions sont courtes
   par choix : un objet de jeu se comprend en le voyant, le texte n'est
   là que pour dire ce qu'il change.
   ═══════════════════════════════════════════════════════════════════════ */
body .wiki-items { padding: 48px 0 24px; }
body .wiki-items .items-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--cream);
  font-size: 1.05rem;
}
body .item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}
body .item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 16px;
  border-style: solid;
  border-color: transparent;
  border-width: var(--panel-frame);
  border-image-source: var(--panel-noir);
  border-image-slice: var(--panel-slice);
  border-image-width: var(--panel-frame);
  border-image-repeat: stretch;
  background-clip: padding-box;
  box-shadow: inset 0 2px 0 #f0e6d21a;
  filter: drop-shadow(6px 8px 0 #000);
  transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1);
}
body .item-card:hover { transform: translateY(-4px); }
body .item-card img {
  width: auto;
  height: 96px;
  max-width: 100%;
  object-fit: contain;
  /* Les sprites viennent du jeu : l'ombre portée dure les pose sur la carte
     au lieu de les laisser flotter. */
  filter: drop-shadow(4px 6px 0 #0009);
}
body .item-card h3 {
  margin: 0;
  color: var(--gold);
  font-family: 'Caslon Antique', 'Cinzel', serif;
  font-size: 1.35rem;
}
body .item-card p {
  margin: 0;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.5;
}

/* Les deux cartes de groupe (composants, accessoires) montrent plusieurs
   sprites alignés : elles prennent deux colonnes quand la place le permet,
   sinon les objets seraient minuscules. */
body .item-card-wide { grid-column: span 2; }
body .item-card-wide img { height: 76px; }
@media (max-width: 560px) {
  body .item-card-wide { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ARME SECRÈTE — la 17e fiche de l'arsenal
   Elle ne cache pas une information manquante : elle annonce qu'il y a
   quelque chose à trouver. D'où le parti pris — pas de silhouette, pas de
   nom approchant, rien qui permette de deviner. Juste un signal brouillé.
   Le grésillement est décoratif : les libellés de statistiques restent
   lisibles et la valeur « ?? » est masquée aux lecteurs d'écran, qui
   entendent « inconnu » via aria-valuetext.
   ═══════════════════════════════════════════════════════════════════════ */
body .weapon-art-unknown {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  color: var(--gold);
  font-family: 'Caslon Antique', 'Cinzel', serif;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 1;
  background:
    repeating-linear-gradient(0deg, #0000 0 3px, #f0e6d20d 3px 4px),
    radial-gradient(circle at 50% 45%, #e8b9231f, #0000 62%);
}
body .weapon-art-unknown span {
  animation: secret-flicker 3.1s steps(1, end) infinite;
  text-shadow: 2px 0 #8b0000aa, -2px 0 #1f6f7aaa;
}
@keyframes secret-flicker {
  0%, 46%, 52%, 77%, 82%, 100% { opacity: 1; transform: translate(0, 0); }
  48%   { opacity: .35; transform: translate(-3px, 1px); }
  50%   { opacity: 1;   transform: translate(2px, -1px); }
  79%   { opacity: .5;  transform: translate(1px, 2px); }
}

body .weapon-title-glitch {
  position: relative;
  color: var(--gold);
  letter-spacing: .22em;
}
/* Deux copies décalées en rouge et cyan : le défaut d'impression qu'on
   associe à un signal abîmé. aria-hidden, elles ne sont pas relues. */
body .weapon-title-glitch::before,
body .weapon-title-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body .weapon-title-glitch::before { color: #8b0000; transform: translateX(-2px); opacity: .75; }
body .weapon-title-glitch::after  { color: #1f6f7a; transform: translateX(2px);  opacity: .55; }

body .weapon-stat-unknown { color: var(--gold); letter-spacing: .12em; }
body .weapon-meter-glitch > span {
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, #0000 6px 11px);
  animation: secret-meter 2.4s steps(6, end) infinite;
}
@keyframes secret-meter {
  0%   { clip-path: inset(0 0 0 0); }
  35%  { clip-path: inset(0 22% 0 0); }
  55%  { clip-path: inset(0 4% 0 0); }
  75%  { clip-path: inset(0 41% 0 0); }
  100% { clip-path: inset(0 12% 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  body .weapon-art-unknown span,
  body .weapon-meter-glitch > span { animation: none; }
}