/* ChessHints concept theme: charcoal tiles, orange accent, app-style tab bar.
   Colors, surfaces, and controls only. Board and layout sizing stay in style.css / page CSS. */

/* ===== Tokens ===== */
:root {
    --ch-bg: #ececec;
    --ch-surface: #ffffff;
    --ch-surface-2: #f2f2f2;
    --ch-surface-3: #e4e4e4;
    --ch-line: rgba(0, 0, 0, 0.08);
    --ch-text: #1f1f1f;
    --ch-muted: #6f6f6f;
    --ch-bar: #ffffff;
    --ch-checker: rgba(0, 0, 0, 0.035);
    --ch-tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    --ch-orange: #ec6a35;
    --ch-orange-hi: #f27d4b;
    --ch-orange-lo: #d4572a;
    --ch-orange-soft: rgba(236, 106, 53, 0.14);
    --ch-blue: #2c7cd6;
    --ch-blue-lo: #2468b5;
    --ch-gold: #a88a4f;
    --ch-green: #5f9a49;
    --ch-red: #c24a3f;
    --ch-on-accent: #ffffff;

    --color-bg: var(--ch-bg);
    --color-white: var(--ch-surface);
    --color-light-gray: var(--ch-surface-2);
    --color-medium-gray: var(--ch-surface-3);
    --color-dark-gray: var(--ch-muted);
    --color-text: var(--ch-text);
    --color-accent: var(--ch-orange);
    --color-accent-dark: var(--ch-orange-lo);
    --color-border: var(--ch-line);
    --color-inverse-bg: var(--ch-orange);
    --color-inverse-text: var(--ch-on-accent);
    --color-success: var(--ch-green);
    --color-info: var(--ch-blue);
    --color-danger: var(--ch-red);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --shadow-sm: var(--ch-tile-shadow);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] {
    --ch-bg: #242424;
    --ch-surface: #2f2f2f;
    --ch-surface-2: #383838;
    --ch-surface-3: #444444;
    --ch-line: rgba(255, 255, 255, 0.07);
    --ch-text: #f2f2f2;
    --ch-muted: #9d9d9d;
    --ch-bar: #2b2b2b;
    --ch-checker: rgba(255, 255, 255, 0.03);
    --ch-tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.28);
    --ch-orange-lo: #f27d4b;

    --color-accent-dark: var(--ch-orange-hi);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] {
    color-scheme: dark;
}

html,
body {
    background: var(--ch-bg);
    color: var(--ch-text);
}

:root ::selection {
    background: var(--ch-orange-soft);
}

/* Faint checkerboard used behind app bars and heroes */
:root .header,
:root .home-hero,
:root .play-header {
    position: relative;
    isolation: isolate;
}

:root .header::before,
:root .home-hero::before,
:root .play-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-conic-gradient(var(--ch-checker) 0 25%, transparent 0 50%) 0 0 / 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

:root .header {
    position: sticky;
}

