/*
 * Refined presentation mode.
 *
 * Opt-in, scoped entirely to html.design-improved so the Original (legacy)
 * and Edition modes are never affected. The shared base stylesheet
 * (public_html/api/header.php) is driven by CSS custom properties
 * (--bg, --surface, --text, --gray-*, --radius, --shadow*, --transition);
 * redefining those tokens here cascades a calmer, more accessible, more
 * spatially-considered look across every standard-layout surface, and the
 * component sections below refine the layout of the pieces that matter most:
 * navigation, the news front page, article reading, settings, profiles and
 * the leaderboard. The bespoke game/error overrides from the original file
 * are preserved verbatim at the end.
 */

/* ===================================================
   1. DESIGN TOKENS — the foundation everything inherits
   =================================================== */
html.design-improved {
    /* Green-tinted neutral ramp (luminance preserved for contrast).
       The bespoke dark pages (market.php, burn.php, styleshopnew.php) do NOT
       read --gray-*/--radius/--shadow*/--transition, so refining those here
       cascades safely across the standard light surfaces only. */
    --gray-50:  #f5f8f6;
    --gray-100: #eef3f0;
    --gray-200: #e2eae6;
    --gray-300: #cedbd4;
    --gray-400: #9aa9a2;
    --gray-500: #65756c;
    --gray-600: #46554d;
    --gray-700: #33413a;
    --gray-800: #1d2a24;
    --gray-900: #121d18;

    /* Light surfaces (not consumed by the bespoke dark pages) */
    --bg:      #f2f7f4;
    --surface: #ffffff;

    /* Refined-mode-only tokens. The --ri- prefix avoids ANY collision with
       the semantic colour tokens (--text/--text-muted/--accent/--accent-hover)
       that the bespoke dark themes redefine with their own values — those are
       intentionally left untouched here. */
    --ri-accent:       #047857;
    --ri-accent-hover: #065f46;
    --ri-accent-soft:  rgba(4, 120, 87, 0.08);
    --ri-accent-line:  rgba(4, 120, 87, 0.16);
    --ri-surface-2:    #f6faf8;
    --ri-ring:         0 0 0 3px rgba(4, 120, 87, 0.18);
    --ri-ease:         cubic-bezier(0.16, 1, 0.3, 1);

    /* Shape — slightly larger, consistent radii */
    --radius:    16px;
    --radius-sm: 10px;
    --radius-lg: 22px;

    /* Elevation — flatter, softer, layered (refined, not heavy) */
    --shadow-sm: 0 1px 2px rgba(18, 40, 30, 0.05), 0 1px 1px rgba(18, 40, 30, 0.03);
    --shadow:    0 2px 8px rgba(18, 40, 30, 0.05), 0 10px 26px rgba(18, 40, 30, 0.055);
    --shadow-lg: 0 10px 28px rgba(18, 40, 30, 0.08), 0 26px 60px rgba(18, 40, 30, 0.09);

    /* Motion */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    color-scheme: light;
}

/* ===================================================
   2. BASE TYPOGRAPHY & BODY
   =================================================== */
