/* ICEFAM FEED — TikTok-style vertical snap feed + platform rails.
   External file: prod CSP forbids inline styles. */

.icefam-feed { padding: 24px 0 48px; border-bottom: 1px solid var(--line); }
.icefam-feed .feed-shell { max-width: var(--page, 1180px); margin: 0 auto; padding: 0 var(--pad, 24px); }

.feed-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.feed-head h2 { font-family: var(--font); font-size: 1.5rem; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 0; color: var(--text); }
.feed-head p { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0; }

.feed-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.feed-tabs button { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); background: var(--surface, #0c0d0d);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.feed-tabs button[aria-selected="true"] { color: #050505; background: var(--mint, #cff0ec);
  border-color: var(--mint, #cff0ec); }

/* Vertical snap feed, phone-column on desktop */
.feed-scroll { display: flex; flex-direction: column; gap: 18px; max-width: 560px;
  margin: 0 auto; max-height: min(78vh, 860px); overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; border-radius: 6px;
  scrollbar-width: thin; }
.feed-card { position: relative; scroll-snap-align: start; scroll-snap-stop: always;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #000;
  flex: none; }
.feed-card video,
.feed-card img { display: block; width: 100%; height: auto; }
.feed-poster { display: block; color: inherit; text-decoration: none; }
.feed-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.82)); pointer-events: none; }
.feed-overlay strong { display: block; font-family: var(--font); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.02em; color: #fff; }
.feed-overlay span { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.72); }
.feed-overlay a { pointer-events: auto; color: var(--mint, #cff0ec); text-decoration: none;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.feed-mute { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; color: #fff; background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.feed-watch { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; color: #050505; background: var(--mint, #cff0ec);
  border: 1px solid var(--mint, #cff0ec); border-radius: 999px; padding: 6px 12px; }

/* YouTube + X rails */
.feed-embed { position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.feed-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.feed-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feed-linkcard { display: block; border: 1px solid var(--line); border-radius: 6px;
  padding: 18px; background: var(--surface, #0c0d0d); text-decoration: none; }
.feed-linkcard strong { display: block; font-family: var(--font); color: var(--text);
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.feed-linkcard span { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }
.feed-note { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-top: 14px; }

/* THE DECK — collector chip + panel */
.deck-chip { position: fixed; right: 16px; bottom: 16px; z-index: 60;
  font-family: var(--mono, monospace); font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--text, #f3f5f4); background: var(--surface, #0c0d0d);
  border: 1px solid var(--line, rgba(207,240,236,0.16)); border-radius: 999px;
  padding: 10px 16px; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.deck-chip.is-full { color: #050505; background: #ffd60a; border-color: #ffd60a; }
.deck-panel { position: fixed; right: 16px; bottom: 64px; z-index: 60; width: min(320px, 86vw);
  background: var(--surface, #0c0d0d); border: 1px solid var(--line, rgba(207,240,236,0.16));
  border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6); }
.deck-panel strong { font-family: var(--mono, monospace); font-size: 0.75rem;
  letter-spacing: 0.14em; color: var(--mint, #cff0ec); }
.deck-panel > span { font-size: 0.8125rem; color: var(--muted, #95a29e); line-height: 1.5; }
.deck-panel a { font-family: var(--mono, monospace); font-size: 0.75rem; text-decoration: none;
  color: var(--text, #f3f5f4); padding: 6px 8px; border-radius: 4px; }
.deck-panel a.need { color: var(--muted, #95a29e); }
.deck-panel a:hover { background: rgba(255,255,255,0.06); }