/* ===== Header ===== */
:root .header {
    background: var(--ch-bar);
    border-bottom: 1px solid var(--ch-line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root .logo .logo-text {
    color: var(--ch-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

:root .logo-icon,
:root .logo-accent {
    color: var(--ch-orange);
}

:root .nav-tabs {
    background: transparent;
    gap: 0.2rem;
    padding: 0;
}

:root .nav-tab {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--ch-muted);
    font-weight: 600;
    box-shadow: none;
}

:root .nav-tab:hover {
    background: var(--ch-surface-2);
    color: var(--ch-text);
}

:root .nav-tab.active,
:root .nav-tab.active:hover {
    background: var(--ch-orange-soft);
    color: var(--ch-orange);
    border: 0;
    box-shadow: none;
}

:root .dark-mode-toggle,
:root .header-signin,
:root .mobile-menu-toggle {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
    box-shadow: none;
}

:root .dark-mode-toggle:hover,
:root .header-signin:hover {
    background: var(--ch-surface-3);
    border-color: var(--ch-line);
    box-shadow: none;
}

:root .header-avatar-btn {
    background: var(--ch-orange);
    border-color: transparent;
    color: var(--ch-on-accent);
}

:root .header-quick-link {
    color: var(--ch-muted);
}

:root .header-quick-link.active {
    background: var(--ch-orange-soft);
    border-color: transparent;
    color: var(--ch-orange);
}

@media (max-width: 1024px) {
    :root .nav-tabs,
    :root .nav-tabs.open {
        background: var(--ch-surface);
    }
}

/* Header menus, settings sheet, modals */
:root .header-tools-menu,
:root .header-account-menu,
:root #headerToolsMenu.header-tools-menu,
:root .contact-modal {
    background: var(--ch-surface) !important;
    color: var(--ch-text);
    border: 1px solid var(--ch-line) !important;
    box-shadow: var(--shadow-lg) !important;
}

:root #toolsDarkToggle,
:root .piece-theme-item,
:root .board-theme-item,
:root .more-sheet-card {
    background: var(--ch-surface-2);
    border-color: var(--ch-line);
    color: var(--ch-text);
}

:root #toolsDarkToggle:hover {
    background: var(--ch-surface-3);
    border-color: var(--ch-line);
}

:root #toolsDarkToggle .more-sheet-row-meta,
:root .piece-theme-item .theme-picker-label,
:root .board-theme-item .theme-picker-label,
:root .more-sheet-kicker,
:root .more-sheet-section-label,
:root .more-mode-label,
:root .header-account-meta span {
    color: var(--ch-muted);
}

:root .more-sheet-title,
:root .header-account-meta strong,
:root .header-account-menu a,
:root #headerToolsMenu .more-sheet-row,
:root #headerToolsMenu .more-sheet-card > .tools-menu-item,
:root #headerToolsMenu .tools-menu-link,
:root .contact-modal-head h3,
:root .contact-modal-close {
    color: var(--ch-text);
}

:root .header-account-menu a:hover,
:root #headerToolsMenu .tools-menu-link:active {
    background: var(--ch-surface-2) !important;
    color: var(--ch-text);
}

:root #headerToolsMenu .tools-menu-link .icon-svg,
:root #headerToolsMenu .tools-dark-icons {
    color: var(--ch-orange);
}

:root #headerToolsMenu .tools-dark-icons,
:root .tools-dark-icons {
    background: var(--ch-orange-soft);
}

:root #toolsDarkToggle[data-mode="dark"] .more-sheet-row-meta {
    background: var(--ch-orange);
    color: var(--ch-on-accent);
}

:root .piece-set-option,
:root #headerToolsMenu .piece-set-option {
    background: var(--ch-surface);
    border-color: var(--ch-line);
}

:root .piece-set-option.is-active,
:root .board-theme-swatch.is-active {
    border-color: var(--ch-orange);
    box-shadow: 0 0 0 2px var(--ch-orange-soft);
}

:root #headerToolsMenu .more-sheet-action,
:root #moreNewAiGame,
:root #morePlayLobby {
    background: var(--ch-orange) !important;
    color: var(--ch-on-accent) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none;
}

:root .contact-modal-head {
    border-bottom-color: var(--ch-line);
}

:root .contact-copy {
    color: var(--ch-muted);
}

:root .contact-email-btn {
    background: var(--ch-orange);
    border-radius: var(--radius-sm);
}

:root .contact-email-btn:hover {
    background: var(--ch-orange-lo);
}

/* ===== Page top spacing: 16px desktop, 8px mobile, matching AI / Play ===== */
:root .puzzle-page .puzzle-layout {
    padding-top: 1rem;
}

