/* real in-app phones */
.rp{--w:300px;position:relative;width:var(--w);max-width:100%;aspect-ratio:390/844;flex:none;border-radius:calc(var(--w)*.165);background:linear-gradient(150deg,#46514c 0%,#1a201d 22%,#0b0e0d 55%,#2c3531 100%);box-shadow:0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 1.5px rgba(255,255,255,.07),0 60px 120px -30px rgba(0,0,0,.85),0 30px 60px -30px rgba(0,0,0,.6)}
.rp::before{content:"";position:absolute;right:-2px;top:22%;width:3px;height:9%;border-radius:2px;background:#2c3531}
.rp-glass{position:absolute;inset:calc(var(--w)*.03);border-radius:calc(var(--w)*.138);overflow:hidden;background:#000;isolation:isolate}
.rp-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%);pointer-events:none;z-index:10000;border-radius:inherit}
.rp-scr{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;transform:scale(var(--k,.75));overflow:hidden;background:var(--night)}
.rp-scr.loading{background:linear-gradient(110deg,#0c1310 30%,#15201a 50%,#0c1310 70%) 0 0/200% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.rp-isl{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:9999;pointer-events:none}
.rp iframe{border:0;width:390px;height:844px;display:block;background:#000}
.rp-cap{font:600 13px/1.4 var(--font-mono);color:var(--ink-3);text-align:center;margin-top:14px}
.rp-cell{display:flex;flex-direction:column;align-items:center}
.hx-dev .rp{position:absolute;left:145px;top:0;--w:290px}
/* scrolly stack */
.sx-stack{display:grid}
.sx-stack>[data-s]{grid-area:1/1;opacity:0;transform:scale(.94) translateY(24px);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.sx-phone .rp{--w:320px}
/* watch + drinks + square layouts */
.phones{display:flex;gap:28px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.phones .rp:nth-child(2){margin-top:56px}
@media (max-width:700px){.phones .rp{--w:260px!important}.phones .rp:nth-child(2){margin-top:0}}
.watch-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){.watch-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}}
.pz-grid{grid-template-columns:1fr}
@media (min-width:1080px){.pz-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}.pz-grid .pz-big{grid-row:auto}}
/* booth */
.booth{background:radial-gradient(60% 60% at 70% 40%,rgba(255,138,148,.10),transparent 70%),radial-gradient(50% 50% at 20% 80%,rgba(212,255,58,.06),transparent 70%),var(--night);overflow:clip}
.booth-grid{display:grid;gap:48px;align-items:center}
@media (min-width:1000px){.booth-grid{grid-template-columns:minmax(0,1.15fr) auto}}
.moments{display:flex;flex-wrap:wrap;gap:8px}
.moments button{all:unset;cursor:pointer;height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--edge);white-space:nowrap}
.moments button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);box-shadow:var(--glow-lime)}
.moments button.bad[aria-pressed="true"]{background:var(--loss);box-shadow:0 8px 30px rgba(255,138,148,.3)}
.quote{min-height:3.4em;font:800 clamp(30px,4.2vw,60px)/1.06 var(--font-display);letter-spacing:-.035em;text-wrap:balance;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.quote.out{opacity:0;transform:translateY(16px)}
.quote b{color:var(--primary);font-weight:800}
.rtag{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px;background:var(--loss);color:var(--on-primary);font:800 13px/1 var(--font-mono);letter-spacing:.06em;width:fit-content}
.lvl{display:flex;gap:6px}
.lvl span{height:36px;padding:0 14px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3)}
.lvl span.on{background:var(--loss-tint);color:var(--loss);box-shadow:inset 0 0 0 1.5px var(--loss)}
/* ticker as booth */
.ticker.bootht{background:#0A0F0D;color:var(--ink);border-block:1px solid var(--line)}
.ticker.bootht .ticker-track span{font-size:clamp(18px,1.7vw,24px)}
.ticker.bootht .ticker-track span::after{background:var(--loss);opacity:1}

.rp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-scr iframe{position:relative;transition:opacity .3s}


/* phones are pictures, not scroll areas: the page scrolls, never the screen inside */
.rp-scr iframe{pointer-events:none}
.rp[data-interactive] .rp-scr iframe{pointer-events:auto}