/*
 * Screen-specific styling.
 *
 * Anything that appears on exactly one page. A block that shows up on a second
 * page should be promoted to components.css rather than duplicated here.
 *
 * Grows as pages are converted; see the sidebar below, which is chrome shared
 * by every signed-in screen but has no counterpart on phones.
 */

@layer screens {
  /* ══ Group home ════════════════════════════════════════════════════════════
     The flon name is page context, distinct from the live game phase below. */
  .group-heading {
    margin-block-end: var(--space-7);
  }

  .group-heading__name {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--track-label-wide);
    text-transform: uppercase;
    color: var(--fg);
  }

  .group-heading__description {
    margin-block-start: var(--space-3);
  }

  .last-game-title + .result-block {
    margin-block-end: var(--space-7);
  }

  .last-game-title--compact {
    margin-block-start: var(--space-9);
    padding-block-start: var(--space-7);
    border-block-start: var(--hairline) solid var(--fg);
  }

  .next-drop {
    margin-block-start: var(--space-8);
  }

  /* Separates the live phase from the flon's persistent context. The heading
     makes the change of scope explicit before rankings and navigation begin. */
  .group-context {
    margin-block-start: var(--space-9);
    padding-block: var(--space-8);
    border-block-start: var(--hairline) solid var(--fg);
  }

  .group-context__intro .u-display {
    margin-block-start: var(--space-3);
  }

  .group-context__intro .u-prose {
    margin-block-start: var(--space-3);
  }

  .group-context__intro + .section-head {
    margin-block-start: var(--space-8);
  }

  .drop-complete {
    color: var(--pass);
  }

  /* ══ Sidebar (laptop only) ═════════════════════════════════════════════════
     Paper-coloured regardless of the screen's phase theme: it is the furniture
     the phases sit inside, so it must not move with them. */
  .sidebar__brand {
    font-family: var(--font-serif);
    font-size: var(--display-md);
    text-transform: lowercase;
    line-height: 1;
    color: var(--fg);
  }

  .sidebar__tagline {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mut);
    margin-block-start: var(--space-2);
  }

  .sidebar__section {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mut);
    margin-block: var(--space-7) var(--space-3);
  }

  .sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: var(--space-3) var(--space-4);
    border: var(--hairline) solid transparent;
    color: var(--mut);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .sidebar__link:hover {
    color: var(--fg);
    border-color: var(--line);
  }

  .sidebar__link[aria-current] {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--fg) 32%, transparent);
    background: color-mix(in srgb, var(--fg) 5%, transparent);
  }

  .sidebar__phase {
    margin-inline-start: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    color: #0c0a07;
  }

  .sidebar__phase--paper {
    color: var(--fg);
  }

  .sidebar__phase--drop {
    background: var(--drop-mid);
  }

  .sidebar__phase--vote {
    background: var(--vote-mid);
  }

  .sidebar__phase--reveal {
    background: var(--reveal-mid);
    color: #32130d;
  }

  .sidebar__add {
    margin-block-start: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: var(--space-3) var(--space-4);
    border: var(--hairline) dashed var(--line);
    color: var(--mut);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }

  .sidebar__add:hover {
    color: var(--fg);
    border-color: var(--mut);
  }

  .sidebar__foot {
    margin-block-start: auto;
    padding-block-start: var(--space-6);
  }

  /* Sits above the account button, separated from the flon list by the auto
     margin, so it reads as app-level rather than as another flon. */
  .sidebar__link--foot {
    margin-block-end: var(--space-2);
  }

  .sidebar__account {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: var(--space-3) var(--space-4);
    border: var(--hairline) solid var(--line);
    color: var(--fg);
  }

  .sidebar__account:hover {
    border-color: var(--mut);
  }

  .sidebar__avatar {
    inline-size: 1.625rem;
    block-size: 1.625rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prof-dark);
    color: var(--prof-light);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
  }

  .sidebar__who {
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.1;
    min-inline-size: 0;
  }

  .sidebar__who small {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mut);
    margin-block-start: var(--space-1);
  }

  /* The reveal is the week's payoff: its title carries the coral event colour
     rather than the pale reading colour used by the supporting copy. */
  .reveal-title {
    color: var(--mark);
  }

  /* ══ Player home ═══════════════════════════════════════════════════════════ */
  .welcome {
    font-weight: 800;
    font-size: var(--display-xl);
    line-height: 0.92;
    letter-spacing: var(--track-display);
    color: var(--fg);
    margin-block-start: var(--space-2);
    text-wrap: balance;
  }

  .home-index {
    border: var(--hairline) solid var(--fg);
    margin-block-start: var(--space-7);
    background: var(--surf);
  }

  .home-index__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-block-end: var(--hairline) solid var(--fg);
  }

  .home-index__label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--fg);
  }

  .home-index__label--muted {
    color: var(--mut);
    flex-shrink: 0;
  }

  .home-index__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1rem;
    block-size: 1rem;
    border: var(--hairline) solid var(--mut);
    color: var(--mut);
    letter-spacing: 0;
    vertical-align: middle;
  }

  .home-index__help:hover {
    border-color: var(--fg);
    color: var(--fg);
  }

  .home-index__score {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-3);
  }

  .home-index__value {
    font-family: var(--font-mono);
    font-size: clamp(2.75rem, 14vw, 3.25rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
  }

  .home-index__context {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .home-index__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: var(--hairline) solid var(--line);
  }

  .home-index__metric {
    min-inline-size: 0;
    padding: var(--space-4) var(--space-5);
    border-inline-end: var(--hairline) solid var(--line);
  }

  .home-index__metric:last-child {
    border-inline-end: 0;
  }

  .home-index__metric dt {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .home-index__metric dd {
    margin-block-start: var(--space-2);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--track-tight);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }

  .home-preview {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .home-preview__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--fg);
  }

  .home-preview__detail {
    margin-block-start: var(--space-2);
    max-inline-size: 45ch;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--mut);
  }

  .home-preview__equalizer {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 3px;
    block-size: 1.5rem;
    color: var(--score-fg);
  }

  .home-preview__equalizer > span {
    inline-size: 3px;
    block-size: 0.75rem;
    background: currentColor;
    transform-origin: bottom;
  }

  .home-preview__equalizer > :nth-child(even) {
    block-size: 1.25rem;
    animation-delay: 0.2s;
  }

  .home-preview__equalizer > :nth-child(3) {
    block-size: 1.5rem;
    animation-delay: 0.4s;
  }

  .home-preview__chart {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 3px;
    block-size: 1.5rem;
    border-block-end: var(--hairline) solid var(--line);
    color: var(--score-fg);
  }

  .home-preview__chart > span {
    inline-size: 7px;
    block-size: 0.5rem;
    background: currentColor;
    transform-origin: bottom;
  }

  .home-preview__chart > :nth-child(2) {
    block-size: 0.95rem;
    animation-delay: 0.15s;
  }

  .home-preview__chart > :nth-child(3) {
    block-size: 1.4rem;
    animation-delay: 0.3s;
  }

  /* Brief previews, not perpetual loading indicators. */
  @media (prefers-reduced-motion: no-preference) {
    .home-preview__equalizer > span {
      animation: home-preview-equalizer 1.8s ease-in-out 2;
    }

    .home-preview__chart > span {
      animation: home-preview-chart 1.2s ease-out both;
    }
  }

  @keyframes home-preview-equalizer {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.45); }
  }

  @keyframes home-preview-chart {
    from { transform: scaleY(0.15); }
    to { transform: scaleY(1); }
  }

  .home-stats-preview {
    margin-block-start: var(--space-3);
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
  }

  .lifetime-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: var(--space-3);
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
  }

  .lifetime-stats__item {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: var(--space-4);
    border-inline-end: var(--hairline) solid var(--line);
  }

  .lifetime-stats__item:last-child {
    border-inline-end: 0;
  }

  .lifetime-stats__item dd {
    order: -1;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
  }

  .lifetime-stats__item dt {
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .player-badges {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--space-2);
  }

  .player-badge {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: var(--hairline) solid var(--line);
  }

  .player-badge:last-child {
    border-block-end: var(--hairline) solid var(--line);
  }

  .player-badge__icon {
    inline-size: 1.875rem;
    block-size: 1.875rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--fg);
  }

  .player-badge__name {
    flex: 1;
    min-inline-size: 0;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
  }

  .player-badge__meta,
  .player-badges__empty {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .player-badges__empty {
    padding-block: var(--space-5);
    border-block: var(--hairline) solid var(--line);
  }

  /* ══ Cross-flon affinities ════════════════════════════════════════════════ */
  .affinity-list {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--space-6);
  }

  .affinity-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: var(--hairline) solid var(--line);
  }

  .affinity-row:last-child {
    border-block-end: var(--hairline) solid var(--line);
  }

  .affinity-row__avatar {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fg);
    color: var(--surf);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
  }

  .affinity-row__body {
    flex: 1;
    min-inline-size: 0;
  }

  .affinity-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .affinity-row__name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
  }

  .affinity-row__context {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .affinity-row__shared {
    margin-block-start: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--mut);
  }

  .affinity-row__shared span {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
  }

  .affinity-row__shared--empty {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .affinity-row__bar {
    display: block;
    position: relative;
    block-size: 0.25rem;
    margin-block-start: var(--space-3);
    background: var(--line);
  }

  .affinity-row__bar > span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--mark);
  }

  .affinity-row__score {
    flex-shrink: 0;
    min-inline-size: 2.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
    text-align: end;
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
  }

  .affinity-row__score small {
    display: block;
    margin-block-start: var(--space-2);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .affinity-opposite {
    border: var(--hairline) solid var(--fg);
    margin-block-start: var(--space-6);
  }

  .affinity-opposite__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-block-end: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--fg);
  }

  .affinity-opposite__head span:last-child,
  .affinity-opposite > p:last-child span {
    color: var(--mut);
  }

  .affinity-opposite > p:last-child {
    padding: var(--space-5);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--fg);
  }

  /* One flon, as a card: name, phase, what you owe it, and the vitals. */
  .flon-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
  }

  .flon-card {
    display: block;
    inline-size: 100%;
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
    color: var(--fg);
  }

  .flon-card:hover,
  .flon-card:focus-visible {
    border-color: var(--acc);
  }

  .flon-card:focus-visible {
    outline: 3px solid var(--acc);
    outline-offset: 3px;
  }

  .flon-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-3);
  }

  .flon-card__name {
    font-weight: 800;
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
    color: var(--fg);
    min-inline-size: 0;
  }

  /* A span inside an <a>, so it needs to be told it's a block. */
  .flon-card__action {
    display: block;
    padding: 0 var(--space-5) var(--space-4);
    font-weight: 600;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    color: var(--fg);
  }

  .flon-card__action b {
    color: var(--score-fg);
  }

  .flon-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-block-start: var(--hairline) solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .flon-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: var(--tap-target);
    padding: var(--space-4) var(--space-5);
    background: var(--fg);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .flon-card__cta--drop {
    background: var(--drop-dark);
    color: #fff;
  }

  .flon-card__cta--vote {
    background: var(--vote-dark);
    color: #fff;
  }

  .flon-card__cta--reveal {
    background: var(--reveal-dark);
    color: #fff;
  }

  /* Weekly discovery is shared across all flons, not a personal playlist. */
  .weekly-winners {
    margin-block-start: var(--space-7);
    border: var(--hairline) solid var(--fg);
    padding: var(--space-5);
    background: var(--surf);
  }

  .weekly-winners__intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .weekly-winners__mark {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--display-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--track-display);
    color: var(--score-fg);
  }

  .weekly-winners__title {
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .weekly-winners__archive {
    display: inline-block;
    margin-block-start: var(--space-5);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* The two private, cross-flon playlists made under the player's account. */
  .personal-playlists {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
  }

  .personal-playlist {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
    padding: var(--space-4);
    color: var(--fg);
    text-align: start;
  }

  a.personal-playlist:hover {
    border-color: var(--acc);
  }

  .personal-playlist--winner {
    border-color: var(--spotify);
    background: var(--spotify);
    color: var(--spotify-ink);
  }

  .personal-playlist--disabled {
    border-color: var(--line);
    background: var(--surf);
    color: var(--mut);
  }

  /* Official black RGB full logo from Spotify's developer brand assets.
     Keep it >= 70px wide and clear of neighbouring text/borders. */
  .personal-playlist__logo {
    inline-size: 5.5rem;
    block-size: auto;
    flex-shrink: 0;
  }

  /* Pure black becomes Spotify's white logo on dark surfaces. The green
     winner card retains the black brand asset in both appearances. */
  [data-color-scheme="dark"] .personal-playlist:is(:not(.personal-playlist--winner), .personal-playlist--disabled) .personal-playlist__logo {
    filter: invert(1);
  }

  .personal-playlist__text {
    flex: 1;
    min-inline-size: 0;
  }

  .personal-playlist__name {
    display: block;
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .personal-playlist__sub {
    display: block;
    margin-block-start: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .personal-playlist--winner .personal-playlist__sub {
    opacity: 0.85;
  }

  .personal-playlist--disabled .personal-playlist__sub {
    opacity: 1;
  }

  .personal-playlist__badge {
    flex-shrink: 0;
    border: var(--hairline) solid currentColor;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ══ Cross-flon track history ══════════════════════════════════════════════ */
  .history-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--space-6);
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
  }

  .history-stats__item {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: var(--space-4);
    border-block-end: var(--hairline) solid var(--line);
    border-inline-end: var(--hairline) solid var(--line);
  }

  .history-stats__item:nth-child(even) {
    border-inline-end: 0;
  }

  .history-stats__item:nth-last-child(-n + 2) {
    border-block-end: 0;
  }

  .history-stats__item dd {
    order: -1;
    font-size: var(--display-sm);
    font-weight: 800;
    line-height: 1;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }

  .history-stats__item--accent dd {
    color: var(--score-fg);
  }

  .history-stats__item dt {
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .history-year {
    margin-block-start: var(--space-7);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .history-tracks .trackline:first-child {
    border-block-start: 0;
  }

  .history-pagination {
    margin-block-start: var(--space-7);
  }

  .history-pagination .pagy.series-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .history-pagination a,
  .history-pagination [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tap-target);
    min-block-size: var(--tap-target);
    border: var(--hairline) solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--fg);
  }

  .history-pagination [aria-current="page"] {
    background: var(--fg);
    color: var(--bg);
  }

  /* ══ Auth & onboarding ═════════════════════════════════════════════════════ */
  .auth-brand {
    font-family: var(--font-serif);
    font-size: var(--display-xl);
    text-transform: lowercase;
    line-height: 1;
    color: var(--fg);
  }

  .auth-tagline {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--track-label-wide);
    text-transform: uppercase;
    color: var(--mut);
    margin-block-start: var(--space-3);
  }

  .auth-form .field__label {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .auth-password-recovery {
    padding-inline: 0;
    text-align: start;
  }

  /* Landing hierarchy stays in the sans voice after the serif wordmark. This
     keeps the opening from switching between all three typefaces before the
     visitor reaches the headline. */
  .landing-tagline {
    max-inline-size: 28ch;
    margin-block-start: var(--space-4);
    color: var(--fg);
    font-size: clamp(var(--text-2xl), 4.5vw, var(--text-3xl));
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: var(--track-tight);
    text-wrap: balance;
  }

  .landing-title {
    margin-block-start: var(--space-9);
  }

  .landing-cta {
    inline-size: 100%;
    flex: 1 1 100%;
  }

  .landing-intro {
    max-inline-size: 39rem;
    margin-block-start: var(--space-8);
    padding-inline-start: var(--space-5);
    border-inline-start: 0.25rem solid var(--acc);
    color: var(--fg);
    font-size: var(--text-2xl);
    font-weight: 550;
    line-height: 1.55;
    letter-spacing: -0.01em;
    font-variant-numeric: normal;
  }

  /* Segmented sign-in / sign-up switch. Real links, not tabs — each is its own
     page, so the browser's back button keeps working. */
  .auth-switch {
    display: flex;
    border: var(--hairline) solid var(--fg);
    margin-block: var(--space-6);
  }

  .auth-switch a {
    flex: 1;
    min-block-size: var(--tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline-end: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .auth-switch a:last-child {
    border-inline-end: 0;
  }

  .auth-switch a[aria-current="page"] {
    background: var(--fg);
    color: var(--bg);
  }

  /* Numbered how-it-works list on the splash. */
  .steps {
    margin-block-start: var(--space-8);
    border-block-start: var(--hairline) solid var(--line);
  }

  .steps__row {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding-block: var(--space-5);
    border-block-end: var(--hairline) solid var(--line);
  }

  .steps__number {
    font-weight: 800;
    font-size: var(--text-base);
    inline-size: 1.5rem;
    flex-shrink: 0;
    letter-spacing: var(--track-tight);
    line-height: 1.2;
    color: var(--acc);
  }

  .steps__verb {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--fg);
  }

  .steps__detail {
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--mut);
    margin-block-start: var(--space-2);
  }

  /* Big choice buttons: create a flon vs join one. */
  .choice {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    inline-size: 100%;
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
    padding: var(--space-6) var(--space-5);
    color: var(--fg);
    text-align: start;
  }

  .choice:hover {
    border-color: var(--acc);
  }

  .choice__icon {
    inline-size: 2.625rem;
    block-size: 2.625rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-2xl);
  }

  /* The glyph inverts against the accent rather than being a fixed ink.
     --acc IS --ink on the paper theme, so a hardcoded ink here rendered the
     icon invisible on exactly the screen that most needs it. */
  .choice--primary .choice__icon {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-acc);
  }

  .choice__text {
    flex: 1;
    min-inline-size: 0;
  }

  .choice__name {
    display: block;
    font-weight: 800;
    font-size: var(--text-2xl);
    letter-spacing: -0.03em;
    color: var(--fg);
  }

  .choice__sub {
    display: block;
    font-size: var(--text-md);
    line-height: 1.4;
    color: var(--mut);
    margin-block-start: var(--space-2);
  }

  /* "Join a flon" is a <details> whose summary is styled as a choice, so the
     code field appears in place instead of on another screen. */
  .choice-join > summary {
    list-style: none;
    cursor: pointer;
  }

  .choice-join > summary::-webkit-details-marker {
    display: none;
  }

  .choice-join > summary::marker {
    content: "";
  }

  .choice-join[open] > summary {
    border-block-end: 0;
  }

  .choice-join[open] > summary .tile__arrow {
    rotate: 180deg;
  }

  .choice-join__body {
    border: var(--hairline) solid var(--fg);
    border-block-start: 0;
    padding: var(--space-6) var(--space-5);
  }

  /* ══ Flash ═════════════════════════════════════════════════════════════════
     Sits above the screen, full-bleed, in ink so it reads on any phase theme
     without needing a variant per colour. */
  .flash {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    padding-inline-start: calc(var(--space-6) + env(safe-area-inset-left));
    padding-inline-end: calc(var(--space-6) + env(safe-area-inset-right));
    background: var(--ink);
    color: var(--paper);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .flash__mark {
    inline-size: 0.5625rem;
    block-size: 0.5625rem;
    flex-shrink: 0;
    background: var(--pass);
  }

  .flash--alert {
    background: var(--fail);
    color: var(--on-fail);
  }

  .flash--alert .flash__mark {
    background: var(--on-fail);
  }

  /* ══ Stats ═════════════════════════════════════════════════════════════════
     The flon report. Dense data, so it leans on hairline-separated rows rather
     than cards-within-cards, and every bar has its number next to it — no value
     is hover-gated. */
  .stats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
  }

  .stats-nav a {
    min-block-size: var(--tap-target);
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-4);
    border: var(--hairline) solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .stats-nav a:hover {
    color: var(--fg);
    border-color: var(--fg);
  }

  .stats-nav a[aria-current="page"] {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--bg);
  }

  .stats-nav--sub {
    margin-block-start: var(--space-2);
  }

  .metric-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap-target);
    border: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
  }

  .metric-tabs a + a {
    border-inline-start: 0;
  }

  .metric-tabs a[aria-current="page"] {
    background: var(--fg);
    color: var(--bg);
  }

  /* A labelled key/value row — fun facts, hall of fame. */
  .factlist {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--space-3);
  }

  .factlist__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    padding-block: var(--space-4);
    border-block-start: var(--hairline) solid var(--line);
  }

  .factlist__row:last-child {
    border-block-end: var(--hairline) solid var(--line);
  }

  .factlist__label {
    flex: 0 0 40%;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .factlist__value {
    flex: 1;
    min-inline-size: 0;
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--fg);
  }

  .factlist__value b {
    font-weight: 700;
    color: var(--score-fg);
  }

  .indexrow {
    padding-block: var(--space-5);
    border-block-start: var(--hairline) solid var(--line);
  }

  .indexrow__name {
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: var(--track-tight);
    color: var(--fg);
  }

  .indexrow__value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
  }

  /* A proportional bar with its value beside it. */
  .meter {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-3);
  }

  .meter__label {
    flex: 0 0 30%;
    min-inline-size: 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .meter__track {
    flex: 1;
    block-size: 0.5rem;
    background: var(--line);
    position: relative;
  }

  .meter__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--mark);
  }

  .meter__value {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
  }

  /* Data table for the standings and podium tallies. */
  .datatable {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-start: var(--space-3);
  }

  .datatable th,
  .datatable td {
    padding: var(--space-3) var(--space-2);
    text-align: start;
    border-block-start: var(--hairline) solid var(--line);
  }

  .datatable thead th {
    border-block-start: 0;
    border-block-end: var(--hairline) solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mut);
    white-space: nowrap;
  }

  .datatable tbody th {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--fg);
  }

  .datatable .is-num {
    text-align: end;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--mut);
  }

  .datatable .is-num--lead {
    font-weight: 700;
    color: var(--score-fg);
  }

  .datatable tbody tr:last-child th,
  .datatable tbody tr:last-child td {
    border-block-end: var(--hairline) solid var(--line);
  }

  /* A track with artwork, used in the top-tracks and hall-of-shame lists. */
  .trackline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: var(--hairline) solid var(--line);
  }

  .trackline:last-child {
    border-block-end: var(--hairline) solid var(--line);
  }

  /* min-inline-size, not inline-size: this column holds "1" in a top-ten list
     and "#121" in the games history, and a fixed box makes the latter overlap
     the title beside it. */
  .trackline__rank {
    min-inline-size: 1.5rem;
    flex-shrink: 0;
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--mut);
    font-variant-numeric: tabular-nums;
  }

  /* Your own posts, marked with the phase accent down the side. */
  .trackline--mine {
    box-shadow: inset 3px 0 0 var(--acc);
    padding-inline-start: var(--space-4);
  }

  .trackline__cover {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--mark);
  }

  .trackline__meta {
    flex: 1;
    min-inline-size: 0;
  }

  .trackline__name {
    display: block;
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: var(--track-tight);
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trackline__sub {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mut);
    margin-block-start: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trackline__score {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--score-fg);
    font-variant-numeric: tabular-nums;
  }

  .trackline--history .trackline__rank {
    min-inline-size: 2.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
  }

  .trackline--history .trackline__score {
    font-size: var(--text-sm);
  }

  /* ══ Banner ════════════════════════════════════════════════════════════════
     Standing notices above the screen (Spotify reconnect). Warn, not fail:
     nothing is broken yet, but something will break if it's ignored. */
  .banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--warn);
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 600;
  }

  .banner__form {
    display: contents;
  }

  .banner__action {
    border: var(--hairline) solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ══ Impersonation banner ══════════════════════════════════════════════════
     Admin-only, and loud on purpose: acting as another player must never be
     something you forget you are doing. */
  .impersonation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--fail);
    color: var(--on-fail);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .impersonation__stop {
    border: var(--hairline) solid currentColor;
    padding: var(--space-1) var(--space-3);
    font-weight: 700;
    color: inherit;
  }

  .impersonation__stop:hover {
    background: var(--on-fail);
    color: var(--fail);
  }

  @media (width < 56rem) {
    :is(.flash, .banner, .impersonation) {
      padding-inline-start: calc(var(--space-6) + env(safe-area-inset-left));
      padding-inline-end: calc(var(--space-6) + env(safe-area-inset-right));
    }

    :is(.flash, .banner, .impersonation):first-child {
      padding-block-start: calc(var(--space-4) + env(safe-area-inset-top));
    }
  }

  /* ══ Rules ═════════════════════════════════════════════════════════════════
     The one long-read screen in the app. It gets a sticky section nav and one
     piece of display typography — the index formula — so the page has a spine
     and a centrepiece rather than being nine headings in a row. */
  .rules-intro {
    font-size: var(--text-xl);
  }

  .rules-nav {
    position: sticky;
    /* The scroll container is .screen__body, so this pins to the top of the
       reading region, not the viewport. */
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    padding-block: var(--space-3);
    background: var(--bg);
    border-block-end: var(--hairline) solid var(--line);
  }

  .rules-nav a {
    flex: 1;
    min-block-size: var(--tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--hairline) solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
  }

  .rules-nav a:hover {
    color: var(--fg);
    border-color: var(--fg);
  }

  /* The section headings are anchor targets; :target marks the one you jumped
     to, which is the active state with no controller involved. */
  #the-week,
  #scoring,
  #indice-flonflonique,
  #taste-affinities,
  #badges {
    scroll-margin-block-start: calc(var(--tap-target) + var(--space-7));
  }

  .formula {
    margin-block-start: var(--space-5);
    padding: var(--space-7) var(--space-5);
    border: var(--hairline) solid var(--fg);
    background: var(--surf);
    text-align: center;
  }

  .formula__equation {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--display-md);
    letter-spacing: var(--track-tight);
    color: var(--fg);
  }

  .formula__constant {
    color: var(--score-fg);
  }

  .formula__operator {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--mut);
  }

  .formula__factor {
    font-style: italic;
  }

  .formula__caption {
    margin-block-start: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mut);
  }

  .formula-defs {
    margin-block-start: var(--space-5);
    border-block-start: var(--hairline) solid var(--line);
  }

  .formula-def {
    padding-block: var(--space-4);
    border-block-end: var(--hairline) solid var(--line);
  }

  .formula-def dt {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mark);
  }

  .formula-def dd {
    margin-block-start: var(--space-2);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--fg);
  }

  .formula-def code {
    display: inline-block;
    margin-block-start: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--mut);
  }
}