/* La Côte enchevêtrée — la traque des Barons (js/hunt.js) : tableau des avis de recherche,
   dossier du Baron, arène. Le cadre vient de css/components/game.css.
   L'état est porté par #hunt-arena : data-state (idle, run, won, lost), data-baron.
   Silhouettes : .baron--<shape> (pike, hood, scope, censer, bomb, horns, pack, staff). */

/* ---------- Avis de recherche ---------- */
.wanted-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 18px 24px 0; }
.poster { position: relative; display: grid; align-content: start; gap: 3px; padding: 6px 6px 9px; cursor: pointer; text-align: center; background: #14131c; border: 1px solid var(--line-strong); font: inherit; color: var(--pearl); transition: border-color .2s, transform .2s var(--ease), background .2s; }
.poster:hover, .poster:focus-visible { outline: 0; border-color: #fff; transform: translateY(-2px); }
.poster[aria-checked="true"] { border-color: var(--ether); background: rgba(111, 211, 255, .09); }
.poster-kicker { font-size: .56rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #ff7a66; }
.poster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); filter: saturate(.85) contrast(1.05); transition: filter .4s; }
.poster b { margin-top: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.poster-name { font-size: .66rem; letter-spacing: .08em; color: var(--muted); }
.poster-state { font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ether-hi); }
.poster.is-locked { opacity: .5; }
.poster.is-locked .poster-state { color: var(--faint); }
.poster.is-done img { filter: grayscale(1) brightness(.5); }
.poster.is-done .poster-state { color: #ff7a66; }
/* la croix d'une cible rayée */
.poster.is-done::before, .poster.is-done::after { content: ''; position: absolute; left: 12%; right: 12%; top: 36%; z-index: 1; height: 3px; background: #ff5a4a; box-shadow: 0 0 10px rgba(255, 90, 74, .7); transform: rotate(-24deg); pointer-events: none; }
.poster.is-done::after { transform: rotate(24deg); }

/* ---------- Dossier ---------- */
.hunt-file { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin: 14px 24px 0; border: 1px solid var(--line); background: rgba(6, 9, 18, .6); }
.file-photo { position: relative; min-height: 300px; margin: 0; overflow: hidden; }
.file-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.file-photo figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 12px; background: rgba(6, 8, 16, .78); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.file-body { padding: 20px 22px; }
.file-body h3 { margin: 4px 0 0; font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.file-name { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ether-hi); }
.file-quote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--ether); background: rgba(111, 211, 255, .06); }
.file-quote p { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: 1.2rem; line-height: 1.35; color: #e9e3d6; }
.file-quote cite { display: block; margin-top: 4px; font-size: .6rem; font-style: normal; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.file-bio { margin: 0 0 12px; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.file-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .84rem; line-height: 1.5; }
.file-facts dt { font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ether-hi); padding-top: .25em; white-space: nowrap; }
.file-facts dd { margin: 0; color: var(--pearl); }

/* ---------- Arène ---------- */
.hunt-arena { position: relative; aspect-ratio: 16 / 7.6; margin: 14px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #07080f; user-select: none; -webkit-user-select: none; }
.hunt-arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) saturate(.8); transition: filter .8s; }
.hunt-arena[data-state="won"] > img { filter: brightness(.75) saturate(1.05); }
.hunt-arena[data-state="lost"] > img { filter: brightness(.25) saturate(.3); }
.hunt-field { position: absolute; inset: 0; cursor: crosshair; }
/* le chrono : un trait qui se vide */
.hunt-arena::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--ether), #fff); transform-origin: 0 50%; transform: scaleX(var(--time, 0)); transition: transform .12s linear; }
.hunt-arena.ouch { animation: ouch .35s; }
@keyframes ouch { 30% { box-shadow: inset 0 0 0 200px rgba(255, 70, 50, .28); } }

