@media (prefers-contrast: more) {
    :root {
        --card-edge: #65776D;
        --ink: #FFFFFF;
        --ink-soft: #D7DFDA;
        --ivory-on-felt: #FFFFFF;
        --ivory-dim: rgba(255, 255, 255, 0.9);
        --chart-text: #E2E8E4;
        --chart-grid: rgba(255, 255, 255, 0.22);
        --chart-axis: rgba(255, 255, 255, 0.5);
    }
}

/*
 * iOS 26 Safari may paint the browser-owned top inset with a solid page tint
 * instead of extending the CSS background image into it. Start every mobile
 * full-screen surface with that same solid color, then blend into the felt
 * gradient inside the document so the browser/content boundary is invisible.
 */
@media (max-width: 768px) {
    html,
    .app-boot,
    .login-modal,
    .session-editor-page {
        background:
            linear-gradient(
                to bottom,
                var(--felt-800) 0,
                var(--felt-800) 20px,
                var(--felt-800-transparent) 140px
            ),
            radial-gradient(120% 90% at 50% -10%, rgba(20, 88, 63, 0.85) 0%, transparent 55%),
            radial-gradient(160% 120% at 50% 120%, rgba(6, 35, 26, 0.95) 0%, transparent 60%),
            var(--felt-800);
        background-attachment: fixed;
    }
}