/*
 * Session earnings HUD. Classes are all rr-earn-* and every value is driven by
 * a --rr-* token with a safe fallback, so the surface is readable before the
 * full theme sheet loads. The panel is anchored bottom-left, clear of the top
 * bar, the top-right activity tabs/boost meter and the bottom-right
 * destinations panel, and it starts collapsed to a compact counter.
 */

.rr-earn__dock-controls, .rr-earn__edge-tab { display: none; }

.rr-earn {
    --rr-earn-accent: var(--rr-accent, #ffb74a);
    --rr-earn-good: var(--rr-positive, #76d074);
    --rr-earn-ink: var(--rr-text, #f5efe6);
    --rr-earn-dim: var(--rr-text-dim, #a79c8e);
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    top: auto;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 188px;
    display: grid;
    gap: 5px;
    padding: 9px 11px 8px;
    border: 1px solid color-mix(in srgb, var(--rr-earn-accent) 40%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(23, 20, 17, .88), rgba(12, 10, 9, .92));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    backdrop-filter: blur(9px);
    color: var(--rr-earn-ink);
    font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif);
    pointer-events: none;
    z-index: 30;
    /* A long feed label must never widen the panel past the viewport. */
    min-width: 0;
    max-width: calc(100vw - 20px);
}

.rr-earn[data-expanded="true"] {
    width: 236px;
}

/* Compact counter: only the rolling number, the payment status and the
   eligibility/gate chips stay visible until the driver asks for the details.
   The recap lives inside the detail body, so a collapsed panel can never
   render the end-of-activity card on its own. The race pill owns its own
   layout: collapsed mid-race it still shows the last award and the proof
   ticker, so those two are gated only outside a race. */
.rr-earn[data-expanded="false"] .rr-earn__eyebrow,
.rr-earn[data-expanded="false"]:not([data-race="true"]) .rr-earn__last,
.rr-earn[data-expanded="false"]:not([data-race="true"]) .rr-earn__ticker,
.rr-earn[data-expanded="false"] .rr-earn__momentum,
.rr-earn[data-expanded="false"] .rr-earn__progress,
.rr-earn[data-expanded="false"] .rr-earn__feed,
.rr-earn[data-expanded="false"] .rr-earn__recap,
.rr-earn[data-expanded="false"] .rr-earn__tx,
.rr-earn[data-expanded="false"] .rr-earn__claimable,
.rr-earn[data-expanded="false"] .rr-earn__wallet,
.rr-earn[data-expanded="false"] .rr-earn__lifetime,
.rr-earn[data-expanded="false"] .rr-earn__ledger,
.rr-earn[data-expanded="false"] .rr-earn__proof {
    display: none;
}

/* The detail body holds the recap, the session ledger and the payout trail.
   It exists so the desktop column can scroll one region while the head,
   counter and status stay put. */
.rr-earn__body {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 0;
}

.rr-earn[hidden], .rr-earn [hidden] { display: none !important; }
.rr-earn__proof {
    pointer-events: auto;
    width: fit-content;
    color: var(--rr-earn-good);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-underline-offset: 3px;
    padding: 4px 0;
}
.rr-earn[data-reduced-motion="true"],
.rr-earn[data-reduced-motion="true"] * { animation: none !important; transition: none !important; }

.rr-earn__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.rr-earn__eyebrow {
    margin-right: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--rr-earn-dim);
    /* The status word can read "2 PENDING · 1 CONFIRMED"; the eyebrow gives
       way first so the word never leaves the panel on a narrow head. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rr-earn__toggle {
    display: grid;
    place-items: center;
    pointer-events: auto;
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .09);
    color: var(--rr-earn-accent);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.rr-earn__toggle-glyph {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.rr-earn[data-collapsed="true"] .rr-earn__collapse-icon,
.rr-earn[data-expanded="true"] .rr-earn__expand-icon { display: none; }

.rr-earn__status {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--rr-earn-accent);
    background: color-mix(in srgb, var(--rr-earn-accent) 14%, transparent);
    cursor: default;
}

.rr-earn__status[data-status="confirmed"],
.rr-earn[data-status="confirmed"] .rr-earn__status {
    color: #0f1410;
    background: var(--rr-earn-good);
}

.rr-earn[data-status="final"] .rr-earn__status {
    color: #0f1410;
    background: #cdf0cd;
}

.rr-earn__counter {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 0 22px color-mix(in srgb, var(--rr-earn-accent) 30%, transparent);
    min-width: 0;
}

.rr-earn[data-expanded="true"] .rr-earn__counter {
    font-size: 32px;
}

.rr-earn__int,
.rr-earn__dec {
    display: inline-block;
    min-width: 1ch;
}

.rr-earn__dec {
    font-size: 15px;
    color: var(--rr-earn-dim);
}

.rr-earn[data-expanded="true"] .rr-earn__dec {
    font-size: 19px;
}

.rr-earn__symbol {
    margin-left: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--rr-earn-accent);
}

.rr-earn__momentum {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.rr-earn__momentum[hidden] {
    display: none;
}

.rr-earn__rate {
    color: var(--rr-earn-good);
}

.rr-earn__mult {
    padding: 2px 6px;
    border-radius: 6px;
    color: #191410;
    background: var(--rr-earn-good);
}

.rr-earn[data-momentum="active"] .rr-earn__rate {
    animation: rr-earn-pulse 1.1s ease-in-out infinite;
}

.rr-earn__progress {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.rr-earn__progress[hidden] {
    display: none;
}

.rr-earn__progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rr-earn-accent), var(--rr-earn-good));
    transition: width .4s cubic-bezier(.2, .9, .2, 1);
}

.rr-earn__progress-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    color: #100d0a;
    text-transform: uppercase;
}

.rr-earn__feed {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
    min-width: 0;
}

.rr-earn__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .2, 1);
    min-width: 0;
}

.rr-earn__row.is-live {
    opacity: 1;
    transform: none;
}

.rr-earn__row span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rr-earn__row b {
    color: var(--rr-earn-good);
}

.rr-earn__row--t2 b {
    color: #ffd45c;
}

.rr-earn__row--t3 b,
.rr-earn__row--t4 b {
    color: var(--rr-earn-accent);
}

.rr-earn__row--t4 {
    background: color-mix(in srgb, var(--rr-earn-accent) 22%, transparent);
}

.rr-earn__row--denied b {
    color: var(--rr-earn-dim);
}

.rr-earn__row--denied span {
    color: var(--rr-earn-dim);
}

.rr-earn__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--rr-earn-dim);
}

.rr-earn__chip {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 999px;
    color: #1a1208;
    background: var(--rr-earn-accent);
}

.rr-earn__chip[hidden] {
    display: none;
}

/* The walletless chip names the way out of the state, so it is tappable (the
   panel itself stays pointer-transparent) and says so. */
.rr-earn__chip[data-action="sign-in"] {
    pointer-events: auto;
    cursor: pointer;
    /* A real tap target, not a 16px label. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rr-earn__chip[data-action="sign-in"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Compact token-hold requirement: always visible on the token HUD so the
   reason a wallet cannot earn is stated in place, never hidden in a tooltip. */
.rr-earn__hold {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rr-earn-dim) 45%, transparent);
    color: var(--rr-earn-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-earn__hold[hidden] {
    display: none;
}

.rr-earn__hold[data-hold="met"] {
    color: var(--rr-earn-good);
    border-color: color-mix(in srgb, var(--rr-earn-good) 55%, transparent);
    background: color-mix(in srgb, var(--rr-earn-good) 12%, transparent);
}

.rr-earn__hold[data-hold="unmet"] {
    color: #1a1208;
    background: var(--rr-earn-accent);
    border-color: transparent;
}

.rr-earn__hold[data-hold="checking"] {
    border-style: dashed;
}

.rr-earn__claimable {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The wallet line: the balance the server read from the chain after a FINAL
   payout, beside what this heat added. Text-only updates, no motion. */
.rr-earn__wallet {
    flex-basis: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--rr-font-mono, inherit);
    color: var(--rr-earn-good);
}

.rr-earn__wallet[hidden] {
    display: none;
}

/* LIFETIME PAID: FINAL payouts only, the one line allowed to say paid. */
.rr-earn__lifetime {
    flex-basis: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--rr-font-mono, inherit);
    color: var(--rr-earn-dim);
}

.rr-earn__lifetime[hidden] {
    display: none;
}

/* The way to the full history: a control, so it takes the pointer the panel
   otherwise passes through. */
.rr-earn__ledger {
    flex-basis: 100%;
    width: fit-content;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-align: left;
    color: var(--rr-earn-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rr-earn__ledger:focus-visible {
    outline: 2px solid var(--rr-text, #fff);
    outline-offset: 2px;
}

.rr-earn__ledger[hidden] {
    display: none;
}

.rr-earn[data-eligible="false"] .rr-earn__counter {
    opacity: .55;
}

.rr-earn[data-inactive="true"] .rr-earn__progress-label {
    color: #14100c;
}

.rr-earn__recap {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid color-mix(in srgb, var(--rr-earn-accent) 32%, transparent);
}

.rr-earn__recap[hidden] {
    display: none;
}

.rr-earn__recap h3 {
    margin: 0;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--rr-earn-accent);
}

.rr-earn__recap ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
    font-size: 10px;
}

.rr-earn__recap li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: var(--rr-earn-dim);
}

.rr-earn__recap li b {
    flex: 0 0 auto;
    color: var(--rr-earn-ink);
}

.rr-earn__recap li span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rr-earn__recap footer {
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--rr-earn-good);
}

/* Payout trail: one row per transfer with its own status and explorer link, so
   a pending send can never be mistaken for a receipt. */
.rr-earn__tx {
    display: grid;
    gap: 4px;
    padding: 8px 10px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.rr-earn__tx[hidden] {
    display: none;
}

.rr-earn__tx-title {
    margin: 0;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    color: var(--rr-earn-dim);
}

.rr-earn__tx-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rr-earn__tx-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--rr-earn-dim);
    /* A FINAL row fades away 90 s after it went final (opacity only, then
       hidden by the HUD); the full history stays in the ledger. */
    transition: opacity .6s ease;
}

.rr-earn__tx-row[data-fade="out"] {
    opacity: 0;
}

.rr-earn__tx-row[hidden] {
    display: none;
}

.rr-earn__tx-status {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: .12em;
    background: color-mix(in srgb, var(--rr-earn-dim) 22%, transparent);
}

.rr-earn__tx-row[data-status="submitted"] .rr-earn__tx-status {
    color: var(--rr-earn-accent);
    background: color-mix(in srgb, var(--rr-earn-accent) 18%, transparent);
}

.rr-earn__tx-row[data-status="confirmed"] .rr-earn__tx-status,
.rr-earn__tx-row[data-status="final"] .rr-earn__tx-status {
    color: #0f1410;
    background: var(--rr-earn-good);
}

.rr-earn__tx-row[data-status="released"] .rr-earn__tx-status {
    color: #ffc55d;
    background: rgba(255, 197, 93, .16);
}

.rr-earn__tx-amount {
    color: var(--rr-earn-ink);
}

.rr-earn__tx-meta {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--rr-font-mono, monospace);
    letter-spacing: .04em;
}