html.design-improved body {
    color: var(--gray-800);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(4, 120, 87, 0.06), transparent 55%),
        linear-gradient(180deg, #f6faf8 0%, var(--bg) 38%, #eef4f0 100%);
    background-attachment: fixed;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

html.design-improved h1,
html.design-improved h2,
html.design-improved h3,
html.design-improved .page-title,
html.design-improved .article-title,
html.design-improved .hero-card h1,
html.design-improved .settings-title,
html.design-improved .card h2 {
    letter-spacing: -0.018em;
    text-wrap: balance;
}

html.design-improved p,
html.design-improved .news-card-excerpt,
html.design-improved .article-content p {
    text-wrap: pretty;
}

/* Links keep the site's base emerald so the bespoke dark pages, which give
   their own meaning to anchor colour, are left untouched; content links that
   benefit from the refined accent are restyled explicitly per-component. */

html.design-improved ::selection {
    background: rgba(4, 120, 87, 0.16);
    color: var(--gray-900);
}

/* Accessible, consistent keyboard focus */
html.design-improved a:focus-visible,
html.design-improved button:focus-visible,
html.design-improved input:focus-visible,
html.design-improved select:focus-visible,
html.design-improved textarea:focus-visible,
html.design-improved [tabindex]:focus-visible {
    outline: 2px solid var(--ri-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ===================================================
   3. LAYOUT / CONTAINER
   =================================================== */
html.design-improved .container {
    max-width: 1060px;
    padding: 2.25rem 1.35rem 4.5rem;
}
html.design-improved .settings-wrap {
    max-width: 1000px;
}

/* ===================================================
   4. NAVIGATION
   =================================================== */
html.design-improved .site-nav {
    background: linear-gradient(180deg, #0a261d 0%, #082019 100%);
    border-bottom: 1px solid var(--ri-accent-line);
    box-shadow: 0 6px 22px rgba(6, 36, 26, 0.18);
}

html.design-improved .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
}

html.design-improved .nav-brand-name {
    color: #eafaf2;
}
html.design-improved .nav-brand-name em {
    color: #4ade9c;
}

html.design-improved .nav-link,
html.design-improved .nav-dropdown-toggle {
    color: #aebeb4;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}
html.design-improved .nav-link:hover,
html.design-improved .nav-dropdown-toggle:hover,
html.design-improved .nav-dropdown.open .nav-dropdown-toggle {
    color: #f3fbf7;
    background: rgba(255, 255, 255, 0.07);
}
html.design-improved .nav-link.active,
html.design-improved .nav-dropdown-toggle.active {
    color: #4ade9c;
    background: rgba(74, 222, 156, 0.12);
}

html.design-improved .nav-balance-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 9px;
}

html.design-improved .nav-dropdown-menu {
    background: #0c241c;
    border-color: var(--ri-accent-line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

html.design-improved .nav-drawer {
    background: #082019;
    border-left-color: var(--ri-accent-line);
}

/* ===================================================
   5. HERO CARD
   =================================================== */
html.design-improved .hero-card {
    background:
        radial-gradient(130% 120% at 88% -10%, rgba(110, 231, 183, 0.28), transparent 55%),
        linear-gradient(140deg, #059669 0%, #047857 46%, #065f46 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(4, 78, 58, 0.22);
    padding: 2.75rem 2.75rem 2.4rem;
}
html.design-improved .hero-card h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight: 800;
}
html.design-improved .hero-card .username {
    color: #d1fae5;
}
html.design-improved .hero-subtitle {
    opacity: 0.92;
    font-size: 1.08rem;
}
html.design-improved .hero-actions {
    gap: 0.85rem;
    margin-top: 0.25rem;
}

/* ===================================================
   6. BUTTONS
   =================================================== */
html.design-improved .btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform var(--transition), box-shadow var(--transition),
        background var(--transition), border-color var(--transition), color var(--transition);
}
html.design-improved .btn-primary {
    box-shadow: 0 6px 16px rgba(4, 78, 58, 0.16);
}
html.design-improved .hero-card .btn-primary {
    color: var(--ri-accent-hover);
}
html.design-improved .btn-outline {
    color: var(--ri-accent);
    border-color: var(--ri-accent-line);
    background: var(--surface);
}
html.design-improved .btn-outline:hover {
    color: var(--ri-accent-hover);
    border-color: var(--ri-accent);
    background: var(--ri-accent-soft);
}
html.design-improved .btn-ghost {
    border-radius: var(--radius-sm);
}
html.design-improved .btn:hover {
    transform: translateY(-1px);
}
html.design-improved .btn:active {
    transform: translateY(0) scale(0.98);
}

/* ===================================================
   7. PAGE HEADER — clean editorial header (flatter than a banner)
   =================================================== */
html.design-improved .page-header {
    position: relative;
    margin-bottom: 1.75rem;
    padding: 0 0 1.15rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    box-shadow: none;
}
html.design-improved .page-title {
    color: var(--gray-900);
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    font-weight: 800;
}
html.design-improved .page-title-icon {
    color: var(--ri-accent);
}
html.design-improved .page-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: 0.4rem;
}

/* ===================================================
   8. CARDS & CARD GRID
   =================================================== */
html.design-improved .card-grid {
    gap: 1.35rem;
}
html.design-improved .card,
html.design-improved .news-toolbar,
html.design-improved .profiles-toolbar,
html.design-improved .news-streak-leaderboard,
html.design-improved .comment,
html.design-improved .comment-form,
html.design-improved .profile-section,
html.design-improved .edit-section,
html.design-improved .settings-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
html.design-improved .card {
    padding: 1.85rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
html.design-improved .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--ri-accent-line);
}
html.design-improved .card h2 {
    color: var(--gray-900);
    font-size: 1.2rem;
}
html.design-improved .card-icon {
    font-size: 1.85rem;
}

html.design-improved .admin-banner {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ===================================================
   9. NEWS STREAK LEADERBOARD PANEL
   =================================================== */
html.design-improved .news-streak-leaderboard {
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.5rem;
}
html.design-improved .news-streak-leaderboard h2 {
    color: var(--gray-900);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}
html.design-improved .news-streak-leaderboard p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.65rem;
}
html.design-improved .news-streak-leaderboard ol {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.3rem;
    font-size: 0.92rem;
}

/* ===================================================
   10. NEWS TOOLBAR / SEARCH / FILTERS
   =================================================== */
html.design-improved .news-toolbar,
html.design-improved .profiles-toolbar {
    padding: 0.85rem 1.05rem;
    box-shadow: var(--shadow-sm);
}
html.design-improved .filter-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
html.design-improved .search-input,
html.design-improved .filter-select,
html.design-improved .settings-select,
html.design-improved .settings-input,
html.design-improved .settings-textarea,
html.design-improved .form-input,
html.design-improved .form-textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    background: var(--ri-surface-2);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
html.design-improved .search-input:focus,
html.design-improved .filter-select:focus,
html.design-improved .settings-select:focus,
html.design-improved .settings-input:focus,
html.design-improved .settings-textarea:focus,
html.design-improved .form-input:focus,
html.design-improved .form-textarea:focus {
    border-color: var(--ri-accent);
    box-shadow: var(--ri-ring);
    background: var(--surface);
    outline: none;
}

/* ===================================================
   11. NEWS FRONT PAGE — lead + briefing grid (shown in all modes,
        styled here so Refined gets a real front-page layout)
   =================================================== */
html.design-improved .edition-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    margin: 0 0 0.7rem;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ri-accent);
}
html.design-improved .edition-section-label::before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ri-accent);
}

