* { box-sizing: border-box; margin: 0; padding: 0; }
/* Stop Chrome's horizontal overscroll from triggering back/forward navigation. */
html, body { overscroll-behavior-x: none; }
body { font-family: system-ui, sans-serif; background: #f5f5f5; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); max-width: 480px; width: 100%; }
h1 { text-align: center; margin-bottom: 1rem; }
input { display: block; width: 100%; padding: .6rem; margin-bottom: .75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
button { padding: .75rem 1.5rem; font-size: 1rem; cursor: pointer; border: none; border-radius: 4px; background: #2563eb; color: #fff; }
button:hover:not(:disabled) { background: #1d4ed8; }
button:disabled { background: #94a3b8; cursor: default; }

/* Question — multiple choice */
.question-text { font-size: 1.1rem; margin-bottom: .75rem; text-align: center; }
.math-rich-text { white-space: pre-wrap; }
.math-rich-text .math-answer-render { white-space: normal; }
.option-btn { display: block; width: 100%; padding: .75rem; margin-bottom: .5rem; font-size: 1rem; cursor: pointer; border: 2px solid #e5e7eb; border-radius: 6px; background: #fff; color: #111; text-align: left; }
.option-btn:hover:not(:disabled) { border-color: #2563eb; background: #eff6ff; }
.option-btn:disabled { cursor: default; }
.option-btn.correct { border-color: #16a34a; background: #f0fdf4; }
.option-btn.wrong { border-color: #dc2626; background: #fef2f2; }
.option-btn.math-option-btn { text-align: center; }
.option-btn.math-option-btn math-span { font-size: 1.2em; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.options-grid .option-btn { margin: 0; padding: .5rem; text-align: center; }
.option-btn-image { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.option-image { max-width: 100%; max-height: 110px; border-radius: 4px; display: block; }
.option-caption { font-size: .9rem; }

/* Text input */
.text-input-form { display: flex; flex-direction: column; gap: .5rem; }
.text-answer-input.correct { border-color: #16a34a; background: #f0fdf4; }
.text-answer-input.wrong { border-color: #dc2626; background: #fef2f2; }
.text-correct-hint { margin-top: .5rem; color: #16a34a; font-weight: 600; text-align: center; }

/* Slider */
.slider-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.slider-value { text-align: center; font-size: 1.6rem; font-weight: 700; color: #2563eb; font-variant-numeric: tabular-nums; }
.slider-value.correct { color: #16a34a; }
.slider-value.wrong { color: #dc2626; }
.slider-input { width: 100%; margin: 0; padding: 0; }
.slider-range-row { display: flex; justify-content: space-between; font-size: .85rem; color: #64748b; }
.slider-submit-btn { align-self: center; padding: .6rem 1.5rem; }

/* Math input */
.math-input-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.math-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; }
.math-tool-btn { padding: .35rem .6rem; font-size: .9rem; background: #f1f5f9; color: #111; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; }
.math-tool-btn:hover:not(:disabled) { background: #e2e8f0; }
.math-answer-input { font-family: ui-monospace, "Consolas", monospace; font-size: 1rem; margin: 0; }
math-field.math-answer-input { display: block; width: 100%; min-height: 3.2rem; padding: .55rem; font-family: system-ui, sans-serif; font-size: 1.45rem; border: 1px solid #ccc; border-radius: 4px; color: #111; background: #fff; }
.math-answer-input.correct { border-color: #16a34a; background: #f0fdf4; }
.math-answer-input.wrong { border-color: #dc2626; background: #fef2f2; }
math-field.math-answer-input.correct { border-color: #16a34a; background: #f0fdf4; }
math-field.math-answer-input.wrong { border-color: #dc2626; background: #fef2f2; }
.math-input-error { min-height: 1rem; color: #dc2626; font-size: .85rem; text-align: center; }
.math-preview { min-height: 3rem; padding: .6rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px; text-align: center; overflow-x: auto; }
.math-preview-empty { color: #94a3b8; font-style: italic; }
.math-submit-btn { align-self: center; padding: .6rem 1.5rem; }
.math-hint-render { display: inline-block; }
.math-answer-render math-span { font-size: 1.05em; }
.ML__keyboard.is-visible { padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; }
.ML__keyboard.is-visible .MLK__plate { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }

/* Avatar picker */
.avatar-pick-title { text-align: center; font-size: 1.15rem; font-weight: 600; margin-bottom: .25rem; }
.avatar-pick-sub   { text-align: center; color: #64748b; font-size: .9rem; margin-bottom: .75rem; }
.avatar-card { display: flex; flex-direction: column; align-items: center; padding: .5rem .5rem .65rem; background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: transform .1s, border-color .15s, box-shadow .15s; }
.avatar-card:hover { border-color: #2563eb; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(37,99,235,.15); }
.avatar-card.selected { border-color: #16a34a; background: #f0fdf4; }
.avatar-card-name { font-size: .9rem; font-weight: 600; margin-top: .35rem; color: #111; }

/* Pad Pong avatar customizer (one screen: shape + color + ball) */
.pp-preview { display: flex; justify-content: center; padding: .8rem;
    background: #0f172a; border-radius: 10px; }
.pp-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #475569; margin: 1rem 0 .45rem; }
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 480px) { .pp-grid { grid-template-columns: repeat(4, 1fr); } }
.pp-card { padding: .5rem .3rem .55rem; }
.pp-card .avatar-card-name { font-size: .75rem; margin-top: .3rem; }
.pp-card canvas { display: block; margin: 0 auto; }
.pp-swatches { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pp-swatch { width: 34px; height: 34px; border-radius: 999px;
    border: 3px solid #e5e7eb; padding: 0; cursor: pointer; }
.pp-swatch.selected { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.3); }
.pp-swatch-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.pp-swatch-custom::-webkit-color-swatch-wrapper { padding: 0; opacity: 0; }
.pp-swatch-custom::-webkit-color-swatch { border: none; opacity: 0; }
#pp-save { display: block; margin: 1.25rem auto 0; background: #16a34a;
    font-size: 1.05rem; padding: .8rem 1.6rem; }
#pp-save:hover:not(:disabled) { background: #15803d; }

/* ─── Derby lobby + avatar customizer ─────────────────────────── */
.lobby-horse { display: flex; justify-content: center; margin: .25rem 0; }
.lobby-horse-name { text-align: center; font-size: 1.3rem; font-weight: 700; color: #0f172a; margin-bottom: .1rem; }
#btn-change-avatar { display: block; margin: 1rem auto 0; background: #7c3aed; }
#btn-change-avatar:hover:not(:disabled) { background: #6d28d9; }

.cz-preview { display: flex; justify-content: center; padding: .5rem; background: #f8fafc; border-radius: 8px; margin-bottom: .85rem; }
.cz-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: .45rem; }
.cz-horse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-height: 40vh; overflow-y: auto; overflow-x: hidden; padding: .15rem; margin-bottom: 1rem; }
.cz-horse-card { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .25rem; background: #fff; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cz-horse-card:hover { border-color: #c4b5fd; }
.cz-horse-card.selected { border-color: #7c3aed; background: #f5f3ff; box-shadow: 0 0 0 1px #7c3aed; }
.cz-horse-card-name { font-size: .8rem; font-weight: 600; color: #334155; }
/* Shrink the preview sprite so two cards fit a phone-width row. */
.cz-horse-card .horse-wrap.horse-preview { width: 100%; max-width: 112px; height: auto; aspect-ratio: 3 / 2; }
.cz-colors { display: flex; gap: .6rem; margin-bottom: 1rem; }
.cz-color-row { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .92rem; font-weight: 600; color: #334155; }
.cz-color-row input[type="color"] { width: 46px; height: 34px; padding: 0; margin: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: none; cursor: pointer; }
.cz-actions { display: flex; gap: .5rem; }
.cz-actions button { flex: 1; }
#btn-cz-cancel { background: #e5e7eb; color: #111; }
#btn-cz-cancel:hover:not(:disabled) { background: #d1d5db; }

/* Picture click */
.picture-click-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; margin: .25rem auto; cursor: crosshair; user-select: none; }
.picture-click-image { max-width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid #e5e7eb; }
.picture-click-marker { position: absolute; width: 18px; height: 18px; border: 3px solid #2563eb; background: rgba(37, 99, 235, .25); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.picture-click-marker.correct { border-color: #16a34a; background: rgba(22, 163, 74, .3); }
.picture-click-marker.wrong { border-color: #dc2626; background: rgba(220, 38, 38, .3); }
.picture-click-overlay { position: absolute; width: 16%; height: 16%; transform: translate(-50%, -50%); border: 2px dashed #16a34a; background: rgba(22, 163, 74, .12); border-radius: 50%; pointer-events: none; box-sizing: border-box; }
.picture-click-hint { text-align: center; font-size: .85rem; color: #64748b; margin: .25rem 0; }
.picture-click-submit-btn { display: block; margin: .5rem auto 0; padding: .6rem 1.5rem; }

/* Timer bar (derby answering phase) */
.timer-bar { background: #e5e7eb; border-radius: 4px; height: 8px; margin-bottom: 1rem; overflow: hidden; }
.timer-fill { height: 100%; background: #2563eb; transition: width 1s linear; }
.timer-fill.urgent { background: #dc2626; }
.timer-text { text-align: center; font-size: .85rem; color: #64748b; margin-bottom: .5rem; }

/* Upgrades panel (derby + padpong both use these classes) */
.upgrade-panel { padding-top: 0; }
.upgrade-coins { text-align: center; font-size: 1.1rem; margin-bottom: .75rem; }
.upgrade-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; gap: .5rem; }
.stat-label { font-size: .95rem; flex: 1; }
.upgrade-btn { padding: .4rem .8rem; font-size: .85rem; flex-shrink: 0; }

/* Shared status messages */
.status-message { text-align: center; font-size: 1.1rem; color: #64748b; padding: 2rem 0; }
.error { color: #dc2626; margin-top: .5rem; text-align: center; }

/* ─── Game-screen shell: phase banner + tabs ─────────────────── */
.phase-banner { text-align: center; font-size: .9rem; color: #0f172a;
    background: #e0f2fe; border: 1px solid #bae6fd; padding: .4rem .6rem;
    border-radius: 6px; margin-bottom: .75rem; }
.phase-banner.warn { background: #fef3c7; border-color: #fde68a; }
.phase-banner.urgent { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.phase-banner.hidden { display: none; }

.tab-bar { display: flex; gap: .25rem; margin-bottom: .75rem;
    border-bottom: 2px solid #e5e7eb; }
.tab-btn { flex: 1; padding: .6rem .4rem; font-size: .95rem; font-weight: 600;
    background: transparent; color: #64748b; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; border-radius: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
.tab-btn:hover:not(.active):not(:disabled) { background: #f1f5f9; color: #0f172a; }
.tab-btn:focus, .tab-btn:active { background: transparent !important; outline: none; box-shadow: none; }
.tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; background: transparent !important; }
.tab-btn:disabled { opacity: 0.45; cursor: default; }
.tab-btn .tab-dot { display: inline-block; width: .5rem; height: .5rem;
    border-radius: 50%; background: #22c55e; margin-left: .3rem;
    vertical-align: middle; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* While a Pad Pong round is being played: drop the header and tighten
   spacing so the playfield (pad at the bottom) fits on short screens. */
body.minigame-playing { align-items: flex-start; min-height: 100dvh; }
body.minigame-playing .card { padding: .5rem; }
body.minigame-playing #auth-nav-widget,
body.minigame-playing .card > h1 { display: none; }
body.minigame-playing .phase-banner { margin-bottom: .4rem; padding: .25rem .5rem; }
body.minigame-playing .tab-bar { margin-bottom: .4rem; }
.tab-empty { text-align: center; color: #64748b; padding: 1.5rem 0; }

/* ─── Finished-screen review ─────────────────────────────────── */
.review-q-row { padding: .65rem .8rem; margin-bottom: .5rem; border-radius: 6px;
    border: 1px solid #e5e7eb; background: #fff; }
.review-q-row.correct { border-color: #86efac; background: #f0fdf4; }
.review-q-row.wrong   { border-color: #fca5a5; background: #fef2f2; }
.review-q-row.skipped { border-color: #e5e7eb; background: #f8fafc; }
.review-q-row .q-body { font-size: .92rem; color: #0f172a; margin-bottom: .35rem; }
.review-q-row .q-pos  { color: #94a3b8; font-family: monospace; margin-right: .4rem; font-size: .85rem; }
.review-q-row .q-line { font-size: .82rem; color: #475569; display: flex;
    align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.review-q-row .q-line .label  { color: #94a3b8; min-width: 4.5rem; }
.review-q-row .q-line .val    { font-family: ui-monospace, monospace; }
.review-q-row.correct .q-line .val.mine    { color: #166534; }
.review-q-row.wrong   .q-line .val.mine    { color: #991b1b; }
.review-q-row .q-line .val.right { color: #166534; }
.review-q-row .q-line .val.skipped { color: #94a3b8; font-style: italic; }
.review-q-row .q-mark { display: inline-block; margin-right: .4rem; font-weight: 700; }
.review-q-row.correct .q-mark { color: #16a34a; }
.review-q-row.wrong   .q-mark { color: #dc2626; }

/* ─── Mobile podium (finished screen) ──────────────────────── */
.m-podium { display: flex; align-items: flex-end; justify-content: center;
    gap: .6rem; margin: .75rem 0 1rem; }
.m-podium-slot { display: flex; flex-direction: column; align-items: center; flex: 1; }
.m-podium-medal { font-size: 1.3rem; }
.m-podium-avatar { margin-bottom: .25rem; }
.m-podium-slot.p1 .m-podium-avatar { transform: scale(1.15); }
.m-podium-name { font-weight: 700; font-size: .8rem; text-align: center;
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-podium-pts { font-size: .75rem; color: #ca8a04; font-weight: 600; }
.m-podium-block { width: 100%; border-radius: 6px 6px 0 0; display: flex;
    align-items: center; justify-content: center; font-size: 1.2rem;
    font-weight: 800; color: rgba(0,0,0,.12); margin-top: .3rem; }
.m-podium-slot.p1 .m-podium-block { background: linear-gradient(to top, #b45309, #f59e0b); height: 60px; }
.m-podium-slot.p2 .m-podium-block { background: linear-gradient(to top, #94a3b8, #cbd5e1); height: 42px; }
.m-podium-slot.p3 .m-podium-block { background: linear-gradient(to top, #b45309, #d97706); height: 30px; }

.m-podium-slot.me .m-podium-name { color: #2563eb; }
.m-podium-slot.me .m-podium-block { box-shadow: 0 0 0 2px #2563eb; }

.m-standings-row { display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem; margin-bottom: .35rem; border-radius: 6px;
    background: #f8fafc; border: 1px solid #e5e7eb; }
.m-standings-row.me { background: #eff6ff; border-color: #93c5fd;
    box-shadow: 0 0 0 1px #93c5fd; }
.m-standings-pos { font-weight: 700; min-width: 2rem; font-size: .95rem; color: #64748b; }
.m-standings-name { flex: 1; font-weight: 600; font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-standings-row.me .m-standings-name { color: #2563eb; }
.m-standings-pts { color: #ca8a04; font-weight: 600; font-size: .85rem; }
.m-standings-sep { text-align: center; color: #94a3b8; font-size: .85rem;
    padding: .25rem 0; }

/* ─── Questions module — cooldown ring ──────────────────────── */
.questions-host { min-height: 160px; position: relative; }
.questions-loading { text-align: center; color: #94a3b8; padding: 2rem 0; }
.questions-cooldown { display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 1.5rem 0; gap: .5rem; }
.cooldown-ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.cooldown-track { fill: none; stroke: #e5e7eb; stroke-width: 8; }
.cooldown-progress { fill: none; stroke: #dc2626; stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset .1s linear; }
.cooldown-label { font-size: 1.6rem; font-weight: 700; color: #dc2626;
    font-variant-numeric: tabular-nums; margin-top: -0.3rem; }
.cooldown-sub { font-size: .9rem; color: #64748b; text-align: center; }
.cooldown-answer { font-size: .95rem; color: #16a34a; font-weight: 600; text-align: center; margin-top: .25rem; }

/* ─── Review question popup ────────────────────────────────── */
.review-q-row { cursor: pointer; }
.review-q-row:active { opacity: .7; }
.review-modal-overlay { display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 1000;
    align-items: center; justify-content: center; padding: 1rem; }
.review-modal-overlay.open { display: flex; }
.review-modal-content { background: #fff; border-radius: 12px; padding: 1.5rem 1.25rem;
    max-width: 420px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; }
.review-modal-close { position: absolute; top: .4rem; right: .6rem;
    background: none !important; border: none; font-size: 1.4rem;
    cursor: pointer; color: #94a3b8; padding: .25rem; line-height: 1; }
.review-modal-banner { text-align: center; font-weight: 700; font-size: 1.1rem; margin-bottom: .15rem; }
.review-modal-banner.correct { color: #16a34a; }
.review-modal-banner.wrong { color: #dc2626; }
.review-modal-time { text-align: center; font-size: .85rem; color: #64748b; margin-bottom: .75rem; }

/* Mobile podium fly-in */
@keyframes m-from-left  { from { transform: translateX(-100vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes m-from-right { from { transform: translateX(100vw);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes m-from-top   { from { transform: translateY(-50vh);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.m-podium-slot.p3 { animation: m-from-right .6s ease-out both; }
.m-podium-slot.p2 { animation: m-from-left  .6s ease-out .25s both; }
.m-podium-slot.p1 { animation: m-from-top   .6s ease-out .5s both; }

/* ─── Solo: practice (quiz) header bar ────────────────────────── */
#solo-quiz-bar { display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: .75rem; padding: .5rem .75rem;
    background: #f1f5f9; border-radius: 8px; }
#solo-quiz-progress { font-size: .9rem; font-weight: 600; color: #475569; }
#solo-quiz-finish { padding: .4rem .9rem; font-size: .85rem; background: #64748b; }
#solo-quiz-finish:hover:not(:disabled) { background: #475569; }

/* ─── Solo: Derby race view ───────────────────────────────────── */
#solo-race-screen h2 { text-align: center; font-size: 1.15rem;
    margin: .25rem 0 .75rem; color: #0f172a; }
.race-track { position: relative; background: #223046;
    border: 1px solid rgba(148,163,184,.2); border-radius: 12px; overflow: hidden; }
.race-track::after { content: ''; position: absolute; top: .5rem; bottom: .5rem;
    right: .5rem; width: 12px; border-radius: 3px; z-index: 1; opacity: .85;
    background: conic-gradient(#f8fafc 25%, #0f172a 0 50%, #f8fafc 0 75%, #0f172a 0) 0 0 / 6px 6px; }
.race-lane { position: absolute; left: .55rem; right: .55rem; top: .35rem;
    height: 6.5rem; background: #334155; border: 1px solid rgba(148,163,184,.15);
    border-radius: 9px; overflow: visible; transition: transform .4s ease-in-out; }
.race-horse { position: absolute; top: 50%; transform: translateY(-50%);
    left: 0; line-height: 0; }
.race-label { display: none; }   /* one horse in solo — label is redundant */
.race-finish-tag { position: absolute; right: .45rem; top: 50%;
    transform: translateY(-50%); font-weight: 900; color: #fbbf24;
    font-size: 1.05rem; z-index: 2; background: rgba(15,23,42,.8);
    border: 1px solid rgba(251,191,36,.35); border-radius: 999px; padding: .1rem .45rem; }
.race-results-list { margin-top: .25rem; }
.race-result-row { background: #f1f5f9; border-radius: 8px; padding: .6rem .8rem;
    margin-bottom: .4rem; display: flex; align-items: center; gap: .7rem; }
.result-position { font-size: 1.1rem; min-width: 3rem; font-weight: 700; }
.result-nick-block { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.result-nickname { font-weight: 600; }
.result-stats { font-size: .72rem; color: #64748b; font-family: ui-monospace, monospace; }
.result-time { color: #475569; font-variant-numeric: tabular-nums; }
.result-coins { color: #ca8a04; font-weight: 600; }
.solo-race-hint { text-align: center; font-size: .85rem; color: #94a3b8;
    margin-top: .75rem; }
#solo-derby-end { position: fixed; bottom: .7rem; right: .7rem; z-index: 60;
    font-size: .8rem; padding: .4rem .85rem; border-radius: 999px;
    background: rgba(71,85,105,.94); }
#solo-derby-end:hover:not(:disabled) { background: rgba(51,65,85,.97); }

/* ─── Solo: finished-screen result + leaderboard ──────────────── */
#solo-result { margin-bottom: 1rem; }
.solo-result-card { text-align: center; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.solo-result-label { font-size: .8rem; text-transform: uppercase;
    letter-spacing: .05em; color: #64748b; }
.solo-result-value { font-size: 1.8rem; font-weight: 800; color: #0f172a;
    font-variant-numeric: tabular-nums; }
.solo-pb-badge { display: inline-block; margin-top: .45rem; background: #fbbf24;
    color: #78350f; font-weight: 700; font-size: .8rem; padding: .2rem .75rem;
    border-radius: 999px; }
.solo-lb-title { font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #475569; margin-bottom: .5rem; }
.solo-lb-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .2rem;
    font-size: .9rem; border-bottom: 1px solid #f1f5f9; }
.solo-lb-row:last-child { border-bottom: none; }
.solo-lb-row.me { font-weight: 700; color: #1d4ed8; }
.solo-lb-rank { min-width: 2.2rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.solo-lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-lb-metric { font-variant-numeric: tabular-nums; font-weight: 600; }
.solo-lb-sep { text-align: center; color: #94a3b8; padding: .15rem 0; }
.solo-lb-empty { color: #94a3b8; font-style: italic; font-size: .85rem; }