/* High Contrast theme: enabled when body.high-contrast is present */
body.high-contrast {
    --bg: #000; /* deep black to reduce glare */
    --bg-card: #000;
    --text: #fff;
    --text-muted: #fff;
    --primary: #ffd500; /* bright yellow accent */
    --primary-hover: #ffea00;
    --secondary: #00eaff; /* cyan secondary */
    --secondary-hover: #6ff3ff;
    --border: #fff;
    --border-hover: #fff;

    /* Cell state colors tuned for contrast on black */
    --cell-prefilled-bg: #222; /* subtle, still perceptibly different */
    --cell-error-bg: #3b0000;
    --cell-hint-bg: #003300;
    --cell-hinted-bg: #1a1a1a;
    --cell-placed-bg: #002a00;
    --cell-conflict-bg: #3b0000;
    --cell-wrong-fg: #fff;

    /* Tone down visual noise */
    --shadow: none;
}

/* Remove decorative shadows & blurs to keep edges crisp */
body.high-contrast * {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Clear, thick focus ring everywhere */
:focus-visible {
    outline: 3px solid var(--primary) !important;
    outline-offset: 3px !important;
}

/* Frames, badges, and controls pop against the background */
body.high-contrast .icon-button,
body.high-contrast .badge,
body.high-contrast .timer,
body.high-contrast #symbol-bar,
body.high-contrast .menu-card,
/* LEGACY (unused): .game-over-content retained for reference; current app uses .modal patterns */
body.high-contrast .game-over-content,
body.high-contrast .modal-content,
body.high-contrast #game-board {
    background: #000 !important;
    color: var(--text) !important;
}

/* Buttons: filled variants use solid accent, hover with outline */
body.high-contrast .primary,
body.high-contrast .secondary,
body.high-contrast .theme-btn.active,
body.high-contrast .difficulty-btn.active,
body.high-contrast .mode-btn.active {
    background: var(--primary) !important;
    color: #000 !important;
    border: 2px solid var(--primary) !important;
}
body.high-contrast .primary:hover,
body.high-contrast .secondary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Links are always clearly links */
body.high-contrast a {
    color: var(--secondary) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
}

/* Grid cells: strong borders + larger glyphs remain legible */
body.high-contrast .cell {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    /* If using emoji themes, force monochrome-ish rendering */
    filter: grayscale(1) contrast(160%);
}
body.high-contrast .cell.pre-filled {
    background: var(--cell-prefilled-bg) !important;
}
body.high-contrast .cell.hint {
    background: var(--cell-hint-bg) !important;
    border-color: #0f0 !important;
}
body.high-contrast .cell.hinted {
    background: var(--cell-hinted-bg) !important;
}
body.high-contrast .cell.placed {
    background: var(--cell-placed-bg) !important;
    border-color: #0f0 !important;
}
body.high-contrast .cell.error,
body.high-contrast .cell.wrong {
    background: var(--cell-conflict-bg) !important;
    border-color: #f00 !important;
    color: #fff !important;
}
body.high-contrast .cell.locked {
    cursor: not-allowed;
    outline: 2px dashed #fff !important;
    outline-offset: -2px;
}

/* Symbol picker tiles */
body.high-contrast .symbol-option {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    filter: grayscale(1) contrast(160%); /* emoji-friendly */
}
body.high-contrast .symbol-option:hover,
body.high-contrast .symbol-option.selected {
    background: var(--primary) !important;
    color: #000 !important;
    border-color: var(--primary) !important;
}

/* Header & bottom bar edges are obvious */
body.high-contrast .app-header,
body.high-contrast .bottom-nav {
    background: #000 !important;
    border-color: #fff !important;
}

/* Make small status badges very clear */
body.high-contrast .badge.error {
    border-color: #f00 !important;
    color: #fff !important;
}
body.high-contrast .badge.score {
    border-color: #0f0 !important;
    color: #fff !important;
}
body.high-contrast .badge.hint {
    border-color: #ff0 !important;
    color: #ffffff !important;
}
body.high-contrast .timer {
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Modal overlays: solid dark rather than translucent blur */
/* LEGACY (unused): .game-over-overlay retained for reference; current app uses .modal patterns */
body.high-contrast .game-over-overlay,
body.high-contrast .menu {
    background: #000 !important;
    opacity: 0.98 !important;
}

/* Icons (img) - flip to strong light-on-dark without replacing assets */
body.high-contrast .icon-button img,
body.high-contrast .bottom-nav .icon img,
body.high-contrast .status img,
body.high-contrast .header-logo {
    filter: invert(1) contrast(180%) !important;
}

/* Loading: ditch animation glare and keep it readable */
body.high-contrast #loading-screen {
    background: #000 !important;
}
body.high-contrast #loading-screen .loading-spinner,
body.high-contrast #loading-screen .spinner {
    border-color: #fff !important;
    border-top-color: var(--primary) !important;
}

/* Respect user system settings */
@media (prefers-contrast: more) {
    /* If user hasn’t toggled manually, still improve defaults */
    body:not(.high-contrast) {
        --border: #111;
        --focus: #ffea00;
    }
}
/* Windows forced-colors support */
@media (forced-colors: active) {
    body.high-contrast * {
        forced-color-adjust: none;
    }
    body.high-contrast {
        background: Canvas;
        color: CanvasText;
    }
    body.high-contrast a {
        color: LinkText;
    }
    body.high-contrast :focus-visible {
        outline: 2px solid Highlight;
    }
}

/* Modal readability adjustments for High Contrast */
body.high-contrast .modal-content {
    line-height: 1.7; /* Slightly higher for clarity on black */
}
body.high-contrast .modal-content p {
    margin: 0 0 1rem;
}
body.high-contrast .modal-content li {
    line-height: 1.7;
}