/* Shared swipe deck + the app's deck card (homepage hero and /app Deck tab).
   Loaded alongside /js/deck-core.js. */
/* ── Deck ─────────────────────────────────────────────────────────── */
.deck-col { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.deck-label {
  font-family: var(--label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted-label); display: flex; align-items: center; gap: 10px;
}
.deck-label::before, .deck-label::after { content: ""; width: 28px; height: 1px; background: var(--muted-label); }
.deck { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 5.2; touch-action: none; user-select: none; -webkit-user-select: none; }
.deck-card {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px; cursor: grab;
  box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.06);
  will-change: transform;
}
.deck-card:active { cursor: grabbing; }
.deck-card, .deck-card * { -webkit-user-drag: none; }
.stamp {
  position: absolute; padding: 8px 14px; opacity: 0; pointer-events: none;
  font-family: var(--label); font-stretch: 125%; font-size: 13px; font-weight: 700; letter-spacing: 0.24em;
}
.stamp-save { top: 28px; left: 24px; transform: rotate(-10deg); border: 2px solid #fff; background: var(--ink); color: #fff; }
.stamp-skip { top: 28px; right: 24px; transform: rotate(10deg); border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.stamp-apply { bottom: 32px; left: 50%; transform: translateX(-50%); border: 2px solid #fff; background: var(--ink); color: #fff; }
.deck-controls { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; }
.deck-buttons { display: flex; align-items: center; gap: 20px; }
.round-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); font-size: 18px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.round-btn:hover { background: var(--ink); color: var(--paper); }
.round-btn.primary { width: 68px; height: 68px; font-size: 22px; background: var(--ink); color: var(--paper); }
.round-btn.primary:hover { background: transparent; color: var(--ink); }
.counter { font-family: var(--display); font-style: italic; font-size: 22px; letter-spacing: -0.02em; }
.counter span { font-style: normal; font-family: var(--label); font-stretch: 125%; font-size: 9px; font-weight: 600; letter-spacing: 0.24em; color: var(--muted-label); }
.deck-hint { font-family: var(--label); font-stretch: 125%; font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-label); text-align: center; }

/* ── Deck card = the app's deck card ──────────────────────────────────
   A 1:1 port of clubs-mobile/src/screens/feed/ProjectCard.tsx
   (ProjectCardContent) with the app's own font files. Sizes are the app's
   points at its 358pt card width, scaled to the card (cqw), so the card is
   the same at any size. */
@font-face { font-family: "DM Serif Display App"; src: url("/fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Solway App"; src: url("/fonts/Solway-Regular.ttf") format("truetype"); font-display: swap; }
.deck { aspect-ratio: 5 / 7; container-type: inline-size; width: min(100%, 390px); } /* 390 × 1.4 = the old 420 × 1.3 height, so the desktop hero is unchanged */
.deck-card { border-radius: calc(22 * var(--u)); box-shadow: none; }
.app-card {
  --u: calc(100cqw / 358);
  position: absolute; inset: 0; overflow: hidden; background: #000; color: #fff;
  border: calc(2.5 * var(--u)) solid #000; border-radius: calc(22 * var(--u));
}
/* The app's neo-brutalist shadow: solid black, offset 4/4pt, no blur. */
.deck-card { overflow: visible; filter: drop-shadow(calc(400cqw / 358) calc(400cqw / 358) 0 #000); }
.app-card .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-card .placeholder { position: absolute; inset: 0; background: #333; display: flex; align-items: center; justify-content: center; }
.app-card .placeholder img { width: calc(64 * var(--u)); height: auto; filter: invert(1); }
.app-card .vignette { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 22%),
    linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,0) 22%),
    linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0) 22%),
    linear-gradient(270deg, rgba(0,0,0,.12), rgba(0,0,0,0) 22%); }
.app-card .top-scrim { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); pointer-events: none; }
.app-card .bottom-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.78) 72%, rgba(0,0,0,.92) 100%); }
.app-card .top-row { position: absolute; top: calc(12 * var(--u)); left: calc(12 * var(--u)); right: calc(16 * var(--u));
  display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); pointer-events: none; }
.app-card .badge { flex-shrink: 1; min-width: 0; background: #000; border-radius: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u));
  font-family: Courier, "Courier New", monospace; font-weight: 700; font-size: calc(13 * var(--u)); letter-spacing: calc(1.5 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card .creator { flex-shrink: 1; min-width: 0; max-width: 45%; font-family: "DM Serif Display App", "DM Serif Display", Georgia, serif;
  font-size: calc(19 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.app-card .content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(22 * var(--u)) calc(24 * var(--u)); pointer-events: none; }
.app-card .kicker-app { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: calc(11 * var(--u));
  letter-spacing: calc(3.5 * var(--u)); margin-bottom: calc(10 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card .title { font-family: "DM Serif Display App", "DM Serif Display", Georgia, serif; font-weight: 400;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.app-card .title.xl { font-size: calc(40 * var(--u)); line-height: calc(42 * var(--u)); letter-spacing: calc(-0.7 * var(--u)); }
.app-card .title.l { font-size: calc(34 * var(--u)); line-height: calc(37 * var(--u)); letter-spacing: calc(-0.5 * var(--u)); }
.app-card .title.m { font-size: calc(28 * var(--u)); line-height: calc(31 * var(--u)); letter-spacing: calc(-0.3 * var(--u)); }
.app-card .summary { font-family: "Solway App", Georgia, serif; font-size: calc(14 * var(--u)); line-height: calc(19 * var(--u));
  margin-top: calc(10 * var(--u)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }