html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { position: fixed; inset: 0; display: flex; justify-content: center; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage { --top: calc(40px + env(safe-area-inset-top)); --bottom: calc(172px + env(safe-area-inset-bottom)); position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
/* Only on wide screens (desktop/tablet landscape) keep a phone-shaped column; phones use the full width. */
@media (min-aspect-ratio: 3/4) { #stage { max-width: calc(100dvh * 9 / 16); } }
button { background: none; border: 0; padding: 0; }

/* Cards: one per preloaded POV. Only the .on card is visible. */
.card { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.card.on { opacity: 1; pointer-events: auto; z-index: 1; }
.card .backdrop { position: absolute; inset: -40px; background: #000 center / cover no-repeat; filter: blur(34px) brightness(.42) saturate(1.15); transform: scale(1.1); }
/* External (YouTube) players: vertical, uncropped, in their own region — nothing of ours on top (platform policy). */
.card .region { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--bottom); display: flex; align-items: center; justify-content: center; }
.card .box { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #000; overflow: hidden; border-radius: 6px; }
.card .box.h { height: auto; width: 100%; aspect-ratio: 16 / 9; max-height: 100%; border-radius: 0; }
.card .box iframe, .card .box > .yt { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.card .thumb { position: absolute; inset: 0; background: #000 center / cover no-repeat; pointer-events: none; transition: opacity .25s ease; }
.card .thumb.gone { opacity: 0; }
/* Own media (LIVE, native uploads) is full-bleed; our UI may sit over it. */
.card video.full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card.full .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 340px; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.25) 60%, rgba(0,0,0,0)); pointer-events: none; }
.card.full .shade-top { position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events: none; }

.bar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: var(--top); padding: env(safe-area-inset-top) 4px 0 16px; display: flex; align-items: center; gap: 8px; }
.mark { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .24em; height: 40px; }
.mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.icons { margin-left: auto; display: flex; }
.icon { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.filter { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 12px; border-radius: 15px; background: rgba(244,242,238,.14); font-size: 13px; font-weight: 500; max-width: 46%; }
.filter span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter button { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }

.band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: var(--bottom); padding: 0 12px env(safe-area-inset-bottom) 12px; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.band > * { pointer-events: auto; }
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 4px 0 8px; transition: opacity .15s ease; }
.info.swap { opacity: 0; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dim { color: rgba(244,242,238,.82); }
.place { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator { display: flex; align-items: center; gap: 8px; height: 32px; min-width: 0; flex-shrink: 1; }
.avatar { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(244,242,238,.9); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; background-size: cover; }
.handle { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--fg); color: #0b0b0c; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.follow.on { background: transparent; color: var(--fg); border: 1px solid rgba(244,242,238,.45); font-weight: 500; }
.sub { gap: 12px; }
.req { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; margin-left: auto; flex-shrink: 0; border: 1px solid rgba(244,242,238,.3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.req .req-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.req.on { border-color: rgba(255,90,54,.6); color: #ffb3a3; }
.src { flex-shrink: 0; max-width: 45%; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: rgba(244,242,238,.7); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.src:hover { color: var(--fg); }

.tp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 12px; flex-shrink: 0; }
.tp button { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(244,242,238,.3); background: rgba(12,12,14,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; }
.tp button::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--accent); animation: halo 2.8s ease-out infinite; }
.tp span { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@keyframes halo { 0% { transform: scale(1); opacity: .7 } 100% { transform: scale(1.5); opacity: 0 } }

.jump { position: absolute; left: 0; right: 0; top: calc(var(--top) + 8px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .35s ease; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.jump.show { opacity: 1; transition: opacity .08s ease; }
.jump .k { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .32em; color: var(--accent); }
.jump .r { font-size: 20px; font-weight: 600; text-align: center; padding: 0 20px; }
.jump .d { font-family: 'Geist Mono', monospace; font-size: 11px; color: rgba(244,242,238,.75); }
.toast { position: absolute; left: 50%; bottom: calc(var(--bottom) + 12px); transform: translateX(-50%); z-index: 7; background: rgba(20,20,22,.92); border-radius: 18px; padding: 9px 14px; font-size: 13px; white-space: nowrap; pointer-events: none; }
.state { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; pointer-events: none; }
.state .t { font-size: 16px; font-weight: 500; }
.state .s { font-size: 13px; color: var(--muted); }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(244,242,238,.2); border-top-color: var(--fg); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
[hidden] { display: none !important; }

/* Sheets */
.sheet-wrap { position: absolute; inset: 0; z-index: 20; }
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: fade .18s ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; display: flex; flex-direction: column; background: rgba(16,16,18,.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 22px 22px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); animation: up .26s cubic-bezier(.2,.8,.2,1); touch-action: pan-y; }
.sheet .grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: rgba(244,242,238,.2); margin-bottom: 10px; flex-shrink: 0; }
#sheet-body { overflow-y: auto; margin: 0 -20px; padding: 0 20px; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
@keyframes up { from { transform: translateY(100%) } to { transform: none } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sh-title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.sh-sub { font-size: 13px; color: var(--muted); }
.x { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: -8px; flex-shrink: 0; }
.kicker { font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--faint); margin: 18px 0 6px; }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; }
.list-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row .t1 { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .t2 { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .n { font-family: 'Geist Mono', monospace; font-size: 13px; }
.pov-row .th { width: 56px; height: 56px; border-radius: 10px; background: #111 center / cover; flex-shrink: 0; position: relative; }
.pov-row .th .lv { position: absolute; left: 4px; top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .1em; background: var(--accent); color: #140a08; border-radius: 4px; padding: 1px 4px; }
.search-input { width: 100%; height: 46px; border-radius: 23px; border: 1px solid var(--line); background: #0d0d0f; color: var(--fg); font: inherit; font-size: 16px; padding: 0 18px; outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); font-size: 13px; }
.map { position: relative; width: 100%; aspect-ratio: 2 / 1; border-radius: 14px; background: #0a0a0b; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: flex; align-items: center; justify-content: center; }
.map .dot i { display: block; border-radius: 50%; background: rgba(244,242,238,.8); box-shadow: 0 0 0 3px rgba(244,242,238,.08); }
.map .dot.live i { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,54,.25); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,90,54,.05); } }
.live-n { color: var(--accent); }
/* Profile */
.prof-top { display: flex; align-items: center; gap: 14px; }
.prof-av { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; flex-shrink: 0; background-size: cover; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: .08em; border: 1px solid rgba(244,242,238,.3); color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.stats div { display: flex; flex-direction: column; gap: 3px; }
.stats b { font-size: 17px; font-weight: 600; }
.stats span { font-size: 11.5px; color: var(--muted); }
.btns { display: flex; gap: 10px; }
.btn { flex: 1; height: 44px; border-radius: 22px; font-size: 14px; font-weight: 600; border: 1px solid rgba(244,242,238,.3); }
.btn.primary { background: var(--fg); color: #0b0b0c; border: 0; }
.btn.accent { border-color: rgba(255,90,54,.55); }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.note a { color: var(--fg); }
.claim-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); text-decoration: none; font-size: 13.5px; }

.comment { font-size: 13px; line-height: 1.35; color: rgba(244,242,238,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comment b { font-weight: 600; color: var(--fg); }
.comment.mine b { color: var(--accent); }
.say { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.say input { flex: 1; min-width: 0; height: 38px; border-radius: 19px; border: 1px solid rgba(244,242,238,.22); background: rgba(12,12,14,.5); color: var(--fg); font: inherit; font-size: 15px; padding: 0 16px; outline: none; }
.say input::placeholder { color: rgba(244,242,238,.6); }
.say button { width: 38px; height: 38px; border-radius: 50%; background: var(--fg); color: #0b0b0c; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Shared YouTube players (see ytPlay): same region as the card box, above cards, below our UI. */
.ytlayer { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--bottom); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.ytlayer.on { opacity: 1; }
.ytlayer .box { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 6px; overflow: hidden; background: transparent; }
.ytslot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; }
.ytslot.on { opacity: 1; pointer-events: auto; }

/* Full-screen partner embeds: player cropped to cover the stage, swipe layer on top, POV UI above. */
.card .cover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; }
.card .cover iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.card .tap { position: absolute; inset: 0; z-index: 1; }
.card.full .shade, .card.full .shade-top { z-index: 2; }

/* TikTok keeps its like/comment/share column on the right inside the player: keep our UI clear of it. */
#stage.tt .band { padding-right: 72px; }
#stage.tt .req { margin-left: 0; }
#stage.tt .who { flex-wrap: wrap; }