/* Le Domaine — mini-jeu « Patrouille d'éclaireur » (js/scout.js) : la roue, les pylônes, le feu,
   les balises. Le cadre vient de css/components/game.css.
   L'état est porté par #scout-arena : data-state (wheel, cables, fire, run, won). */

.scout-arena { position: relative; aspect-ratio: 16 / 8.4; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #06080c; user-select: none; -webkit-user-select: none; }
.scout-arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.9); transition: filter .8s; }
.scout-arena[data-state="run"] > img { filter: brightness(.38) saturate(.7) hue-rotate(-12deg); }
.scout-arena[data-state="won"] > img { filter: brightness(.8); }
.scout-field { position: absolute; inset: 0; }
/* le chrono : un trait qui se vide */
.scout-arena::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--scout), #fff); transform-origin: 0 50%; transform: scaleX(var(--time, 0)); }
.scout-arena.ouch { animation: sc-ouch .35s; }
@keyframes sc-ouch { 30% { box-shadow: inset 0 0 0 200px rgba(127, 196, 255, .22); } }

.wheel, .pylon, .fire, .beacon { position: absolute; left: var(--x); top: var(--y); padding: 0; transform: translate(-50%, -50%); border: 0; background: none; cursor: pointer; }
.wheel:focus-visible, .pylon:focus-visible, .fire:focus-visible, .beacon:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* la roue : huit pales, une dorée ; un repère fixe en haut */
.wheel { width: 17%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(231, 235, 245, .6); background: rgba(8, 12, 20, .55); }
.wheel::before { content: ''; position: absolute; left: 50%; top: -14px; width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--hay-hi); }
.wheel i { position: absolute; inset: 6%; border-radius: 50%; background: repeating-conic-gradient(rgba(231, 235, 245, .3) 0 4deg, transparent 4deg 45deg); }
.wheel i::after { content: ''; position: absolute; left: 50%; top: 0; width: 8px; height: 50%; margin-left: -4px; background: linear-gradient(180deg, var(--hay), rgba(240, 180, 90, .2)); box-shadow: 0 0 12px var(--hay); }
.wheel.done { border-color: var(--scout); box-shadow: 0 0 22px rgba(127, 196, 255, .6); }
.wheel.miss { animation: sc-miss .4s; }
@keyframes sc-miss { 40% { transform: translate(-50%, -44%); border-color: #ff8a5c; } }
/* pylônes : trois mâts reliés par un câble */
.pylon { width: 26px; height: 26px; border: 2px solid rgba(231, 235, 245, .7); background: rgba(8, 12, 20, .7); transform: translate(-50%, -50%) rotate(45deg); }
.pylon:disabled { opacity: .35; cursor: default; }
.pylon.done { background: var(--scout); border-color: #fff; box-shadow: 0 0 18px rgba(127, 196, 255, .8); }
/* le feu de camp */
.fire { width: 54px; height: 54px; border-radius: 50%; border: 2px dashed rgba(255, 226, 176, .6); background: rgba(20, 12, 6, .7); }
.fire::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 24px; transform: translate(-50%, -55%); background: #4a3a2a; clip-path: polygon(50% 0, 85% 55%, 70% 100%, 30% 100%, 15% 55%); }
.fire:disabled { opacity: .45; cursor: default; }
.fire:not(:disabled) { border-style: solid; border-color: var(--hay-hi); box-shadow: 0 0 20px rgba(240, 180, 90, .7); animation: sc-fire 1.6s ease-in-out infinite; }
.fire.lit { opacity: 1; border-style: solid; border-color: #ff8a5c; box-shadow: 0 0 26px rgba(255, 138, 92, .9); }
.fire:not(:disabled)::after, .fire.lit::after { background: linear-gradient(180deg, #fff3c8, #ff8a5c); }
@keyframes sc-fire { 50% { box-shadow: 0 0 34px 6px rgba(240, 180, 90, .9); } }
/* balise : une colonne de lumière */
.beacon { z-index: 2; width: 44px; height: 130px; transform: translate(-50%, -85%); background: linear-gradient(180deg, transparent, rgba(127, 196, 255, .55) 40%, #fff 100%); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 14px rgba(127, 196, 255, .9)); animation: sc-beacon 1s ease-in-out infinite; }
.beacon[hidden] { display: none; }
@keyframes sc-beacon { 50% { opacity: .7; } }
.game-hud .hud-count.hud-time { min-width: 5.4em; color: var(--pearl); font-size: 1rem; }

@media (max-width: 680px) {
  .scout-arena { margin-inline: 16px; aspect-ratio: 4 / 4.4; }
  .wheel { width: 30%; }
  .beacon { width: 40px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .fire:not(:disabled), .beacon, .scout-arena.ouch, .wheel.miss { animation: none; }
}