/* ── Disable heavy GPU animations on mobile ─────────────── */
@media (max-width: 820px) {
    .typer::before        { animation: none; }
    .race-sea-bg::before  { animation: none; }
    .race-sea-bg::after   { animation: none; }
}

/* ── Tablet / narrow desktop (820px) ────────────────────── */
@media (max-width: 820px) {
    .app-layout   { flex-direction: column; }
    .mode-panel   { width: 100%; flex: none; position: static; }
    .mode-tabs    { justify-content: center; }
    .row-options  { flex-direction: row; }
    .row-btn      { flex: 1; align-items: center; text-align: center; }
    .letter-grid  { grid-template-columns: repeat(9, 1fr); }
}

/* ── Narrow (680px) ──────────────────────────────────────── */
@media (max-width: 680px) {
    .info-bar { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}

/* ── Results grid (560px) ────────────────────────────────── */
@media (max-width: 560px) {
    .results-card { padding: 28px 20px; }
    .results-grid { grid-template-columns: repeat(2, 1fr); }
    .results-grid > div:nth-child(3) { grid-column: 1 / -1; }
}

/* ── Tab labels (540px) ──────────────────────────────────── */
@media (max-width: 540px) {
    .main-area-tab .tab-label { display: none; }
    .main-area-tab            { padding: 10px 4px; }
}

/* ── Mobile (520px) ──────────────────────────────────────── */
@media (max-width: 520px) {
    body   { padding: 12px 14px; }
    .typer { padding: 16px; }

    .typebox { font-size: 1.2rem; padding: 14px; }

    .site-logo--hero { width: 180px; }
    .site-tagline    { display: none; }

    .top-bar       { gap: 6px; }
    .top-bar-right { gap: 4px; }

    footer { flex-direction: column; align-items: flex-start; gap: 8px; }

    .action-panel      { flex-direction: column; gap: 10px; padding: 12px 14px; }
    .controls          { width: 100%; justify-content: center; gap: 10px; }
    .controls button   { flex: 1; min-width: 0; width: auto; }
    .action-panel-right { width: 100%; justify-content: center; flex-wrap: wrap; gap: 8px; }

    .difficulty-selector { gap: 3px; }
    .diff-btn            { padding: 6px 8px; font-size: 0.68rem; }

    .main-area-tab { padding: 8px 4px; font-size: 0.72rem; }

    .rain-field      { height: 260px; }
    .rain-hud        { flex-direction: column; gap: 4px; }
    .rain-health-wrap { width: 100%; }

    .fish-opt    { font-size: 1rem; aspect-ratio: 1; }

    .results-card { padding: 20px 16px; }
    .kb-reveal-btn { padding: 4px 0; }
}