*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: #fff;
  overscroll-behavior: none;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

#deck {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 90dvh;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border: 1px solid #000;
  background: #fff;
}

/* ── card: flex column — text above, image below ── */
.card {
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  /* height is set entirely by JS */
}

/* shared interior edge between adjacent cards */
.card + .card {
  border-top: 1px solid #000;
}

/* CSS transition — only applied during spring animations */
.card.go {
  transition: height 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP STACK LAYOUT  (≥ 700px)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  #deck {
    /* fixed size card area, centered on screen */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important; /* override JS translate */
    width: min(480px, 90vw);
    height: min(640px, 85vh);
    border: none;
    overflow: visible; /* cards behind can peek out */
  }

  /* each card fills the deck area absolutely */
  .card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important; /* override JS height */

    border: 1px solid #000;
    background: #fff;
    transition:
      transform 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.34s ease;
  }

  .card.go {
    transition:
      transform 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.34s ease;
  }
}

/* ── image wrapper ── */
.card-img-wrap {
  width: 100%;
  align-self: flex-end;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── image / pixelated canvas: fills the card ── */
.card-img,
canvas.px-canvas {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  align-self: flex-end;
}

/* ── text panel: fixed distance from card bottom ── */
.card-content {
  position: absolute;
  height: 60dvh;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 13px;
}

.card-sub {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 32px;
  font-family: "pf-videotext", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  transform: scaleY(1.2);

  width: fit-content;
}

.card-text {
  font-size: 16px;
  line-height: 1.4;
  color: #111;
}

/* ── collapsed-card label canvas — always visible strip at card bottom ── */
canvas.card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3dvh;
  display: block;
  pointer-events: none;
}

@media (min-width: 700px) {
  canvas.card-label {
    display: none;
  }
}