/* =========================================================
   WANTED LEVEL — HUD розыска в стиле GTA
   Звёзды набираются по мере скролла страницы, на 4–5 звёздах
   по краям экрана бьют полицейские мигалки.
   Подключается ПОСЛЕ style.css, свои классы (.wl*) — каскад не трогает.
   ========================================================= */

/* ---------- HUD ---------- */
.wl{
  position:fixed;
  right:clamp(12px,2.2vw,30px);
  bottom:clamp(12px,2.4vw,30px);
  z-index:9500;
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px 9px;
  border:1px solid rgba(234,234,244,.10);
  border-radius:14px;
  background:rgba(15,15,26,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translate3d(0,14px,0);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,border-color .3s;
  -webkit-tap-highlight-color:transparent;
}
.wl.is-on{opacity:1;visibility:visible;transform:none}
.wl:hover{border-color:rgba(240,18,122,.45)}

/* выключенный розыск: блёклый HUD, который ждёт клика, чтобы вернуться */
.wl.is-off{opacity:.42}
.wl.is-off:hover,.wl.is-off:focus-within{opacity:1}
.wl.is-off .wl__cap{color:rgba(234,234,244,.5);animation:none}

/* кнопка со звёздами — она же «сбросить розыск» */
.wl__main{
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;
  -webkit-tap-highlight-color:transparent;
}

/* выключатель звука */
.wl__snd{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;margin-bottom:-1px;padding:0;
  border:0;border-radius:8px;background:none;cursor:pointer;
  color:rgba(234,234,244,.55);
  transition:color .25s ease,background .25s ease;
}
.wl__snd svg{width:16px;height:16px}
.wl__snd:hover{color:var(--cream);background:rgba(234,234,244,.08)}
.wl__snd .wl__cross{opacity:0;transition:opacity .2s ease}
.wl__snd .wl__wave{opacity:1;transition:opacity .2s ease}
.wl__snd.is-off{color:rgba(234,234,244,.35)}
.wl__snd.is-off .wl__cross{opacity:1}
.wl__snd.is-off .wl__wave{opacity:0}

/* ---------- ВАРИАНТЫ ПОЛОЖЕНИЯ (data-pos на самом HUD) ----------
   br — правый низ (по умолчанию)   tr — правый верх, канон GTA V
   bl — левый низ, «место миникарты»  tc — по центру под шапкой        */
.wl[data-pos="tr"]{
  top:calc(var(--wl-top,84px) + 14px);bottom:auto;
  right:clamp(12px,2.2vw,30px);left:auto;
  transform:translate3d(0,-14px,0);
}
.wl[data-pos="tr"].is-on{transform:none}
.wl[data-pos="bl"]{
  left:clamp(12px,2.2vw,30px);right:auto;
  bottom:clamp(12px,2.4vw,30px);top:auto;
  flex-direction:row-reverse;
}
.wl[data-pos="bl"] .wl__main{align-items:flex-start}
.wl[data-pos="tc"]{
  top:calc(var(--wl-top,84px) + 14px);bottom:auto;
  left:50%;right:auto;
  transform:translate3d(-50%,-14px,0);
}
.wl[data-pos="tc"] .wl__main{align-items:center}
.wl[data-pos="tc"].is-on{transform:translate3d(-50%,0,0)}

.wl__stars{display:flex;gap:clamp(3px,.6vw,7px)}

.wl__s{
  width:clamp(19px,2.3vw,29px);height:clamp(19px,2.3vw,29px);
  color:rgba(234,234,244,.15);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
  transition:color .28s ease,filter .28s ease,transform .28s var(--ease);
}
.wl__s svg{width:100%;height:100%}
.wl__s.is-lit{
  color:#ffd24a;
  filter:drop-shadow(0 0 9px rgba(255,196,64,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.85));
}
/* новая звезда мигает как в игре, потом фиксируется */
.wl__s.is-new{animation:wlBlink .17s steps(1,end) 7}
@keyframes wlBlink{
  0%,49%{opacity:1;transform:scale(1.22)}
  50%,100%{opacity:.12;transform:scale(1)}
}

.wl__cap{
  font:700 clamp(11px,1.05vw,13px)/1 'Barlow Condensed','Public Sans',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,234,244,.62);
  transition:color .3s ease;
}
.wl[data-level="5"] .wl__cap{color:#ff4d6d}
.wl[data-level="5"] .wl__cap{animation:wlCap .82s steps(1,end) infinite}
@keyframes wlCap{0%,55%{opacity:1}56%,100%{opacity:.25}}
.wl.is-cleared .wl__cap{color:var(--cyan);animation:none}

/* ---------- ПОЛИЦЕЙСКИЕ МИГАЛКИ ---------- */
.wl-flash{
  position:fixed;inset:0;z-index:8900;pointer-events:none;
  opacity:0;                     /* --k выставляет JS по уровню розыска */
  transition:opacity .7s ease;
  mix-blend-mode:screen;
}
.wl-flash.is-on{opacity:var(--k,0)}
.wl-flash i{
  position:absolute;top:-15%;bottom:-15%;width:32vw;display:block;opacity:0;
}
.wl-flash__b{left:-10vw;background:radial-gradient(58% 48% at 0% 50%,rgba(45,165,243,.5),rgba(45,165,243,0) 72%)}
.wl-flash__r{right:-10vw;background:radial-gradient(58% 48% at 100% 50%,rgba(255,42,74,.48),rgba(255,42,74,0) 72%)}
.wl-flash.is-on .wl-flash__b{animation:wlSiren .86s steps(1,end) infinite}
.wl-flash.is-on .wl-flash__r{animation:wlSiren .86s steps(1,end) infinite .43s}
@keyframes wlSiren{
  0%,14%{opacity:.9}
  15%,26%{opacity:.08}
  27%,38%{opacity:.75}
  39%,100%{opacity:0}
}

/* ---------- АДАПТИВ И ДОСТУПНОСТЬ ---------- */
@media (max-width:640px){
  .wl{padding:8px 10px 7px;gap:6px;border-radius:12px}
  .wl__main{gap:5px}
  .wl__snd{width:24px;height:24px}
  .wl-flash{display:none}          /* на телефоне мигалки во весь экран — перебор */
}
@media (prefers-reduced-motion:reduce){
  .wl__s.is-new{animation:none}
  .wl[data-level="5"] .wl__cap{animation:none}
  .wl-flash{display:none}
}

/* ---------- «ОСТЫВАНИЕ»: розыск сходит, пока не скроллишь ---------- */
.wl.is-cooling .wl__s.is-lit{animation:wlCool 1.05s ease-in-out infinite}
.wl.is-cooling .wl__s.is-lit:nth-child(2){animation-delay:.08s}
.wl.is-cooling .wl__s.is-lit:nth-child(3){animation-delay:.16s}
.wl.is-cooling .wl__s.is-lit:nth-child(4){animation-delay:.24s}
.wl.is-cooling .wl__s.is-lit:nth-child(5){animation-delay:.32s}
@keyframes wlCool{0%,100%{opacity:1}50%{opacity:.22}}

/* сирены, выключенные читом SIREN */
.wl-flash.is-muted{opacity:0 !important}

/* ---------- ЭКРАН АРЕСТА ---------- */
.wl-busted{
  position:fixed;inset:0;z-index:9650;pointer-events:none;
  display:grid;place-content:center;justify-items:center;gap:10px;
  background:rgba(8,8,15,.62);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.wl-busted.is-on{opacity:1;visibility:visible}
.wl-busted__t{
  font:400 clamp(56px,13vw,170px)/.86 'Anton',Impact,'Arial Black',sans-serif;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;
  text-shadow:0 0 34px rgba(255,42,74,.9),0 0 90px rgba(255,42,74,.45),0 6px 0 rgba(0,0,0,.5);
  transform:scale(1.16);
  transition:transform .5s var(--ease-out);
}
.wl-busted.is-on .wl-busted__t{transform:scale(1)}
.wl-busted__s{
  font:700 clamp(11px,1.15vw,14px)/1 'Barlow Condensed','Public Sans',sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(234,234,244,.72);
}

@media (prefers-reduced-motion:reduce){
  .wl.is-cooling .wl__s.is-lit{animation:none;opacity:.5}
  .wl-busted__t,.wl-busted.is-on .wl-busted__t{transform:none}
}