.rr-earn__tx-link {
    flex: 0 0 auto;
    margin-left: auto;
    pointer-events: auto;
    color: var(--rr-earn-good);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The recap lands as a card instead of appearing between frames. */
.rr-earn__recap:not([hidden]) {
    animation: rr-earn-recap-in .3s cubic-bezier(.2, .9, .2, 1);
}

@keyframes rr-earn-recap-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.rr-earn[data-celebrate="payment"] {
    animation: rr-earn-confirm 1.2s cubic-bezier(.2, .9, .2, 1);
}

.rr-earn[data-reconnected="true"]::after {
    content: "RECONNECTED";
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
    color: #0f1410;
    background: var(--rr-earn-dim);
}

@keyframes rr-earn-pulse {
    50% { opacity: .55; }
}

@keyframes rr-earn-confirm {
    0% { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
    40% { box-shadow: 0 0 0 2px var(--rr-earn-good), 0 0 46px color-mix(in srgb, var(--rr-earn-good) 55%, transparent); }
    100% { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
}

/* Desktop: bottom-left, clear of the top bar, the right-side activity stack,
   the boost meter and the bottom-right destinations panel. */
@media (min-width: 900px) {
    .rr-earn {
        left: 14px;
        top: auto;
        right: auto;
        bottom: max(26px, env(safe-area-inset-bottom));
        width: 196px;
    }
    .rr-earn[data-expanded="true"] {
        width: 244px;
    }
    .rr-earn__counter {
        font-size: 26px;
    }
    .rr-earn[data-expanded="true"] .rr-earn__counter {
        font-size: 34px;
    }
}

/* Mobile: bottom-left above the joystick/reaction band, one column, never
   wider than the screen and scrollable when the recap is open. */
@media (max-width: 899px) {
    .rr-earn {
        left: max(10px, env(safe-area-inset-left));
        right: auto;
        top: auto;
        /* Clear the whole bottom action band, including the joystick's boost
           ring, or the panel sits on the steering control. The previous 132px
           only reached the edge of the touch zone. TOUCH_CONTROL_BAND_PX in
           touchControls.js is this same number for both orientations. */
        bottom: calc(196px + env(safe-area-inset-bottom));
        max-height: calc(100dvh - env(safe-area-inset-top) - 210px);
        overflow-y: auto;
        overscroll-behavior: contain;
        width: 176px;
        padding: 8px 10px 7px;
        border-radius: 14px;
    }
    /* The phone chip is an inline row; the detail body has no place there. */
    .rr-earn[data-expanded="false"] .rr-earn__body {
        display: none;
    }
    .rr-earn[data-expanded="true"] {
        width: min(228px, calc(100vw - 20px));
        max-height: calc(100dvh - 156px);
        overflow-y: auto;
        pointer-events: auto;
        overscroll-behavior: contain;
    }
    .rr-earn__counter {
        font-size: 22px;
    }
    .rr-earn[data-expanded="true"] .rr-earn__counter {
        font-size: 28px;
    }
    .rr-earn__feed {
        grid-template-columns: minmax(0, 1fr);
    }
    .rr-earn__row {
        font-size: 9px;
        padding: 3px 6px;
    }
    /* Mobile keeps two feed rows so the panel never eats the driving view. */
    .rr-earn__row:nth-child(n + 3) {
        display: none;
    }
}

/*
 * Landscape play. The game runs in landscape on every touch device, and a
 * phone in landscape is wider than the 899px breakpoint above — so without this
 * rule a phone received the desktop placement (bottom: 26px) while the
 * on-screen joystick still occupied the bottom-left, and the panel sat on top
 * of the stick. The action bar is a horizontal band across the bottom, so in
 * landscape the only safe place for this panel is the top-left, under the
 * header and clear of the bottom band entirely.
 */
@media (orientation: landscape) {
    .rr-earn {
        /* A phone in landscape is wider than the mobile breakpoint above, so
           without this rule it falls through to the desktop placement. Keep the
           panel in the bottom-left corner band and let the compact skin below
           decide how tall it may be. */
        left: max(10px, env(safe-area-inset-left));
        right: auto;
        top: auto;
        bottom: max(26px, env(safe-area-inset-bottom));
        width: 176px;
        max-height: calc(100dvh - env(safe-area-inset-top) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .rr-earn[data-expanded="true"] {
        width: min(236px, calc(100vw - 20px));
    }
    .rr-earn__counter {
        font-size: 22px;
    }
    .rr-earn[data-expanded="true"] .rr-earn__counter {
        font-size: 28px;
    }
    .rr-earn__feed {
        grid-template-columns: minmax(0, 1fr);
    }
    .rr-earn__row {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/*
 * Compact mobile skin.
 *
 * Measured on a Samsung S23 in landscape over the live site: the web view is
 * only ~282 CSS px tall, while the on-screen steering control alone occupies
 * 66px to 182px above the bottom edge and the right-hand action buttons reach
 * ~112px. A 176x126 panel cannot coexist with that at either corner, and a
 * bottom offset large enough to clear the stick pushes the panel off the top of
 * the viewport entirely.
 *
 * So on a phone the panel becomes one short chip: no eyebrow, no status chip,
 * no claimable line, just the running total and the expand control. It sits on
 * the driver's right, above the fire column and clear of the steering control
 * on the left. The full panel and recap return when it is expanded or
 * when the viewport is large enough to hold them (desktop).
 */
@media (min-width: 900px) {
    .rr-earn[data-collapsed="true"] {
        /* Desktop parks the compact chip on the same bottom-left anchor as the
           expanded panel. It used to sit top-left, where it covered the world
           brand (the area name) in the top bar. */
        left: max(14px, env(safe-area-inset-left));
        right: auto;
        top: auto;
        bottom: max(26px, env(safe-area-inset-bottom));
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 16px);
        padding: 5px 6px 5px 9px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 899px), (max-height: 480px) {
    /*
     * Mid-race on a landscape phone the chip moves to the right-hand column,
     * tucked under the placement/lap readout and above the UTIL · HORN · JUMP
     * row. The symbol is dropped there so the chip is short enough to sit in
     * that slot instead of reaching into the action row.
     */
    /* The chip is mounted on <body>, outside the world HUD, so the world
       mirrors its race flag onto the body and these rules key on that. */
    body[data-race-active="true"] .rr-earn[data-collapsed="true"],
    .rr-earn[data-collapsed="true"][data-race="true"] {
        left: auto;
        right: max(12px, env(safe-area-inset-right));
        /* Sits under the placement/lap readout and stops 6px short of the
           UTIL · HORN · JUMP row, which starts 126px down. */
        top: calc(max(8px, env(safe-area-inset-top)) + 80px);
        bottom: auto;
        max-width: 96px;
        /* The mid-race pill sets a 172px min-width; this slot is a chip, so the
           floor is cleared or the box can never be narrower than the pill. */
        min-width: 0;
        /* Hug the amount: a fixed box left obvious dead space beside a short
           value. The music widget's offset is set from this chip's maximum
           width instead, so the gap holds at any amount. */
        width: max-content;
        padding: 4px 5px 4px 8px;
        gap: 5px;
    }
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__symbol,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__symbol {
        display: none;
    }
    /* Tight internals so the chip stays inside its slot instead of widening to
       fit the default sizes. */
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__counter,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__counter {
        font-size: 12px;
    }
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__dec,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__dec {
        font-size: 9px;
    }
    .rr-earn[data-collapsed="true"] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        /* One short chip in the left column, directly above the steering pad
           and below the WORLD counter. The bottom offset clears the pad, its
           drawn boost ring and the pad's own touch box, so the ring never
           crosses it. */
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 16px);
        padding: 5px 6px 5px 9px;
        border-radius: 999px;
        left: max(8px, env(safe-area-inset-left));
        right: auto;
        top: auto;
        bottom: calc(max(38px, env(safe-area-inset-bottom)) + 150px);
        max-height: none;
        overflow: visible;
    }
    .rr-earn[data-collapsed="true"] .rr-earn__head { display: flex; }
    .rr-earn[data-collapsed="true"] .rr-earn__status { display: none; }
    .rr-earn[data-collapsed="true"] .rr-earn__counter {
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        gap: 0;
    }
    .rr-earn[data-collapsed="true"] .rr-earn__dec { font-size: 9px; }
    .rr-earn[data-collapsed="true"] .rr-earn__symbol {
        font-size: 7px;
        margin-left: 2px;
        letter-spacing: .04em;
    }
    .rr-earn[data-collapsed="true"]:not([data-race="true"]) .rr-earn__last { display: none; }
    .rr-earn[data-collapsed="true"] .rr-earn__toggle {
        pointer-events: auto;
        touch-action: manipulation;
    }
}


@media (prefers-reduced-motion: reduce) {
    .rr-earn,
    .rr-earn__rate,
    .rr-earn__row,
    .rr-earn__tx-row {
        animation: none;
        transition: none;
    }
}

/*
 * Desktop ledger. A driver who asks for the detail gets the left column: the
 * race recap, every award this session and the payout trail in one scrollable
 * list, with the head and the rolling total pinned above it. The panel morphs
 * between that column and the compact bottom-left chip instead of snapping.
 */
@media (min-width: 900px) and (min-height: 481px) {
    .rr-earn:not([data-race="true"]) {
        /* Chromium animates the chip's max-content width against the column
           width; elsewhere the panel still morphs its height and radius. */
        interpolate-size: allow-keywords;
        transition:
            width .3s cubic-bezier(.2, .9, .2, 1),
            max-height .34s cubic-bezier(.2, .9, .2, 1),
            padding .3s cubic-bezier(.2, .9, .2, 1),
            border-radius .3s cubic-bezier(.2, .9, .2, 1);
    }
    .rr-earn[data-expanded="true"]:not([data-race="true"]) {
        left: max(14px, env(safe-area-inset-left));
        right: auto;
        top: auto;
        bottom: max(26px, env(safe-area-inset-bottom));
        width: 348px;
        max-height: min(76dvh, calc(100dvh - 96px));
        padding: 12px 12px 10px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        pointer-events: auto;
    }
    /* The head, the total and the status lines hold their place; the detail
       body takes the remaining height and scrolls inside it. */
    .rr-earn[data-expanded="true"]:not([data-race="true"]) .rr-earn__body {
        flex: 1 1 auto;
        align-content: start;
        gap: 6px;
        max-height: min(56dvh, 440px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 3px;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--rr-earn-accent) 45%, transparent) transparent;
    }
    .rr-earn[data-expanded="true"]:not([data-race="true"]) .rr-earn__foot,
    .rr-earn[data-expanded="true"]:not([data-race="true"]) .rr-earn__proof {
        flex: 0 0 auto;
    }
    /* Retraction: the body folds to nothing while the panel morphs back into
       the corner chip, so the collapse reads as one motion. */
    .rr-earn[data-collapsed="true"]:not([data-race="true"]) {
        gap: 0;
        /* The reconnect badge hangs above the panel, so the panel itself never
           clips; the folded body clips its own content. */
        overflow: visible;
    }
    .rr-earn[data-collapsed="true"]:not([data-race="true"]) .rr-earn__body {
        flex: 0 0 auto;
        width: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height .3s cubic-bezier(.2, .9, .2, 1), opacity .14s ease;
    }
}

/* Activity mode: one compact, animated $SCRAPS pill above the radio by default
   (desktop driving races dock beside their map below). It carries
   the same rolling counter the full component shows after the race, so the
   panel always reflects exactly what the race earned. These rules sit last so
   they win over the desktop/mobile panel geometry above. */
.rr-earn[data-race="true"] {
    --rr-earn-race-bottom: max(132px, calc(112px + env(safe-area-inset-bottom)));
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    bottom: var(--rr-earn-race-bottom);
    width: fit-content;
    min-width: 172px;
    max-width: calc(100vw - 20px);
    /* The compact pill stacks status and total. The opened ledger adds its
       award and receipt rows without changing the driving footprint. */
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 7px 16px 8px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--rr-earn-accent) 55%, transparent);
    background: linear-gradient(160deg, rgba(28, 23, 16, .9), rgba(14, 11, 8, .94));
}

/* Payout receipts belong in the driver-opened ledger. The live counter keeps
   the same footprint before, during and after a payout in every activity. */
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__body {
    display: none;
}
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__last,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__ticker {
    display: none !important;
}

/* Proof ticker: three pre-allocated chips, newest first. Grey is queued,
   amber is signed/sent (pending, never a receipt), green is confirmed or
   final, and a released transfer is an inert RETRYING chip with no link. */
.rr-earn__ticker {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    max-width: 100%;
    justify-items: stretch;
}

.rr-earn__ticker[hidden] {
    display: none;
}

.rr-earn__tick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: .1em;
    white-space: nowrap;
    color: var(--rr-earn-dim);
    background: color-mix(in srgb, var(--rr-earn-dim) 16%, transparent);
    pointer-events: auto;
}

.rr-earn__tick[hidden] {
    display: none;
}

.rr-earn__tick[data-state="signed"],
.rr-earn__tick[data-state="sent"] {
    color: var(--rr-earn-accent);
    background: color-mix(in srgb, var(--rr-earn-accent) 16%, transparent);
}

.rr-earn__tick[data-state="confirmed"],
.rr-earn__tick[data-state="final"] {
    color: var(--rr-ink, #0d0b09);
    background: var(--rr-earn-good);
    cursor: pointer;
}

.rr-earn__tick[data-state="released"] {
    color: var(--rr-earn-dim);
    background: color-mix(in srgb, var(--rr-earn-dim) 10%, transparent);
}

.rr-earn__tick-state {
    flex: 0 0 auto;
}

.rr-earn__tick-sig {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--rr-font-mono, monospace);
    letter-spacing: .04em;
}

.rr-earn__tick-time {
    flex: 0 0 auto;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* The arrow is the visible affordance; the pseudo-element stretches the
   link over the whole chip so the tap target is the chip, not a glyph. */
.rr-earn__tick-link {
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
}

.rr-earn__tick-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.rr-earn__tick-link[hidden] {
    display: none;
}

@media (min-width: 900px) {
    /* A stacked pill with chips near its corners reads better with a card
       radius than with a stadium whose ends would clip the ticker. */
    .rr-earn[data-race="true"] {
        border-radius: 18px;
    }
}

.rr-earn[data-race="true"] .rr-earn__head {
    justify-content: center;
    gap: 8px;
}

.rr-earn[data-race="true"] .rr-earn__eyebrow {
    margin-right: 0;
    color: var(--rr-earn-accent);
}

.rr-earn[data-race="true"] .rr-earn__counter {
    font-size: 26px;
}

.rr-earn[data-race="true"] .rr-earn__dec {
    font-size: 17px;
}

.rr-earn[data-race="true"] .rr-earn__toggle {
    display: none;
}
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__chip,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__hold,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__momentum,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__progress,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__feed,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__claimable,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__wallet,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__lifetime,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__ledger,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__recap,
.rr-earn[data-race="true"][data-collapsed="true"] .rr-earn__proof {
    display: none;
}

/* The race pill uses an explicit control; combat pills remain read-only on
   desktop. Mobile's dock controls are enabled independently below. */
.rr-earn[data-race="true"][data-activity="race"] .rr-earn__toggle { display: grid; }

/* Open upward from the activity's pill anchor. The mobile
   dock keeps ownership of its position and width through its overrides below. */
.rr-earn[data-race="true"][data-expanded="true"] {
    width: 348px;
    max-width: calc(100vw - 28px);
    max-height: min(76dvh, calc(100dvh - var(--rr-earn-race-bottom) - 14px));
    padding: 12px 12px 10px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.rr-earn[data-race="true"][data-expanded="true"] .rr-earn__head {
    justify-content: space-between;
}
.rr-earn[data-race="true"][data-expanded="true"] .rr-earn__body {
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    max-height: min(56dvh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Desktop/controller races dock beside the minimap (124px wide, 22px inset),
   leaving a 20px gap and clearing the bottom driving hints. Both states keep
   their bottom-right corner here; opening
   details grows upward and leftward instead of returning over the vehicle. */
.rr-earn[data-race="true"][data-activity="race"]:not([data-mobile-dock="true"]) {
    --rr-earn-race-bottom: max(44px, env(safe-area-inset-bottom));
    left: auto;
    right: calc(max(22px, env(safe-area-inset-right)) + 124px + 20px);
    top: auto;
    bottom: var(--rr-earn-race-bottom);
    transform: none;
}
.rr-earn[data-race="true"][data-activity="race"][data-expanded="true"]:not([data-mobile-dock="true"]) {
    /* Leave room for the centre radio at ordinary desktop window sizes. */
    width: clamp(220px, calc(50vw - 376px), 348px);
}

/* One scale-and-glow flash per granted award, restarted on back-to-back hits. */
.rr-earn--award .rr-earn__counter {
    animation: rr-earn-award 480ms cubic-bezier(.2, .9, .2, 1);
}

/*
 * Portrait race pill. The default 132px offset for the mid-race pill lands on
 * the steering pad once the pad is parked with its boosted ring on screen, so
 * the pill lifts to clear the pad, its ring and its touch box entirely. These
 * rules come after the race block above so they win there.
 */
@media (max-width: 899px) {
    .rr-earn[data-race="true"][data-collapsed="true"] {
        /* Centred over the steering pad's column, in the gap between the race
           HUD's vitals card and the pad itself. The pad's touch box is
           transparent at its top edge, so the pill may meet it without hiding
           anything, but it never covers the drawn boost ring. */
        left: 97px;
        right: auto;
        transform: translateX(-50%);
        bottom: calc(max(38px, env(safe-area-inset-bottom)) + 141px);
    }
}

/* The source of the last award, shown briefly inside the race pill. */
.rr-earn__last {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--rr-earn-good);
}

.rr-earn__last[hidden],
.rr-earn[data-race="false"] .rr-earn__last,
.rr-earn[data-race="false"] .rr-earn__ticker {
    display: none;
}

/*
 * Phone, mid-race: the earnings chip in the right column is 22px tall, with
 * no room for the award line or the ticker. Both go to the top-centre lane
 * under the race clock, anchored to the viewport. In landscape the world HUD
 * parks the vitals card on the left (40px + 178px wide) and the standings
 * field on the right (236px + 142px wide), so that lane is centred 80px left
 * of the viewport centre and is (100vw - 596px) wide; in portrait the clock
 * and placement own the left ~95px and the field the right 134px, so the
 * lane centre is 20px left of centre. The chip's own centring transform and
 * backdrop blur are dropped here: either would make the chip the containing
 * block of its fixed children, and the transform also pushed the chip 22px
 * off its declared right offset. These rules sit after the portrait block so
 * they win at equal specificity.
 */
@media (max-width: 899px), (max-height: 480px) {
    body[data-race-active="true"] .rr-earn[data-collapsed="true"],
    .rr-earn[data-collapsed="true"][data-race="true"] {
        transform: none;
        backdrop-filter: none;
    }
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__last,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__last {
        display: block;
        position: fixed;
        left: calc(50% - 80px);
        right: auto;
        transform: translateX(-50%);
        top: calc(max(6px, env(safe-area-inset-top)) + 76px);
        width: max-content;
        max-width: max(160px, calc(100vw - 596px));
        text-align: center;
    }
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__last[hidden],
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__last[hidden] {
        display: none;
    }
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__ticker,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__ticker {
        position: fixed;
        left: calc(50% - 80px);
        right: auto;
        transform: translateX(-50%);
        top: calc(max(6px, env(safe-area-inset-top)) + 92px);
        width: max-content;
        max-width: max(160px, calc(100vw - 596px));
    }
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__ticker[hidden],
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__ticker[hidden] {
        display: none;
    }
}

@media (max-width: 899px) and (orientation: portrait) {
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__last,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__last,
    body[data-race-active="true"] .rr-earn[data-collapsed="true"] .rr-earn__ticker,
    .rr-earn[data-collapsed="true"][data-race="true"] .rr-earn__ticker {
        left: calc(50% - 20px);
        max-width: max(150px, calc(100vw - 240px));
    }
}

@keyframes rr-earn-award {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); text-shadow: 0 0 28px rgba(255, 212, 92, .8); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .rr-earn--award .rr-earn__counter {
        animation: none;
    }
}

/*
 * ── Activity pills: arena, Scrapball, raid ──────────────────────────────
 *
 * Every live activity uses the race's compact pill (data-race="true"), so all
 * of the pill rules above apply; these only decide WHERE each activity parks
 * it, keyed on data-activity, from the measured geometry of each mode's HUD.
 *
 * The rule is the empty strip, never the play lane. Each mode centres one
 * element in the top strip (the arena's clock card, the Scrapball score
 * plate, the raid boss bar) with nothing beside it, so the pill sits in that
 * strip immediately to the right of the centre element, top-aligned with it,
 * where no car, ball or goal is ever drawn. Phones keep the same idea in the
 * gaps that actually exist there; where a mode's phone top strip is full, the
 * chip takes the next free band instead. Nothing here changes the yard, the
 * race pill or the recap panel. These rules sit last so they win at equal
 * specificity; the phone rules repeat the attribute to beat the race's
 * portrait and landscape overrides.
 */

/* Read-only while playing: a click there is fire, and the pill must never
   intercept it or open over the play. The ledger with every receipt is a tap
   away in the yard. */
.rr-earn[data-race="true"][data-activity="arena"],
.rr-earn[data-race="true"][data-activity="scrapball"],
.rr-earn[data-race="true"][data-activity="raid"],
.rr-earn[data-race="true"][data-activity="arena"] *,
.rr-earn[data-race="true"][data-activity="scrapball"] *,
.rr-earn[data-race="true"][data-activity="raid"] * {
    pointer-events: none !important;
    cursor: default;
}

/* The top-strip pill: anchored by its left edge just right of the centre
   element, top-aligned with it. Narrower than the race pill so it clears the
   right-hand card even on a 900px-wide window. */
.rr-earn[data-race="true"][data-activity="arena"],
.rr-earn[data-race="true"][data-activity="scrapball"],
.rr-earn[data-race="true"][data-activity="raid"] {
    right: auto;
    bottom: auto;
    transform: none;
    min-width: 150px;
    justify-items: start;
}

/* Arena: the clock card is 72–104px wide, centred 12px down; the pill starts
   58px right of centre, so it clears the card and stays under the opponent
   card's left edge. The controls hint hangs 88px down, below this strip. */
.rr-earn[data-race="true"][data-activity="arena"] {
    left: calc(50% + 58px);
    top: calc(max(12px, env(safe-area-inset-top)) + 0px);
}

/* Scrapball: the score plate (two team blocks and the clock) is about 340px
   wide, centred 12px down; the pill starts 176px right of centre and ends
   well before BACK TO YARD in the top-right corner. */
.rr-earn[data-race="true"][data-activity="scrapball"] {
    left: calc(50% + 176px);
    top: max(12px, env(safe-area-inset-top));
}

/* Below 960px of width the Scrapball top strip cannot hold the score plate,
   the pill and BACK TO YARD side by side (they need about 930px), so the
   pill drops into the right column directly under BACK TO YARD, a corner the
   ball never reaches and the boost cards leave free. */
@media (max-width: 959px) {
    .rr-earn[data-race="true"][data-activity="scrapball"] {
        left: auto;
        right: max(20px, env(safe-area-inset-right));
        top: calc(max(12px, env(safe-area-inset-top)) + 54px);
        justify-items: end;
    }
}

/* The end-of-match recap opens the full panel in the bottom-left corner. On
   the arena and raid screens that corner holds the CHAT toggle, so the panel
   lifts above it for the recap window. */
.rr-earn[data-mode="recap"]:not([data-race="true"]) {
    bottom: calc(max(26px, env(safe-area-inset-bottom)) + 62px);
}

/* Raid: the boss bar is min(620px, 100vw - 30px) wide, centred 12px down.
   From 1040px of width there is a clear strip to its right, above the
   objective card (which starts 92px down); narrower windows keep the pill
   bottom-centre above the camera hint bar (14px up, ~42px tall), the band
   the raid capture showed clear of the driver's car. */
.rr-earn[data-race="true"][data-activity="raid"] {
    left: 50%;
    top: auto;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px);
    transform: translateX(-50%);
    justify-items: center;
}

@media (min-width: 1040px) {
    .rr-earn[data-race="true"][data-activity="raid"] {
        left: calc(50% + 322px);
        top: max(12px, env(safe-area-inset-top));
        bottom: auto;
        transform: none;
        justify-items: start;
    }
}

/* Scrapball mounts its own full-screen root on <body> (z-index 10000); the
   pill and the post-match recap have to sit above it or they never show. */
.rr-earn[data-surface="scrapball"] {
    z-index: 10001;
}

/*
 * Phones. The race parks its chip in the right column and sends the award
 * line and the ticker to a fixed lane under the race clock, sized for the
 * race HUD. The other activities keep the chip in one piece (the rolling
 * total and the last award; the payout ticker would triple its height) in
 * the gap their own HUD leaves:
 *   arena, landscape  — between the clock card and the opponent card;
 *   arena, portrait   — the top row is full (three cards), so the left column
 *                       just under the controls hint that hangs 72px down;
 *   Scrapball         — right of the score plate, top-aligned with it;
 *   raid              — the boss bar spans the width, so the bottom band:
 *                       between the steering pad and the action buttons in
 *                       landscape, above the whole touch band in portrait.
 */
@media (max-width: 899px), (max-height: 480px) {
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"],
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="scrapball"],
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="raid"] {
        right: auto;
        transform: none;
        display: grid;
        justify-items: start;
        gap: 2px;
        width: max-content;
        min-width: 0;
        max-width: min(160px, calc(100vw - 24px));
        padding: 4px 9px 5px;
    }
    /* Wider than 700px (landscape phones, tablets): the clock card is 72px
       wide, centred, with a gap before the opponent card; the chip starts
       40px right of centre in that gap. */
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"] {
        left: calc(50% + 40px);
        top: max(6px, env(safe-area-inset-top));
        bottom: auto;
    }
    /* Up to 700px wide, in either orientation, the three cards stretch to
       fill the top row and the controls hint below them can wrap to two
       lines, so there is no dependable band at the top. The chip takes the
       slot the yard chip already proved: the left column directly above the
       steering pad, clear of its boost ring and touch box, one line tall. */
    @media (max-width: 700px) {
        .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"] {
            left: max(8px, env(safe-area-inset-left));
            top: auto;
            bottom: calc(max(38px, env(safe-area-inset-bottom)) + 150px);
        }
        .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"] .rr-earn__last {
            display: none;
        }
    }
    /* Landscape phone: anchored to BACK TO YARD (about 118px wide, 20px in)
       rather than to the score plate, whose width depends on touch, so the
       chip sits in the gap between the two on every device. */
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="scrapball"] {
        left: auto;
        right: calc(max(20px, env(safe-area-inset-right)) + 124px);
        justify-items: end;
        top: max(12px, env(safe-area-inset-top));
        bottom: auto;
    }
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="raid"] {
        left: 50%;
        transform: translateX(-50%);
        justify-items: center;
        top: auto;
        bottom: max(10px, env(safe-area-inset-bottom));
    }
    @media (orientation: portrait) {
        .rr-earn[data-collapsed="true"][data-race="true"][data-activity="raid"] {
            bottom: calc(max(38px, env(safe-area-inset-bottom)) + 150px);
        }
    }
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"] .rr-earn__last,
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="scrapball"] .rr-earn__last,
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="raid"] .rr-earn__last {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        width: auto;
        max-width: 100%;
    }
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"] .rr-earn__last[hidden],
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="scrapball"] .rr-earn__last[hidden],
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="raid"] .rr-earn__last[hidden],
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="arena"] .rr-earn__ticker,
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="scrapball"] .rr-earn__ticker,
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="raid"] .rr-earn__ticker {
        /* A phone chip is the rolling total and the last award; the payout
           chips would triple its height in a strip that has to stay short. */
        display: none;
    }
}

