/* Older shared screen styles still in use after the C4 rebuild (onboarding track, result rewards, badges, friends
   and rooms helpers). New screen styles live in core.css, social.css and more.css; move a rule there when you touch it. */
.streak { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 var(--s2); color: var(--accent); text-decoration: none; font-weight: 750; }
.streak svg { width: 22px; height: 22px; }
.me-link { display: inline-grid; min-width: var(--tap); min-height: var(--tap); place-items: center; text-decoration: none; border-radius: 50%; }
.me-link .avatar { border: 1.5px solid var(--line-strong); }
.played { text-align: center; }
@keyframes pulse { 50% { opacity: .55; } } /* used by core.css (.core-clock.low) */
.chain button.chip { cursor: pointer; }
.chain button.chip:active { transform: scale(.96); }
.rival-strip { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--rival-tint); }
.rival-strip i { width: 10px; height: 10px; border-radius: 50%; background: var(--rival); flex: none; }
.today-rank { text-align: right; display: grid; gap: 4px; }
.today-rank b { font-size: var(--fs-2xl); }
.small-item { min-height: 52px; padding: var(--s2) 0; }
.tier.bonus { color: var(--good); background: #16301f; }
.formula { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line-strong); }
.formula .mono { font-size: var(--fs-lg); margin-bottom: 4px; }
.golden-card { display: flex; gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--radius-lg); border: 1.5px dashed var(--line-strong); background: var(--bg-raised); }
.golden.found .golden-card { border: 2px solid var(--accent); background: linear-gradient(135deg, #3a2e10, var(--bg-raised) 70%); }
.golden .label svg { width: 14px; height: 14px; vertical-align: -2px; }
.rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); }
.reward { display: grid; gap: 4px; padding: var(--s4); border-radius: var(--radius); background: var(--bg-raised); border: 1px solid var(--line); }
.reward b { font-size: var(--fs-2xl); display: inline-flex; align-items: center; gap: 4px; }
.reward b svg { width: 22px; height: 22px; color: var(--accent); }
.badge-new { border-color: var(--accent); background: var(--accent-tint); }
.badge-new b { font-size: var(--fs-lg); }

/* ---------- Friends & rooms ---------- */
.add-form { padding-right: 6px; }
.add-form > svg { color: var(--accent); }
.duo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.room-av { background: var(--accent-tint); color: var(--accent); }
.room-av svg { width: 24px; height: 24px; }
#lb .row-flex input { flex: 1; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: var(--s3) var(--s2); border-radius: var(--radius); background: var(--bg-raised); border: 1px solid var(--line); }
.badge b { font-size: var(--fs-sm); line-height: 1.2; }
.badge .small { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.3; }
.badge.earned { border-color: #5A4A1C; }
/* Locked badges read as dimmed through colour, not opacity, so their text still clears 4.5:1. */
.badge.locked b { color: var(--text-2); }
.badge.locked { border-style: dashed; }
.nav-list .item > svg:first-child { width: 24px; height: 24px; color: var(--accent); flex: none; }

/* ---------- Onboarding ---------- */
.onboarding { padding-left: 0; padding-right: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; /* one screen: the foot buttons always sit in thumb reach */ padding-bottom: calc(var(--s4) + var(--safe-bottom)); }
.ob-track { flex: 1; min-height: 0; container-type: size; container-name: ob; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-card > * { flex-shrink: 0; } /* the card scrolls; its parts keep their size */
.ob-card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; overscroll-behavior-y: contain; padding: var(--s2) calc(var(--s6) + var(--safe-right)) var(--s4) calc(var(--s6) + var(--safe-left)); display: flex; flex-direction: column; gap: var(--s4); }
.ob-skip { align-self: center; }
.ob-top { display: flex; justify-content: flex-end; padding: 0 calc(var(--s6) + var(--safe-right)) 0 calc(var(--s6) + var(--safe-left)); }
.ob-top .link-btn { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.ob-foot { padding: var(--s2) calc(var(--s6) + var(--safe-right)) 0 calc(var(--s6) + var(--safe-left)); display: grid; gap: var(--s2); justify-items: center; }
.ob-foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--s4); }
.ob-foot-row .link-btn { min-height: var(--tap); font-size: var(--fs-sm); }
.ob-foot .btn { width: 100%; }
.ob-dots { display: flex; gap: 2px; }
.ob-dots button { width: var(--tap); height: var(--tap); display: grid; place-items: center; }
.ob-dots button::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--line-strong); transition: width var(--dur), background var(--dur); }
.ob-dots button[aria-selected="true"]::after { width: 22px; background: var(--accent); }

/* ---------- Wider screens ---------- */
@media (min-width: 760px) {
  .ob-card { padding-left: var(--s10); padding-right: var(--s10); }
  .rewards { grid-template-columns: repeat(3, 1fr); }
}
.crew-line { margin: calc(var(--s2) * -1) 0 var(--s4); font-style: italic; color: var(--text-2); }
.crew-line span { font-style: normal; font: 600 var(--fs-xs) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.nudge { margin-bottom: var(--s4); }
.nudge .grow { flex: 1; min-width: 0; }
.mono-input { font-family: var(--font-mono) !important; letter-spacing: .12em; }
.credit-link { font-weight: 500; display: flex; align-items: center; min-height: var(--tap); margin-bottom: calc(var(--s3) * -1); font-size: var(--fs-sm); color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.ob-track:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Short phones (an iPhone 14 is 844px tall): shrink the welcome card so it fits above the pinned buttons. */
@media (max-height: 900px) {
  .ob-card { gap: var(--s3); padding-top: 0; }
}