html[data-sneebo-theme="graphite"] {
    color-scheme: dark;
    --site-bg: #191a1d;
    --site-surface: #232428;
    --site-surface-muted: #202125;
    --site-surface-raised: #2a2c31;
    --site-border: #35363b;
    --site-border-strong: #686a73;
    --site-text: #eceef1;
    --site-muted: #a8abb3;
    --site-primary: #3473c7;
    --site-primary-hover: #407fd3;
    --site-primary-text: #ffffff;
    --site-link: #8fb6ed;
    --site-selected: #23334a;
    --site-success: #95bca3;
    --site-danger: #efa0ad;
    --site-warning: #e6b14f;
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-secondary-bg: var(--site-surface);
    --bs-tertiary-bg: var(--site-surface-muted);
    --bs-emphasis-color: var(--site-text);
    --bs-heading-color: var(--site-text);
    --bs-primary-rgb: 52, 115, 199;
    --bs-link-color: var(--site-link);
    --bs-link-hover-color: #b0ccf3;
    --bg: var(--site-bg);
    --surface: var(--site-surface);
    --surface-muted: var(--site-surface-muted);
    --border: var(--site-border);
    --text: var(--site-text);
    --text-muted: var(--site-muted);
    --primary: var(--site-primary);
    --primary-strong: var(--site-primary-hover);
    --gradient-start: var(--site-primary);
    --gradient-mid: var(--site-primary);
    --gradient-end: var(--site-primary);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-glow: none;
}

html[data-sneebo-theme] body {
    --primary: var(--site-primary);
    --primary-strong: var(--site-primary-hover);
    --primary-glow: transparent;
    --bg: var(--site-bg);
    --surface: var(--site-surface);
    --surface-muted: var(--site-surface-muted);
    --border: var(--site-border);
    --text: var(--site-text);
    --text-muted: var(--site-muted);
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
}

html[data-sneebo-theme] body::before,
html[data-sneebo-theme] body::after,
html[data-sneebo-theme] .bg-particles,
html[data-sneebo-theme] .flow-bg-dots {
    display: none !important;
}

html[data-sneebo-theme] :is(.card, .modal-content, .offcanvas, .dropdown-menu,
.list-group-item, .login-card, .about-modal-content, .logo-card, .avatar-card,
.shop-buy-card, .shop-buy-pack, .channel-card, .channel-info-card,
.user-menu-main, .user-menu-section, .poll-card, .poll-voters-modal-dialog,
.logo-modal-content, .autocomplete-results, .chat-suggestions,
.landing-hero-card, .landing-panel, .landing-feature-card, .landing-cta-card) {
    background: var(--site-surface) !important;
    color: var(--site-text);
    border-color: var(--site-border) !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.navbar, .chat-navbar, .arcade-header, .site-footer,
.modal-header, .modal-footer, .card-header, .card-footer, .offcanvas-header,
.chat-input-wrapper, .chat-input-group, .chat-reply-preview, .polls-page-header) {
    background: var(--site-bg) !important;
    border-color: var(--site-border) !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.brand-name, .navbar-brand, .arcade-title h1,
.title-arcade, .account-title, .games-page h1, .games-page h2,
.landing-hero h1, .flow-login-title, .login-card h1, .login-card h2) {
    color: var(--site-text) !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
}

html[data-sneebo-theme] :is(.text-muted, .form-text, .footer-credit,
.mobile-username-hint, .terms, .flow-login-terms, .footer-links,
.site-footer, .brand-tagline, .login-card > p) {
    color: var(--site-muted) !important;
}

html[data-sneebo-theme] :is(.form-control, .form-select, .login-card input:not([type="checkbox"]):not([type="hidden"]),
.quiz-answer-input, .wc-input, .flow-login-input, .arena-invite-input,
.arena-invite-select, .chat-suggestions) {
    background-color: var(--site-surface-muted) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
    box-shadow: none;
}

html[data-sneebo-theme] :is(input, textarea)::placeholder {
    color: var(--site-muted);
    opacity: 0.85;
}

html[data-sneebo-theme] :is(.form-control, .form-select, .flow-login-input):focus {
    border-color: var(--site-primary) !important;
    box-shadow: 0 0 0 3px rgb(52 115 199 / 20%) !important;
}

html[data-sneebo-theme] .form-check-input {
    background-color: var(--site-surface-muted);
    border-color: var(--site-border-strong);
}

html[data-sneebo-theme] .form-check-input:checked {
    background-color: var(--site-primary);
    border-color: var(--site-primary);
}

