/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }

:root { --vh: 1vh; }

/* Page background is white; feed/player areas remain black */
html, body {
  height:100%;
  width:100%;
  background:#fff;
  overflow:hidden; /* feed uses its own scroll/pager */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#000;
}

/* ===========================
   LANDING (matches your screenshot)
   - Mobile: a normal page with margins & a centered 9:16 card
   - Desktop: centered big preview card
   =========================== */

/* Landing container: on mobile it behaves like a page (not fixed overlay) */
#landing {
  display:none;                 /* set by JS */
  background:#fff;
  width:100%;
  height:auto;
  min-height:100%;
  overflow:auto;
}

/* Content padding like your screenshot (side gutters) */
.landing-inner {
  width:100%;
  max-width:640px;              /* keep column narrow */
  margin:0 auto;
  padding:16px;                 /* white margins left/right */
}

/* The 9:16 video card (“white framed” look via page margins + shadow) */
.landing-box {
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  background:#000;              /* black player area (inside) */
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  margin:12px auto 24px;        /* spacing like screenshot */
}

/* The muted autoplay video inside the card */
.landing-video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
  aspect-ratio:9/16;
}

/* Big play button overlay (tap to enter full player with sound) */
.landing-play {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
  transition:transform .15s ease, opacity .2s ease;
  animation:landingPulse 1.8s infinite;
}
.landing-play:active { transform:translate(-50%,-50%) scale(0.96); }
.landing-play::after{
  content:"";
  display:block;
  margin-left:6px;
  width:0; height:0;
  border-left:26px solid #000;  /* dark triangle on white circle */
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
}
@keyframes landingPulse{
  0%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.06); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

/* Optional title/brand under card */
.landing-caption {
  font-size:18px;
  font-weight:600;
  color:#000;
  margin:0 4px 24px;
}

/* Desktop/larger screens: center the landing vertically */
@media (min-width: 900px) and (min-height: 700px) {
  #landing {
    display:none;
    min-height:calc(var(--vh) * 100);
  }
  .landing-inner {
    min-height:calc(var(--vh) * 100);
    display:grid;
    place-items:center;
    padding:24px;
  }
  .landing-box {
    max-width:520px;
    height:auto;
  }
}

/* ===========================
   FEED (existing swipe player)
   =========================== */
#feed {
  position:relative;
  height:calc(var(--vh) * 100);
  width:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
  background:#000;                 /* player stays black */
}

.slide {
  position:relative;
  height:calc(var(--vh) * 100);
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
  overflow:hidden;
}

.video-wrap{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  touch-action:none;               /* we manage swipes */
  background:#000;
}

video{
  width:100%;
  height:100%;
  max-height:calc(var(--vh) * 100);
  object-fit:cover;
  background:#000;
  aspect-ratio:9/16;               /* desktop also 9:16 */
}

/* Share button: plain white icon, same position */
.share-btn{
  position:absolute;
  right:16px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 88px);
  background:none;
  border:none;
  box-shadow:none;
  width:auto;
  height:auto;
  padding:0;
  display:grid; place-items:center;
  cursor:pointer; z-index:20;
  transition:opacity .15s ease;
}
.share-btn:active{ opacity:0.8; }
.share-btn img{
  width:32px; height:32px; display:block;
                /* remove if your icon file is already white */
}
@media (max-height:700px){
  .share-btn{ bottom:64px; }
  .share-btn img{ width:28px; height:28px; }
}

/* Buffering spinner */
.buffering-overlay{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0; transition:opacity .18s ease;
  z-index:12;
}
.buffering-overlay.show{ opacity:1; }
.buffering-overlay .spinner{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#fff; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Tap feedback & seek indicators (feed) */
.tap-indicator{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.95);
  font-size:48px; font-weight:bold; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; z-index:13;
  transition:opacity .12s ease, transform .12s ease;
}
.tap-indicator.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.seek-indicator{
  position:absolute; top:50%;
  transform:translateY(-50%) scale(0.9);
  font-size:32px; font-weight:bold; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; z-index:13;
  transition:opacity .12s ease, transform .12s ease;
}
.seek-indicator.show{ opacity:1; transform:translateY(-50%) scale(1); }
.seek-left{ left:20%; } .seek-right{ right:20%; }

/* ======== NEW: bottom seekbar (progress) ======== */
.seekbar{
  position:absolute;
  left:0; right:0;
  bottom:0;                /* very bottom of the player */
  height:3px;
  background:rgba(255,255,255,.22); /* subtle track */
  z-index:14;              /* above video, below big UI */
  pointer-events:none;     /* display only (not interactive) */
}
.seekbar .progress{
  width:0%;
  height:100%;
  background:#fff;         /* completely white while playing */
  transition:width .1s linear;
}