:root{
  --card-width:360px;
  --accent:#fff;
  --ui-bg: rgba(0,0,0,0.45);
  --progress-height:6px;
  --progress-padding:12px;
}

html,body{
  margin:0; height:100%;
  font-family:system-ui,Segoe UI,Roboto,Arial;
  color:white; -webkit-font-smoothing:antialiased;
}
.wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px; box-sizing:border-box;
}

.card{
  width:100%; max-width:var(--card-width); height:640px;
  position:relative; border-radius:14px; overflow:hidden;
}
@media (max-width:640px){
  .card{ height:calc(100vh - 20px); max-width:100%; border-radius:10px; }
}

/* video and poster fill */
.card video, .card .poster {
  position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;
}

/* top-left controls */
.top-left{
  position:absolute; top:10px; left:10px; z-index:220; display:flex; gap:8px;
}
.top-left button{
  width:36px; height:36px; border-radius:10px; border:none;
  background:var(--ui-bg); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.45);
}

/* share button */
.share-btn{
  position:absolute; right:14px; bottom:84px; z-index:220;
  width:44px; height:44px; border-radius:22px;
  background:var(--ui-bg); border:none; color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.45);
}

/* center play (transient) */
.center-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:32px;
  background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center;
  z-index:230; opacity:0; pointer-events:none; transition:opacity .16s ease;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}
.center-play.visible{ opacity:1; pointer-events:auto; }

/* spinner */
.spinner{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.12); border-top-color:var(--accent);
  animation:spin 1s linear infinite; z-index:235; display:none;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }

/* full-width bottom progress */
.progress-wrap{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--progress-height) + var(--progress-padding));
  display:flex; align-items:center; justify-content:center;
  z-index:240; pointer-events:none;
}
.progress-track{
  pointer-events:auto; width:calc(100% - 28px);
  height:var(--progress-height); background:rgba(255,255,255,0.12);
  border-radius:999px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  position:relative;
}
.progress-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#fff,#d6d6d6);
  transition:width 80ms linear; border-radius:999px;
  box-shadow:0 0 10px rgba(255,255,255,0.06);
}
.progress-hit{
  position:absolute; left:0; right:0; top:-10px; bottom:-10px;
  cursor:pointer; z-index:245;
}

/* share menu styling (vertical) */
.share-menu{
  position:absolute; display:flex; flex-direction:column; gap:8px;
  padding:8px; border-radius:12px; background:rgba(23,23,23,0.95);
  box-shadow:0 12px 30px rgba(0,0,0,0.6);
  z-index:260; opacity:0; pointer-events:none;
  transform:translateY(6px); transition:opacity .14s, transform .14s;
}
.share-menu.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.share-menu button{
  width:40px; height:40px; border-radius:8px; border:none;
  background:transparent; color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

i[data-lucide]{ width:18px; height:18px; display:inline-block; }

@media (max-width:420px){
  .progress-track{ width:calc(100% - 20px); }
}