/* ===== Mobile gutters: one 12px edge for board and panels on every tool page ===== */
@media (max-width: 1024px) {
    :root .puzzle-page .puzzle-layout {
        padding-top: 8px;
    }

    :root body.page-home .main-container {
        padding-top: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }

    :root body.page-home .board-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 992px) {
    :root .ai-container {
        max-width: min(100vw, calc(100vh - 240px + 24px));
        padding-left: 12px;
        padding-right: 12px;
    }

    :root .page-play .play-container {
        padding-top: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    :root .page-play .info-panel {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 576px) {
    :root body.page-home .board-wrapper {
        width: 100%;
    }

    :root .page-play .board-wrapper {
        width: min(calc(100vw - 24px), calc(100dvh - 13.75rem));
    }
}

/* ===== Mobile tab bar ===== */
@media (max-width: 1024px) {
    :root .mobile-tab-bar {
        background: var(--ch-bar);
        border-top: 1px solid var(--ch-line);
        box-shadow: none;
    }

    :root .mobile-tab {
        color: var(--ch-muted);
        font-weight: 500;
    }

    :root .mobile-tab.is-active {
        color: var(--ch-orange);
    }

    :root .mobile-more-scrim {
        background: rgba(0, 0, 0, 0.55);
    }
}

/* ===== Tiles (every card / panel surface) ===== */
:root .panel-section,
:root .panel-card,
:root .puzzle-card,
:root .info-panel,
:root .lobby-screen,
:root .invite-bar,
:root .ai-welcome,
:root .ai-chat,
:root .move-section,
:root .captured-section-box,
:root .settings-section,
:root .game-status-box,
:root .seo-card,
:root .auth-card,
:root .account-card,
:root .account-stat,
:root .leaderboard-list,
:root .tool-faq details,
:root #about details,
:root .ai-setup-box,
:root .game-end-modal-content {
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-md);
    box-shadow: var(--ch-tile-shadow);
    color: var(--ch-text);
}

:root .seo-card:hover {
    border-color: var(--ch-orange);
    box-shadow: var(--shadow-md);
}

/* Inner wells sit one step lighter than the tile */
:root .move-history-list,
:root .move-history,
:root .captured-pieces,
:root .player-row,
:root .open-game-option,
:root .puzzle-hint-block,
:root .ai-chat-log {
    background: var(--ch-surface-2);
    border-color: var(--ch-line);
    color: var(--ch-text);
}

:root .panel-title,
:root .panel-card-title,
:root .lobby-label,
:root .time-control-category-header,
:root .captured-label,
:root .puzzle-filter-label,
:root .ai-welcome-kicker,
:root .ai-modal-label,
:root .player-status,
:root .depth-control label,
:root .puzzle-hint-head,
:root .live-matches-title {
    color: var(--ch-muted);
}

:root .depth-control,
:root .puzzle-stats,
:root .puzzle-share {
    border-top-color: var(--ch-line);
}

/* ===== Buttons ===== */
/* Primary: solid orange */
:root .control-btn.move,
:root .puzzle-btn-primary,
:root .puzzle-btn.primary,
:root .ai-welcome-play,
:root .ai-modal-start-btn,
:root .create-game-btn,
:root .start-btn,
:root .control-btn.start-game,
:root .hero-btn-primary,
:root .auth-submit,
:root .import-btn,
:root .copy-btn {
    background: var(--ch-orange) !important;
    color: var(--ch-on-accent) !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    font-weight: 700;
}

:root .control-btn.move:hover,
:root .puzzle-btn-primary:hover,
:root .puzzle-btn.primary:hover,
:root .ai-welcome-play:hover,
:root .ai-modal-start-btn:hover,
:root .create-game-btn:hover:not(:disabled),
:root .start-btn:hover,
:root .control-btn.start-game:hover,
:root .hero-btn-primary:hover,
:root .auth-submit:hover,
:root .import-btn:hover,
:root .copy-btn:hover {
    background: var(--ch-orange-hi) !important;
    transform: none;
}

:root .control-btn.move.calculating {
    background: var(--ch-blue) !important;
}

:root .create-game-btn:disabled,
:root .create-game-btn.is-loading {
    opacity: 0.7;
}

:root .copy-btn.copied,
:root .control-btn.share-success,
:root .share-btn.copy.copied {
    background: var(--ch-green) !important;
    color: #fff !important;
}

/* Secondary: tile button */
:root .control-btn,
:root .control-btn.back,
:root .puzzle-btn-secondary,
:root .puzzle-btn.secondary,
:root .ai-welcome-options,
:root .utility-btn,
:root .nav-btn,
:root .undo-btn,
:root .undo-btn-game,
:root .game-end-btn,
:root .join-game-btn,
:root .hero-btn-secondary,
:root .hero-btn-tertiary,
:root .share-btn.copy,
:root .spare-toggle-btn,
:root .auth-social-btn {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--ch-tile-shadow);
}

