/* ============================================================
   Book Battle AI — Public Styles
   Font: Playfair Display (headings) + DM Sans (body)
   Palette: Cream white, Ink black, Tournament gold, Slate blue
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --bba-bg:         #FAFAF8;
    --bba-surface:    #FFFFFF;
    --bba-ink:        #141414;
    --bba-ink-soft:   #5A5A5A;
    --bba-gold:       #C9973A;
    --bba-gold-light: #F5E9D0;
    --bba-blue:       #1E3A5F;
    --bba-blue-mid:   #2D5F9E;
    --bba-blue-light: #EAF1FA;
    --bba-red:        #D94F3D;
    --bba-green:      #2E7D52;
    --bba-border:     #E4E2DC;
    --bba-shadow:     0 2px 16px rgba(0,0,0,0.08);
    --bba-shadow-lg:  0 8px 40px rgba(0,0,0,0.13);
    --bba-radius:     12px;
    --bba-radius-sm:  8px;
    --bba-font-head:  'Playfair Display', Georgia, serif;
    --bba-font-body:  'DM Sans', system-ui, sans-serif;
    --bba-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset scope ── */
.bba-wrap * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.bba-wrap {
    font-family: var(--bba-font-body);
    color: var(--bba-ink);
    background: var(--bba-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   HERO WIDGET
   ============================================================ */
.bba-hero {
    background: var(--bba-blue);
    color: #fff;
    padding: 60px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.bba-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(201,151,58,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.bba-hero__eyebrow {
    font-family: var(--bba-font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bba-gold);
    margin-bottom: 14px;
}
.bba-hero__title {
    font-family: var(--bba-font-head);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 16px;
}
.bba-hero__title em {
    font-style: italic;
    color: var(--bba-gold);
}
.bba-hero__sub {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    max-width: 500px;
    margin: 0 auto 32px;
}
.bba-hero__bullets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 36px;
    list-style: none;
}
.bba-hero__bullets li {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    gap: 6px;
}
.bba-hero__bullets li::before {
    content: '✦';
    color: var(--bba-gold);
    font-size: 10px;
}
.bba-hero__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Daily challenge card in hero ── */
.bba-daily-card {
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    padding: 24px 28px;
    max-width: 480px;
    margin: 48px auto 0;
    text-align: left;
    box-shadow: var(--bba-shadow-lg);
    position: relative;
}
.bba-daily-card__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bba-gold);
    margin-bottom: 8px;
}
.bba-daily-card__title {
    font-family: var(--bba-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--bba-ink);
    margin-bottom: 14px;
}
.bba-daily-card__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.bba-daily-card__meta span {
    font-size: 13px;
    color: var(--bba-ink-soft);
    display: flex;
    align-items: center;
    gap: 5px;
}
.bba-daily-card__reset {
    font-size: 13px;
    color: var(--bba-ink-soft);
    margin-bottom: 18px;
}
.bba-daily-card__reset strong {
    color: var(--bba-red);
}

/* ── Leaderboard mini ── */
.bba-hero-lb {
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    padding: 20px 24px;
    max-width: 480px;
    margin: 20px auto 0;
    box-shadow: var(--bba-shadow);
}
.bba-hero-lb__title {
    font-family: var(--bba-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--bba-ink);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bba-hero-lb__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bba-border);
    font-size: 14px;
}
.bba-hero-lb__row:last-child { border-bottom: none; }
.bba-hero-lb__rank {
    width: 24px;
    font-weight: 600;
    color: var(--bba-ink-soft);
    text-align: center;
}
.bba-hero-lb__rank.gold   { color: var(--bba-gold); }
.bba-hero-lb__rank.silver { color: #9CA3AF; }
.bba-hero-lb__rank.bronze { color: #B45309; }
.bba-hero-lb__name { flex: 1; font-weight: 500; }
.bba-hero-lb__score { font-weight: 600; color: var(--bba-blue-mid); }

/* ============================================================
   QUIZ CONTAINER
   ============================================================ */
.bba-quiz-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 16px 64px;
}

/* ── Quiz header bar ── */
.bba-quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.bba-quiz-header__left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.bba-quiz-progress {
    font-size: 14px;
    font-weight: 600;
    color: var(--bba-ink-soft);
}
.bba-quiz-score-live {
    font-family: var(--bba-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--bba-gold);
    background: var(--bba-gold-light);
    padding: 4px 12px;
    border-radius: 20px;
}
.bba-streak-badge {
    font-size: 13px;
    font-weight: 600;
    color: var(--bba-red);
    background: #FEF2F2;
    padding: 3px 10px;
    border-radius: 20px;
    display: none;
}
.bba-streak-badge.visible { display: inline-block; }

/* ── Timer ── */
.bba-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bba-blue);
}
.bba-timer__bar-wrap {
    width: 120px;
    height: 6px;
    background: var(--bba-border);
    border-radius: 99px;
    overflow: hidden;
}
.bba-timer__bar {
    height: 100%;
    background: var(--bba-blue-mid);
    border-radius: 99px;
    transition: width 1s linear, background 0.5s ease;
}
.bba-timer__bar.warning { background: var(--bba-gold); }
.bba-timer__bar.danger  { background: var(--bba-red); }
.bba-timer__digits { min-width: 36px; text-align: right; }
.bba-timer__digits.danger { color: var(--bba-red); }