html[data-sneebo-theme] :is(.btn-primary, .btn-success, .btn-play,
.btn-arcade-primary, .mobile-primary, .btn-play-now, .flow-login-btn,
.sn-primary, .poll-submit-btn, .game-command-btn.is-active) {
    background: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
    border-color: var(--site-primary) !important;
    border-radius: 10px;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.btn-primary, .btn-success, .btn-play,
.btn-arcade-primary, .mobile-primary, .btn-play-now, .flow-login-btn):hover {
    background: var(--site-primary-hover) !important;
    color: var(--site-primary-text) !important;
}

html[data-sneebo-theme] :is(.btn-play, .btn-arcade-primary, .btn-play-now)::before {
    display: none !important;
}

html[data-sneebo-theme] :is(.btn-outline-primary, .btn-outline-secondary,
.btn-arcade-outline, .btn-secondary, .btn-dice, .lang-btn.active,
.nav-pills .nav-link.active, .tab.active, .arcade-tab.is-active,
.btn-check:checked + label, .channel-filter-btn.active,
.channel-filter-btn.is-active) {
    background: var(--site-selected) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.btn-arcade-outline, .btn-outline-primary,
.btn-outline-secondary):hover {
    background: var(--site-surface-raised) !important;
}

html[data-sneebo-theme] :is(.nav-link, .lang-btn, .footer-links a,
.about-feature, .mobile-shortcuts a, .dropdown-item, .list-group-item-action) {
    color: var(--site-muted);
}

html[data-sneebo-theme] :is(.dropdown-item, .list-group-item-action):hover {
    background: var(--site-surface-raised);
    color: var(--site-text);
}

html[data-sneebo-theme] :is(.bg-light, .bg-white) {
    background: var(--site-surface) !important;
}

html[data-sneebo-theme] .text-dark {
    color: var(--site-text) !important;
}

html[data-sneebo-theme] .bg-primary {
    background-color: var(--site-primary) !important;
    color: var(--site-primary-text);
}

html[data-sneebo-theme] .text-primary {
    color: var(--site-link) !important;
}

html[data-sneebo-theme] :is(.alert-info, .alert-primary) {
    color: #c2d5ef;
    background: #23334a;
    border-color: #3e5473;
}

html[data-sneebo-theme] :is(.alert-warning, .game-unranked, .game-demo) {
    color: #e5cc99;
    background: #302a20;
    border-color: #554830;
}

html[data-sneebo-theme] :is(.alert-danger, .flow-login-error) {
    color: var(--site-danger);
    background: #3b272d;
    border-color: #66404b;
}

html[data-sneebo-theme] .alert-success {
    color: var(--site-success);
    background: #24342b;
    border-color: #3c5947;
}

html[data-sneebo-theme] .bg-warning.text-dark {
    color: #231d12 !important;
}

html[data-sneebo-theme] .table {
    --bs-table-bg: var(--site-surface);
    --bs-table-color: var(--site-text);
    --bs-table-border-color: var(--site-border);
    --bs-table-striped-bg: var(--site-surface-muted);
    --bs-table-striped-color: var(--site-text);
    --bs-table-hover-bg: var(--site-surface-raised);
    --bs-table-hover-color: var(--site-text);
    color: var(--site-text);
}

html[data-sneebo-theme] :is(.cookie-banner, .cookie-banner__content) {
    background: var(--site-surface) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.cookie-banner__text, .cookie-banner__link) {
    color: var(--site-muted) !important;
}

html[data-sneebo-theme] .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-sneebo-theme] .arcade-user-link {
    flex-direction: row-reverse;
    color: var(--site-muted);
    background: transparent;
    box-shadow: none;
}

html[data-sneebo-theme] .arcade-user-link > i {
    font-size: 24px;
    color: var(--site-muted);
}

html[data-sneebo-theme] .mobile-quick-card {
    align-items: center;
    text-align: center;
    background: var(--site-surface);
    border-color: var(--site-border);
    border-radius: 10px;
    box-shadow: none;
}

html[data-sneebo-theme] :is(.mobile-disclosure, .mobile-together) {
    background: transparent;
    border-color: var(--site-border);
    box-shadow: none;
}

html[data-sneebo-theme] :is(.mobile-quick-card, .mobile-game-link,
.arena-card a, .mobile-together) {
    --game-color: #91b3c7;
}

html[data-sneebo-theme] [data-game-icon] {
    --game-color: #91b3c7;
}