:root .control-btn:hover,
:root .control-btn.back:hover,
:root .puzzle-btn-secondary:hover,
:root .puzzle-btn.secondary:hover,
:root .ai-welcome-options:hover,
:root .utility-btn:hover,
:root .nav-btn:hover,
:root .undo-btn:hover,
:root .undo-btn-game:hover,
:root .game-end-btn:hover,
:root .join-game-btn:hover,
:root .hero-btn-secondary:hover,
:root .hero-btn-tertiary:hover,
:root .share-btn.copy:hover,
:root .spare-toggle-btn:hover {
    background: var(--ch-surface-3);
    color: var(--ch-text);
    border-color: var(--ch-line);
    transform: none;
}

:root .puzzle-btn-secondary:active,
:root .puzzle-btn.secondary:active {
    background: var(--ch-surface-3);
}

/* Colored icons on tile buttons, like the concept's Themes / Streak tiles */
:root #btnHint .icon-svg { color: #e0b34a; }
:root #btnRetry .icon-svg,
:root #btnBack .icon-svg,
:root #btnUndo .icon-svg { color: #5aa0e6; }
:root #btnReset .icon-svg { color: var(--ch-orange); }
:root #btnRotate .icon-svg { color: #7cc36a; }
:root #btnToggleEval .icon-svg { color: #b48ae0; }

/* Auto analyze is a toggle */
:root .control-btn.auto-analyze {
    background: var(--ch-surface-2);
    color: var(--ch-text);
}

:root .control-btn.auto-analyze.active {
    background: var(--ch-green);
    color: #fff;
    border-color: transparent;
}

/* Destructive */
:root .stop-btn,
:root .control-btn.start-game.stop-game,
:root #leave-confirm-btn {
    background: var(--ch-surface-2) !important;
    color: var(--ch-red) !important;
    border: 1px solid var(--ch-line) !important;
    border-radius: var(--radius-sm) !important;
}

[data-theme="dark"] .stop-btn,
[data-theme="dark"] .control-btn.start-game.stop-game,
[data-theme="dark"] #leave-confirm-btn {
    color: #ef7d72 !important;
}

:root .stop-btn:hover,
:root #leave-confirm-btn:hover {
    background: var(--ch-red) !important;
    color: #fff !important;
}

/* Share brand tiles keep their brand color */
:root .share-btn {
    border-radius: var(--radius-sm);
}

:root .share-btn.twitter {
    background: #111;
    border: 1px solid var(--ch-line);
}

/* ===== Selectable options (segmented controls) ===== */
:root .turn-btn,
:root .color-option,
:root .time-control-option,
:root .color-btn,
:root .ai-modal-color-btn,
:root .import-tab,
:root .puzzle-chip,
:root .puzzle-chip-ghost,
:root .leaderboard-tabs a,
:root .puzzle-daily-link {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
    box-shadow: none;
}

:root .turn-btn,
:root .color-option,
:root .time-control-option,
:root .color-btn,
:root .ai-modal-color-btn,
:root .import-tab {
    border-radius: var(--radius-sm);
}

:root .turn-btn:hover:not(.active),
:root .color-option:hover:not(.active),
:root .time-control-option:hover:not(.active),
:root .color-btn:hover:not(.active),
:root .ai-modal-color-btn:hover:not(.active),
:root .import-tab:hover:not(.active),
:root .puzzle-chip:hover:not(.is-active),
:root .puzzle-chip-ghost:hover,
:root .leaderboard-tabs a:hover {
    background: var(--ch-surface-3);
    border-color: var(--ch-line);
    color: var(--ch-text);
}