/* Progress track */
.bba-progress-track {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
}
.bba-progress-dot {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: var(--bba-border);
    transition: var(--bba-transition);
}
.bba-progress-dot.correct  { background: var(--bba-green); }
.bba-progress-dot.wrong    { background: var(--bba-red); }
.bba-progress-dot.active   { background: var(--bba-blue-mid); }

/* ── Question card ── */
.bba-question-card {
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    box-shadow: var(--bba-shadow);
    padding: 36px 40px;
    margin-bottom: 20px;
    animation: bba-slide-in 0.3s ease;
}
@keyframes bba-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bba-question-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.bba-category-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bba-blue-mid);
    background: var(--bba-blue-light);
    padding: 3px 10px;
    border-radius: 99px;
}
.bba-difficulty-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 99px;
}
.bba-difficulty-tag.easy   { color: var(--bba-green); background: #DCFCE7; }
.bba-difficulty-tag.medium { color: var(--bba-gold);  background: var(--bba-gold-light); }
.bba-difficulty-tag.hard   { color: var(--bba-red);   background: #FEF2F2; }

.bba-question-text {
    font-family: var(--bba-font-head);
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--bba-ink);
    margin-bottom: 8px;
}

/* ── Answer buttons ── */
.bba-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}
@media (max-width: 560px) {
    .bba-answers { grid-template-columns: 1fr; }
    .bba-question-card { padding: 24px 20px; }
}
.bba-answer-btn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bba-bg);
    border: 2px solid var(--bba-border);
    border-radius: var(--bba-radius-sm);
    cursor: pointer;
    text-align: left;
    font-family: var(--bba-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--bba-ink);
    transition: var(--bba-transition);
    line-height: 1.4;
    width: 100%;
}
.bba-answer-btn:hover:not(:disabled) {
    border-color: var(--bba-blue-mid);
    background: var(--bba-blue-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30,58,95,0.1);
}
.bba-answer-btn:active:not(:disabled) { transform: translateY(0); }
.bba-answer-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--bba-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bba-ink-soft);
    transition: var(--bba-transition);
}
.bba-answer-btn:hover:not(:disabled) .bba-answer-letter {
    background: var(--bba-blue-mid);
    color: #fff;
}
.bba-answer-btn.correct {
    border-color: var(--bba-green);
    background: #F0FDF4;
}
.bba-answer-btn.correct .bba-answer-letter {
    background: var(--bba-green);
    color: #fff;
}
.bba-answer-btn.wrong {
    border-color: var(--bba-red);
    background: #FFF5F5;
}
.bba-answer-btn.wrong .bba-answer-letter {
    background: var(--bba-red);
    color: #fff;
}
.bba-answer-btn:disabled { cursor: default; }

/* Explanation box */
.bba-explanation {
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--bba-gold-light);
    border-left: 4px solid var(--bba-gold);
    border-radius: 0 var(--bba-radius-sm) var(--bba-radius-sm) 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bba-ink);
    display: none;
    animation: bba-fade-in 0.3s ease;
}
.bba-explanation.visible { display: block; }
@keyframes bba-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.bba-explanation strong { color: var(--bba-blue); }

/* Next button */
.bba-next-btn {
    display: block;
    width: 100%;
    padding: 15px 24px;
    background: var(--bba-blue);
    color: #fff;
    border: none;
    border-radius: var(--bba-radius-sm);
    font-family: var(--bba-font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--bba-transition);
    margin-top: 16px;
    display: none;
}
.bba-next-btn.visible { display: block; }
.bba-next-btn:hover { background: var(--bba-blue-mid); transform: translateY(-1px); }

