:root{
  --r:#ff1f3a;--rd:#b80018;--rdim:#3d000a;
  --b:#2a8bff;--bd:#0049d9;--bdim:#001536;
  --y:#ffcc00;--ink:#f1f3f7;--mut:#7a808d;
  --sb:0;--sr:0;
  --sft:env(safe-area-inset-top,0px);
  --sfb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;}
html,body{margin:0;padding:0;height:100%;background:#000;color:var(--ink);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;}
body{cursor:crosshair;}
img{-webkit-user-drag:none;pointer-events:none;}
a,button,.pl,.tab{cursor:pointer;}
a{-webkit-tap-highlight-color:transparent;}
.amb{position:fixed;inset:0;pointer-events:none;background:radial-gradient(40% 60% at 25% 50%,rgba(255,31,58,calc(var(--sr)*.30)) 0%,transparent 65%),radial-gradient(40% 60% at 75% 50%,rgba(42,139,255,calc(var(--sb)*.30)) 0%,transparent 65%),radial-gradient(120% 90% at 50% 0%,#0a0a10 0%,#000 60%);transition:background 200ms ease;z-index:0;will-change:background;}
.g{position:fixed;inset:-50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:.04;mix-blend-mode:overlay;pointer-events:none;animation:gr 2.4s steps(6) infinite;z-index:1;}
.vg{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 50%,rgba(0,0,0,.85) 100%);pointer-events:none;z-index:2;}
@keyframes gr{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-1%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}

/* tape */
.t{position:fixed;left:0;right:0;height:36px;overflow:hidden;background:repeating-linear-gradient(-45deg,var(--y) 0 18px,#0a0a0a 18px 36px);border-top:2px solid #000;border-bottom:2px solid #000;z-index:30;box-shadow:0 10px 24px rgba(0,0,0,.5);}
.t--t{top:0;transform:rotate(-1deg) translateY(-4px)}
.t--b{bottom:0;transform:rotate(.8deg) translateY(4px)}
.t__i{position:absolute;inset:0;display:flex;align-items:center;gap:64px;white-space:nowrap;animation:mq 36s linear infinite;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45));padding-inline:32px;will-change:transform;}
.t__i--r{animation-direction:reverse;}
.t span{font-family:'Russo One',Oswald,Impact,sans-serif;font-size:21px;letter-spacing:2px;color:#0a0a0a;text-shadow:0 1px 0 rgba(255,255,255,.18);text-transform:uppercase;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* stage */
.st{position:relative;width:100%;height:100%;z-index:5;display:grid;grid-template-rows:1fr auto 1fr;align-items:center;justify-items:center;padding:clamp(48px,7vh,80px) 16px;gap:clamp(20px,3vh,36px);}

/* lightbar */
.lb-w{grid-row:1/2;align-self:end;position:relative;width:min(820px,92vw);aspect-ratio:5/1;display:grid;place-items:center;perspective:1200px;}
.lb{position:relative;width:100%;height:100%;transform:rotateX(8deg);filter:drop-shadow(0 28px 44px rgba(0,0,0,.7));}
.lb__bd{position:absolute;inset:14% 4% 28% 4%;display:grid;grid-template-columns:1fr .55fr 1fr;align-items:stretch;}

.lb__m{position:relative;background:linear-gradient(180deg,#f1f3f6 0%,#cdd1d8 50%,#a4a9b1 100%);border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -8px 18px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.55);overflow:hidden;}
.lb__m-shine{position:absolute;inset:6% 6% 55% 6%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.05));border-radius:3px;}
.lb__m-grille{position:absolute;inset:auto 14% 12% 14%;height:24%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 6px);opacity:.5;border-top:1px solid rgba(0,0,0,.15);}
.lb__m-bolt{position:absolute;top:14%;left:14%;width:7%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0%,#9aa1ad 60%,#444 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.25);}
.lb__m-bolt--r{left:auto;right:14%;}

/* Lens — embossed reflective glass, no chips */
.ln{position:relative;isolation:isolate;border-radius:14px;overflow:hidden;
  --on:0;--c:var(--r);--cd:var(--rd);--cdim:var(--rdim);
  background:
    /* warm/cool ambient bake */
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(0,0,0,.0) 22%,rgba(0,0,0,.55) 100%),
    /* radial main color */
    radial-gradient(150% 120% at 50% 100%,var(--c) 0%,var(--cd) 55%,var(--cdim) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.45),
    inset 0 4px 0 rgba(255,255,255,.22),
    inset 0 -10px 26px rgba(0,0,0,.65),
    inset 0 0 calc(20px + var(--on)*70px) var(--c),
    0 0 calc(0px + var(--on)*60px) var(--c),
    0 0 calc(0px + var(--on)*180px) var(--c);
  filter:brightness(calc(.46 + var(--on)*.95)) saturate(calc(.85 + var(--on)*.5));
  transition:filter 140ms ease,box-shadow 120ms ease;
  contain:paint;
}
.ln--r{--c:var(--r);--cd:var(--rd);--cdim:var(--rdim);--on:var(--sr);border-radius:18px 6px 6px 18px;}
.ln--b{--c:var(--b);--cd:var(--bd);--cdim:var(--bdim);--on:var(--sb);border-radius:6px 18px 18px 6px;}

/* dim overlay when off */
.ln__plate{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85));opacity:calc(1 - var(--on)*.95);transition:opacity 140ms ease;pointer-events:none;}

