/* The bow-topped card that every screen sits in — the frame Isabella liked. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
  background: var(--ground);
  border: 1px solid var(--blush-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -28px var(--shadow);
}

.card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold);
  border-radius: calc(var(--radius-lg) - 6px);
  opacity: 0.4;
  pointer-events: none;
}

.card-bow {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: var(--z-bow);
  width: 5.5rem;
  transform: translate(-50%, -46%);
  filter: drop-shadow(0 4px 8px var(--shadow));
}

.bow-loop {
  fill: var(--blush-soft);
  stroke: var(--blush);
  stroke-width: 2.5;
}

.bow-tail {
  fill: none;
  stroke: var(--blush);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.bow-knot {
  fill: var(--blush);
}

/* The answer video, framed to match the card. */
.player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--blush-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .card {
    padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
  }

  .card-bow {
    width: 7rem;
  }
}