:root{
  /* Desktop: match site (mobile unchanged below) */
  --bg:#fff;
  --fg:#111;
  --muted:rgba(0,0,0,.6);
  --card:#000;
  --stroke:rgba(0,0,0,.12);
}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.shorts{
  /* full viewport minus site header (set from JS) */
  height: calc(var(--vh, 1vh) * 100 - var(--site-header-h, 0px));
  display:flex;
  flex-direction:column;
}

.shorts__topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(11,11,15,.95), rgba(11,11,15,.55));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stroke);
}

.shorts__title{font-weight:700}
.shorts__hint{color:var(--muted); margin-top:4px; font-size:12px}

.shorts__feed{
  flex:1;
  overflow:auto;
  scroll-snap-type:y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
  height:100%;
}
.shorts__feed::-webkit-scrollbar{ width:0; height:0; } /* Chromium/Safari */

/* Mobile HUD exists in DOM; hidden by default */
.shorts__hud-mobile{ display:none; }

.shorts__item{
  scroll-snap-align:start;
  height: calc(var(--vh, 1vh) * 100 - var(--site-header-h, 0px));
  min-height: calc(var(--vh, 1vh) * 100 - var(--site-header-h, 0px));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
}

.shorts__video{
  width:min(520px, 100%);
  aspect-ratio: 9 / 16;
  height:auto;
  max-height:100%;
  border-radius:16px;
  background:#000;
  border:1px solid var(--stroke);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.shorts__start{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index:30;
}
.shorts__start[hidden]{ display:none; }
.shorts__start-btn{
  border:1px solid var(--stroke);
  background:rgba(17,17,26,.92);
  color:var(--fg);
  padding:14px 18px;
  border-radius:999px;
  font-size:16px;
  cursor:pointer;
}
.shorts__start-btn:hover{ background:rgba(17,17,26,1); }

.shorts__nav{
  position:fixed;
  right:3cm;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:20;
}

.shorts__nav-btn{
  width:84px;
  height:84px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.75);
  color:#111;
  font-size:33px;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.shorts__nav-btn:hover{ background:rgba(255,255,255,.92); }
.shorts__nav-btn:active{ transform: translateY(1px); }

.shorts__nav-btn--close{
  font-size:42px;
}

/* Desktop HUD under nav buttons */
.shorts__hud-desktop{
  position:fixed;
  right:3cm;
  top: calc(50% + 5cm);
  transform: translateY(0);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:20;
  color:#111;
  user-select:none;
}
.shorts__hud-desktop .shorts__hud-btn{
  width:84px;
  height:84px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.75);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
}
.shorts__hud-desktop .shorts__hud-btn:hover{ background:rgba(255,255,255,.92); }
.shorts__hud-desktop .shorts__hud-metric{
  width:84px;
  height:84px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.75);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  backdrop-filter: blur(10px);
}
.shorts__hud-desktop .shorts__hud-metric:hover{ background:rgba(255,255,255,.92); }
.shorts__hud-desktop .shorts__hud-val{ font-size:13px; font-weight:700; }
.shorts__hud-desktop .shorts__svg{ width:30px; height:30px; }