/* ============================================================
   RESULTS SCREEN
   ============================================================ */
.bba-results {
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    box-shadow: var(--bba-shadow-lg);
    padding: 48px 40px;
    text-align: center;
    animation: bba-slide-in 0.4s ease;
    display: none;
}
.bba-results.visible { display: block; }
.bba-results__emoji { font-size: 56px; margin-bottom: 16px; }
.bba-results__title {
    font-family: var(--bba-font-head);
    font-size: 32px;
    font-weight: 900;
    color: var(--bba-ink);
    margin-bottom: 8px;
}
.bba-results__subtitle {
    font-size: 16px;
    color: var(--bba-ink-soft);
    margin-bottom: 32px;
}
.bba-results__score-big {
    font-family: var(--bba-font-head);
    font-size: 72px;
    font-weight: 900;
    color: var(--bba-blue);
    line-height: 1;
    margin-bottom: 4px;
}
.bba-results__score-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bba-ink-soft);
    margin-bottom: 28px;
}
.bba-results__stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bba-bg);
    border-radius: var(--bba-radius-sm);
}
.bba-results__stat { text-align: center; }
.bba-results__stat-value {
    font-family: var(--bba-font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--bba-ink);
}
.bba-results__stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bba-ink-soft);
    margin-top: 2px;
}

/* Badges earned */
.bba-badges-earned {
    margin-bottom: 28px;
}
.bba-badges-earned__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bba-gold);
    margin-bottom: 12px;
}
.bba-badges-earned__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.bba-badge-item {
    background: var(--bba-gold-light);
    border: 1px solid var(--bba-gold);
    border-radius: var(--bba-radius-sm);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bba-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bba-badge-item__icon { font-size: 20px; }

/* Rank display */
.bba-rank-display {
    font-size: 16px;
    color: var(--bba-ink-soft);
    margin-bottom: 24px;
}
.bba-rank-display strong {
    font-family: var(--bba-font-head);
    font-size: 24px;
    color: var(--bba-blue);
}

.bba-results__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.bba-leaderboard {
    max-width: 660px;
    margin: 0 auto;
}
.bba-leaderboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.bba-leaderboard__title {
    font-family: var(--bba-font-head);
    font-size: 26px;
    font-weight: 900;
    color: var(--bba-ink);
}
.bba-lb-tabs {
    display: flex;
    gap: 6px;
}
.bba-lb-tab {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--bba-border);
    background: none;
    color: var(--bba-ink-soft);
    transition: var(--bba-transition);
    font-family: var(--bba-font-body);
}
.bba-lb-tab:hover, .bba-lb-tab.active {
    background: var(--bba-blue);
    border-color: var(--bba-blue);
    color: #fff;
}
.bba-leaderboard__table {
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    box-shadow: var(--bba-shadow);
    overflow: hidden;
}
.bba-lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bba-border);
    transition: var(--bba-transition);
}
.bba-lb-row:last-child { border-bottom: none; }
.bba-lb-row:hover { background: var(--bba-bg); }
.bba-lb-row.top-3 { background: var(--bba-gold-light); }

.bba-lb-rank {
    width: 32px;
    font-family: var(--bba-font-head);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    color: var(--bba-ink-soft);
}
.bba-lb-rank.rank-1 { color: var(--bba-gold); }
.bba-lb-rank.rank-2 { color: #9CA3AF; }
.bba-lb-rank.rank-3 { color: #B45309; }

.bba-lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bba-border);
}
.bba-lb-name {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
}
.bba-lb-badges { font-size: 15px; }
.bba-lb-score {
    font-family: var(--bba-font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--bba-blue);
}
.bba-lb-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--bba-ink-soft);
    font-size: 15px;
}
.bba-lb-empty__icon { font-size: 40px; margin-bottom: 12px; }

/* ============================================================
   PRACTICE MODE PICKER
   ============================================================ */