/* internal vertical embossed ribs (no bubbles) */
.ln__inner{position:absolute;inset:8% 6%;border-radius:8px;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,rgba(255,255,255,.04) 1px 14px),
  linear-gradient(180deg,rgba(255,255,255,.08),transparent 40%),
  radial-gradient(80% 60% at 50% 50%,rgba(255,255,255,.12),transparent 70%);
  mix-blend-mode:overlay;opacity:calc(.55 + var(--on)*.25);pointer-events:none;}

/* embossed border line — gives the lens a real "plastic + glass" feel */
.ln__emboss{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:
  inset 0 1px 0 rgba(255,255,255,.30),
  inset 0 -1px 0 rgba(0,0,0,.55),
  inset 1px 0 0 rgba(255,255,255,.10),
  inset -1px 0 0 rgba(0,0,0,.45);}

/* clean diagonal glass glare (a single soft bar) */
.ln__gloss{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(140deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.16) 38%,
    rgba(255,255,255,.45) 44%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 58%);
  mix-blend-mode:screen;opacity:calc(.5 + var(--on)*.4);}

/* on-flash bloom (no harsh "white circle"; soft, sharp pulse) */
.ln__flash{position:absolute;inset:-2%;border-radius:18px;pointer-events:none;background:radial-gradient(70% 70% at 50% 60%,#fff 0%,var(--c) 32%,transparent 75%);opacity:calc(var(--on)*.85);mix-blend-mode:screen;filter:blur(4px);transition:opacity 80ms steps(1,end);animation:ft .42s steps(2,end) infinite;}
.ln--b .ln__flash{animation-delay:-.21s}
@keyframes ft{0%,49%{transform:scale(.96);opacity:calc(var(--on)*.7)}50%,100%{transform:scale(1.06);opacity:calc(var(--on)*.95)}}

/* halos */
.lb__h{position:absolute;top:50%;width:50%;height:240%;border-radius:50%;filter:blur(40px);pointer-events:none;transform:translateY(-50%);transition:opacity 180ms ease;will-change:opacity;}
.lb__h--r{left:-6%;background:radial-gradient(circle,var(--r) 0%,transparent 60%);opacity:calc(.08 + var(--sr)*.55);}
.lb__h--b{right:-6%;background:radial-gradient(circle,var(--b) 0%,transparent 60%);opacity:calc(.08 + var(--sb)*.55);}

/* feet */
.lb__feet{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:30%;height:22%;display:flex;justify-content:space-between;align-items:flex-start;}
.ft{width:14%;height:100%;background:linear-gradient(180deg,#d8dce3 0%,#9ea4ad 70%,#6b6f78 100%);border-radius:4px 4px 8px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 10px rgba(0,0,0,.55);}

/* beams (subtle, less heavy than before) */
.bm{position:absolute;top:50%;width:60%;height:34%;pointer-events:none;transform-origin:0 50%;filter:blur(18px);mix-blend-mode:screen;opacity:0;transition:opacity 200ms ease;will-change:opacity;}
.bm--r{left:30%;background:linear-gradient(90deg,var(--r),transparent 70%);transform:translateY(-50%) rotate(180deg);opacity:calc(var(--sr)*.55);}
.bm--b{right:30%;background:linear-gradient(270deg,var(--b),transparent 70%);transform:translateY(-50%);opacity:calc(var(--sb)*.55);}

/* ============== DUO card (TG | Lolz, diagonal split) ============== */
.duo{
  grid-row:2/3;
  position:relative;
  width:min(560px,92vw);
  aspect-ratio:1.7/1;
  border-radius:24px;
  background:linear-gradient(180deg,#0c0d11 0%,#040406 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.7),0 10px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;isolation:isolate;
  animation:di 800ms cubic-bezier(.2,.9,.25,1.15) both;
}
@keyframes di{0%{opacity:0;transform:translateY(14px) scale(.96);filter:blur(8px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}

/* The two halves — clipped diagonally so the join is a slanted line */
.dc{position:absolute;inset:0;text-decoration:none;color:inherit;overflow:hidden;transition:filter 220ms ease,transform 280ms cubic-bezier(.2,.9,.25,1.15);will-change:transform,filter;}
.dc--tg{clip-path:polygon(0 0,62% 0,38% 100%,0 100%);}
.dc--lz{clip-path:polygon(62% 0,100% 0,100% 100%,38% 100%);}
.dc:hover{filter:brightness(1.1);}
.dc--tg .dc__c{position:absolute;left:0;top:0;bottom:0;width:50%;}
.dc--lz .dc__c{position:absolute;right:0;top:0;bottom:0;width:50%;}

.dc__bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at var(--bgx,50%) 50%,rgba(255,255,255,.07),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  transition:opacity 200ms ease;
}
.dc--tg .dc__bg{--bgx:30%;background:radial-gradient(50% 80% at 30% 50%,rgba(55,187,254,.18),transparent 70%);opacity:calc(.55 + var(--dc-tg, 0)*.6);}
.dc--lz .dc__bg{--bgx:70%;background:radial-gradient(50% 80% at 70% 50%,rgba(98,217,98,.16),transparent 70%);opacity:calc(.55 + var(--dc-lz, 0)*.6);}

.dc__c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;width:90%;}
.dc__lg{width:80px;height:80px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:grid;place-items:center;transition:transform 240ms ease;}
.dc__lg img{width:64px;height:64px;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));}
.dc--lz .dc__lg{box-shadow:inset 0 0 0 1px rgba(98,217,98,.18),0 8px 24px rgba(98,217,98,.12);}
.dc:hover .dc__lg{transform:translateY(-3px) scale(1.04);}

.dc__t{font-family:'Russo One','Oswald',Impact,sans-serif;font-size:clamp(22px,3.4vw,30px);letter-spacing:2px;line-height:1;background:linear-gradient(180deg,#fff 0%,#aab1c2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dc--lz .dc__t{background:linear-gradient(180deg,#fff,#9be39b);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dc__s{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--mut);}

/* Diagonal divider line (the slash between halves) */
.duo__line{position:absolute;inset:0;pointer-events:none;}
.duo__line::before{content:"";position:absolute;top:-6%;left:50%;width:2px;height:112%;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.12) 8%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.12) 92%,transparent 100%);transform:translateX(-50%) rotate(13deg);transform-origin:50% 50%;box-shadow:0 0 18px rgba(255,255,255,.18);}
.duo__line::after{content:"";position:absolute;inset:0;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 calc(8px + var(--sr)*40px) rgba(255,31,58,calc(var(--sr)*.6)),inset 0 0 calc(8px + var(--sb)*40px) rgba(42,139,255,calc(var(--sb)*.6));pointer-events:none;}

/* ============== FBI badge ============== */
.bd{grid-row:3/4;align-self:start;justify-self:end;margin-right:clamp(12px,4vw,40px);display:inline-flex;align-items:center;gap:10px;padding:8px 14px;font-family:'Russo One','Oswald',Impact,sans-serif;font-size:18px;letter-spacing:6px;color:var(--y);border:1px solid rgba(255,212,0,.4);background:rgba(0,0,0,.55);text-shadow:0 0 14px rgba(255,212,0,.5);border-radius:4px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:8;}
.bd span{color:rgba(255,212,0,.85);}

/* ============== Decor (dossier + cuffs) ============== */
.dec{position:absolute;inset:0;pointer-events:none;z-index:4;}
.ds{position:absolute;width:230px;padding:14px 16px 22px;background:#0c0d10;color:#cfd3dc;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.7),0 8px 18px rgba(0,0,0,.55);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 22px);opacity:.78;}
.ds__h{font-family:'Russo One','Oswald',Impact,sans-serif;font-size:18px;letter-spacing:4px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:4px;margin-bottom:8px;text-align:center;color:#fff;}
.ds__r{padding:2px 0;color:#b6bbc6;}
.ds__r b{color:var(--r);font-weight:700;}
.ds__s{position:absolute;right:-8px;bottom:12px;padding:4px 10px;border:2px solid var(--r);color:var(--r);font-family:'Russo One','Oswald',Impact,sans-serif;letter-spacing:4px;font-size:14px;transform:rotate(-12deg);background:rgba(255,31,58,.08);}
.ds--1{top:9%;left:3%;transform:rotate(-7deg);animation:fl 9s ease-in-out infinite;--rt:-7deg}
@keyframes fl{0%,100%{transform:translate(0,0) rotate(var(--rt,-7deg))}50%{transform:translate(8px,-10px) rotate(calc(var(--rt) - 1.5deg))}}
.cf{position:absolute;width:100px;color:#c4c9d3;filter:drop-shadow(0 16px 24px rgba(0,0,0,.7));opacity:.55;}
.cf svg{width:100%;height:auto;display:block;}
.cf--1{top:14%;right:9%;animation:fa 14s linear infinite;}
.cf--2{bottom:18%;left:8%;animation:fb 18s linear infinite;}
@keyframes fa{0%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(-20px,30px) rotate(8deg)}100%{transform:translate(0,0) rotate(-12deg)}}
@keyframes fb{0%{transform:translate(0,0) rotate(10deg)}50%{transform:translate(40px,-30px) rotate(-14deg)}100%{transform:translate(0,0) rotate(10deg)}}

/* ============== Police Tablet (top-right, dispatch terminal) ============== */
.tab{
  position:fixed;top:calc(var(--sft) + 56px);right:18px;z-index:35;
  width:min(320px,calc(100vw - 36px));
  font-family:'JetBrains Mono','Oswald',monospace;
  color:#9affc8;
  background:linear-gradient(180deg,#06120c 0%,#020806 100%);
  border:1px solid rgba(154,255,200,.18);
  border-radius:12px;
  box-shadow:0 24px 50px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.55),inset 0 0 0 1px rgba(154,255,200,.08),inset 0 0 60px rgba(0,80,40,.18);
  overflow:hidden;
  isolation:isolate;
  cursor:default;
}
.tab::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(154,255,200,.05) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;}
.tab__top{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,rgba(154,255,200,.08),rgba(0,0,0,0));border-bottom:1px solid rgba(154,255,200,.14);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#bafff0;}
.tab__dot{width:8px;height:8px;border-radius:50%;background:#22dd88;box-shadow:0 0 10px #22dd88;animation:bl 1.6s ease-in-out infinite;}
@keyframes bl{0%,100%{opacity:.4}50%{opacity:1}}
.tab__title{flex:1;}
.tab__sig{color:#7be3b3;letter-spacing:1px;}
.tab__sc{position:absolute;left:0;right:0;top:32px;height:120%;background:repeating-linear-gradient(0deg,rgba(154,255,200,.02) 0 2px,transparent 2px 4px);pointer-events:none;animation:sc 6s linear infinite;mix-blend-mode:screen;}
@keyframes sc{0%{transform:translateY(0)}100%{transform:translateY(20%)}}
.tab__body{padding:10px 12px 14px;font-size:11px;line-height:1.55;letter-spacing:.5px;min-height:148px;}
.tab__line{margin:0;white-space:pre-wrap;color:#a5ffd0;text-shadow:0 0 8px rgba(80,255,170,.35);}
.tab__line .k{color:#5cffac;}
.tab__line .v{color:#fff;}
.tab__line .alarm{color:#ff5566;text-shadow:0 0 8px rgba(255,80,90,.4);}
.tab__cur{display:inline-block;width:7px;height:12px;background:#9affc8;box-shadow:0 0 10px #9affc8;animation:bc .9s steps(2) infinite;vertical-align:bottom;margin-top:4px;}
@keyframes bc{0%,49%{opacity:1}50%,100%{opacity:0}}
.tab__bot{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#65d3a4;padding:6px 10px;border-top:1px solid rgba(154,255,200,.14);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(154,255,200,.08));}

/* ============== Player ============== */
.pl{
  position:fixed;left:clamp(12px,2.5vw,24px);bottom:calc(var(--sfb) + 60px);z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:min(380px,calc(100vw - 24px));
  padding:10px 14px 10px 10px;
  border-radius:14px;color:#eef1f7;
  background:rgba(8,8,12,.32);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  font-family:'Inter',system-ui,sans-serif;
  transition:background 220ms ease,border-color 220ms ease,transform 220ms ease,box-shadow 220ms ease,opacity 220ms ease;
  opacity:.82;
}
.pl:hover{background:rgba(0,0,0,.92);border-color:rgba(255,255,255,.18);opacity:1;transform:translateY(-2px);box-shadow:0 26px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);}
.pl__b{appearance:none;border:0;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#fff 0%,#d6dbe5 100%);color:#000;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 16px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.2);transition:transform 160ms ease;}
.pl__b:hover{transform:scale(1.06);}
.pl__b:active{transform:scale(.96);}
.pl__i{width:18px;height:18px;display:none;}
.pl[data-state="paused"] .pl__i--p{display:block;transform:translateX(1px);}
.pl[data-state="playing"] .pl__i--s{display:block;}
.pl__m{min-width:0;}
.pl__t{font-weight:600;font-size:13px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
.pl__sub{margin-top:6px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#8a90a0;}
.pl__time--r{text-align:right;}
.pl__bar{position:relative;display:block;height:4px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;cursor:pointer;}
.pl__bar-f{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,#fff 0%,#aab4c8 100%);border-radius:99px;}
.pl__bar-th{position:absolute;top:50%;left:0%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:0;transition:opacity 160ms ease;box-shadow:0 0 12px rgba(255,255,255,.6);}
.pl:hover .pl__bar-th{opacity:1;}

/* Volume wheel — scroll over to change vol; visually rotates and brightens */
.pl__vol{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pl__wheel{
  --v:.25; /* 0..1 brightness mapping */
  position:relative;width:34px;height:34px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, hsl(0,0%,calc(var(--v)*88%)) 0%, hsl(0,0%,calc(8% + var(--v)*30%)) 60%, #060608 100%),
    repeating-conic-gradient(rgba(255,255,255,.10) 0 6deg, rgba(0,0,0,.0) 6deg 12deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 6px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.55),
    0 0 calc(var(--v) * 22px) rgba(255,255,255,calc(var(--v)*.55));
  transition:box-shadow 180ms ease,background 180ms ease;
  cursor:ns-resize;
  overflow:hidden;
}
.pl__wheel-i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,.5) 0 4deg, rgba(255,255,255,.10) 4deg 12deg);transform:rotate(var(--rot,0deg));transition:transform 100ms linear;mix-blend-mode:overlay;}
.pl__wheel-tick{position:absolute;left:50%;top:6%;width:2px;height:30%;background:#fff;border-radius:2px;transform:translateX(-50%) rotate(var(--rot,0deg));transform-origin:50% calc(34px / 2);box-shadow:0 0 6px rgba(255,255,255,.4);opacity:calc(.4 + var(--v)*.6);}
.pl__vlbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.5px;color:#9aa1ad;}

/* ============== Bullet hole (image: media/dirka.png, random rotation) ============== */
.bh{position:fixed;width:42px;height:42px;pointer-events:none;z-index:60;
  transform:translate(-50%,-50%) scale(0) rotate(var(--rot,0deg));
  opacity:0;
  animation:bhshow 5800ms cubic-bezier(.2,.7,.25,1) forwards;
  filter:drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
  will-change:transform,opacity,filter;
}
.bh img{width:100%;height:100%;display:block;opacity:.95;}
@keyframes bhshow{
  0%{transform:translate(-50%,-50%) scale(.05) rotate(var(--rot));opacity:0;}
  5%{transform:translate(-50%,-50%) scale(1.20) rotate(var(--rot));opacity:1;}
  16%{transform:translate(-50%,-50%) scale(1.00) rotate(var(--rot));opacity:1;}
  82%{opacity:.92;}
  100%{transform:translate(-50%,-50%) scale(1.00) rotate(var(--rot));opacity:0;}
}

.bh-flash{position:fixed;width:85px;height:85px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,rgba(255,210,120,.7) 26%,rgba(255,140,40,.25) 55%,transparent 75%);
  transform:translate(-50%,-50%) scale(.12);opacity:1;z-index:61;mix-blend-mode:screen;
  animation:bf 420ms cubic-bezier(.2,.7,.3,1) forwards;will-change:transform,opacity;}
@keyframes bf{0%{transform:translate(-50%,-50%) scale(.12);opacity:1}45%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}

.bh-shockwave{position:fixed;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);pointer-events:none;
  transform:translate(-50%,-50%) scale(.2);opacity:.7;z-index:60;
  animation:sw 580ms ease-out forwards;}
@keyframes sw{0%{transform:translate(-50%,-50%) scale(.2);opacity:.75;border-width:1.5px}100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;border-width:0}}

.bh-spark{position:fixed;width:5px;height:5px;border-radius:50%;background:#ffd060;
  box-shadow:0 0 8px #ffb040,0 0 16px #ff8030;pointer-events:none;z-index:63;mix-blend-mode:screen;
  animation:sp 760ms cubic-bezier(.25,.7,.25,1) forwards;will-change:transform,opacity;}
@keyframes sp{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx,0px),var(--dy,0px));opacity:0}}

/* ============== Flying bullet — appears large at click, recedes into the screen ============== */
.bullet{position:fixed;width:36px;height:36px;pointer-events:none;z-index:62;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 10px rgba(255,210,120,.85)) drop-shadow(0 0 20px rgba(255,140,30,.5));
  will-change:transform,opacity;
}
.bullet img{width:100%;height:100%;display:block;}

/* ============== Magazine counter (bottom-right) ============== */
.mag{position:fixed;right:16px;bottom:calc(var(--sfb) + 50px);z-index:55;
  background:rgba(8,8,12,.78);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;
  font-family:'JetBrains Mono','Roboto Mono',monospace;
  color:#cdd1d8;font-size:10px;letter-spacing:1.5px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 26px rgba(0,0,0,.55);
  user-select:none;-webkit-user-select:none;
  min-width:140px;
}
.mag__h{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mag__l{color:var(--y);font-weight:700;letter-spacing:3px;}
.mag__c{color:#fff;font-weight:700;font-size:12px;letter-spacing:1px;font-variant-numeric:tabular-nums;}
.mag__d{display:flex;gap:3px;align-items:flex-end;height:18px;}
.mag__d i{display:block;width:7px;height:18px;border-radius:2px 2px 1px 1px;
  background:linear-gradient(180deg,#fbe39a 0%,#d6a838 45%,#7e5a14 100%);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55),0 0 4px rgba(255,200,80,.25);
  transition:opacity .22s ease,transform .22s ease,filter .22s ease,background .22s ease;
}
.mag__d i.spent{background:linear-gradient(180deg,#222 0%,#0a0a0a 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.6);transform:translateY(3px) scaleY(.55);opacity:.55;filter:grayscale(1);}
.mag__s{font-size:9px;color:#22dd88;letter-spacing:2px;text-align:center;text-shadow:0 0 6px rgba(34,221,136,.55);}
.mag.reloading .mag__s{color:#ffcc00;text-shadow:0 0 6px rgba(255,204,0,.6);animation:rldb .35s steps(2) infinite;}
.mag.reloading .mag__d i{animation:rldd .8s cubic-bezier(.2,.7,.25,1) forwards;}
.mag.reloading .mag__d i:nth-child(2){animation-delay:.05s}
.mag.reloading .mag__d i:nth-child(3){animation-delay:.10s}
.mag.reloading .mag__d i:nth-child(4){animation-delay:.15s}
.mag.reloading .mag__d i:nth-child(5){animation-delay:.20s}
.mag.reloading .mag__d i:nth-child(6){animation-delay:.25s}
.mag.reloading .mag__d i:nth-child(7){animation-delay:.30s}
@keyframes rldb{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
@keyframes rldd{
  0%{transform:translateY(28px) scaleY(.55);opacity:0;}
  50%{transform:translateY(-3px) scaleY(1.05);opacity:1;}
  100%{transform:translateY(0) scaleY(1);opacity:1;background:linear-gradient(180deg,#fbe39a 0%,#d6a838 45%,#7e5a14 100%);filter:none;}
}
.mag.empty .mag__s{color:#ff3a3a;text-shadow:0 0 6px rgba(255,58,58,.6);animation:rldb .25s steps(2) infinite;}

/* ============== responsive ============== */
@media (max-width:760px){
  .st{padding:56px 14px 80px;gap:14px;}
  .lb-w{aspect-ratio:4.5/1;}
  .ds{display:none;}
  .cf{width:60px;opacity:.3;}
  .bd{font-size:13px;padding:6px 10px;letter-spacing:4px;margin-right:12px;}
  .duo{width:min(420px,94vw);aspect-ratio:1.6/1;}
  .dc__lg{width:60px;height:60px;border-radius:14px;}
  .dc__lg img,.dc__lg svg{width:48px;height:48px;}
  .dc__t{font-size:18px;letter-spacing:1px;}
  .dc__s{font-size:9px;}
  .tab{top:46px;right:8px;width:min(240px,calc(100vw - 16px));font-size:10px;}
  .tab__body{font-size:10px;min-height:120px;padding:8px 10px;}
  .pl{left:8px;right:auto;bottom:calc(var(--sfb) + 50px);width:min(360px,calc(100vw - 16px));padding:8px;gap:10px;}
  .mag{right:8px;bottom:calc(var(--sfb) + 116px);padding:6px 8px;min-width:120px;font-size:9px;}
  .mag__d i{width:6px;height:14px;}
  .mag__d{height:14px;}
  .pl__t{font-size:12px;}
  .pl__wheel{width:28px;height:28px;}
  .t{height:28px;}
  .t span{font-size:14px;letter-spacing:1.5px;}
}
@media (max-width:520px){
  .tab{display:none;}
  .duo{width:min(360px,94vw);aspect-ratio:1.55/1;}
}
@media (max-height:560px) and (orientation:landscape){
  .st{padding-block:42px;gap:6px;}
  .lb-w{width:min(560px,68vw);}
  .duo{width:min(420px,68vw);aspect-ratio:1.7/1;}
  .pl{bottom:calc(var(--sfb) + 38px);}
  .tab{display:none;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;}}