:root {
  --gold: #f6d365;
  --ink: #0d1140;
  --rose: #ff7eb3;
  --txt: #fff;
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  background: #0d1140;
  color: var(--txt);
  font-family: Quicksand, system-ui, sans-serif;
}
.feed {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar {
  display: none;
}
.slide {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: linear-gradient(160deg, #1b1f6b, #4b2a86 60%, #ff7eb3);
}
.media,
.media video,
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 84px;
  text-align: center;
}
.ph small {
  font-size: 14px;
  opacity: 0.7;
  max-width: 70%;
}
.shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(8, 10, 50, 0.85));
  pointer-events: none;
}
.top {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  z-index: 5;
  text-shadow: 0 1px 6px #0008;
}
.top span {
  opacity: 0.6;
  margin: 0 10px;
}
.top .on {
  opacity: 1;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
}
.info {
  position: absolute;
  left: 16px;
  right: 88px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  z-index: 5;
}
.user {
  font-weight: 700;
  margin-bottom: 6px;
}
.user b {
  color: var(--gold);
}
.cap {
  font-size: 15px;
  line-height: 1.4;
}
.date {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 6px;
}
.side {
  position: absolute;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  z-index: 6;
}
.side button {
  background: none;
  border: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  font:
    700 12px Quicksand,
    sans-serif;
  gap: 3px;
  cursor: pointer;
  text-shadow: 0 1px 5px #0009;
}
.side svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  transition: transform 0.2s;
}
.side .liked svg {
  fill: #ff3d6e;
  animation: pop 0.35s;
}
.side .saved svg {
  fill: var(--gold);
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--rose));
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 2px solid #fff;
}
@keyframes pop {
  50% {
    transform: scale(1.4);
  }
}
.burst {
  position: absolute;
  font-size: 90px;
  pointer-events: none;
  z-index: 8;
  animation: up 0.8s forwards;
  transform: translate(-50%, -50%);
}
@keyframes up {
  to {
    opacity: 0;
    transform: translate(-50%, -140%) scale(1.5);
  }
}
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  animation: tw 2.5s infinite alternate;
}
@keyframes tw {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 1;
    box-shadow: 0 0 8px var(--gold);
  }
}
.center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  z-index: 4;
}
.script {
  font-family: "Great Vibes", cursive, serif;
  color: var(--gold);
  font-size: 56px;
  line-height: 1.1;
  text-shadow: 0 0 20px #f6d36588;
}
.big {
  font-size: 88px;
  font-weight: 700;
  color: #fff;
}
.hint {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  animation: bob 1.5s infinite;
  font-size: 14px;
  opacity: 0.85;
}
@keyframes bob {
  50% {
    transform: translateY(-8px);
  }
}
.final video {
  position: relative;
  width: min(92%, 420px);
  max-height: 56%;
  border-radius: 18px;
  border: 2px solid var(--gold);
  box-shadow: 0 0 30px #f6d36577;
  background: #000;
}
.vph {
  width: min(92%, 420px);
  aspect-ratio: 9/16;
  max-height: 56%;
  border-radius: 18px;
  border: 2px dashed var(--gold);
  display: grid;
  place-items: center;
  font-size: 14px;
  padding: 20px;
  opacity: 0.9;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: #222;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 20;
  transform: translateY(105%);
  transition: transform 0.3s;
  max-height: 60%;
  overflow: auto;
}
.sheet.open {
  transform: none;
}
.sheet h4 {
  text-align: center;
  margin-bottom: 10px;
}
.c {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
}
.c b {
  display: block;
  font-size: 12px;
  color: #777;
}
.c .a {
  font-size: 26px;
}
.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: #000c;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 30;
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}
.toast.on {
  opacity: 1;
}
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: linear-gradient(160deg, #0d1140, #4b2a86);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
  transition: opacity 0.7s;
}
.gate.off {
  opacity: 0;
  pointer-events: none;
}
.gate input {
  width: min(80%, 280px);
  padding: 14px;
  border-radius: 14px;
  border: 2px solid var(--gold);
  background: #ffffff14;
  color: #fff;
  font:
    700 22px Quicksand,
    sans-serif;
  text-align: center;
  letter-spacing: 4px;
  outline: 0;
}
.gate button.go {
  padding: 12px 30px;
  border-radius: 24px;
  border: 0;
  background: linear-gradient(135deg, var(--gold), var(--rose));
  color: #2a1250;
  font:
    700 16px Quicksand,
    sans-serif;
}
.shake {
  animation: sh 0.4s;
}
@keyframes sh {
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}
.err {
  min-height: 18px;
  font-size: 13px;
  color: #ffb3c7;
}
.cnt {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.cnt div {
  background: #ffffff1a;
  border: 1px solid #f6d36566;
  border-radius: 14px;
  padding: 10px 6px;
  min-width: 66px;
}
.cnt b {
  display: block;
  font-size: 30px;
  color: var(--gold);
}
.cnt small {
  font-size: 11px;
  opacity: 0.8;
}
.env {
  font-size: 120px;
  cursor: pointer;
  animation: bob 1.6s infinite;
  background: none;
  border: 0;
}
.letter {
  display: none;
  background: #fff8e7;
  color: #4a3320;
  border-radius: 14px;
  padding: 22px;
  width: min(92%, 420px);
  max-height: 68%;
  overflow: auto;
  font-family: "Great Vibes", cursive, serif;
  font-size: 25px;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 0 30px #f6d36577;
  animation: rise 0.7s;
}
.letter.show {
  display: block;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
  }
}
.fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.fx span {
  position: absolute;
  top: -40px;
  opacity: 0.65;
  animation: fall linear infinite;
}
@keyframes fall {
  to {
    transform: translate(var(--dx), 115vh) rotate(360deg);
  }
}
.mus {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 10px;
  z-index: 15;
  background: #0006;
  border: 0;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 18px;
  color: #fff;
}
.mus.on {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.opt {
  display: block;
  width: min(88vw, 360px);
  margin: 8px auto;
  padding: 13px;
  border-radius: 14px;
  border: 1.5px solid var(--gold);
  background: #ffffff14;
  color: #fff;
  font:
    700 15px Quicksand,
    sans-serif;
}
.qz h3 {
  font-size: 20px;
  margin: 8px 0 14px;
  line-height: 1.3;
}
.cps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(92vw, 400px);
  margin-top: 12px;
}
.cp {
  background: linear-gradient(135deg, #ffffff22, #f6d36533);
  border: 1.5px dashed var(--gold);
  border-radius: 14px;
  padding: 14px 8px;
  font:
    700 13px Quicksand,
    sans-serif;
  color: #fff;
  min-height: 84px;
}
.cp.used {
  background: #3ecf8e44;
  border-style: solid;
  border-color: #3ecf8e;
}