/* Al Marj Target — édition web (PC). Chargée après /al-marj.css, uniquement sur le site.
   Le jeu de l'app est pensé pour un téléphone en portrait : ici il prend la largeur d'un écran de PC,
   avec un menu en deux colonnes, des survols, des entrées animées et une caméra qui bouge entre les écrans. */

/* ---------- Clics : seule la tête compte, pas son halo ---------- */
.amt-target::before, .amt-target::after { pointer-events: none; }

/* ---------- Transitions d'écran : la caméra ---------- */
.amt .amt-world { transition: filter .7s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.amt[data-screen="menu"] .amt-world, .amt[data-screen="end"] .amt-world { transform: scale(1.05); }
.amt[data-screen="count"] .amt-world { transform: scale(1.015); }

/* Le menu de mobile en une colonne garde son ordre sur petit écran. */
.amt-menu.is-web > .amt-col { display: contents; }
.amt-menu.is-web .amt-col > * { width: min(420px, 100%); }

/* Entrées : chaque bloc arrive à son tour, à chaque retour au menu ou à la fin. */
.amt[data-screen="menu"] .amt-menu.is-web .amt-col > *,
.amt[data-screen="end"] .amt-end > * { animation: amt-web-rise .6s cubic-bezier(.2, .8, .2, 1) both !important; animation-delay: calc(var(--i, 0) * 55ms + 80ms) !important; }
@keyframes amt-web-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Survols (souris) ---------- */
@media (hover: hover) and (pointer: fine) {
  .amt .amt-modes button { transition: border-color .2s, background .25s, transform .2s cubic-bezier(.2, .8, .2, 1); }
  .amt .amt-modes button:hover { border-color: rgba(255, 138, 31, .5); background: linear-gradient(180deg, rgba(255, 138, 31, .12), rgba(14, 12, 10, .8) 70%); transform: translateY(-3px); }
  .amt .amt-modes button:hover::before { background: rgba(255, 138, 31, .6); }

  .amt .amt-play { overflow: hidden; isolation: isolate; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s, letter-spacing .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
  .amt .amt-play::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
  .amt .amt-play:hover { background: #ff9a35; letter-spacing: .3em; box-shadow: 0 0 0 1px rgba(255, 138, 31, .7), 0 18px 44px -12px rgba(255, 138, 31, .75); transform: translateY(-2px); }
  .amt .amt-play:hover::before { transform: translateX(120%); }

  .amt .amt-legend li { transition: border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1), background .2s; }
  .amt .amt-legend li:hover { border-color: rgba(255, 138, 31, .45); background: rgba(30, 24, 18, .85); transform: translateY(-4px); }
  .amt .amt-legend li :is(img, svg) { transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
  .amt .amt-legend li:hover :is(img, svg) { transform: scale(1.14) rotate(-4deg); }

  .amt .amt-board li { transition: background .2s; }
  .amt .amt-board li:hover { background: rgba(255, 138, 31, .1); }
  .amt .amt-quit { transition: border-color .2s, background .2s, letter-spacing .3s; }
  .amt .amt-quit:hover { border-color: rgba(255, 138, 31, .55); background: rgba(40, 30, 20, .85); letter-spacing: .3em; }
  .amt :is(.amt-close, .amt-mute) { transition: background .2s, transform .2s; }
  .amt :is(.amt-close, .amt-mute):hover { background: rgba(255, 138, 31, .85) !important; color: #140d06; transform: scale(1.08); }

  /* En partie : un viseur, et la cible survolée se détache. */
  .amt[data-screen="play"] :is(.amt-field, .amt-target) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='4'%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Cpath d='M18 2v8M18 26v8M2 18h8M26 18h8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff8a1f' stroke-width='2'%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Cpath d='M18 2v8M18 26v8M2 18h8M26 18h8'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23fff'/%3E%3C/svg%3E") 18 18, crosshair; }
  .amt.is-sniper[data-screen="play"] :is(.amt-field, .amt-target) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='4'%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Cpath d='M18 2v8M18 26v8M2 18h8M26 18h8'/%3E%3C/g%3E%3Cg fill='none' stroke='%233ec5ff' stroke-width='2'%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Cpath d='M18 2v8M18 26v8M2 18h8M26 18h8'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23fff'/%3E%3C/svg%3E") 18 18, crosshair; }
  .amt-target .amt-target-body { transition: scale .12s ease-out; }
  .amt[data-screen="play"] .amt-target:not(.is-hit):hover .amt-target-body { scale: 1.06; }
}

/* ---------- Écran de PC ---------- */
@media (min-width: 1000px) and (min-height: 600px) {
  /* Menu : titre et départ à gauche, dossier de mission à droite. */
  .amt .amt-menu.is-web { padding: 84px clamp(40px, 5vw, 80px) 48px; }
  .amt[data-screen="menu"] .amt-menu.is-web { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 470px); justify-content: center; align-content: center; align-items: center; column-gap: clamp(48px, 6vw, 110px); min-height: 100%; }
  .amt-menu.is-web > .amt-col { display: flex; flex-direction: column; gap: 16px; width: 100%; }
  .amt-menu.is-web .amt-col > * { width: 100%; }
  .amt-menu.is-web .amt-col-right { padding: 22px 26px 24px; border: 1px solid var(--bf-line); border-top: 3px solid var(--bf-orange); background: linear-gradient(180deg, rgba(14, 12, 10, .82), rgba(14, 12, 10, .62)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); animation: amt-web-slide .75s cubic-bezier(.2, .8, .2, 1) .1s both !important; }
  @keyframes amt-web-slide { from { opacity: 0; transform: translateX(48px); } }
  .amt-menu.is-web .amt-logo { justify-items: start; padding-top: 0; text-align: left; }
  .amt-menu.is-web .amt-logo h1 { font-size: clamp(96px, 8.4vw, 140px); }
  .amt-menu.is-web .amt-logo h1 span { margin-left: 0; }
  .amt-menu.is-web .amt-logo .amt-rifling { left: 30%; width: 420px; height: 420px; }
  .amt-menu.is-web .amt-where { font-size: 13px; }
  .amt-menu.is-web .amt-modes { gap: 12px; }
  .amt-menu.is-web .amt-modes button { padding: 20px 18px 18px; }
  .amt-menu.is-web .amt-modes b { font-size: 30px; }
  .amt-menu.is-web .amt-modes small { font-size: 13px; }
  .amt-menu.is-web .amt-pitch { text-align: left; font-size: 15px; }
  .amt-menu.is-web .amt-tip { text-align: left; }
  .amt-menu.is-web .amt .amt-play, .amt .amt-menu.is-web .amt-play { min-height: 74px; font-size: 32px !important; }
  .amt-menu.is-web .amt-legend img, .amt-menu.is-web .amt-legend svg { width: 52px; height: 52px; }
  .amt-menu.is-web .amt-legend b { font-size: 21px; }
  .amt-menu.is-web .amt-legend small { font-size: 10px; }
  .amt-menu.is-web .amt-tiers b { font-size: 17px; }
  .amt-menu.is-web .amt-board ol { max-height: min(34vh, 320px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 31, .5) transparent; }

  /* HUD et cibles à l'échelle d'un écran de PC (sur mobile, la taille suit la largeur). */
  .amt-hud { grid-template-columns: 48px 1fr 72px 48px; padding: 22px 30px 0; }
  .amt-close, .amt-mute { width: 48px !important; height: 48px !important; }
  .amt-score small { font-size: 12px; }
  .amt-score strong { font-size: 58px; }
  .amt-clock { width: 72px; height: 72px; }
  .amt-clock b { font-size: 26px; }
  .amt-combo { bottom: 28px; padding: 12px 20px; grid-template-columns: auto 180px; }
  .amt-combo b { font-size: 28px; }
  /* À la souris, viser est plus dur qu'au doigt sur un petit écran : têtes plus grosses, et un terrain resserré
     au centre (les cibles tombent sur 72 % de sa largeur), donc moins de chemin entre deux têtes. */
  .amt .amt-field { left: 50%; right: auto; width: min(100%, 122vh); transform: translateX(-50%); }
  .amt[data-screen="down"] .amt-field { transform: translateX(-50%) scale(1.06); }
  .amt-target { width: clamp(84px, 17vh, 172px); }
  .amt-target.is-dunk { width: clamp(80px, 16vh, 160px); }
  .amt-target.is-sniper { width: clamp(94px, 19vh, 192px); }
  .amt-target.is-heart { width: clamp(70px, 13vh, 132px); }
  .amt-target.is-barrel { width: clamp(58px, 11vh, 110px); }
  .amt-life { bottom: -14px; height: 6px; }

  /* Compte à rebours et fin : plus grands, sans casser leur mise en page. */
  .amt-count strong { font-size: clamp(150px, 26vh, 260px); }
  .amt-count small { font-size: 18px; }
  .amt-end > * { width: min(560px, 100%); }
  .amt-final { font-size: clamp(110px, 17vh, 170px); }
  .amt-stats dd { font-size: 28px; }
  .amt-panel.amt-pause > * { width: min(480px, 100%); }
}

/* ---------- Fluidité (PC) ----------
   Ce qui faisait ramer : des flous animés sur tout l'écran (fin du générique, changement de monde, menu flouté),
   une ombre floue recalculée sur chaque tête à chaque image, et des effets plein écran redessinés en continu
   (fièvre, neige, tempête, braises). Ici tout passe par l'opacité et transform, que la carte graphique gère seule. */

/* Menu et fin : le décor s'assombrit (opacité) au lieu d'être flouté. */
.amt[data-screen="menu"] .amt-world, .amt[data-screen="end"] .amt-world { filter: none !important; }
.amt .amt-map { transition: filter .5s, opacity .7s ease; }
.amt[data-screen="menu"] .amt-map, .amt[data-screen="end"] .amt-map { opacity: .4; }

/* Fin du générique : fondu et léger zoom, sans flou. */
.amt.is-intro-out .amt-intro { animation-name: amt-intro-out-web !important; }
@keyframes amt-intro-out-web { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.06); } }
.amt.is-intro-out .amt-world { animation: none !important; }

/* Changement de monde : la même plongée, sans flou plein écran. */
.amt.is-warp-cover .amt-warp-card { animation-name: amt-card-web !important; }
@keyframes amt-card-web { from { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
/* Les rayons tournants (dégradé conique sous masque) faisaient tomber Firefox à 5-10 images par seconde, et animer
   le décor (sa carte porte un filtre de couleur) le forçait à recalculer ce filtre à chaque image.
   Le décor reste donc immobile : un voile uni s'assombrit par-dessus, puis les deux rideaux tombent et se lèvent. */
.amt.is-warping .amt-world, .amt.is-warp-reveal .amt-world, body .amt.is-warping .amt-world, body .amt.is-warp-reveal .amt-world { animation: none !important; }
.amt .amt-warp-lines { inset: 0; background: #0d0b0a; -webkit-mask: none; mask: none; opacity: 0; will-change: opacity; }
.amt.is-warping .amt-warp-lines, body .amt.is-warping .amt-warp-lines { animation: amt-veil-web .9s ease-in forwards !important; }
.amt.is-warp-cover .amt-warp-lines { opacity: 1; }
.amt.is-warp-reveal .amt-warp-lines { animation: amt-veil-out-web .8s ease-out forwards !important; }
@keyframes amt-veil-web { to { opacity: .85; } }
@keyframes amt-veil-out-web { from { opacity: 1; } to { opacity: 0; } }
.amt:is(.is-warping, .is-warp-cover, .is-warp-reveal) .amt-warp::before,
.amt:is(.is-warping, .is-warp-cover, .is-warp-reveal) .amt-warp::after { will-change: transform; }
.amt .amt-warp-card strong { text-shadow: 0 5px 0 rgba(0, 0, 0, .5); }
/* Ordre : voile, puis rideaux, puis la carte du monde. */
.amt .amt-warp::before, .amt .amt-warp::after { z-index: 1; }
.amt .amt-warp-card { z-index: 2; }

/* Effets de tir : à plusieurs cibles touchées à la suite, chacun comptait.
   Textes de points sans halo flou, marqueur d'impact sans masque, halos des cibles fixes. */
.amt .amt-float { text-shadow: 0 3px 0 rgba(0, 0, 0, .55) !important; }
.amt .amt-hitmarker { -webkit-mask: none; mask: none; filter: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M5 5l7 7M29 5l-7 7M5 29l7-7M29 29l-7-7' stroke='%23000' stroke-opacity='.6' stroke-width='6'/%3E%3Cpath d='M5 5l7 7M29 5l-7 7M5 29l7-7M29 29l-7-7' stroke='%23fff' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.amt .amt-target::before { animation: none !important; }
.amt .amt-spark { animation-name: amt-spark-web; }
@keyframes amt-spark-web { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }

/* Têtes : une ombre au sol fixe plutôt qu'un drop-shadow recalculé pendant qu'elles bougent. */
.amt .amt-target-body { filter: none !important; }
.amt .amt-target-body::before { position: absolute; left: 14%; right: 14%; bottom: -5%; z-index: -1; height: 14%; content: ""; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); }
.amt .amt-target.is-hit .amt-target-body { animation-name: amt-hit-web !important; }
@keyframes amt-hit-web { 30% { transform: scale(1.25) rotate(-12deg); filter: brightness(2.2); } to { transform: scale(.2) rotate(40deg) translateY(-60%); opacity: 0; } }

/* Fièvre (combo) : la bordure lumineuse pulse en opacité, l'ombre elle-même ne bouge plus. */
.amt.is-fever::after { box-shadow: inset 0 0 0 3px rgba(255, 150, 40, .75), inset 0 0 80px rgba(255, 90, 30, .65) !important; animation: amt-fever-web .7s ease-in-out infinite alternate !important; will-change: opacity; }
@keyframes amt-fever-web { from { opacity: .6; } to { opacity: 1; } }
.amt.is-critical::before { will-change: opacity; }

/* Météo : déplacée par transform (une tuile exacte par boucle, donc sans saut). */
.amt[data-theme="snow"] .amt-weather { inset: -120px !important; background-size: 60px 60px, 30px 30px !important; animation: amt-snow-web 5s linear infinite !important; will-change: transform; }
@keyframes amt-snow-web { from { transform: translate(0, 0); } to { transform: translate(60px, 120px); } }
.amt[data-theme="dusk"] .amt-weather { right: auto !important; width: 440% !important; background-size: 50% 100% !important; background-repeat: repeat-x !important; animation: amt-storm-web 2.6s linear infinite !important; will-change: transform; }
@keyframes amt-storm-web { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.amt[data-theme="ash"] .amt-weather { inset: -180px !important; background: radial-gradient(rgba(255, 140, 60, .9) 1.4px, transparent 2px) 0 0 / 70px 90px !important; animation: amt-embers-web 4s linear infinite !important; will-change: transform; }
@keyframes amt-embers-web { from { transform: translate(0, 0); } to { transform: translate(70px, -180px); } }
.amt[data-theme="ash"] .amt-world::after { background: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(0, 0, 0, .55)), linear-gradient(transparent 55%, rgba(40, 36, 34, .55)); }
.amt[data-theme="rain"] .amt-weather::after { mix-blend-mode: normal !important; }

/* ---------- Mode allégé : sans accélération graphique ----------
   Le décor garde sa carte et ses couleurs, mais plus aucun calque plein écran animé par-dessus. */
body.amt-lite .amt :is(.amt-dust, .amt-weather) { display: none !important; }
body.amt-lite .amt .amt-map { animation: none !important; transform: none !important; }
body.amt-lite .amt .amt-world { transition: none !important; transform: none !important; }
body.amt-lite .amt .amt-world::after,
body.amt-lite .amt[data-screen="menu"]::after, body.amt-lite .amt[data-screen="end"]::after { display: none !important; }
body.amt-lite .amt .amt-rifling { animation: none !important; }
body.amt-lite .amt .amt-map { transition: opacity .3s; }
/* Fin du générique : un fondu court, et le menu apparaît d'un bloc au lieu de douze animations à la fois. */
body.amt-lite .amt.is-intro-out .amt-intro { animation: amt-lite-out .35s ease-out forwards !important; }
@keyframes amt-lite-out { to { opacity: 0; } }
body.amt-lite .amt[data-screen="menu"] .amt-menu.is-web .amt-col > *,
body.amt-lite .amt[data-screen="end"] .amt-end > *,
body.amt-lite .amt.is-intro-out .amt-menu > *,
body.amt-lite .amt-menu.is-web .amt-col-right { animation: none !important; }
body.amt-lite .amt[data-screen="menu"] .amt-menu, body.amt-lite .amt[data-screen="end"] .amt-end { animation: amt-lite-in .3s ease-out both !important; }
@keyframes amt-lite-in { from { opacity: 0; } }
body.amt-lite .amt.is-fever::after, body.amt-lite .amt.is-critical::before { animation: none !important; opacity: .85; }
/* La carte ne porte plus de filtre : Firefox le recalculait sous chaque cible qui bouge (une image sur deux ratée).
   La teinte de chaque monde passe par un voile de couleur fixe (l'élément du soleil, masqué en mode allégé). */
body.amt-lite .amt .amt-map { filter: none !important; }
body.amt-lite .amt .amt-sun { display: block !important; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; transform: none; animation: none !important; opacity: 1 !important; background: none; }
body.amt-lite .amt[data-theme="dusk"] .amt-sun { background: rgba(130, 60, 18, .2); }
body.amt-lite .amt[data-theme="rain"] .amt-sun { background: rgba(8, 16, 26, .48); }
body.amt-lite .amt[data-theme="ash"] .amt-sun { background: rgba(22, 16, 12, .25); }
body.amt-lite .amt[data-theme="night"] .amt-sun { background: rgba(6, 14, 40, .64); }
/* Tirs : pas d'étincelles ni de halo sous les têtes. */
body.amt-lite .amt .amt-spark { display: none !important; }
body.amt-lite .amt .amt-target:is(.is-face, .is-moving, .is-barrel)::before { display: none; }