.bba-practice-picker {
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    box-shadow: var(--bba-shadow);
    padding: 36px 40px;
    max-width: 560px;
    margin: 0 auto;
}
.bba-practice-picker__title {
    font-family: var(--bba-font-head);
    font-size: 26px;
    font-weight: 900;
    color: var(--bba-ink);
    margin-bottom: 24px;
}
.bba-form-group {
    margin-bottom: 18px;
}
.bba-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bba-ink-soft);
    margin-bottom: 6px;
}
.bba-form-group select,
.bba-form-group input[type="number"] {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--bba-border);
    border-radius: var(--bba-radius-sm);
    font-family: var(--bba-font-body);
    font-size: 15px;
    color: var(--bba-ink);
    background: var(--bba-bg);
    outline: none;
    transition: var(--bba-transition);
}
.bba-form-group select:focus,
.bba-form-group input:focus {
    border-color: var(--bba-blue-mid);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--bba-radius-sm);
    font-family: var(--bba-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--bba-transition);
    text-decoration: none;
    line-height: 1;
}
.bba-btn:hover { transform: translateY(-2px); }
.bba-btn:active { transform: translateY(0); }

.bba-btn--primary {
    background: var(--bba-blue);
    color: #fff;
    border-color: var(--bba-blue);
}
.bba-btn--primary:hover { background: var(--bba-blue-mid); border-color: var(--bba-blue-mid); }

.bba-btn--gold {
    background: var(--bba-gold);
    color: #fff;
    border-color: var(--bba-gold);
}
.bba-btn--gold:hover { background: #B8842E; border-color: #B8842E; }

.bba-btn--outline {
    background: transparent;
    color: var(--bba-blue);
    border-color: var(--bba-blue);
}
.bba-btn--outline:hover { background: var(--bba-blue-light); }

.bba-btn--outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.bba-btn--outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.bba-btn--lg { padding: 17px 36px; font-size: 17px; }
.bba-btn--sm { padding: 8px 16px; font-size: 13px; }

/* ============================================================
   STATES & UTILITIES
   ============================================================ */
.bba-loading {
    text-align: center;
    padding: 60px 24px;
    color: var(--bba-ink-soft);
}
.bba-loading__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bba-border);
    border-top-color: var(--bba-blue);
    border-radius: 50%;
    animation: bba-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes bba-spin { to { transform: rotate(360deg); } }

.bba-error {
    background: #FFF5F5;
    border: 1px solid var(--bba-red);
    color: var(--bba-red);
    padding: 14px 18px;
    border-radius: var(--bba-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}
.bba-info {
    background: var(--bba-blue-light);
    border: 1px solid var(--bba-blue-mid);
    color: var(--bba-blue);
    padding: 14px 18px;
    border-radius: var(--bba-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

/* ============================================================
   REVIEW LIST (results screen)
   ============================================================ */
.bba-review {
    text-align: left;
    margin-top: 32px;
}
.bba-review__title {
    font-family: var(--bba-font-head);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--bba-ink);
}
.bba-review-item {
    padding: 16px 18px;
    border-radius: var(--bba-radius-sm);
    margin-bottom: 10px;
    border-left: 4px solid var(--bba-border);
    background: var(--bba-bg);
}
.bba-review-item.correct { border-left-color: var(--bba-green); }
.bba-review-item.wrong   { border-left-color: var(--bba-red); }
.bba-review-item__q { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.bba-review-item__answers { font-size: 13px; color: var(--bba-ink-soft); }
.bba-review-item__answers .your-ans   { color: var(--bba-red); }
.bba-review-item__answers .correct-ans { color: var(--bba-green); font-weight: 600; }
.bba-review-item__expl {
    font-size: 13px;
    color: var(--bba-ink-soft);
    margin-top: 6px;
    font-style: italic;
}

/* ============================================================
   WAITING STATE (already played)
   ============================================================ */
.bba-already-played {
    text-align: center;
    background: var(--bba-surface);
    border-radius: var(--bba-radius);
    box-shadow: var(--bba-shadow);
    padding: 48px 32px;
}
.bba-already-played__icon { font-size: 52px; margin-bottom: 16px; }
.bba-already-played__title {
    font-family: var(--bba-font-head);
    font-size: 28px;
    font-weight: 900;
    color: var(--bba-ink);
    margin-bottom: 10px;
}
.bba-already-played__text { color: var(--bba-ink-soft); font-size: 16px; margin-bottom: 28px; }
.bba-countdown {
    font-family: var(--bba-font-head);
    font-size: 40px;
    font-weight: 700;
    color: var(--bba-blue);
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .bba-results { padding: 32px 20px; }
    .bba-results__score-big { font-size: 56px; }
    .bba-leaderboard__header { flex-direction: column; align-items: flex-start; }
    .bba-practice-picker { padding: 24px 20px; }
    .bba-daily-card { padding: 20px; }
}