html.design-improved .edition-front-page {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin: 1.35rem 0 1.6rem;
}
html.design-improved .edition-front-page--solo {
    grid-template-columns: 1fr;
}
html.design-improved .edition-front-page__lead,
html.design-improved .edition-front-page__briefing {
    min-width: 0;
}
html.design-improved .edition-front-page__briefing {
    display: grid;
    align-content: start;
    gap: 0.9rem;
}

html.design-improved .edition-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0 0.9rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--gray-200);
}
html.design-improved .edition-feed-head .edition-section-label {
    margin-bottom: 0;
}

/* Lead = vertical feature card */
html.design-improved .news-card--lead {
    flex-direction: column;
}
html.design-improved .news-card--lead .news-card-thumb {
    width: 100%;
    min-height: 300px;
}
html.design-improved .news-card--lead .news-card-body {
    padding: 1.5rem 1.75rem 1.75rem;
}
html.design-improved .news-card--lead .news-card-title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.22;
}
html.design-improved .news-card--lead .news-card-excerpt {
    font-size: 0.97rem;
    -webkit-line-clamp: 4;
}

/* Briefing = compact digest cards */
html.design-improved .news-card--briefing .news-card-thumb {
    width: 96px;
    min-height: 96px;
}
html.design-improved .news-card--briefing .news-card-body {
    padding: 0.8rem 0.95rem;
    gap: 0.4rem;
}
html.design-improved .news-card--briefing .news-card-title {
    font-size: 1rem;
    line-height: 1.3;
}
html.design-improved .news-card--briefing .news-card-metrics,
html.design-improved .news-card--briefing .news-card-tags,
html.design-improved .news-card--briefing .news-card-excerpt {
    display: none;
}

