/* The in-tweet player card (/tweet). Fits a 640x480 frame; on phones X covers the bottom
   ~30% of the page, so content is pinned to the top instead of centered. */
.page-tweet { overflow: hidden; min-height: 100vh; background: var(--cream); }
.tw { box-sizing: border-box; max-width: 640px; margin: 0 auto; padding: 22px 28px; text-align: center; }
.tw-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; text-decoration: none; color: var(--ink); }
.tw-brand .logo-mark { width: 28px; height: 28px; }
.tw-title { font-size: clamp(30px, 7vw, 44px); margin: 22px 0 10px; }
.tw-sub { color: var(--ink-soft); font-size: 16px; max-width: 30em; margin: 0 auto 22px; }
.tw-go { width: 100%; max-width: 420px; min-height: 64px; }
.tw-go .heart { width: 1.15em; height: 1.15em; }
.tw-add { margin: 16px 0 0; font-size: 15px; font-weight: 700; }
.tw-add a { color: var(--ink-soft); }
.tw-add a:hover { color: var(--coral-deep); }
.tw-shuffle { padding: 70px 0 20px; color: var(--ink-soft); font-weight: 700; }
.tw-shuffle .shuffle-dots { margin: 0 auto 14px; }
.tw-label { margin: 20px 0 0; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--ink-faint); }
.tw-id { font-size: clamp(54px, 13vw, 84px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.tw-id .hash { color: var(--coral-text); }
.tw-state { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 700; margin: 0 0 16px; }
.tw-heart { width: 18px; height: 18px; color: var(--coral); }
.tw-note { font-size: 14px; color: var(--ink-faint); margin: 14px 0 0; }
.tw-note .btn-link { font-size: 14px; margin-left: 4px; }
.tw-error { margin: 16px auto 0; max-width: 30em; font-weight: 700; color: var(--coral-deep); }
[hidden] { display: none !important; }
@media (max-height: 420px) { .tw { padding-top: 12px; } .tw-title { margin-top: 12px; } }