/* Narrow phones drop the Scrapball score plate to 50px and shrink the header
   buttons (about 86px wide, 10px in); the chip takes the header row itself,
   between the brand and BACK TO YARD, above the plate whatever its width. */
@media (max-width: 600px) {
    .rr-earn[data-collapsed="true"][data-race="true"][data-activity="scrapball"] {
        left: auto;
        right: calc(max(10px, env(safe-area-inset-right)) + 92px);
        /* The header gap: the brand (about 120px) on the left, BACK TO YARD
           on the right; a long award label ellipsizes inside it. */
        max-width: calc(100vw - 245px);
        justify-items: end;
        top: max(10px, env(safe-area-inset-top));
    }
}

/*
 * ── Today by activity ───────────────────────────────────────────────────
 *
 * Each live activity fills its own daily allowance. The strip in the expanded
 * yard panel shows every allowance at once, so a spent one reads as full and
 * the others as still open; it never renders inside a pill, and the collapsed
 * chip never grows for it.
 */
.rr-earn__daily {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 6px 8px 7px;
    border: 1px solid color-mix(in srgb, var(--rr-earn-accent) 22%, transparent);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.rr-earn__daily[hidden],
.rr-earn[data-expanded="false"] .rr-earn__daily,
.rr-earn[data-race="true"] .rr-earn__daily {
    display: none;
}

.rr-earn__daily-title {
    margin: 0;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    color: var(--rr-earn-dim);
}

.rr-earn__daily-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.rr-earn__daily-row {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--rr-earn-ink);
}