/* Desktop-only tweaks (don't touch mobile) */
@media (min-width: 901px){
  /* Prevent page scrolling to footer on desktop */
  html, body{
    height: 100%;
    overflow: hidden;
  }
  .site-footer{ display:none; }

  /* Hide all scrollbars on desktop (Windows overlay indicators too) */
  *{
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
  }
  *::-webkit-scrollbar{ width:0; height:0; } /* Chromium/Safari */

  /* Kill native scrolling UI on desktop (no scrollbar/indicator at all). */
  .shorts__feed{
    direction:ltr; /* avoid RTL left-scrollbar edge cases */
    overflow: hidden !important;
  }
  .shorts__item{ direction:rtl; }

  /* All desktop buttons exactly 1cm x 1cm */
  .shorts__nav-btn,
  .shorts__hud-desktop .shorts__hud-btn,
  .shorts__hud-desktop .shorts__hud-metric{
    width: 1.5cm;
    height: 1.5cm;
  }
  .shorts__hud-desktop .shorts__hud-metric{
    border-radius: 0.35cm;
    gap: 0.14cm;
  }
  .shorts__hud-desktop .shorts__hud-val{
    font-size: 0.32cm;
    line-height: 1;
  }
  .shorts__svg{
    width: 0.75cm;
    height: 0.75cm;
  }

  /* Hide per-item HUD (it was meant for mobile) */
  .shorts__hud{ display:none; }
  /* Hide mobile play overlay button on desktop */
  .shorts__play{ display:none; }
  /* Hide fixed mobile HUD on desktop */
  .shorts__hud-mobile{ display:none !important; }

  /* Desktop "rating" (Likes) toggle: grey + outline only */
  .shorts__hud-desktop .shorts__hud-metric[aria-label="Likes"].is-liked{
    opacity:.55;
  }
  .shorts__hud-desktop .shorts__hud-metric[aria-label="Likes"].is-liked .shorts__svg{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
  }

  /* Keep site header fixed while scrolling feed */
  .header{
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* Desktop capabilities (applies even if window is narrow) */
@media (hover:hover) and (pointer:fine){
  html, body{
    height: 100%;
    overflow: hidden;
  }
  .site-footer{ display:none; }
  .shorts__feed{
    direction:ltr;
    overflow: hidden !important;
  }
  .shorts__item{ direction:rtl; }
  /* Hide per-item HUD (it was meant for mobile) */
  .shorts__hud{ display:none; }
  /* Hide mobile play overlay button on desktop */
  .shorts__play{ display:none; }
  /* Hide fixed mobile HUD on desktop */
  .shorts__hud-mobile{ display:none !important; }

  /* Desktop "rating" (Likes) toggle: grey + outline only */
  .shorts__hud-desktop .shorts__hud-metric[aria-label="Likes"].is-liked{
    opacity:.55;
  }
  .shorts__hud-desktop .shorts__hud-metric[aria-label="Likes"].is-liked .shorts__svg{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
  }
}

/* ------------------------------------------------------------
   Mobile: integrate into site UI (no overlay, no nav buttons)
   ------------------------------------------------------------ */
@media (max-width: 900px){
  body{
    background: #fff;
    color: #111;
  }
  /* Use real visual viewport height on mobile (set from JS) */
  .shorts{
    height: calc(var(--vh, 1vh) * 100 - var(--site-header-h, 0px));
  }
  .shorts__topbar{
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
  }
  .shorts__hint{ color: rgba(0,0,0,.6); }
  .shorts__feed{
    scrollbar-width: none;
    height:100%;
    scroll-snap-type:y mandatory;
    scroll-padding-top:0;
  }
  .site-footer{ display:none; }
  /* Hide desktop-only controls on mobile */
  .shorts__nav{ display:none !important; }
  .shorts__hud-desktop{ display:none !important; }
  .shorts__item{
    padding:0;
    height: calc(var(--vh, 1vh) * 100 - var(--site-header-h, 0px));
    min-height: calc(var(--vh, 1vh) * 100 - var(--site-header-h, 0px));
    position:relative;
    align-items:stretch;
    justify-content:stretch;
  }
  .shorts__video{
    width:100%;
    height:100%;
    max-height:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#000;
    object-fit:cover;
  }
  .shorts__start{ display:none; }
  .shorts__nav{ display:none; }

  /* Hide native controls (we use custom UI) */
  .shorts__video::-webkit-media-controls { display:none !important; }
  .shorts__video::-webkit-media-controls-enclosure { display:none !important; }

  .shorts__play{
    position:absolute;
    inset:0;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .shorts__play-ic{
    width:74px;
    height:74px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    position:relative;
    opacity:0;
    transition:opacity .18s ease;
  }
  /* play triangle */
  .shorts__play-ic::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:0;
    height:0;
    transform:translate(-34%,-50%);
    border-style:solid;
    border-width:14px 0 14px 22px;
    border-color:transparent transparent transparent rgba(0,0,0,.85);
  }
  /* pause bars when playing (shown briefly on tap) */
  .shorts__item.is-playing .shorts__play-ic::after{
    width:18px;
    height:22px;
    border:0;
    transform:translate(-50%,-50%);
    background:linear-gradient(90deg, rgba(0,0,0,.85) 0 40%, transparent 40% 60%, rgba(0,0,0,.85) 60% 100%);
    content:'';
  }

  .shorts__item.is-paused .shorts__play-ic,
  .shorts__item.show-ic .shorts__play-ic{
    opacity:1;
  }

  /* Use one fixed HUD for mobile (doesn't move with items) */
  .shorts__hud{ display:none !important; }
  .shorts__hud-mobile{
    position:fixed;
    right:12px;
    bottom:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:60;
    color:#fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.55);
    user-select:none;
    pointer-events:auto;
  }
  .shorts__hud-mobile .shorts__hud-btn{
    width:44px;
    height:44px;
    border-radius:999px;
    border:0;
    background:rgba(0,0,0,.35);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .shorts__hud-mobile .shorts__hud-metric{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:44px;
  }
  .shorts__hud-mobile .shorts__hud-ic{ font-size:22px; line-height:1; }
  .shorts__hud-mobile .shorts__hud-val{ font-size:12px; font-weight:700; }
  .shorts__hud-metric.is-liked .shorts__hud-ic{
    color:#000;
    text-shadow:none;
  }

  .shorts__svg{
    width:26px;
    height:26px;
    fill:currentColor;
    display:block;
  }
}