/* ===================================================
   12. NEWS CARDS (feed)
   =================================================== */
html.design-improved .news-list {
    gap: 1.1rem;
}
html.design-improved .news-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
html.design-improved .news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--ri-accent-line);
}
html.design-improved .news-card-thumb {
    width: 210px;
    background: var(--gray-100);
}
html.design-improved .news-card-body {
    padding: 1.3rem 1.55rem;
    gap: 0.55rem;
}
html.design-improved .news-card-title {
    color: var(--gray-900);
    font-size: 1.18rem;
    line-height: 1.34;
}
html.design-improved .news-card-meta {
    gap: 0.5rem;
    color: var(--text-muted);
}
html.design-improved .meta-id {
    background: var(--ri-accent-soft);
    color: var(--ri-accent);
    border-radius: 6px;
    font-weight: 700;
}
html.design-improved .meta-category {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--gray-600);
}
html.design-improved .news-card-metrics {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
html.design-improved .news-card-tags {
    font-size: 0.76rem;
    color: var(--ri-accent);
    font-weight: 600;
}
html.design-improved .news-card-excerpt {
    color: var(--gray-600);
    font-size: 0.9rem;
}
html.design-improved .news-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

html.design-improved .news-page-indicator {
    color: var(--text-muted);
}

/* ===================================================
   13. ARTICLE READING VIEW — a calm, centred reading column
   =================================================== */
html.design-improved .article-view {
    max-width: 880px;
    margin-inline: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
html.design-improved .breadcrumb,
html.design-improved .comments-section {
    max-width: 880px;
    margin-inline: auto;
}
html.design-improved .article-hero {
    max-height: 420px;
}
html.design-improved .article-header {
    max-width: 768px;
    margin-inline: auto;
    padding: 2.25rem 2.5rem 0;
}
html.design-improved .article-title {
    color: var(--gray-900);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    line-height: 1.22;
    margin-bottom: 0.75rem;
}
html.design-improved .article-meta {
    gap: 0.5rem;
    color: var(--text-muted);
}
html.design-improved .article-content {
    max-width: 768px;
    margin-inline: auto;
    padding: 1.6rem 2.5rem 2.4rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--gray-700);
}
html.design-improved .article-content p {
    margin-bottom: 1.1rem;
}
html.design-improved .article-content img {
    max-width: 100%;
    border-radius: var(--radius-sm);
}
html.design-improved .article-content a {
    color: var(--ri-accent);
    text-underline-offset: 0.18em;
}

/* ===================================================
   14. FORMS & EDIT SECTIONS
   =================================================== */
html.design-improved .edit-section {
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
html.design-improved .form-label {
    color: var(--gray-700);
    font-weight: 600;
}
html.design-improved .alert {
    border-radius: var(--radius-sm);
}

/* ===================================================
   15. SETTINGS
   =================================================== */
html.design-improved .settings-card {
    padding: 1.5rem 1.65rem;
    box-shadow: var(--shadow-sm);
}
html.design-improved .settings-title {
    color: var(--gray-900);
}
html.design-improved .settings-help {
    color: var(--text-muted);
}
html.design-improved .settings-btn {
    background: var(--ri-accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 16px rgba(4, 78, 58, 0.16);
    transition: background var(--transition), transform var(--transition);
}
html.design-improved .settings-btn:hover {
    background: var(--ri-accent-hover);
    transform: translateY(-1px);
}
html.design-improved .settings-link {
    color: var(--ri-accent);
}

/* Interface-style chooser — selectable cards */
html.design-improved .settings-choice label {
    background: var(--ri-surface-2);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.95rem 1.05rem;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    cursor: pointer;
}
html.design-improved .settings-choice label:hover {
    border-color: var(--ri-accent-line);
    background: var(--surface);
}
html.design-improved .settings-choice label:has(input:checked) {
    background: var(--ri-accent-soft);
    border-color: var(--ri-accent);
    box-shadow: var(--ri-ring);
}
html.design-improved .settings-choice strong {
    color: var(--gray-900);
}
html.design-improved .settings-choice span {
    color: var(--text-muted);
}

/* ===================================================
   16. PROFILES
   =================================================== */
html.design-improved .profile-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
html.design-improved .profile-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--ri-accent-line);
    background: var(--surface);
}
html.design-improved .profile-card-name {
    color: var(--gray-900);
}
html.design-improved .profile-card-avatar {
    background: linear-gradient(135deg, #34d399, #047857);
}
html.design-improved .profile-hero {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
html.design-improved .profile-hero-bg {
    background: linear-gradient(140deg, #059669 0%, #065f46 100%);
}
html.design-improved .profile-section {
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-sm);
}
html.design-improved .profile-section-title {
    color: var(--gray-900);
}
html.design-improved .profile-section-icon {
    color: var(--ri-accent);
}

/* ===================================================
   17. LEADERBOARD
   The leaderboard page ships its own dedicated, variable-driven styles
   (.leaderboard-item grid, medal rows, rank glows), so the token cascade
   above already refines it. Only the shared panel chrome is nudged here;
   the page's bespoke row design is intentionally left untouched.
   =================================================== */
html.design-improved .leaderboard-grid {
    gap: 1.35rem;
}

/* ===================================================
   18. COMMENTS
   =================================================== */
html.design-improved .comment {
    padding: 1.1rem 1.35rem;
    box-shadow: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
html.design-improved .comment:hover {
    border-color: var(--ri-accent-line);
    box-shadow: var(--shadow-sm);
}
html.design-improved .comment-reply {
    border-left: 3px solid var(--ri-accent);
}
html.design-improved .comment-author {
    color: var(--gray-900);
}
html.design-improved .comment-form {
    padding: 1.35rem;
}

/* ===================================================
   19. FOOTER
   =================================================== */
html.design-improved .site-footer {
    background: var(--surface);
    border-top: 1px solid var(--gray-200);
    color: var(--text-muted);
}
html.design-improved .footer-links a {
    color: var(--text-muted);
    font-weight: 500;
}
html.design-improved .footer-links a:hover {
    color: var(--ri-accent);
}

/* ===================================================
   20. MOTION — refined entrances, honour reduced-motion
   =================================================== */
html.design-improved .news-card,
html.design-improved .profile-card,
html.design-improved .card,
html.design-improved .article-view,
html.design-improved .comment {
    animation-timing-function: var(--ri-ease);
}

@media (prefers-reduced-motion: reduce) {
    html.design-improved *,
    html.design-improved *::before,
    html.design-improved *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================================
   21. RESPONSIVE
   =================================================== */
@media (max-width: 820px) {
    html.design-improved .edition-front-page {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    html.design-improved .news-card--lead .news-card-thumb {
        min-height: 220px;
    }
    html.design-improved .hero-card {
        padding: 2.1rem 1.75rem 1.85rem;
    }
}

@media (max-width: 600px) {
    html.design-improved .container {
        padding: 1.5rem 1.1rem 3.5rem;
    }
    html.design-improved .news-card-thumb {
        width: 100%;
    }
    html.design-improved .news-card--briefing .news-card-thumb {
        width: 100%;
        min-height: 150px;
    }
    html.design-improved .article-header {
        padding: 1.5rem 1.35rem 0;
    }
    html.design-improved .article-content {
        padding: 1.25rem 1.35rem 1.85rem;
    }
}

/* ===================================================
   EmeraldNews error documents  (preserved)
   =================================================== */
html.design-improved body.error-page {
    font-family: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
}

html.design-improved .error-card {
    border-color: #cde6dc;
    box-shadow: 0 12px 34px rgba(4, 78, 58, 0.1);
}

html.design-improved .error-card .error-code {
    display: none;
}

html.design-improved .error-card h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.65rem, 5vw, 2rem);
    line-height: 1.25;
    margin-bottom: 0.85rem;
    text-transform: none;
}

html.design-improved .error-card h1::before {
    content: "Error " attr(data-code) ": ";
    color: #075a46;
}

html.design-improved .error-card p,
html.design-improved .error-card .btn {
    font-family: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
}

html.design-improved .error-card .btn {
    background: #047857;
}

html.design-improved .error-card .btn:hover {
    background: #065f46;
}

html.design-improved .error-card .nav-brand-name em {
    color: #047857;
}

/* Classes game and embedded tablet screens  (preserved) */
html.design-improved .warning-panel {
    --accent-strong: #daf0ff;
    background:
        linear-gradient(180deg, rgba(158, 218, 255, 0.08), transparent 40%),
        rgba(7, 12, 23, 0.94);
}

html.design-improved .warning-panel .eyebrow {
    display: none;
}

html.design-improved .start-button {
    letter-spacing: 0.04em;
    line-height: 1.45;
    text-transform: none;
    box-shadow: none;
}

html.design-improved .start-button:hover,
html.design-improved .start-button:focus-visible {
    box-shadow: none;
}

html.design-improved .interact-hint,
html.design-improved .explore-hint,
html.design-improved .lower-tablet-button,
html.design-improved .tablet-status,
html.design-improved .mobile-action {
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-transform: none;
}

html.design-improved .tablet-widget {
    box-shadow: none;
}

html.design-improved .tablet-widget-clock,
html.design-improved .tablet-widget-weather,
html.design-improved .tablet-widget-calendar {
    background: rgba(245, 248, 255, 0.88);
}

html.design-improved .tablet-calendar-row,
html.design-improved .tablet-file-card,
html.design-improved .tablet-file-list {
    box-shadow: none;
    border: 1px solid rgba(23, 38, 58, 0.12);
}

html.design-improved .tablet-calendar-row {
    background: transparent;
    border-width: 1px 0 0;
    border-radius: 0;
}

html.design-improved .tablet-files-kicker,
html.design-improved .tablet-copy-button,
html.design-improved .tablet-file-entry::after {
    letter-spacing: 0.03em;
    line-height: 1.45;
    text-transform: none;
}

html.design-improved .tablet-dock {
    background: transparent;
    border-top: 1px solid rgba(243, 249, 255, 0.44);
    border-radius: 0;
}

html.design-improved #tabletLunaLaptopView .llx-desktop-top {
    color: #fff;
    background: rgba(17, 35, 56, 0.48);
}

html.design-improved #tabletLunaLaptopView .llx-titlebar {
    background: linear-gradient(90deg, #173a63, #315b88);
}

html.design-improved #tabletLunaLaptopView .llx-boot-bar-fill,
html.design-improved #tabletLunaLaptopView .llx-copy-progress-fill,
html.design-improved #tabletAuroraFilesView .axa-boot-bar span,
html.design-improved #tabletFilesView .axc-boot-bar span,
html.design-improved #tabletFilesView .copy-progress-fill {
    transition: none;
}

html.design-improved #tabletAuroraFilesView,
html.design-improved #tabletFilesView,
html.design-improved #tabletAuroraFilesView .axa-device,
html.design-improved #tabletFilesView .axc-device,
html.design-improved #tabletAuroraFilesView .axa-screen,
html.design-improved #tabletFilesView .axc-screen,
html.design-improved #tabletAuroraFilesView .axa-boot,
html.design-improved #tabletFilesView .axc-boot,
html.design-improved #tabletAuroraFilesView .axa-calc,
html.design-improved #tabletFilesView .axc-calc,
html.design-improved #tabletAuroraFilesView .axa-clock,
html.design-improved #tabletFilesView .axc-clock {
    background: #090e15 !important;
}

html.design-improved #tabletAuroraFilesView .ic-clock,
html.design-improved #tabletFilesView .ic-clock,
html.design-improved #tabletAuroraFilesView .axa-term,
html.design-improved #tabletFilesView .axc-term {
    background: #101721 !important;
}