.rr-earn__daily-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--rr-earn-dim);
}

.rr-earn__daily-meter {
    position: relative;
    display: block;
    height: 4px;
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rr-earn-dim) 22%, transparent);
}

.rr-earn__daily-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--rr-earn-accent);
    transition: width .3s ease;
}

.rr-earn__daily-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.rr-earn__daily-row[data-full="true"] .rr-earn__daily-fill {
    background: var(--rr-earn-good);
}

.rr-earn__daily-row[data-full="true"] .rr-earn__daily-label,
.rr-earn__daily-row[data-full="true"] .rr-earn__daily-value {
    color: var(--rr-earn-good);
}

/* Mobile earnings float independently of each activity's HUD. A tucked panel
   keeps a real, reachable tab; its earning counter continues updating. */
.rr-earn[data-mobile-dock="true"] {
    --rr-earn-safe-left: env(safe-area-inset-left, 0px);
    --rr-earn-safe-right: env(safe-area-inset-right, 0px);
    --rr-earn-safe-top: env(safe-area-inset-top, 0px);
    --rr-earn-safe-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    left: 8px;
    top: 45dvh;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: min(340px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-height: var(--rr-earn-dock-max-height, calc(100dvh - 16px)) !important;
    min-height: 44px;
    pointer-events: auto !important;
    overflow: auto;
    overscroll-behavior: contain;
}
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 176px !important;
    gap: 0 4px;
    padding: 2px 6px 4px 8px;
    border-radius: 13px;
}
.rr-earn[data-mobile-dock="true"] .rr-earn__dock-controls {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    order: 10;
}
.rr-earn[data-mobile-dock="true"] .rr-earn__toggle,
.rr-earn[data-mobile-dock="true"] .rr-earn__hide,
.rr-earn[data-mobile-dock="true"] .rr-earn__edge-tab {
    border: 0;
    padding: 0;
    color: var(--rr-earn-accent);
    background: rgba(255, 183, 74, .08);
    font: 900 24px/1 var(--font-display, system-ui, sans-serif);
    width: 34px;
    min-height: 40px;
    border-radius: 9px;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: pointer;
}
.rr-earn[data-mobile-dock="true"][data-collapsed="true"],
.rr-earn[data-mobile-dock="true"] .rr-earn__head,
.rr-earn[data-mobile-dock="true"] .rr-earn__counter,
.rr-earn[data-mobile-dock="true"] .rr-earn__foot,
.rr-earn[data-mobile-dock="true"] .rr-earn__dock-controls {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.rr-earn[data-mobile-dock="true"] .rr-earn__toggle {
    display: grid !important;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    color: var(--rr-earn-accent);
    background: rgba(255, 183, 74, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 183, 74, .38);
    touch-action: manipulation;
}
.rr-earn[data-mobile-dock="true"][data-dragging="true"] { cursor: grabbing; }
.rr-earn[data-mobile-dock="true"] button:focus-visible { outline: 2px solid var(--rr-earn-accent); outline-offset: -2px; }
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__counter { grid-area: 1 / 1; font-size: 15px; }
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__dock-controls { grid-area: 1 / 2; }
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__head,
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__body { display: none; }
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__foot {
    grid-area: 2 / 1 / 3 / -1;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 8px;
}
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__chip,
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__hold {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__last,
.rr-earn[data-mobile-dock="true"][data-collapsed="true"] .rr-earn__ticker { display: none !important; }
.rr-earn[data-mobile-dock="true"][data-expanded="true"] { display: grid; width: 280px !important; }
.rr-earn[data-mobile-dock="true"][data-expanded="true"] .rr-earn__dock-controls { order: -1; }
.rr-earn[data-mobile-dock="true"][data-expanded="true"] .rr-earn__head { display: flex !important; }
.rr-earn[data-mobile-dock="true"][data-tucked="true"] {
    display: block !important;
    width: 86px !important;
    height: 44px !important;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    border-radius: 0 13px 13px 0;
    border-left: 0;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, .35);
}
.rr-earn[data-mobile-dock="true"][data-tucked="true"][data-dock-side="right"] { border-radius: 13px 0 0 13px; border-left: 1px solid var(--rr-earn-accent); border-right: 0; }
.rr-earn[data-mobile-dock="true"][data-tucked="true"] > :not(.rr-earn__edge-tab) { display: none !important; }
.rr-earn[data-mobile-dock="true"][data-tucked="true"] > .rr-earn__edge-tab {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
    min-height: 44px;
    white-space: nowrap;
    border-radius: inherit;
}
.rr-earn__edge-value { display: grid; gap: 3px; text-align: center; }
.rr-earn__edge-amount { color: #fff0d5; font: 800 13px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.rr-earn__edge-value small { font: 800 7px/1 var(--font-display, system-ui, sans-serif); letter-spacing: .6px; }
.rr-earn__edge-arrow { font-size: 18px; }
.rr-earn[data-dock-side="right"] .rr-earn__edge-arrow { order: -1; }
/* Screen ownership wins even while the widget is tucked. */
.rr-earn[data-mobile-dock="true"][hidden] { display: none !important; }