/* V85 security room content + ABOUT JE'RA sign. Animations: opacity / transform only. */
.hx{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;opacity:0;transition:opacity .24s ease;color:#f4ead2;font-family:inherit;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain;touch-action:manipulation}
.hx.is-in{opacity:1}
.hx *{box-sizing:border-box}
.hx button{font:inherit;color:inherit;cursor:pointer}
.hx-close{flex:none;border:2px solid rgba(255,255,255,.55);background:rgba(10,12,14,.72);border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;letter-spacing:.12em;min-height:40px}
.hx-close:focus-visible,.hx button:focus-visible{outline:3px solid #ffd24a;outline-offset:2px}
.hx-bar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:linear-gradient(#1d120a,#140c07);border-bottom:3px solid #0a0604;z-index:3}
.hx-bar__title{font-weight:900;letter-spacing:.16em;font-size:15px}
.hx-bar__sub{flex:1;font-size:10px;letter-spacing:.14em;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-hint{flex:none;margin:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));text-align:center;font-size:10px;letter-spacing:.2em;opacity:.6;background:#140c07}

/* ---------- evidence board ---------- */
.hx--photos{background:#3b2414}
.hx-board{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  background-color:#a8743f;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,220,160,.2) 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,rgba(60,30,10,.38) 0 1px,transparent 2px),radial-gradient(circle at 40% 80%,rgba(255,240,200,.14) 0 1.5px,transparent 2.5px),linear-gradient(115deg,rgba(90,50,20,.18),rgba(255,210,150,.08) 40%,rgba(80,40,15,.2));
  background-size:7px 9px,5px 6px,11px 8px,100% 100%;
  box-shadow:inset 0 0 0 10px #5b3519,inset 0 0 0 14px #2c180b,inset 0 0 60px rgba(40,18,4,.7)}
.hx-cork{position:relative;width:100%;min-height:100%}
.hx-string{position:absolute;left:0;top:0;pointer-events:none;z-index:2;overflow:visible}
.hx-string path{fill:none;stroke:#c41a1a;stroke-width:1.1;opacity:.8;stroke-linecap:round;filter:drop-shadow(0 2px 1px rgba(0,0,0,.45))}
.hx-pol{position:absolute;z-index:1;display:flex;flex-direction:column;padding:6% 6% 0;border:0;background:#f7f2e6;border-radius:2px;transform:rotate(var(--r,0deg));box-shadow:0 6px 12px rgba(30,12,0,.45),0 1px 0 rgba(0,0,0,.2);transition:transform .2s ease}
.hx-pol:active{transform:rotate(var(--r,0deg)) scale(.97)}
.hx-pol__img{display:block;width:100%;background:#2a2622;overflow:hidden}
.hx-pol__img img{display:block;width:100%;height:100%;object-fit:cover}
.hx-pol__cap{display:block;height:30px;margin:0 4%;border-bottom:1.5px solid rgba(60,50,40,.28);font:600 11px/30px "Marker Felt","Comic Sans MS",cursive;color:#3a2d22;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-pol__cap:empty{height:22px;margin-bottom:8px}
.hx-pol__pin{position:absolute;z-index:3;left:50%;top:-4px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#d01818 45%,#6e0606);box-shadow:0 3px 3px rgba(0,0,0,.45)}
.hx-lb{position:absolute;inset:0;z-index:5;background:rgba(8,5,3,.92);opacity:0;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}
.hx-lb.is-in{opacity:1}
.hx-lb__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(64px + env(safe-area-inset-top)) 16px calc(70px + env(safe-area-inset-bottom));touch-action:pan-y}
.hx-lb__card{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:#f7f2e6;padding:12px 12px 0;border-radius:3px;box-shadow:0 14px 40px rgba(0,0,0,.6);transform:rotate(var(--r,0deg));transition:transform .2s ease,opacity .16s ease;pointer-events:none}
.hx-lb__img{display:block;max-width:calc(100vw - 56px);max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);width:auto;height:auto;object-fit:contain;background:#222;min-width:120px;min-height:120px}
.hx-lb__cap{display:flex;align-items:flex-end;gap:10px;height:48px;padding:0 4px 10px;color:#3a2d22}
.hx-lb__line{flex:1;min-height:22px;border-bottom:1.5px solid rgba(60,50,40,.3);font:600 15px/22px "Marker Felt","Comic Sans MS",cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-lb__num{font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.55}
.hx-lb__nav{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));width:64px;height:48px;color:#fff;border:0;border-radius:10px;background:rgba(0,0,0,.45);font-size:34px;line-height:1;z-index:2}
.hx-lb__nav--prev{left:calc(50% - 76px)}.hx-lb__nav--next{right:calc(50% - 76px)}
.hx-lb__close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2}

/* ---------- terminal ---------- */
.hx--term{background:#050807;align-items:center;justify-content:center;padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))}
.hx-crt{position:relative;width:100%;max-width:820px;height:100%;max-height:900px;border-radius:22px;background:#020b09;border:10px solid #1f2523;box-shadow:0 0 0 3px #0b0e0d,inset 0 0 50px rgba(0,255,190,.12),0 0 40px rgba(0,255,190,.08);overflow:hidden}
.hx-crt__glass{position:absolute;inset:0;display:flex;flex-direction:column;color:#5dffcf;text-shadow:0 0 6px rgba(70,255,200,.55);font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;animation:hxFlick 6s steps(1) infinite}
.hx-crt__head{flex:none;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border-bottom:1px dashed rgba(93,255,207,.35);font-size:11px;letter-spacing:.12em}
.hx-crt__head .hx-close{border-color:rgba(93,255,207,.6);background:transparent;color:#5dffcf;font-family:inherit;padding:8px 10px;min-height:36px;font-size:11px}
.hx-crt__out{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 60px;font-size:15px;line-height:1.55}
.hx-t{margin:0 0 .9em;white-space:pre-wrap;word-wrap:break-word}
.hx-t--h{font-size:18px;font-weight:700;letter-spacing:.08em;color:#b8ffe9;margin-bottom:.6em}
.hx-t--b{margin:0 0 .25em;font-size:13px;opacity:.85}
.hx-t--m{font-size:12px;letter-spacing:.1em;opacity:.75}
.hx-cursor{display:inline-block;width:.6em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#5dffcf;animation:hxBlink 1s steps(1) infinite}
.hx-menu{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.hx-menu button,.hx-tback{display:block;width:100%;text-align:left;border:1px solid rgba(93,255,207,.35);background:rgba(93,255,207,.05);color:#5dffcf;font-family:inherit;font-size:15px;letter-spacing:.06em;padding:11px 12px;border-radius:4px;text-shadow:inherit}
.hx-menu button:active,.hx-tback:active{background:#5dffcf;color:#02130e;text-shadow:none}
.hx-menu b{color:#b8ffe9}
.hx-tback{width:auto;display:inline-block;font-size:12px;padding:8px 10px;margin:0 0 14px}
.hx-filephoto{margin:0 0 14px}
.hx-filephoto__frame{position:relative;max-width:420px;border:1px solid rgba(93,255,207,.5);padding:6px;background:#031410}
.hx-filephoto__frame img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.15) brightness(.95) sepia(.5) hue-rotate(115deg) saturate(1.6)}
.hx-filephoto__frame i{position:absolute;inset:6px;background:repeating-linear-gradient(rgba(0,0,0,.28) 0 1px,transparent 1px 3px);pointer-events:none}
.hx-filephoto figcaption{margin-top:6px;font-size:11px;letter-spacing:.12em;opacity:.8}
.hx-crt__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}
.hx-crt__roll{position:absolute;left:0;right:0;top:-20%;height:18%;pointer-events:none;background:linear-gradient(transparent,rgba(93,255,207,.06),transparent);animation:hxRoll 7s linear infinite}
.hx-crt__vig{position:absolute;inset:0;pointer-events:none;border-radius:12px;box-shadow:inset 0 0 90px rgba(0,0,0,.85)}
.hx-crt__skip{position:absolute;right:12px;bottom:12px;z-index:2;border:1px solid rgba(93,255,207,.5);background:rgba(2,11,9,.85);color:#5dffcf;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;padding:8px 10px;border-radius:4px}
.hx-crt__skip[hidden]{display:none}

/* ---------- CCTV ---------- */
.hx--cams{background:#07090b}
.hx-bar--cams{background:#0c0f12;border-bottom-color:#000;font-family:ui-monospace,Menlo,monospace}
.hx-camwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:10px 8px;overflow:hidden}
.hx-feed{position:relative;width:min(100%,960px,calc((100vh - 290px) * 4 / 3));width:min(100%,960px,calc((100dvh - 290px) * 4 / 3));aspect-ratio:4/3;background:#000;overflow:hidden;border:3px solid #22282d;border-radius:6px;box-shadow:0 0 0 2px #000,0 0 30px rgba(120,180,255,.06);touch-action:pan-y;user-select:none;-webkit-user-select:none;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.hx-cam,.hx-cam__img,.hx-grain,.hx-scan,.hx-burst{position:absolute;inset:0}
.hx-cam__img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.08) brightness(.92);-webkit-user-drag:none}
.hx-grain{inset:-40px;background:url(assets/img/cctv/noise.webp) 0 0/160px 160px;opacity:.14;mix-blend-mode:screen;animation:hxGrain .5s steps(4) infinite;pointer-events:none}
.hx-scan{background:repeating-linear-gradient(rgba(0,0,0,.25) 0 1px,transparent 1px 3px);pointer-events:none}
.hx-rollbar{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(transparent,rgba(255,255,255,.06),transparent);animation:hxRollFeed 5.5s linear infinite;pointer-events:none}
.hx-burst{inset:-40px;background:url(assets/img/cctv/noise.webp) 0 0/120px 120px;opacity:0;pointer-events:none;z-index:4}
.hx-burst.is-on{animation:hxBurst .36s steps(6) forwards}
.hx-osd{position:absolute;z-index:5;font-size:clamp(10px,2.9vw,15px);font-weight:700;letter-spacing:.08em;color:#f2f2f2;text-shadow:0 0 2px #000,1px 1px 0 #000;pointer-events:none;white-space:nowrap}
.hx-osd--tl{left:4%;top:4%;display:flex;align-items:center;gap:6px}
.hx-osd--tr{right:4%;top:4%}
.hx-osd--bl{left:4%;bottom:4.5%}
.hx-osd--br{right:4%;bottom:4.5%}
.hx-osd--audio{left:4%;top:12%;z-index:4;font-size:clamp(9px,2.4vw,12px);opacity:.75}
.hx-rec{display:inline-block;width:.75em;height:.75em;border-radius:50%;background:#ff2a2a;box-shadow:0 0 6px #ff2a2a;animation:hxBlink 1s steps(1) infinite}
.hx-corner{position:absolute;z-index:5;width:7%;height:9%;border:2px solid rgba(255,255,255,.7);pointer-events:none}
.hx-corner--a{left:2%;top:2.5%;border-right:0;border-bottom:0}.hx-corner--b{right:2%;top:2.5%;border-left:0;border-bottom:0}
.hx-corner--c{left:2%;bottom:2.5%;border-right:0;border-top:0}.hx-corner--d{right:2%;bottom:2.5%;border-left:0;border-top:0}
.hx-feed__nav{position:absolute;z-index:6;top:50%;margin-top:-24px;width:40px;height:48px;border:0;border-radius:8px;background:rgba(0,0,0,.4);color:#fff;font-size:30px;line-height:1;opacity:.75}
.hx-feed__nav--prev{left:4px}.hx-feed__nav--next{right:4px}
.hx-camgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,960px)}
.hx-camgrid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 9px;border:1px solid #2c343a;background:#11161a;border-radius:5px;font-family:ui-monospace,Menlo,monospace;text-align:left;min-height:48px}
.hx-camgrid b{font-size:11px;letter-spacing:.12em;color:#9fb1bd}
.hx-camgrid span{font-size:10px;letter-spacing:.04em;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hx-camgrid button.is-on{border-color:#ff4a4a;background:#1d1012}
.hx-camgrid button.is-on b{color:#ff6a6a}
.hx--cams .hx-hint{background:transparent;padding-top:0}
@media (min-width:700px){.hx-camgrid{grid-template-columns:repeat(6,1fr)}}
/* cam 1: butterflies drift (translate) and flap (scaleX) */
.hx-bf{position:absolute;width:5.5%;aspect-ratio:1.25;margin:-2% 0 0 -2.7%;z-index:2;animation:hxBf1 14s ease-in-out infinite}
.hx-bf--p2{animation-name:hxBf2}.hx-bf--p3{animation-name:hxBf3}
.hx-bf__w{display:block;width:100%;height:100%;transform:scale(var(--s,1));animation:hxFlap .22s ease-in-out infinite alternate}
.hx-bf__w svg{display:block;width:100%;height:100%;fill:var(--c,#2ef6ff);stroke:rgba(255,255,255,.75);stroke-width:.5;filter:drop-shadow(0 0 2px var(--c,#2ef6ff)) drop-shadow(0 0 5px var(--c,#2ef6ff))}
.hx-cam--1 .hx-cam__img{filter:brightness(.72) saturate(.85)}
.hx-haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(150,90,255,.16),transparent 65%)}
.hx-haze i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e9fbff;box-shadow:0 0 6px 2px rgba(140,240,255,.7);opacity:0;animation:hxTwinkle 3s ease-in-out infinite}
/* cam 2: slow PTZ pan */
.hx-cam__img--ptz{width:112%;left:-6%;animation:hxPtz 22s ease-in-out infinite alternate}
.hx-blink{position:absolute;width:1.1%;aspect-ratio:1;border-radius:50%;background:#ff3b30;box-shadow:0 0 6px #ff3b30;animation:hxBlink 1.6s steps(1) infinite;z-index:2}
/* cam 3: moving water glints, masked to the channel */
.hx-water{position:absolute;inset:0;overflow:hidden;z-index:1;-webkit-mask:url(assets/img/cctv/cam3-water-mask.png) 0 0/100% 100% no-repeat;mask:url(assets/img/cctv/cam3-water-mask.png) 0 0/100% 100% no-repeat;opacity:.55;mix-blend-mode:screen}
.hx-water__glint{position:absolute;left:-10%;right:-10%;top:-200px;bottom:0;background:url(assets/img/cctv/water-glint.webp) 0 0/200px 200px repeat;animation:hxFlow 5s linear infinite}
.hx-water__glint--b{background-size:280px 280px;background-position:90px 40px;opacity:.6;animation-duration:7.5s;top:-280px}
/* cam 4: cupids sway on their strings */
.hx-cupid{position:absolute;z-index:2;object-fit:fill;transform-origin:50% 0;animation:hxSway 4.6s ease-in-out infinite alternate;filter:saturate(.55) contrast(1.08) brightness(.92)}
/* cam 5: Maisie glances up */
.hx-cam__glance{opacity:0;transition:opacity .35s ease}
.hx-cam__glance.is-on{opacity:1}
/* cam 6: signal lost, something at the end of the corridor */
.hx-feed.is-lost .hx-grain{opacity:.5;animation-duration:.24s}
.hx-feed.is-lost .hx-cam{animation:hxJitter 3.1s steps(1) infinite}
.hx-cam__img--dim{filter:grayscale(.7) brightness(.62) contrast(1.25)}
.hx-shadow{position:absolute;left:44.5%;top:31%;width:9%;height:auto;fill:#020203;opacity:0;z-index:2;transition:none}
.hx-shadow circle{fill:#ff2a2a}
.hx-feed.is-flash .hx-shadow{opacity:1}
.hx-feed.is-flash .hx-grain{opacity:.22}
.hx-feed.is-flash .hx-cam::after{opacity:1}
.hx-cam--6::after{content:'';position:absolute;left:30%;top:18%;width:40%;height:70%;z-index:1;background:radial-gradient(ellipse at 50% 55%,rgba(200,215,230,.55),rgba(160,180,200,.18) 45%,transparent 70%);opacity:0;pointer-events:none}
.hx-tear{position:absolute;left:0;right:0;height:6%;top:30%;z-index:3;background:url(assets/img/cctv/noise.webp) 0 0/90px 60px;opacity:.5;mix-blend-mode:screen;animation:hxTear 2.3s steps(1) infinite}
.hx-tear--b{top:68%;height:3%;animation-duration:3.7s;animation-delay:-1.2s}

/* ---------- ABOUT sign (overlay) ---------- */
.hx--about{background:rgba(6,12,10,.86);align-items:center;justify-content:center;gap:14px;padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
.hx-sign{position:relative;width:min(100%,560px);padding-bottom:40px;transform:translateY(16px);transition:transform .3s ease}
.hx.is-in .hx-sign{transform:none}
.hx-sign__board{position:relative;z-index:1;background:#1f5a3a;border:6px solid #f1e6c6;outline:4px solid #143b26;border-radius:14px;padding:16px 18px 18px;box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.25)}
.hx-sign__top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:900;letter-spacing:.2em}
.hx-sign__park{color:#f6c64a}
.hx-sign__here{display:flex;align-items:center;gap:6px;background:#f1e6c6;color:#7a1414;padding:4px 8px;border-radius:999px}
.hx-sign__here i,.hx-sign__dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e1251b;box-shadow:0 0 0 3px rgba(225,37,27,.3)}
.hx-sign__title{margin:12px 0 10px;font-size:clamp(26px,8vw,38px);font-weight:900;letter-spacing:.06em;color:#fff7df;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hx-sign__map{position:relative;height:46px;margin:0 0 12px;border-radius:8px;background:#e9dfbf;overflow:hidden}
.hx-sign__route{position:absolute;left:6%;right:6%;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:repeating-linear-gradient(90deg,#b99b62 0 14px,transparent 14px 22px)}
.hx-sign__dot{position:absolute;left:47%;top:50%;margin:-5px 0 0 -5px;animation:hxPulse 1.4s ease-in-out infinite}
.hx-sign__map span{position:absolute;left:47%;top:4px;transform:translateX(14px);font-size:10px;font-weight:900;letter-spacing:.16em;color:#143b26}
.hx-sign__text{margin:0;font-size:15.5px;line-height:1.6;color:#f7f0dc}
.hx-sign__post{position:absolute;bottom:0;width:16px;height:70px;background:linear-gradient(90deg,#4a3420,#6d4c2d 50%,#3b2817);border-radius:3px}
.hx-sign__post--l{left:16%}.hx-sign__post--r{right:16%}
.hx--about>.hx-close{flex:none}

/* ---------- ABOUT sign (hub prop) ---------- */

@keyframes hxBlink{50%{opacity:0}}
@keyframes hxFlick{0%,100%{opacity:1}41%{opacity:.93}42%{opacity:1}77%{opacity:.96}}
@keyframes hxRoll{to{transform:translateY(700%)}}
@keyframes hxRollFeed{from{transform:translateY(-100%)}to{transform:translateY(460%)}}
@keyframes hxGrain{0%{transform:translate(0,0)}25%{transform:translate(-23px,11px)}50%{transform:translate(14px,-19px)}75%{transform:translate(-9px,-27px)}}
@keyframes hxBurst{0%{opacity:1;transform:translate(0,0)}20%{opacity:.95;transform:translate(-17px,9px)}40%{opacity:.9;transform:translate(11px,-13px)}60%{opacity:.75;transform:translate(-7px,-21px)}80%{opacity:.4;transform:translate(19px,5px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes hxBf1{0%,100%{transform:translate(0,0)}25%{transform:translate(160%,-90%)}50%{transform:translate(260%,40%)}75%{transform:translate(90%,120%)}}
@keyframes hxBf2{0%,100%{transform:translate(0,0)}30%{transform:translate(-180%,70%)}60%{transform:translate(-60%,-110%)}80%{transform:translate(120%,-40%)}}
@keyframes hxBf3{0%,100%{transform:translate(0,0)}20%{transform:translate(-90%,-120%)}55%{transform:translate(-240%,-30%)}80%{transform:translate(-100%,90%)}}
@keyframes hxFlap{from{transform:scale(var(--s,1)) scaleX(1)}to{transform:scale(var(--s,1)) scaleX(.2)}}
@keyframes hxPtz{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes hxFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,200px,0)}}
@keyframes hxSway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes hxJitter{0%,100%{transform:none}13%{transform:translate(-1.5%,0)}14%{transform:none}52%{transform:translate(0,1.2%) scaleY(1.02)}53%{transform:none}86%{transform:translate(2%,0)}87%{transform:none}}
@keyframes hxTear{0%{transform:translateY(0);opacity:.5}30%{transform:translateY(240%);opacity:.15}60%{transform:translateY(-180%);opacity:.6}85%{transform:translateY(90%);opacity:0}}
@keyframes hxPulse{50%{transform:scale(1.5);opacity:.6}}
/* cam 4 singing: tap button, widget strip, cupids bob + hearts pulse */
.hx-cam4btns{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:7px}
.hx-feed.is-singing .hx-cam4btns{bottom:auto;top:20%}
.hx-tease{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid rgba(255,126,145,.75);background:linear-gradient(90deg,rgba(60,6,18,.86),rgba(20,2,8,.8));color:#ffe3ee;border-radius:14px;padding:7px 14px;min-height:44px;white-space:nowrap;box-shadow:0 0 14px rgba(255,90,120,.4);-webkit-touch-callout:none}
.hx-tease b{font-size:11px;font-weight:900;letter-spacing:.12em}
.hx-tease span{color:rgba(255,170,182,.98);font-size:9.5px;font-weight:800;letter-spacing:.2em;text-shadow:0 0 10px rgba(255,90,120,.45)}
.hx-tease.is-on{border-color:#ff8fb5;box-shadow:0 0 18px rgba(255,79,139,.6)}
.hx-feed.is-teasing .hx-hearts i{animation:hxHeart 1.2s ease-in-out infinite}
.hx-sing{position:relative;z-index:6;border:2px solid #ff8fb5;background:rgba(40,6,18,.78);color:#ffe3ee;border-radius:999px;padding:9px 14px;min-height:42px;font-size:11px;font-weight:900;letter-spacing:.12em;white-space:nowrap;box-shadow:0 0 14px rgba(255,79,139,.45)}
.hx-sc{position:absolute;left:3%;right:3%;bottom:3%;width:94%;height:24px;border:0;z-index:6;border-radius:4px;background:#000;opacity:.9}
.hx-feed.is-singing .hx-sing{font-size:10px;padding:7px 12px;min-height:36px}
.hx-hearts{position:absolute;inset:0;z-index:3;pointer-events:none}
.hx-hearts i{position:absolute;width:5%;aspect-ratio:1;opacity:0;background:radial-gradient(circle at 30% 30%,#ff8fb5 0 35%,transparent 36%),radial-gradient(circle at 70% 30%,#ff8fb5 0 35%,transparent 36%);transform:scale(.6)}
.hx-hearts i::after{content:'';position:absolute;left:15%;top:30%;width:70%;height:70%;background:#ff8fb5;transform:rotate(45deg) scale(.72);transform-origin:50% 50%;margin-top:-6%}
.hx-feed.is-singing .hx-hearts i{animation:hxHeart 1.2s ease-in-out infinite}
.hx-feed.is-singing .hx-cupid{animation:hxSing .9s ease-in-out infinite alternate}

/* ---------- pool float POV ---------- */
.hx--float{background:#050a18;overflow:hidden}
.hx-float__fit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hx-float__view{position:relative;flex:none;aspect-ratio:9/16;height:100%;height:100dvh;max-height:calc(100vw * 16 / 9 * 1.25);overflow:hidden}
@media (max-aspect-ratio:9/16){.hx-float__view{height:auto;width:100vw}}
.hx-float__bob{position:absolute;inset:-3%;animation:hxBob 5.2s ease-in-out infinite;transform-origin:50% 80%}
.hx-float__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-float__screen{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;background:#000;overflow:hidden}
.hx-float__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-float__glare{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 40%),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.hx-float__shimmer{position:absolute;left:0;right:0;top:61%;height:14%;overflow:hidden;mix-blend-mode:screen;opacity:.5;-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.hx-float__shimmer i{position:absolute;left:-20%;right:-20%;top:-200px;bottom:0;background:url(assets/img/cctv/water-glint.webp) 0 0/180px 120px repeat;animation:hxFlow 6s linear infinite}
.hx-float__shimmer i+i{background-size:260px 170px;animation-duration:9s;opacity:.6}
/* V85c chill mode: 20 s idle -> controls fade, a quiet LIVE tag shows; opacity-only so it stays cheap on iOS */
.hx-float__live{position:absolute;left:4%;bottom:3.5%;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:4px;opacity:0;transition:opacity 1.2s ease;pointer-events:none;white-space:nowrap}
.hx-float__live b{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(8,10,16,.55);color:#fff4e6;font:800 10.5px/1 system-ui,sans-serif;letter-spacing:.14em}
.hx-float__live b i{width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;animation:hxLive 1.6s ease-in-out infinite}
.hx-float__live span{color:rgba(255,244,230,.55);font:700 9px/1 system-ui,sans-serif;letter-spacing:.16em}
@keyframes hxLive{50%{opacity:.25}}
.hx--float .hx-close{transition:opacity .8s ease}
.hx--float.is-chill .hx-close{opacity:0;pointer-events:none}
.hx--float.is-chill .hx-float__live{opacity:1}
.hx-float__hand{position:absolute;right:-2%;bottom:-3%;width:46%;height:auto;z-index:2;transform-origin:100% 100%;animation:hxHand 5.2s ease-in-out infinite;pointer-events:none}
.hx--float .hx-close{position:absolute;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:4}
.summer-float-spot{position:absolute;left:59%;top:71%;width:11%;height:11%;z-index:26;touch-action:manipulation;border:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);color:#fff;font-size:10px;font-weight:900;line-height:1;letter-spacing:.14em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.summer-float-spot span{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:rgba(0,0,0,.55);padding:3px 6px;border-radius:999px;white-space:nowrap}

/* ---------- security log + truck polaroid (safe hint) ---------- */
.hx--clip{background:rgba(8,6,4,.9);align-items:center;justify-content:center;padding:calc(58px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
.hx--clip .hx-close,.hx--safe .hx-close{position:absolute;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:6}
.hx-clip{width:min(100%,520px);transform:translateY(14px);transition:transform .3s ease}
.hx.is-in .hx-clip{transform:none}
.hx-clip__board{position:relative;background:#7b5530 linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,0,0,.18));border-radius:14px;padding:34px 14px 20px;box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.25)}
.hx-clip__clip{position:absolute;left:50%;top:-12px;width:44%;height:42px;margin-left:-22%;z-index:3;border-radius:8px 8px 14px 14px;background:linear-gradient(#d9dde0,#8b9196 60%,#5b6064);box-shadow:0 4px 8px rgba(0,0,0,.5)}
.hx-clip__paper{background:#f3eedf linear-gradient(transparent 27px,rgba(80,120,170,.22) 28px) 0 22px/100% 28px;color:#2c3550;border-radius:2px;padding:16px 14px 18px;font:600 14px/28px "Marker Felt","Bradley Hand","Comic Sans MS",cursive;min-height:420px}
.hx-clip__paper h3{margin:0 0 4px;font:800 11px/18px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#6b2a20}
.hx-clip__paper p{margin:0;opacity:.82}
.hx-clip__paper b{display:inline-block;width:62px;color:#6b2a20}
.hx-clip__pol{position:relative;width:min(86%,400px);margin:-150px auto 0;z-index:2;background:#efe9d8;padding:10px 10px 0;border-radius:2px;transform:rotate(-3.5deg);box-shadow:0 10px 24px rgba(0,0,0,.55);background-image:radial-gradient(ellipse at 100% 0,rgba(120,90,40,.25),transparent 30%),radial-gradient(ellipse at 0 100%,rgba(120,90,40,.22),transparent 28%),linear-gradient(rgba(150,120,70,.08),rgba(150,120,70,.14))}
.hx-clip__pol::before{content:'';position:absolute;left:50%;top:-12px;width:70px;height:24px;margin-left:-35px;background:rgba(240,230,190,.6);transform:rotate(3deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hx-clip__photo{position:relative;display:block}
.hx-clip__photo img{display:block;width:100%;height:auto;aspect-ratio:1206/1150;background:#333}
.hx-clip__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,240,210,.08),rgba(80,60,30,.1));box-shadow:inset 0 0 18px rgba(60,40,20,.35);pointer-events:none}
.hx-clip__mark{position:absolute;left:6%;top:3%;z-index:1;font:700 clamp(34px,11vw,54px)/1 "Marker Felt","Bradley Hand","Comic Sans MS",cursive;color:#151515;transform:rotate(-6deg);letter-spacing:.04em;text-shadow:0 0 1px rgba(255,255,255,.6)}
.hx-clip__pol figcaption{min-height:58px;padding:10px 6px 12px;text-align:center;font:600 clamp(17px,5vw,22px)/1.2 "Marker Felt","Bradley Hand","Comic Sans MS",cursive;color:#2a2a3a}
.hx-clip__pol figcaption small{display:block;font-size:.8em;opacity:.8;margin-top:2px}

/* ---------- wall safe ---------- */
.hx--safe{background:radial-gradient(ellipse at 50% 30%,#1d1814,#070605);align-items:center;padding:calc(56px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));gap:8px;overflow:hidden}
.hx-safe__stage{flex:none;width:min(94vw,calc((100dvh - 360px) * .75),520px);perspective:1100px}
.hx-safe__box{position:relative;width:100%;aspect-ratio:3/4}
.hx-safe__inside{position:absolute;inset:0;width:100%;height:100%;display:block}
.hx-safe__door{position:absolute;left:18.98%;top:9.98%;width:72.22%;height:80.03%;z-index:3;transform-origin:96% 50%;transition:transform 1.4s cubic-bezier(.3,.1,.2,1);box-shadow:0 0 12px rgba(0,0,0,.6)}
.hx-safe__door img{display:block;width:100%;height:100%}
.hx-safe__door{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hx-safe__door.is-open{transform:rotateY(104deg);pointer-events:none;opacity:0;transition:transform 1.4s cubic-bezier(.3,.1,.2,1),opacity .35s ease .75s} /* V85b: no edge sliver once it's swung open */
.hx-safe__lcd{position:absolute;left:24.5%;top:19.6%;width:42.8%;height:12.2%;display:flex;align-items:center;justify-content:center;background:#0d1f12;border:2px solid #050a06;border-radius:4px;color:#7dff9a;font:700 clamp(18px,6vw,28px)/1 ui-monospace,Menlo,monospace;letter-spacing:.32em;padding-left:.32em;white-space:nowrap;text-shadow:0 0 8px rgba(110,255,150,.7);box-shadow:inset 0 0 14px rgba(0,0,0,.8)}
.hx-safe__lcd.is-bad{background:#3a0606;color:#ff5a4a;text-shadow:0 0 10px #ff3020}
.hx-safe__lcd.is-good{background:#06381a;color:#b6ffc8}
.hx-safe__pad{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(92vw,320px);transition:opacity .3s ease}
.hx-safe__pad button{min-height:48px;border:0;border-radius:10px;background:linear-gradient(#4a4c4f,#2a2c2e);box-shadow:0 3px 0 #111,inset 0 1px 0 rgba(255,255,255,.18);font-size:20px;font-weight:800;color:#eee}
.hx-safe__pad button:active{transform:translateY(2px);box-shadow:0 1px 0 #111}
.hx-safe__pad button.is-fn{font-size:12px;letter-spacing:.1em;background:linear-gradient(#5a2a24,#3a1814)}
.hx-safe__pad button[data-k=ENTER]{background:linear-gradient(#245a30,#143a1c)}
.hx-safe__pad.is-off{opacity:.25;pointer-events:none}
.hx-safe__pad.is-shake{animation:hxShake .4s ease}
.hx-safe__line{flex:none;margin:0;max-width:520px;min-height:40px;padding:0 10px;text-align:center;font-size:13px;line-height:1.45;opacity:.9}
.hx-safe__items{position:absolute;inset:0;z-index:2}
/* V85c: photoreal souvenirs, each a baked RGBA still with its own contact shadow (22px pad in the image) */
.hx-si{position:absolute;border:0;padding:0;background:none;transition:transform .25s ease,opacity .35s ease;-webkit-tap-highlight-color:transparent}
.hx-si__img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}
.hx-si--cassette{left:23%;top:30%;width:31%;transform:rotate(-3deg)}
.hx-si--polaroid{left:53.5%;top:21%;width:22%;transform:rotate(6deg)}
.hx-si--pass{left:21.5%;top:51%;width:19.5%;transform:rotate(-7deg)}
.hx-si--cash{left:39%;top:63.5%;width:30%}
.hx-si--pick{left:69%;top:71%;width:9.5%;transform:rotate(14deg)}
.hx-si--cassette.is-on{transform:rotate(-3deg) scale(1.08)}.hx-si--polaroid.is-on{transform:rotate(6deg) scale(1.08)}
.hx-si--pass.is-on{transform:rotate(-7deg) scale(1.08)}.hx-si--pick.is-on{transform:rotate(14deg) scale(1.12)}
.hx-si--cash.is-taken{opacity:0;transform:translateY(-30%) scale(1.15)}
.hx-safe__door:not(.is-open)~.hx-safe__items,.hx-safe__box:has(.hx-safe__door:not(.is-open)) .hx-si{pointer-events:none}

@keyframes hxTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
@keyframes hxHeart{0%{opacity:0;transform:translateY(0) scale(.5)}40%{opacity:1;transform:translateY(-20%) scale(1.15)}100%{opacity:0;transform:translateY(-70%) scale(.8)}}
@keyframes hxSing{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-5%) rotate(3deg)}}
@keyframes hxBob{0%,100%{transform:translate(0,0) rotate(-.6deg)}50%{transform:translate(0,-1.4%) rotate(.7deg)}}
@keyframes hxHand{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-1%,1.6%) rotate(-1.5deg)}}
@keyframes hxShake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.hx *{animation:none!important;transition:none!important}.hx-haze i{opacity:.5}}

/* V85b: phone edge chips so the truck (far left) and the pool float are reachable from the default view */
.summer-reach{display:none}
@media (max-width:900px){
  .app.is-live[data-mode="summer"] .summer-reach{display:flex;position:absolute;z-index:40;top:56%;align-items:center;gap:6px;padding:10px 12px;min-height:44px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(6,10,18,.62);color:#fff;font:800 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;animation:hxReach 2.4s ease-in-out infinite}
  .summer-reach--truck{left:max(8px,env(safe-area-inset-left))}
  .summer-reach--float{right:max(8px,env(safe-area-inset-right))}
  .summer-scene.is-reach-truck .summer-spot--truck::after,.summer-float-spot.is-pulse{animation:hxReachPulse .9s ease-in-out 2}
  .app.is-reach-glide .summer-scene__frame{transition:transform 520ms cubic-bezier(.3,.1,.2,1)!important}
}
@keyframes hxReach{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes hxReachPulse{0%,100%{opacity:.85}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.summer-reach{animation:none!important}}