html.design-improved #tabletAuroraFilesView .tablet-lock-primary,
html.design-improved #tabletFilesView .tablet-copy-button {
    background: #0066c2 !important;
}

/* Marco Polo: retain the dark suspense while improving readable overlays.  (preserved) */
html.design-improved body.marco-page {
    --bg: #080608;
    --surface: #14100e;
    --amber: #ffd2ac;
    --text: #e5d7cb;
    --text-dim: rgba(229, 215, 203, 0.8);
    background: #080608;
    color: #e5d7cb;
}

html.design-improved body.marco-page #app,
html.design-improved body.marco-page #viewport-shell {
    background: #080608;
    color: #e5d7cb;
}

html.design-improved .hud-title,
html.design-improved .metric__value,
html.design-improved .screen__card h2,
html.design-improved #breathing-status {
    color: #f8ede5;
}

html.design-improved .phase-label {
    color: #e5d7cb;
    letter-spacing: 0.03em;
}

html.design-improved body.marco-page .eyebrow {
    color: #d7c1b2;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: none;
}

html.design-improved .screen__card > p,
html.design-improved .rules li {
    color: #decdc0;
}

html.design-improved .controls-copy,
html.design-improved .metric__value--small,
html.design-improved #breathing-copy,
html.design-improved #breathing-cue {
    color: #d5c2b4;
    font-size: 14px;
    letter-spacing: 0.03em;
}

