/* La Zone morte européenne — mini-jeu « Augure » (js/hawk.js) : la nuit, la lumière, les plumes,
   les Émissaires, le cri du faucon. Le cadre vient de css/components/game.css.
   L'état est porté par #hawk-arena : data-state (idle, run, won, lost), data-kind (search,
   barrier), classe is-locked tant que l'entrée n'est pas trouvée ; --lx / --ly : la lumière. */

.hawk-arena { position: relative; aspect-ratio: 16 / 8.4; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #04060a; user-select: none; -webkit-user-select: none; touch-action: none; }
.hawk-arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(.9); transition: filter .8s; }
.hawk-arena[data-state="lost"] > img, .hawk-arena.is-locked > img { filter: brightness(.22) saturate(.3); }
.hawk-arena.is-locked::before { content: 'Entrée introuvable'; position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; font-size: .8rem; font-weight: 800; letter-spacing: .4em; text-transform: uppercase; color: var(--faint); }
.hawk-field { position: absolute; inset: 0; cursor: crosshair; }
/* la nuit, percée par la lumière */
.hawk-arena[data-state="run"] .hawk-field::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle var(--lr, 13cqw) at var(--lx, 50%) var(--ly, 50%), transparent 0, rgba(3, 5, 9, .35) 62%, rgba(3, 5, 9, .94) 100%); }
.hawk-arena { container-type: inline-size; }
.hawk-arena[data-kind="barrier"] .hawk-field::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0, 0, 0, .9) 0 58%, rgba(0, 0, 0, .5) 66%, transparent 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 0 30px 4px rgba(159, 232, 255, .5); }
/* le chrono : un trait qui se vide */
.hawk-arena::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; height: 4px; background: linear-gradient(90deg, var(--gold), #fff); transform-origin: 0 50%; transform: scaleX(var(--time, 0)); transition: transform .12s linear; }
.hawk-arena.ouch { animation: hk-ouch .4s; }
@keyframes hk-ouch { 30% { box-shadow: inset 0 0 0 200px rgba(159, 232, 255, .28); } }

.feather, .emissary, .cry { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.feather, .emissary { z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .18s; }
.feather.lit, .emissary.lit { opacity: 1; pointer-events: auto; }
/* plume : une lame dorée, penchée */
.feather { width: 20px; height: 44px; }
.feather::before { content: ''; position: absolute; inset: 0; transform: rotate(24deg); background: linear-gradient(180deg, #fff, #ffd27a 55%, rgba(255, 210, 122, .2)); clip-path: polygon(50% 0, 92% 30%, 78% 78%, 50% 100%, 22% 78%, 8% 30%); filter: drop-shadow(0 0 8px #ffe9b0) drop-shadow(0 0 18px rgba(255, 210, 122, .9)); animation: feather 2.6s ease-in-out infinite; }
@keyframes feather { 50% { transform: rotate(18deg) translateY(-3px); } }
/* Émissaire : une silhouette corrompue ; éveillé, son liseré se vide */
.emissary { width: 40px; height: 50px; }
.emissary::before { content: ''; position: absolute; inset: 0; background: #000; clip-path: polygon(50% 0, 80% 16%, 70% 44%, 100% 100%, 0 100%, 30% 44%, 20% 16%); filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(159, 232, 255, .8)); }
.emissary::after { content: ''; position: absolute; left: 50%; top: 20%; width: 12px; height: 4px; margin-left: -6px; background: radial-gradient(circle at 2px 2px, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 10px 2px, #fff 0 2px, transparent 2.5px); }
.emissary.awake { opacity: 1; pointer-events: auto; animation: emissary .5s ease-in-out infinite; }
@keyframes emissary { 50% { transform: translate(-50%, -50%) scale(1.14); } }
.feather:focus-visible, .emissary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* cri du faucon : un anneau doré qui traverse le noir */
.cry { z-index: 4; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ffe9b0; pointer-events: none; animation: cry 1.5s ease-out forwards; }
@keyframes cry { from { opacity: .95; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(7); } }
.game-hud .hud-count.hud-time { min-width: 3.4em; color: var(--pearl); font-size: 1rem; }

@media (max-width: 680px) {
  .hawk-arena { margin-inline: 16px; aspect-ratio: 4 / 4.4; }
}
@media (prefers-reduced-motion: reduce) {
  .feather::before, .emissary.awake, .hawk-arena.ouch { animation: none; }
  .cry { animation: none; opacity: .9; transform: translate(-50%, -50%) scale(3); }
}