.baron, .add, .lure, .hazard { position: absolute; left: var(--x); top: var(--y); padding: 0; transform: translate(-50%, -50%); cursor: crosshair; border: 0; background: none; }
.baron[hidden] { display: none; }
.baron { width: 62px; height: 62px; z-index: 2; color: var(--ether); filter: drop-shadow(0 0 10px rgba(111, 211, 255, .8)); }
.baron::before { content: ''; position: absolute; inset: 4px; background: linear-gradient(180deg, #d9f4ff, currentColor 55%, #1c3a66); clip-path: var(--shape); }
/* l'œil : rouge pour le vrai, bleu pour les leurres */
.baron::after { content: ''; position: absolute; left: 50%; top: 30%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #dff6ff; box-shadow: 0 0 8px #fff; }
.baron--scope.is-real::after { background: #ff3b2f; box-shadow: 0 0 9px #ff3b2f; }
.baron--pike { --shape: polygon(0 62%, 18% 40%, 46% 34%, 58% 8%, 70% 34%, 100% 46%, 86% 70%, 30% 78%); width: 96px; height: 54px; color: #ffb061; filter: drop-shadow(0 0 12px rgba(255, 150, 60, .9)); }
.baron--pike[data-dir="left"]::before { transform: scaleX(-1); }
.baron--pike::after { display: none; }
.baron--hood { --shape: polygon(50% 0, 82% 22%, 76% 60%, 100% 100%, 0 100%, 24% 60%, 18% 22%); width: 52px; height: 58px; }
.baron--scope { --shape: polygon(38% 0, 62% 0, 70% 26%, 100% 34%, 100% 46%, 70% 50%, 78% 100%, 22% 100%, 30% 50%, 0 46%, 0 34%, 30% 26%); }
.baron--censer { --shape: polygon(30% 0, 70% 0, 82% 30%, 100% 44%, 86% 100%, 14% 100%, 0 44%, 18% 30%); width: 76px; height: 76px; color: #ffb061; }
.baron--bomb { --shape: polygon(40% 0, 60% 0, 66% 22%, 92% 40%, 100% 70%, 74% 100%, 26% 100%, 0 70%, 8% 40%, 34% 22%); width: 56px; height: 60px; }
.baron--horns { --shape: polygon(0 0, 22% 26%, 50% 14%, 78% 26%, 100% 0, 88% 52%, 78% 100%, 22% 100%, 12% 52%); width: 78px; height: 78px; color: var(--hive); filter: drop-shadow(0 0 12px rgba(168, 224, 106, .8)); }
.baron--pack { --shape: polygon(34% 0, 66% 0, 72% 22%, 100% 12%, 100% 52%, 76% 60%, 84% 100%, 16% 100%, 24% 60%, 0 52%, 0 12%, 28% 22%); width: 68px; height: 88px; color: #ffb061; }
.baron--staff { --shape: polygon(44% 0, 56% 0, 60% 18%, 90% 28%, 100% 60%, 80% 100%, 20% 100%, 0 60%, 10% 28%, 40% 18%); width: 84px; height: 88px; color: #9bb4ff; filter: drop-shadow(0 0 14px rgba(120, 150, 255, .9)); }
.baron.risen { color: #c58bff; }
.baron:focus-visible, .add:focus-visible, .lure:focus-visible, .hazard:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.baron.blinked { animation: blinked .5s ease-out; }
@keyframes blinked { from { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
/* la Farceuse : visible un instant après chaque saut, puis presque rien */
.baron.cloaked { opacity: .2; }
.baron.cloaked.blinked { animation: cloak-in 1.1s ease-out; }
@keyframes cloak-in { 0%, 45% { opacity: 1; } 100% { opacity: .2; } }
.baron.decoy { opacity: .9; }
.baron.struck { animation: struck .22s; }
.baron.struck.blinked { animation: struck .22s, blinked .5s ease-out; }
@keyframes struck { 50% { filter: brightness(2.6); } }
/* garde : l'encensoir flambe, ou le bouclier abyssal se ferme */
.baron.guarded { color: #ff5a2a; filter: drop-shadow(0 0 18px rgba(255, 90, 40, 1)); }
.baron.guarded::before { animation: flare .3s ease-in-out infinite alternate; }
@keyframes flare { to { transform: scale(1.12); } }
.baron--pack.guarded, .baron.shielded { color: #b58cff; filter: drop-shadow(0 0 16px rgba(170, 120, 255, 1)); }
.baron--pack.guarded::before { animation: none; }
.baron.shielded { outline: 3px solid rgba(181, 140, 255, .7); outline-offset: 6px; border-radius: 50%; }

.add { width: 34px; height: 34px; z-index: 1; }
.add::before { content: ''; position: absolute; inset: 4px; background: var(--hive); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); filter: drop-shadow(0 0 7px rgba(168, 224, 106, .9)); }
.hunt-arena[data-baron="fanatic"] .add::before { background: var(--ether); filter: drop-shadow(0 0 7px rgba(111, 211, 255, .9)); }
/* faux engramme exotique */
.lure { width: 32px; height: 32px; z-index: 1; animation: lure-in .3s ease-out; }
.lure::before { content: ''; position: absolute; inset: 3px; background: linear-gradient(135deg, #fff3b0, #f2c230 55%, #a8760a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 9px rgba(255, 210, 60, .95)); }
@keyframes lure-in { from { opacity: 0; transform: translate(-50%, -160%); } }
/* mine (plusieurs clics) et roquette (un seul) : l'anneau se referme avec la mèche */
.hazard { width: 46px; height: 46px; z-index: 3; border-radius: 50%; }
.hazard::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ff5a4a 45%, #7a1208 100%); box-shadow: 0 0 14px 3px rgba(255, 80, 60, .8); }
.hazard::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 120, 100, .9); animation: fuse var(--fuse, 3s) linear forwards; }
@keyframes fuse { from { transform: scale(1.5); opacity: .3; } to { transform: scale(.45); opacity: 1; } }
.hazard--rocket { width: 36px; height: 36px; }
.hazard--rocket::before { inset: 9px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #fff, #ffb061 50%, #c2410c); box-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 150, 60, .95)); }
.hazard--rocket::after { border-color: rgba(255, 176, 97, .9); }
.hazard.struck::before { animation: struck .2s; }
.game-hud .hud-count.hud-time { min-width: 3.2em; color: var(--pearl); }
.game-hud .hud-count.hud-hp { letter-spacing: .2em; color: var(--ether-hi); }

@media (max-width: 1020px) {
  .wanted-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hunt-file { grid-template-columns: minmax(0, 1fr); }
  .file-photo { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) {
  .wanted-board, .hunt-file, .hunt-arena { margin-inline: 16px; }
  .wanted-board { gap: 6px; }
  .poster { padding: 4px 4px 7px; }
  .poster b { font-size: .56rem; letter-spacing: 0; }
  .poster-kicker { font-size: .42rem; letter-spacing: .12em; }
  .poster-name { display: none; }
  .poster-state { font-size: .46rem; letter-spacing: .06em; }
  .hunt-arena { aspect-ratio: 4 / 3.6; }
  .file-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .file-facts dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .baron, .baron::before, .lure, .hunt-arena.ouch { animation: none !important; }
  .baron.cloaked { opacity: .45; }
}
/* le lien de la visionneuse occupe toute la vignette du dossier */
.hunt-file .file-photo > a { position: absolute; inset: 0; display: block; }