/* GLOBAL RESET */
body {
  margin: 0;
  background: black;
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* WRAPPER — minimal spacing above the video */
#wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 12px; /* near the top */
}

/* VIDEO FRAME */
#frame {
  height: 60vh;
  width: calc(60vh * 9 / 16);
  background: black;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 28px rgba(0,0,0,0.55);
}

/* MEDIA LAYER */
#media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: black;
  animation: fadein 0.35s ease-out;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ⭐ MORE BUTTON — 14px below the player + micro bounce */
#more {
  margin-top: 14px; /* exact spacing */
  padding: 10px 27px;
  font-size: 14px;
  border-radius: 10px;

  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #ff2d55, #8a1f3d);
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.25,1.5,.5,1), box-shadow 0.25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}

/* ⭐ Micro bounce on hover */
#more:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
}

/* Pressed state */
#more:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}