/* ============ Screens ============ */
/* Every phone screen is a real capture (img.scr-img). Only two are drawn here: the Lock Screen (iOS's own UI around
   Huddle's real alert) and the join request in Huddle Assistant's thread, laid out from the app's own copy and capture. */
.scr-host{position:absolute;inset:0;background:#000}
.scr-view{--ins:20px;--blue:#0a84ff;--brand:#2a66d4;--l2:rgba(235,235,245,.6);--l3:rgba(235,235,245,.3);--card:#1c1c1e;--card2:#2c2c2e;--sep:rgba(84,84,88,.55);
 position:absolute;inset:0;color:#fff;background:#000;overflow:hidden;font:400 17px/22px var(--f-app);letter-spacing:-.43px;font-synthesis:none}
.scr-view .s2{color:var(--l2)}.scr-view .s3{color:var(--l3)}.scr-view .fn{font-size:13px;line-height:18px;letter-spacing:-.08px}
:where(.scr-view) em{font-family:var(--f-app);font-size:1em;font-style:normal;letter-spacing:inherit}
.scr-view b{font-weight:600}.scr-view h3{margin:0}
.scr-view .ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.scr-view .art{width:100%;height:100%}
.sb{position:absolute;left:0;right:0;top:0;height:56px;z-index:50}
.sb-t{position:absolute;left:0;top:18px;width:150px;text-align:center;font-weight:600;font-size:17px;letter-spacing:-.4px}
.sb-r{position:absolute;right:30px;top:22.5px;display:flex;gap:6px;align-items:center}
.sb-r svg{fill:#fff;display:block}
.bat{position:relative;width:27px;height:13px;border-radius:4.2px;border:1px solid rgba(255,255,255,.35);padding:1.5px}.bat i{display:block;height:100%;width:78%;background:#fff;border-radius:2.4px}
.bat::after{content:"";position:absolute;right:-3.5px;top:3.5px;width:1.5px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.4)}
.light .sb-r svg{fill:#000}.light .bat{border-color:rgba(0,0,0,.35)}.light .bat i{background:#000}
.home{position:absolute;left:50%;bottom:8px;margin-left:-72px;width:144px;height:5px;border-radius:3px;background:#fff;z-index:60}
/* Liquid-glass approximation, shared. Layers: blur+saturate (+ SVG edge refraction on Chromium), tint, inner rim, specular ring that tracks the cursor */
.lg{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(58,66,92,.30);-webkit-backdrop-filter:blur(20px) saturate(1.9);backdrop-filter:blur(20px) saturate(1.9);
 box-shadow:inset 0 1.5px 2px rgba(255,255,255,.3),inset 0 -8px 16px -10px rgba(170,200,255,.28),inset 0 0 18px rgba(255,255,255,.04),0 12px 30px -14px rgba(8,16,48,.55)}
@supports (backdrop-filter:url(#lg-refract)){.lg{-webkit-backdrop-filter:url(#lg-refract) blur(14px) saturate(1.8);backdrop-filter:url(#lg-refract) blur(14px) saturate(1.8)}}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--ang,200deg) at 50% 50%,rgba(255,255,255,0),rgba(255,255,255,.85) 14%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 52%,rgba(255,255,255,.55) 66%,rgba(255,255,255,0) 84%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.light .lg{background:rgba(255,255,255,.6)}
.av{position:relative;flex:none;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-rd);font-weight:600;font-style:normal;font-size:19px;color:#fff;background:linear-gradient(180deg,#a1a1a8,#6c6c72)}
.av.blue{background:#2a66d4}.av.blue .ic{width:24px;height:24px}.av.mini{width:34px;height:34px;font-size:14px}.av.big{width:40px;height:40px}
/* Lock Screen: iOS 26 layout, measured from the real capture (440 pt wide, scaled to 402) */
.v-lock{background:#05070c}
.lk-wall{position:absolute;inset:0;background:radial-gradient(120% 70% at 20% 0%,#27457f 0%,#0e1a33 45%,#05070c 80%)}
.lk-wall::after{content:"";position:absolute;left:-30px;bottom:130px;width:460px;height:460px;opacity:.1;background:url("../img/art-soccer.svg") center/cover}
.lk-sb .sb-t{display:none}
.lk-top{position:absolute;left:0;right:0;top:74px;text-align:center}
.lk-date{font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.2px;opacity:.88}.lk-time{margin-top:2px;font-size:112px;line-height:104px;font-weight:600;letter-spacing:-2px;font-variant-numeric:tabular-nums;font-family:var(--f-rd);opacity:.92}
.lk-slot{position:absolute;left:12px;right:12px;top:0;bottom:0}
/* Notification banner (iOS 26): app icon, the alert's title, then its body; time on the right */
.push{position:absolute;left:12px;right:12px;top:54px;z-index:80;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:24px;color:#fff;font:400 15px/20px var(--f-app);letter-spacing:-.24px;transform-origin:50% 0;will-change:transform,opacity;cursor:grab;touch-action:none;user-select:none;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),rgba(36,40,56,.84);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22),0 10px 30px -12px rgba(0,0,0,.6)}
.push .pic{width:38px;height:38px;border-radius:22.37%;flex:none;display:block;-webkit-user-drag:none}
.push .pt{min-width:0;flex:1}.push .p1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.push .p1 b{font-weight:600;min-width:0}.push .p1 span{flex:none;font-size:13px;color:rgba(255,255,255,.55)}
.push .p2{color:rgba(255,255,255,.9)}
.lk-slot .push{left:0;right:0}.push.at-lock{top:686px}
/* Huddle Assistant thread (join request): measured from the real capture of the thread */
.v-ha{background:#000}
.ha-hd{position:absolute;left:0;right:0;top:58px;height:96px;z-index:10}
.ha-back{position:absolute;left:18px;top:6px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(118,118,128,.24);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}.ha-back .ic{width:20px;height:20px}
.ha-av{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:#2563eb;color:#fff}.ha-av .ic{width:15px;height:15px}
.ha-av.big{position:absolute;left:50%;top:0;margin-left:-28px;width:56px;height:56px}.ha-av.big .ic{width:28px;height:28px}
.ha-name{position:absolute;left:50%;top:56px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px 12px 5px 14px;border-radius:16px;white-space:nowrap;font-size:16px;line-height:20px;font-weight:600;background:rgba(40,40,44,.9);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}.ha-name .ic{width:12px;height:12px;opacity:.5}
.ha-msgs{position:absolute;left:0;right:0;top:176px;bottom:150px;padding:0 14px 0 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.ha-stamp{text-align:center;font-size:12px;line-height:16px;color:rgba(235,235,245,.45);font-weight:500}
.ha-post{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-end;gap:8px}
.ha-bub{max-width:300px;padding:10px 14px 12px;border-radius:20px;background:#262628;font-size:16px;line-height:21px;letter-spacing:-.3px}
.ha-btns{display:flex;gap:8px;margin-top:10px}.ha-btns span{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;font-weight:500;letter-spacing:-.2px}
.ha-b1{background:#2563eb;color:#fff;cursor:pointer}.ha-b1.dir{cursor:default;gap:6px}.ha-b1.dir svg{width:17px;height:17px}
.ha-code{display:flex;flex-direction:column;margin-top:8px}.ha-code small{font-size:12px;line-height:16px;color:rgba(235,235,245,.6)}.ha-code small:first-child{font-weight:600}.ha-code b{font-size:24px;line-height:30px;font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums}
.ha-place{display:block;margin-top:6px;font-weight:700}.ha-note{display:block;margin-top:6px;color:rgba(235,235,245,.6);font-size:15px;line-height:20px}.ha-b1:focus-visible{outline:2px solid #fff;outline-offset:2px}.ha-b2{background:rgba(118,118,128,.24);color:#5aa0ff}
.ha-done{display:none;align-items:center;gap:6px;margin-top:10px;font-size:15px;font-weight:600;color:rgba(235,235,245,.6);outline:none}.ha-done .ic{width:16px;height:16px}
.v-ha.approved .ha-btns{display:none}.v-ha.approved .ha-done{display:flex;animation:ha-in .5s cubic-bezier(.2,.9,.2,1)}
@keyframes ha-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ha-quick{position:absolute;left:0;right:0;bottom:22px;padding:12px 0 0;border-top:.5px solid rgba(84,84,88,.5);background:#111113}
.ha-qr{display:flex;gap:8px;padding:0 14px;overflow:hidden;white-space:nowrap}.ha-qr span{flex:none;padding:7px 13px;border-radius:17px;font-size:15px;color:#5aa0ff;background:rgba(118,118,128,.18);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
.ha-quick p{margin:10px 0 18px;padding:0 24px;text-align:center;font-size:12px;line-height:16px;color:rgba(235,235,245,.5)}
/* real captures */
.scr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}