:root .turn-btn.active,
:root .turn-btn.white.active,
:root .turn-btn.black.active,
:root .color-option.active,
:root .time-control-option.active,
:root .color-btn.active,
:root .ai-modal-color-btn.active,
:root .import-tab.active,
:root .puzzle-chip.is-active,
:root .puzzle-daily-link.is-active,
:root .leaderboard-tabs a.is-active,
:root .auth-tabs button.is-active {
    background: var(--ch-orange-soft) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-orange) !important;
    box-shadow: inset 0 0 0 1px var(--ch-orange) !important;
}

/* Time controls: the concept's big tiles */
:root .time-control-category-options {
    gap: 0.45rem;
}

:root .time-control-option {
    min-height: 3.4rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ===== Inputs ===== */
:root input[type="text"],
:root input[type="email"],
:root input[type="password"],
:root input[type="search"],
:root textarea,
:root select,
:root .invite-bar input {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-sm);
}

:root #game-code-input {
    background: var(--ch-surface-2) !important;
    color: var(--ch-text) !important;
    border: 1px solid var(--ch-line) !important;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

:root #game-code-input:focus {
    border-color: var(--ch-orange) !important;
}

:root input::placeholder,
:root textarea::placeholder {
    color: var(--ch-muted);
}

:root input:focus-visible,
:root textarea:focus-visible,
:root select:focus-visible,
:root button:focus-visible,
:root a:focus-visible {
    outline: 2px solid var(--ch-orange);
    outline-offset: 2px;
}

:root input[type="range"] {
    accent-color: var(--ch-orange);
}

:root .depth-control input[type="range"] {
    background: var(--ch-surface-3);
}

:root .depth-control input[type="range"]::-webkit-slider-thumb,
:root .ai-modal-slider::-webkit-slider-thumb {
    background: var(--ch-orange);
}

:root .depth-control input[type="range"]::-moz-range-thumb,
:root .ai-modal-slider::-moz-range-thumb {
    background: var(--ch-orange);
}

:root .depth-control #depthValue {
    color: var(--ch-orange);
}

/* ===== Analyzer ===== */
:root .eval-bar {
    border-color: var(--ch-surface-3);
    border-radius: var(--radius-sm);
}

/* ===== Play vs Friend ===== */
:root .play-header {
    padding-top: 0.25rem;
}

:root .play-header h1 {
    color: var(--ch-text);
    font-weight: 800;
}

:root .play-header p {
    color: var(--ch-muted);
}

:root .lobby-divider {
    color: var(--ch-muted);
}

:root .lobby-divider::before,
:root .lobby-divider::after {
    background: var(--ch-line);
}

:root .page-play .player-info {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
}

:root .page-play .player-row {
    background: var(--ch-surface-2);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-md);
    box-shadow: none;
}

:root .page-play .player-row.current-turn {
    background: var(--ch-surface-2);
    border-color: var(--ch-orange);
    box-shadow: inset 3px 0 0 var(--ch-orange);
}

:root .player-label {
    color: var(--ch-text);
}

:root .player-status {
    color: var(--ch-muted);
}

:root .player-status.you {
    color: var(--ch-green);
}

:root .player-timer {
    background: var(--ch-surface-3);
    color: var(--ch-text);
    border-radius: var(--radius-sm);
}

:root .player-row.active .player-timer,
:root .player-row.is-active .player-timer,
:root .player-timer.active {
    background: var(--ch-orange);
    color: var(--ch-on-accent);
}

:root .player-timer.warning {
    background: #e0902a;
    color: #fff;
}

:root .player-timer.critical {
    background: var(--ch-red);
    color: #fff;
}

/* Turn / result banner: neutral tile, the state shows in text color */
:root .page-play .game-status {
    background: var(--ch-surface-2);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-md);
    color: var(--ch-text);
}

