:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; background: #000; color: #fff;
  overflow: hidden; overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
body { position: fixed; inset: 0; height: 100dvh; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- feed cards ---------- */
#feed { position: fixed; inset: 0; pointer-events: none; }
.card-hud { position: absolute; inset: 0; will-change: transform; display: none; }
.card-hud.visible { display: block; }

.card-hud .dim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 18%),
    linear-gradient(to top, rgba(0,0,0,.62), transparent 42%);
}
.card-hud .placeholder {
  position: absolute; inset: 0; pointer-events: none; transition: opacity .35s ease;
  background: radial-gradient(120% 80% at 50% 110%, var(--accent, #333) 0%, #0b0b0d 60%);
}
.card-hud.loaded .placeholder { opacity: 0; }

.loader { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: .9; transition: opacity .25s; }
.card-hud.loaded .loader { opacity: 0; }
.loader svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.loader .track { stroke: rgba(255,255,255,.15); stroke-width: 3; }
.loader .bar { stroke: #fff; stroke-width: 3; stroke-dasharray: 125.6; stroke-dashoffset: 125.6; transition: stroke-dashoffset .15s linear; }

.score {
  position: absolute; top: calc(var(--sat) + 14px); left: 0; right: 0; text-align: center;
  font-size: 42px; font-weight: 200; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  text-shadow: var(--shadow); opacity: .85; pointer-events: none;
}

.rail {
  position: absolute; right: 8px; bottom: calc(var(--sab) + 84px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  pointer-events: auto; will-change: transform, opacity;
}
.rail .btn { display: flex; flex-direction: column; align-items: center; gap: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.rail .btn svg { width: 34px; height: 34px; stroke-width: 1.6; transition: transform .18s cubic-bezier(.2,.9,.3,1.4); }
.rail .btn:active svg { transform: scale(.85); }
.rail .btn .n { font-size: 12px; font-weight: 600; text-shadow: var(--shadow); min-height: 14px; }
.rail .btn.pop svg { animation: pop .38s cubic-bezier(.2,.9,.3,1.4); }
.rail .like.on svg { fill: #ff2d55; stroke: #ff2d55; }
.rail .save.on svg { fill: #ffd60a; stroke: #ffd60a; }
@keyframes pop { 0% { transform: scale(.7); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

.avatar {
  position: relative; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 8px;
  border: 1.5px solid #fff; background: var(--accent, #555);
  background-image: linear-gradient(135deg, rgba(255,255,255,.35), transparent 60%);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.avatar .plus {
  position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: #ff2d55; display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4), opacity .25s;
}
.avatar .plus svg { width: 12px; height: 12px; stroke-width: 2.6; }
.avatar.on .plus { transform: scale(0); opacity: 0; }

.info {
  position: absolute; left: 14px; right: 80px; bottom: calc(var(--sab) + 22px);
  pointer-events: none; will-change: transform, opacity; text-shadow: var(--shadow);
}
.info .title { font-size: 17px; font-weight: 600; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.info .title i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #fff); box-shadow: 0 0 10px var(--accent, #fff); }
.info .stats { display: flex; gap: 16px; margin-top: 9px; font-size: 13px; font-weight: 500; opacity: .92; font-variant-numeric: tabular-nums; }
.info .stats span { display: inline-flex; align-items: center; gap: 5px; }
.info .stats svg { width: 15px; height: 15px; stroke-width: 1.8; opacity: .9; }
.info .tags { display: flex; gap: 6px; margin-top: 10px; }
.info .tags i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.info .tags i:first-child { background: var(--accent, #fff); width: 34px; }

.playglyph {
  position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  opacity: 0; pointer-events: none; animation: breathe 2.8s ease-in-out 1.2s infinite;
}
.playglyph svg { width: 100%; height: 100%; stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
@keyframes breathe { 0%, 100% { opacity: 0; transform: translateX(6px); } 35%, 65% { opacity: .55; transform: translateX(0); } }

/* ---------- play mode ---------- */
#play-hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#play-hud .quit {
  position: absolute; left: 14px; bottom: calc(var(--sab) + 18px); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20,20,24,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; pointer-events: none;
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4), background .25s, color .25s;
}
#play-hud.live .quit { pointer-events: auto; }
#play-hud .quit svg { width: 22px; height: 22px; stroke-width: 2; opacity: .95; }
#play-hud .quit:active { transform: scale(.9); }
#play-hud.paused .quit { background: rgba(255,255,255,.92); color: #000; }
#play-hud .pause-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
#play-hud.paused .pause-scrim { opacity: 1; }
#play-hud .exit-chevron {
  position: absolute; left: 8px; top: 50%; width: 30px; height: 30px; margin-top: -15px; opacity: 0;
}
#play-hud .exit-chevron svg { width: 100%; height: 100%; stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
#play-hud.paused .exit-chevron { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: .9; transform: translateX(10px); } }

/* ---------- comments sheet ---------- */
#sheet { position: fixed; inset: 0; pointer-events: none; }
#sheet .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
#sheet .panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66%; background: #141416; color: #eee;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  transform: translateY(105%); will-change: transform;
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  padding-bottom: var(--sab);
}
#sheet.open { pointer-events: auto; }
#sheet.open .scrim { opacity: 1; }
#sheet.open .panel { transform: translateY(0); }
#sheet.dragging .panel { transition: none; }
#sheet .grab { height: 28px; display: grid; place-items: center; touch-action: none; }
#sheet .grab i { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
#sheet .list { flex: 1; overflow-y: auto; padding: 4px 16px 12px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.cmt { display: flex; gap: 12px; padding: 10px 0; align-items: flex-start; }
.cmt .av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--c, #666); background-image: linear-gradient(135deg, rgba(255,255,255,.3), transparent 60%); }
.cmt .body { flex: 1; min-width: 0; }
.cmt .who { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.cmt .txt { font-size: 15px; line-height: 1.3; word-wrap: break-word; }
.cmt .h { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: rgba(255,255,255,.55); padding-top: 4px; }
.cmt .h svg { width: 18px; height: 18px; stroke-width: 1.6; }
.cmt .h.on { color: #ff2d55; } .cmt .h.on svg { fill: #ff2d55; stroke: #ff2d55; }
.cmt.new { animation: slidein .3s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } }
#sheet .compose { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; border-top: 1px solid rgba(255,255,255,.08); }
#sheet .compose .me { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #7c8cff, #3ad0ff); flex: none; }
#sheet .compose input {
  flex: 1; height: 40px; border-radius: 20px; border: 0; padding: 0 16px; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.08); outline: none; -webkit-user-select: text; user-select: text;
}
#sheet .compose button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #3ad0ff; }
#sheet .compose button svg { width: 22px; height: 22px; }

/* ---------- double-tap heart ---------- */
#burst { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; opacity: 0; color: #ff2d55; }
#burst svg { width: 100%; height: 100%; fill: currentColor; stroke: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
#burst.go { animation: burst .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes burst {
  0% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  18% { opacity: 1; transform: scale(1.15) rotate(-6deg); }
  40% { transform: scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: scale(1.1) translateY(-60px) rotate(-6deg); }
}