/* Reels static v6 (progressive load + fair cycle) */
*{box-sizing:border-box}
html,body{height:100%;background:#000;color:#fff}
body{margin:0;overflow:hidden;overscroll-behavior:contain;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji'}

#feed{position:fixed;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
#feed::-webkit-scrollbar{width:0;height:0} 
#feed{scrollbar-width:none}

#track{position:relative;min-height:100%}
#spacerTop,#spacerBottom{height:0}
#list{position:relative}

.reel{height:100svh;width:100vw;position:relative;scroll-snap-align:start;background:#000;display:grid;place-items:center}
.reel video{max-height:100svh;max-width:100vw;width:100%;height:100%;object-fit:cover;background:#000}

.overlay{position:absolute;inset:0;pointer-events:none}
.overlay .top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 12px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.overlay .right{position:absolute;right:12px;bottom:calc(94px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px;align-items:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.overlay .right .count{font-size:11px;opacity:.9;margin-top:4px;text-align:center}
.overlay .bottom{position:absolute;left:12px;right:100px;bottom:calc(58px + env(safe-area-inset-bottom,0px))}
.overlay .bottom .user{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.overlay .bottom .avatar{width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.4)}
.overlay .bottom .follow{margin-left:8px;padding:4px 10px;border-radius:8px;font-size:12px;background:#fff;color:#000;font-weight:700}
.overlay .bottom .caption{font-size:13px;opacity:.95;line-height:1.2}
.overlay .bottomnav{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:56px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
.overlay .thumb{display:none}

/* icons */
.lucide{stroke:currentColor}
.icon{width:28px;height:28px;opacity:.95}
.icon.small{width:22px;height:22px}
.icon.dim{opacity:.8}
.icon.active{opacity:1}

/* clickable sound button like others */
button.sound-btn{all:unset;cursor:pointer;pointer-events:auto}
button.sound-btn .icon{width:28px;height:28px}