:root .page-play .game-status.your-turn {
    border-color: var(--ch-green);
    color: var(--ch-green);
}

:root .page-play .game-status.opponent-turn {
    color: var(--ch-muted);
}

:root .page-play .game-status.waiting {
    color: var(--ch-orange);
}

:root .page-play .game-status.game-over {
    border-color: var(--ch-red);
    color: var(--ch-red);
}

[data-theme="dark"] .page-play .game-status.your-turn { color: #8cc976; }
[data-theme="dark"] .page-play .game-status.game-over { color: #ef7d72; }

:root .page-play .panel-sublabel {
    color: var(--ch-muted);
    opacity: 1;
}

/* In-game Draw / Rematch / Resign */
:root .action-btn,
:root .draw-btn,
:root .offer-rematch-btn,
:root .forfeit-btn {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--ch-tile-shadow);
}

:root .action-btn:hover,
:root .draw-btn:hover,
:root .offer-rematch-btn:hover {
    background: var(--ch-surface-3);
    transform: none;
}

:root .draw-btn .icon-svg { color: #e0b34a; }
:root .offer-rematch-btn .icon-svg { color: #5aa0e6; }

:root .forfeit-btn {
    color: var(--ch-red);
}

[data-theme="dark"] .forfeit-btn {
    color: #ef7d72;
}

:root .forfeit-btn:hover {
    background: var(--ch-red);
    color: #fff;
    transform: none;
}

:root .new-game-btn {
    background: var(--ch-orange);
    color: var(--ch-on-accent);
    border: 0;
}

:root .new-game-btn:hover {
    background: var(--ch-orange-hi);
}

/* Move chips */
:root .page-play .move-history .move-white {
    background: var(--ch-surface);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
}

:root .page-play .move-history .move-black {
    background: #3a3a3a;
    color: #f2f2f2;
    border: 1px solid transparent;
}

[data-theme="dark"] .page-play .move-history .move-white {
    background: #e8e8e8;
    color: #1f1f1f;
}

[data-theme="dark"] .page-play .move-history .move-black {
    background: #1c1c1c;
}

:root .game-end-banner {
    background: var(--ch-surface-2);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-md);
    color: var(--ch-text);
}

/* ===== Play vs AI ===== */
:root .ai-welcome-line,
:root .ai-chat-title,
:root .ai-modal-title {
    color: var(--ch-text);
}

:root .ai-welcome-summary,
:root .ai-modal-difficulty-desc {
    color: var(--ch-muted);
}

:root .ai-modal-difficulty-label {
    color: var(--ch-orange);
}

:root .ai-chat-bubble.is-ai {
    background: var(--ch-surface-3);
    color: var(--ch-text);
}

:root .ai-chat-bubble.is-you {
    background: var(--ch-orange-soft);
    color: var(--ch-text);
}

:root .ai-modal-close {
    background: var(--ch-surface-2);
    border-color: var(--ch-line);
    color: var(--ch-text);
}

:root .ai-modal-close:hover {
    background: var(--ch-surface-3);
}

:root .ai-setup-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* ===== Puzzles ===== */
:root .puzzle-heading {
    color: var(--ch-text);
    font-weight: 800;
}

:root .puzzle-daily-badge {
    background: var(--ch-orange-soft);
    color: var(--ch-orange);
}

:root .puzzle-side-label {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
}

:root .puzzle-side-label.is-black {
    background: #111;
    color: #f2f2f2;
    border-color: #111;
}

:root .puzzle-tag {
    background: var(--ch-surface-2);
    color: var(--ch-muted);
    border-color: var(--ch-line);
}

:root .puzzle-filters-summary,
:root .puzzle-hint-text {
    color: var(--ch-text);
}

:root .hint-step-dot {
    background: var(--ch-surface);
    border-color: var(--ch-surface-3);
    color: var(--ch-muted);
}

:root .hint-step-btn.is-next .hint-step-dot,
:root .hint-step-btn.is-current .hint-step-dot {
    border-color: var(--ch-orange);
    color: var(--ch-orange);
}

:root .hint-step-btn.is-done .hint-step-dot,
:root .hint-step-btn.is-used .hint-step-dot {
    background: var(--ch-orange);
    border-color: var(--ch-orange);
    border-style: solid;
    color: var(--ch-on-accent);
}

:root .hint-step-btn.is-next .hint-step-label {
    color: var(--ch-orange);
}

:root .hint-step-label {
    color: var(--ch-muted);
}

:root .hint-step-rail {
    border-color: var(--ch-surface-3);
}

:root .puzzle-page .move-progress {
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: var(--radius-md);
    box-shadow: var(--ch-tile-shadow);
}

:root .puzzle-page .move-progress-bar {
    background: var(--ch-surface-3) !important;
}

:root .puzzle-page .move-progress-fill {
    background: var(--ch-orange) !important;
}

/* Stat tiles in the concept's colors */
:root .puzzle-stats .grid > div {
    border-radius: var(--radius-md);
    border: 0;
    box-shadow: var(--ch-tile-shadow);
    color: #fff;
}

:root .puzzle-stats .grid > div:nth-child(1) { background: var(--ch-green); }
:root .puzzle-stats .grid > div:nth-child(2) { background: var(--ch-gold); }
:root .puzzle-stats .grid > div:nth-child(3) { background: var(--ch-blue); }

:root .puzzle-stats .grid > div > div:first-child {
    color: #fff;
}

:root .puzzle-stats .grid > div > div:last-child {
    color: rgba(255, 255, 255, 0.82);
}

:root .puzzle-xp-row span {
    background: var(--ch-surface-2);
    color: var(--ch-text);
    border-radius: var(--radius-sm);
}

:root .puzzle-signin-nudge {
    background: var(--ch-orange-soft);
    border-color: rgba(236, 106, 53, 0.35);
}

/* ===== Homepage hero ===== */
:root .home-hero {
    background: var(--ch-bar);
    border-bottom: 1px solid var(--ch-line);
}

:root .home-hero h1 {
    color: var(--ch-text);
    font-weight: 800;
}

:root .hero-eyebrow {
    background: var(--ch-orange-soft);
    color: var(--ch-orange);
}

:root .hero-trust {
    background: var(--ch-surface-2);
    color: var(--ch-muted);
}

:root .hero-btn {
    border-radius: var(--radius-sm) !important;
}

/* ===== Content pages ===== */
:root .seo-content,
:root .tool-guide {
    background: var(--ch-bg);
    border-top-color: var(--ch-line);
}

:root .tool-copy a,
:root .account-note a,
:root .auth-check a {
    color: var(--ch-orange);
}

:root .tool-copy a:hover {
    color: var(--ch-orange-hi);
}

:root .footer {
    background: var(--ch-bar);
    border-top: 1px solid var(--ch-line);
    color: var(--ch-muted);
}

:root .footer a,
:root .footer a:visited {
    color: var(--ch-orange);
}

:root .footer-links a {
    color: var(--ch-text) !important;
}

:root .footer-links a:hover {
    color: var(--ch-orange) !important;
}

:root .auth-tabs {
    background: var(--ch-surface-2);
}

:root .auth-tabs button {
    color: var(--ch-muted);
}

:root .account-avatar {
    background: var(--ch-orange);
}

:root .account-progress {
    background: var(--ch-surface-3);
}

:root .account-progress-fill {
    background: var(--ch-orange);
}

:root .account-rating,
:root .account-stat strong,
:root .lb-name {
    color: var(--ch-text);
}

:root .lb-rank {
    color: var(--ch-orange);
}

:root .leaderboard-list li {
    border-bottom-color: var(--ch-line);
}

:root .leaderboard-list li.is-me {
    background: var(--ch-orange-soft);
}

:root .puzzle-toast {
    background: var(--ch-surface-3);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
}