/* Elf HQ radar camera (js/elf-radar-cam.js). The screen is 4:3 like the pictures. */
.rc{display:block;width:100%}
.rc-screen{position:relative;width:100%;max-width:100%;aspect-ratio:4/3;overflow:hidden;background:#000;border-radius:inherit}
.rc-screen>*{position:absolute;inset:0;width:100%;height:100%}
.rc-map,.rc-wide,.rc-close{object-fit:cover;transform-origin:0 0;will-change:transform,opacity}
.rc-map{filter:brightness(.75) saturate(.8);transition:opacity .8s,filter 1s}
.rc-radar{transform-origin:0 0;transition:opacity .8s}
.rc-static{image-rendering:pixelated;opacity:0;transition:opacity .4s}
.rc-wide,.rc-close{opacity:0}
.rc-grain{pointer-events:none;opacity:0;transition:opacity .8s;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55) 100%)}
.rc-grain.on{opacity:1}
.rc-glitch{animation:rcGlitch .18s steps(2) infinite}
@keyframes rcGlitch{0%{clip-path:inset(0 0 0 0);transform:translate(0)}33%{clip-path:inset(18% 0 46% 0);transform:translate(-6px,2px)}66%{clip-path:inset(60% 0 10% 0);transform:translate(5px,-2px)}100%{clip-path:inset(30% 0 30% 0);transform:translate(-2px,1px)}}
.rc-screen .rc-ring{inset:auto;width:22%;height:auto;aspect-ratio:1;border-radius:50%;border:3px solid #FFD36E;box-shadow:0 0 22px rgba(255,211,110,.7);transform:translate(-50%,-50%) scale(.3);opacity:0;transition:opacity .3s,transform .6s cubic-bezier(.2,1.5,.5,1),left .2s,top .2s;z-index:6}
.rc-screen .rc-ring.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rc-screen .rc-scan{height:20%;top:-20%;background:linear-gradient(180deg,transparent,rgba(124,247,178,.5),transparent);z-index:7;pointer-events:none}
.rc-screen .rc-scan.go{animation:rcScan 1.1s linear 2}
@keyframes rcScan{to{top:100%}}
.rc-screen .rc-hud{inset:auto 12px auto 12px;width:auto;height:auto;display:flex;justify-content:space-between;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(10px,1.4vw,13px);letter-spacing:.08em;color:#fff;text-shadow:0 1px 3px #000;z-index:9;opacity:0;transition:opacity .4s;pointer-events:none}
.rc-screen .rc-hud.t{top:10px}.rc-screen .rc-hud.b{bottom:10px}
.rc-hud .rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4545;margin-right:6px;animation:rcBlink 1s steps(2) infinite}
@keyframes rcBlink{50%{opacity:.2}}
.rc-screen .rc-msg{inset:auto 0 15% 0;height:auto;display:flex;justify-content:center;z-index:10;pointer-events:none}
.rc-msg span{font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(11px,1.8vw,16px);letter-spacing:.12em;color:#7CF7B2;background:rgba(4,10,26,.85);border:1px solid rgba(124,247,178,.35);border-radius:9px;padding:6px 12px;opacity:0;transition:opacity .25s;text-align:center;max-width:90%}
.rc-msg span.on{opacity:1}
.rc-msg span.gold{color:#FFD36E;border-color:rgba(255,211,110,.4)}
.rc-screen .rc-bars{inset:auto auto 27% 50%;width:auto;height:13%;transform:translateX(-50%);display:flex;gap:5px;align-items:flex-end;z-index:10;opacity:0;transition:opacity .3s}
.rc-screen .rc-bars.on{opacity:1}
.rc-bars i{width:9px;background:#27406f;border-radius:2px}
.rc-bars i.lit{background:#7CF7B2;box-shadow:0 0 8px #7CF7B2}
.rc-screen .rc-shout{inset:auto 0 30% 0;height:auto;display:flex;justify-content:center;z-index:11;pointer-events:none}
.rc-shout b{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(20px,4vw,38px);letter-spacing:.06em;color:#fff;background:#E71940;padding:6px 16px;border-radius:10px;transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.2,1.6,.5,1),opacity .2s;box-shadow:0 10px 30px -10px #000}
.rc-shout b.on{transform:scale(1);opacity:1}
.rc-screen .rc-cap{inset:auto 6% 7% 6%;width:auto;height:auto;z-index:11;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(10px,1.5vw,13.5px);line-height:1.45;letter-spacing:.06em;color:#FFD36E;background:rgba(4,10,26,.85);border-radius:9px;padding:6px 10px;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.rc-screen .rc-cap.on{opacity:1;transform:none}
.rc-sound{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 'Inter',system-ui,sans-serif;color:#16296A;background:#fff;border:1.5px solid #16296A;border-radius:999px;padding:7px 12px;cursor:pointer}
.rc-sound[aria-pressed="true"]{background:#16296A;color:#fff}
.rc-sound:focus-visible{outline:3px solid #F5B32F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rc *{animation:none!important;transition:none!important}}
.rc-pix{image-rendering:pixelated;opacity:0;transition:opacity .2s}
.tk-welcome .welspot .rc-screen{border-radius:18px;border:5px solid #16296A}.tk-welcome .welspot .rc-sound{margin:10px auto 0;display:flex;width:max-content}

/* Round 4: the sound button is a 44px tap target everywhere (the tracker too). */
.rc-sound{min-height:44px;padding:0 14px;gap:8px}
.rc-sound svg{flex:none}

/* Round 5: 44px tall wherever it sits (the tracker's own rules included). */
body .rc-sound,body.tnew .rc-sound,.tk-welcome .welspot .rc-sound{min-height:44px!important;padding-top:0!important;padding-bottom:0!important}

/* CCTV sighting films on the camera screens (js/cctv-loop.js, 4 Nov 2026) */
.cl-screen .cl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.cl-screen .cl-video.cl-wait{opacity:0}
.cl-screen .rc-radarbox{position:absolute;inset:0;overflow:hidden;z-index:2}
.cl-screen .rc-radarbox>*{position:absolute;inset:0;width:100%;height:100%}
.cl-on > .cl-sound{margin:10px auto 0;display:flex;width:max-content}
.rc-screen .rc-msg.top{inset:12% 0 auto 0}
/* the homepage hook before the first CCTV film (js/cctv-loop.js data-cctv-hook, 4 Nov 2026) */
.cl-screen{container-type:inline-size}
.cl-screen .cl-hook{position:absolute;inset:0;z-index:4;overflow:hidden;background:#05070f;transition:opacity .4s}
.cl-hook.out{opacity:0}
.cl-hook img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12) rotate(-1.5deg);filter:sepia(.3) saturate(.85);transition:opacity .25s,transform 1.4s ease-out}
.cl-hook img.on{opacity:1;transform:scale(1) rotate(0)}
.cl-hook img:nth-child(2).on{transform:scale(1) rotate(1deg)}
.cl-hook .hk-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cl-hook .hk-flash.on{animation:hkFlash .45s ease-out}
@keyframes hkFlash{0%{opacity:.85}100%{opacity:0}}
.cl-hook .hk-cap{position:absolute;left:8%;right:8%;bottom:9%;margin:0;padding:8px 12px;text-align:center;font:700 clamp(12px,3.6cqw,18px)/1.3 'Plus Jakarta Sans',system-ui,sans-serif;color:#fff;background:rgba(5,7,15,.78);border-radius:10px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.cl-hook .hk-cap.on{opacity:1;transform:none}
.cl-hook .hk-static{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;transition:opacity .3s}
.cl-hook.glitch img.on{animation:rcGlitch .18s steps(2) infinite}
.cl-hook.glitch .hk-static{opacity:.55}
.cl-hook.live .hk-static{opacity:.35}
.cl-hook.live img,.cl-hook.live .hk-cap{opacity:0}
.cl-hook .hk-live{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:0 6%;opacity:0;transform:scale(.85);transition:opacity .3s,transform .5s cubic-bezier(.2,1.6,.5,1)}
.cl-hook.live .hk-live{opacity:1;transform:none}
.cl-hook .hk-live b{display:inline-flex;align-items:center;gap:10px;font:400 clamp(14px,5.4cqw,34px)/1.15 'Share Tech Mono',ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#7CF7B2;background:rgba(4,10,26,.85);border:2px solid #7CF7B2;border-radius:8px;padding:8px 14px;box-shadow:0 0 24px rgba(124,247,178,.45);animation:hkPulse 1s ease-in-out infinite}
.cl-hook .hk-live b i{flex:none;width:.5em;height:.5em;border-radius:50%;background:#FF3B3B;animation:rcBlink 1s steps(2) infinite}
.cl-hook .hk-live span{font:800 clamp(13px,4.4cqw,24px)/1.2 'Plus Jakarta Sans',system-ui,sans-serif;color:#FFD36E;text-shadow:0 2px 10px rgba(0,0,0,.8)}
@keyframes hkPulse{0%,100%{box-shadow:0 0 14px rgba(124,247,178,.35)}50%{box-shadow:0 0 30px rgba(124,247,178,.8)}}
/* the end screen after the two films (js/cctv-loop.js data-end-html, 4 Nov 2026): the homepage heading's colours */
.cl-screen .cl-end{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:6%;text-align:center;text-decoration:none;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.9) 0 2px,transparent 3px) 0 0/46px 46px,radial-gradient(circle at 70% 60%,rgba(255,255,255,.7) 0 1.5px,transparent 2.5px) 0 0/34px 34px,linear-gradient(180deg,#FFFDF7,#FFF3DC);
  opacity:0;transition:opacity .6s}
.cl-on > .cl-sound[hidden]{display:none}
.cl-screen .cl-end.on{opacity:1}
.cl-end .cl-end-t{margin:0;font:800 clamp(22px,9cqw,56px)/1.08 'Plus Jakarta Sans',system-ui,sans-serif;color:#16296A;letter-spacing:-.01em;text-wrap:balance;transform:scale(.8);transition:transform .7s cubic-bezier(.2,1.6,.5,1)}
.cl-end.on .cl-end-t{transform:none}
.cl-end .tc-g{color:#17803F}.cl-end .tc-r{color:#C8102E}
.cl-end .cl-free{display:inline-block;color:#fff;background:#C8102E;border-radius:.25em;padding:0 .22em;transform:rotate(-3deg);box-shadow:0 4px 0 #8E0B20}
/* the tap-to-play button when the phone will not start the film itself (iPhone Low Power Mode) */
.cl-screen .cl-tap{position:absolute;left:50%;top:50%;right:auto;bottom:auto;white-space:nowrap;z-index:6;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;padding:12px 20px 12px 14px;border:2px solid #7CF7B2;border-radius:999px;background:rgba(4,10,26,.88);color:#7CF7B2;font:400 clamp(14px,5cqw,22px)/1 'Share Tech Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;cursor:pointer;box-shadow:0 0 24px rgba(124,247,178,.5);animation:hkPulse 1.2s ease-in-out infinite}
.cl-screen .cl-tap[hidden]{display:none}
.cl-tap i{width:0;height:0;border-left:16px solid #7CF7B2;border-top:10px solid transparent;border-bottom:10px solid transparent}
.cl-tap:focus-visible{outline:3px solid #F5B32F;outline-offset:3px}
.cl-screen .cl-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cl-screen .cl-anim[hidden]{display:none}