html[data-sneebo-theme] body :is([href*="/arcade/reaction"], [data-game-icon="reaction"]) { --game-color: #e6b14f; }
html[data-sneebo-theme] body :is([href*="/arcade/quiz-challenge"], [data-game-icon="quiz"]) { --game-color: #df83a2; }
html[data-sneebo-theme] body :is([href*="/arcade/sudoku"], [data-game-icon="sudoku"]) { --game-color: #81a9e4; }
html[data-sneebo-theme] body :is([href*="/arcade/aim-trainer"], [data-game-icon="aim"]) { --game-color: #91b7a0; }
html[data-sneebo-theme] body :is([href*="/arcade/hangman"], [data-game-icon="hangman"]) { --game-color: #d8a27d; }
html[data-sneebo-theme] body [href*="/arcade/emoji-rush"] { --game-color: #dab36c; }
html[data-sneebo-theme] body [href*="/arcade/shape-swipe"] { --game-color: #a593c7; }
html[data-sneebo-theme] body [href*="/arcade/pattern-match"] { --game-color: #83b4ad; }
html[data-sneebo-theme] body [href*="/arcade/maze-escape"] { --game-color: #a8b584; }
html[data-sneebo-theme] body [href*="/arcade/breakout"] { --game-color: #d39b80; }
html[data-sneebo-theme] body [href*="/arcade/candy-match"] { --game-color: #d78da9; }
html[data-sneebo-theme] body [href*="/arcade/flow-free"] { --game-color: #83b5b8; }
html[data-sneebo-theme] body [href*="/arcade/word-chain"] { --game-color: #a3adc9; }

html[data-sneebo-theme] :is(.mobile-quick-card > i, .mobile-game-link > i:first-child,
.site-game-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--game-color) 30%, var(--site-border));
    border-radius: 50%;
    color: var(--game-color);
    background: color-mix(in srgb, var(--game-color) 12%, var(--site-bg));
    font-size: 23px;
}

html[data-sneebo-theme] .mobile-game-link > i:first-child {
    width: 34px;
    height: 34px;
    font-size: 20px;
}

html[data-sneebo-theme] .mobile-together > i:first-child {
    color: #91b3c7;
}

html[data-sneebo-theme] body .mobile-bottom-nav {
    background: var(--site-bg);
    border-color: var(--site-border);
    box-shadow: none;
}

html[data-sneebo-theme] .mobile-bottom-nav .nav-item {
    color: var(--site-muted);
    background: transparent;
}

html[data-sneebo-theme] .mobile-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    border-radius: 16px;
}

html[data-sneebo-theme] .mobile-nav-icon > i {
    font-size: 23px;
    line-height: 1;
}

html[data-sneebo-theme] .mobile-bottom-nav .nav-item.active {
    background: transparent;
    color: var(--site-text);
}

html[data-sneebo-theme] .mobile-bottom-nav .nav-item.active .mobile-nav-icon {
    background: var(--site-primary);
    color: var(--site-primary-text);
}

html[data-sneebo-theme] .mobile-chat-count {
    background: var(--site-selected);
    color: #c2d5ef;
}

html[data-sneebo-theme] :is(.chat-suggestion-item:hover, .emoji-picker,
.emoji-picker-popover, .user-menu-offcanvas, .channel-sidebar,
.message-context-menu, .chat-sidebar, .chat-suggestions) {
    background: var(--site-surface) !important;
    color: var(--site-text);
    border-color: var(--site-border);
}

html[data-sneebo-theme] :is(.chat-message, .message-bubble, .pm-message,
.channel-info-polls-link, .channel-info-emojis-link, .game-command-btn) {
    border-color: var(--site-border);
}

html[data-sneebo-theme] :is(.chat-input-group #sendButton, .chat-reply-preview) {
    background: var(--site-selected);
    color: var(--site-link);
}

html[data-sneebo-theme] :is(.reaction-target, .at-playfield, .bo-canvas-wrap,
.mz-playfield, .pm-game-area, .cm-board, .ff-overlay, .pm-game-over-content,
.hm-modal, .result-modal-content, .waiting-modal-card, .no-coins-modal-content,
.at-game-over-modal, .arcade-modal-card, .wc-pause-overlay, .ff-modal) {
    border-color: var(--site-border);
    box-shadow: none;
}

html[data-sneebo-theme] .reaction-target:not(.waiting):not(.ready):not(.too-soon) {
    background: var(--site-surface);
    color: var(--site-text);
}

html[data-sneebo-theme] :is(.login-card, .brand-logo) {
    box-shadow: none !important;
}

html[data-sneebo-theme] .login-home .login-card {
    background: transparent !important;
}

html[data-sneebo-theme] :is(.flow-login-btn, .btn-play) {
    text-transform: none;
    letter-spacing: 0;
}

html[data-sneebo-theme] body.mobile-home .mobile-quick-card > i {
    color: var(--game-color);
    background: color-mix(in srgb, var(--game-color) 12%, var(--site-bg));
    border-color: color-mix(in srgb, var(--game-color) 30%, var(--site-border));
}

html[data-sneebo-theme] :is(.ff-btn, .btn-reaction-primary, .at-game-over-btn.primary) {
    background: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
    border-color: var(--site-primary) !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.ff-header, .ff-leaderboard, .ff-achievements,
.ff-modal, .ff-modal-header, .ff-modal-overlay .ff-modal,
.flow-login-container, .flow-login-container .flow-login-field) {
    background: var(--site-surface);
    color: var(--site-text);
    border-color: var(--site-border);
    box-shadow: none;
}

html[data-sneebo-theme] :is(.ff-title, .ff-modal-title, .ff-stat-value,
.flow-login-title, .flow-login-subtitle) {
    color: var(--site-text) !important;
    text-shadow: none !important;
}

html[data-sneebo-theme] .login-card .brand-logo {
    max-width: 56px;
    max-height: 56px;
    padding: 0;
    background: transparent;
    border: 0;
}

html[data-sneebo-theme] .at-target {
    background: radial-gradient(circle, var(--site-text) 0 18%, var(--site-primary) 19% 42%, var(--site-link) 43%);
    border-color: var(--site-text);
}


html[data-sneebo-theme] .mobile-hero h1 {
    max-width: 310px;
}

html[data-sneebo-theme] .chat-view .container > .row {
    margin-left: 0;
    margin-right: 0;
}

html[data-sneebo-theme] :is(.onboarding-card, .avatar-nudge-card,
.logo-mode-button, .logo-option, .hide-list-cost) {
    background: var(--site-surface) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] :is(.logo-mode-button.is-active, .logo-option.is-active) {
    background: var(--site-selected) !important;
    border-color: var(--site-primary) !important;
}

html[data-sneebo-theme] .message {
    background: var(--site-surface);
}

html[data-sneebo-theme] .message.message-mine {
    background: var(--site-selected);
    border-left-color: var(--site-primary);
}

html[data-sneebo-theme] .message.system-message {
    background: var(--site-surface-muted);
    border-left-color: var(--site-border);
}

html[data-sneebo-theme] .message:hover {
    background: var(--site-surface-raised);
}

html[data-sneebo-theme] :is(.btn-danger, .btn-arcade-danger) {
    background: #b44455 !important;
    color: var(--site-primary-text) !important;
    border-color: #b44455 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 10px;
}

html[data-sneebo-theme] :is(.btn-danger, .btn-arcade-danger):hover {
    background: #a23b4b !important;
}

html[data-sneebo-theme] :is(.table-light, .table thead th) {
    --bs-table-bg: var(--site-surface-raised);
    --bs-table-color: var(--site-text);
    background: var(--site-surface-raised) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border);
}

html[data-sneebo-theme] .rpg-park-page .park-container > div[style] > div[style] {
    background: var(--site-surface) !important;
    border: 1px solid var(--site-border);
}

html[data-sneebo-theme] [data-game-icon="line_duel"] { --game-color: #88a8d4; }
html[data-sneebo-theme] [data-game-icon="card_war"] { --game-color: #c5a47b; }
html[data-sneebo-theme] [data-game-icon="blackjack"] { --game-color: #c58c98; }

html[data-sneebo-theme] .arena-page .arena-card .site-game-icon {
    color: var(--game-color);
    background: color-mix(in srgb, var(--game-color) 12%, var(--site-bg));
    border: 1px solid color-mix(in srgb, var(--game-color) 30%, var(--site-border));
    border-radius: 50%;
    font-size: 23px;
}

html[data-sneebo-theme] a {
    color: var(--site-link);
}

html[data-sneebo-theme] :is(.chat-emoji-picker, .game-rules-modal-dialog,
.game-rules-modal-header, .poll-voters-modal-header, .text-bg-light) {
    background: var(--site-surface) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
    box-shadow: none !important;
}

html[data-sneebo-theme] body.game-mobile :is(.game-unranked, .game-demo) {
    color: #e5cc99;
    background: #302a20;
    border-color: #554830;
}

/* Keep conversation navigation on one accessible, compact row. */
html[data-sneebo-theme] body.mobile-chat {
    --mobile-nav-height: calc(48px + env(safe-area-inset-bottom, 0px));
}

html[data-sneebo-theme] body.mobile-chat .mobile-bottom-nav {
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-sneebo-theme] body.mobile-chat .mobile-bottom-nav .nav-item {
    min-height: 47px;
    flex-direction: row;
    gap: 5px;
    border-radius: 0;
}

html[data-sneebo-theme] body.mobile-chat .mobile-nav-icon {
    width: 32px;
    height: 28px;
    flex-shrink: 0;
}

html[data-sneebo-theme] body.mobile-chat .mobile-nav-icon > i {
    font-size: 20px;
}

html[data-sneebo-theme] body.mobile-chat .mobile-nav-label {
    font-size: 11px;
    gap: 3px;
}