html.design-improved body.marco-page .news__op-badge,
html.design-improved body.marco-page .news__agency-name,
html.design-improved body.marco-page .news__status-key,
html.design-improved body.marco-page .news__countdown-kicker {
    font-size: 12px;
}

html.design-improved .message-ribbon,
html.design-improved #interact-prompt {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

html.design-improved #win-news {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

html.design-improved body.marco-page #marcus-dot,
html.design-improved body.marco-page .breathing__card,
html.design-improved body.marco-page .breathing__marker,
html.design-improved body.marco-page #breathing-hold.button--holding,
html.design-improved body.marco-page .cover-label--safe,
html.design-improved body.marco-page .news__status-val--active,
html.design-improved body.marco-page .news__status-val--warn,
html.design-improved body.marco-page #news-countdown {
    box-shadow: none !important;
    text-shadow: none !important;
}

html.design-improved #news-cutscene,
html.design-improved .news__good-ending-video {
    background: #070a0a;
}

html.design-improved #news-signal-lost {
    background: rgba(7, 10, 10, 0.9);
}

html.design-improved .news__channel,
html.design-improved .news__live-badge {
    border-right-color: transparent;
}

html.design-improved .news__op-badge,
html.design-improved .news__agency-name,
html.design-improved .news__signal-sub {
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Small standalone games and site overlays  (preserved) */
html.design-improved .scroll-feed-overlay {
    background: #070d0b;
}

html.design-improved .scroll-feed-close {
    background: rgba(7, 13, 11, 0.76);
}

html.design-improved.anthatesdaxton-page *,
html.design-improved .anthatesdaxton-page * {
    font-family: "Gill Sans", "Trebuchet MS", Verdana, sans-serif;
}

html.design-improved body.anthatesdaxton-page {
    background: #080e10;
    color: #edf3f2;
}

html.design-improved body.anthatesdaxton-page > h1 {
    color: #f6c453;
    font-family: "Carter One", "Cooper Black", serif;
    margin: 1rem auto 0;
    max-width: 300px;
    text-align: center;
}

html.design-improved body.anthatesdaxton-page .game-screen p:not(.game-description) {
    color: #d9e4e2;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html.design-improved.anthatesdaxton-page .game-title h1,
html.design-improved .anthatesdaxton-page .game-title h1 {
    font-family: "Carter One", "Cooper Black", serif;
}