/* ===================== 9. Le fil — the unlocked feed ======================
   A phone-shaped, snap-scrolling column of cards. One card fills the frame,
   the next is a swipe away, and nothing about it needs a keyboard.

   Every card carries an illustration of its own subject, drawn in two tones:
   `currentColor` — the card's ink, so it follows the theme — and `--hue`, the
   scene's own accent. The wash behind it and the scrim over it are CSS, which
   is why no drawing needs a second palette to survive dark mode, and why the
   words on top never have to fight the picture underneath.
   ========================================================================= */
.feed {
  height: min(66svh, 540px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border: 1px solid var(--pass-rule);
  border-radius: 14px;
  background: color-mix(in srgb, var(--pass-ink) 4%, transparent);
  max-width: 460px;
  margin: 0 auto;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }

.fcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 3vw, 18px);
  padding: clamp(20px, 5.5vw, 34px);
  text-align: left;
  border-bottom: 1px solid var(--pass-rule);
}
/* Words over art. No `position` here on purpose: these are flex items, which
   honour z-index while staying static, and a `position: relative` in this rule
   would out-specify the absolute placement of .fnum and .fhint below. */
.fcard > *:not(.fart) { z-index: 1; }

/* the illustration, and the wash it sits in */
.fart {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--pass-ink);
  background:
    radial-gradient(122% 74% at 50% 6%, color-mix(in srgb, var(--hue) 30%, transparent), transparent 66%),
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--hue) 14%, transparent));
}
.fart svg { display: block; width: 100%; height: 100%; opacity: .82; }
/* The scrim. Just enough card stock over the picture that the words never
   struggle — thickest at the two ends, where the badge and the swipe hint live,
   thinnest across the shoulders of the drawing. The words carry a halo of their
   own (below), which is what buys the picture the rest of its contrast. */
.fart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pass) 48%, transparent) 0%,
    color-mix(in srgb, var(--pass) 14%, transparent) 28%,
    color-mix(in srgb, var(--pass) 30%, transparent) 56%,
    color-mix(in srgb, var(--pass) 74%, transparent) 100%);
}

.fbadge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pass-ink);
  background: color-mix(in srgb, var(--pass) 74%, var(--k) 26%);
  border: 1px solid color-mix(in srgb, var(--k) 55%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}
.fhot { letter-spacing: 0; font-size: 12px; }
.fbody {
  margin: 0;
  font-size: clamp(16px, 4.6vw, 21px);
  line-height: 1.42;
  font-weight: 600;
  color: var(--pass-ink);
  text-shadow:
    0 0 3px  color-mix(in srgb, var(--pass) 92%, transparent),
    0 0 10px color-mix(in srgb, var(--pass) 78%, transparent),
    0 0 24px color-mix(in srgb, var(--pass) 66%, transparent);
}
.freveal {
  align-self: flex-start;
  min-height: 46px;
  padding: 0 20px;
  border: 1px dashed color-mix(in srgb, var(--hue) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pass) 40%, transparent);
  color: var(--pass-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.fpunch {
  margin: 0;
  font-size: clamp(17px, 5vw, 23px);
  line-height: 1.35;
  font-weight: 800;
  color: var(--pass-ink);
  text-shadow:
    0 0 3px  color-mix(in srgb, var(--pass) 94%, transparent),
    0 0 10px color-mix(in srgb, var(--pass) 82%, transparent),
    0 0 24px color-mix(in srgb, var(--pass) 70%, transparent);
  border-left: 3px solid var(--hue);
  padding-left: 14px;
}
.fpunch[hidden] { display: none; }

/* A card is a fixed frame and the jokes are not a fixed length, so the longest
   ones step down a size rather than running off the bottom. Set in JS from the
   character count — see feed.start. */
.fcard.dense  { gap: clamp(10px, 2.4vw, 14px); }
.fcard.dense  .fbody  { font-size: clamp(14.5px, 4.1vw, 18px); }
.fcard.dense  .fpunch { font-size: clamp(15px, 4.4vw, 19px); }
.fcard.denser { gap: clamp(8px, 2vw, 12px); padding: clamp(16px, 4.6vw, 28px); }
.fcard.denser .fbody  { font-size: clamp(13.5px, 3.7vw, 16.5px); line-height: 1.36; }
.fcard.denser .fpunch { font-size: clamp(14px, 3.9vw, 17px); line-height: 1.3; }

.fnum {
  position: absolute;
  top: clamp(14px, 4vw, 22px);
  right: clamp(14px, 4vw, 22px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--pass-soft);
  font-variant-numeric: tabular-nums;
}
.fhint {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(12px, 3vw, 20px);
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pass-soft);
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0);    opacity: .5; }
  50%      { transform: translateY(-6px); opacity: 1; }
}
:root[data-motion="reduce"] .fhint { animation: none; opacity: .8; }

/* the card that appears in the lounge only once every secret is found */
.game-card[data-game="feed"] {
  border-color: #C8A227;
  box-shadow: 0 0 0 1px color-mix(in srgb, #C8A227 40%, transparent),
              0 10px 22px -20px rgba(16, 32, 52, .7);
}
.game-card[data-game="feed"] .gb { color: #C8A227; }
.game-card.justunlocked { animation: unlocked 2400ms ease-out; }
@keyframes unlocked {
  0%   { transform: scale(.6); opacity: 0; box-shadow: 0 0 0 0 rgba(200, 162, 39, .9); }
  22%  { transform: scale(1.06); opacity: 1; }
  40%  { transform: scale(1); }
  100% { box-shadow: 0 0 0 26px rgba(200, 162, 39, 0); }
}