/* ============ Temas do jogo ============ */
/* Escolhidos na Config (applyTheme em gameEngine.js grava em body[data-wb-theme]).
   O tema escuro é o visual original e não define nada aqui.

   Como funciona: as cores fixas do CSS ganharam uma segunda declaração que segue
   três cores-base (tools/theme_css_vars.mjs):
     --wb-surface  painéis e fundos (azul-marinho no escuro)
     --wb-ink      textos claros (azul-gelo no escuro)
     --wb-accent   bordas, brilhos e detalhes (ciano no escuro)
   Cada tema troca essas três, as variáveis antigas do layout e as cores das peças
   lidas pelo canvas (refreshThemeColors). Carregado por último. */

/* ---------- Claro ---------- */
body.wb-mobile-ui[data-wb-theme='light'],
body.stats-page[data-wb-theme='light'] {
    --wb-surface: rgb(244 246 251);
    --wb-ink: rgb(30 41 66);
    --wb-accent: rgb(34 74 158);
    --wb-warm: rgb(150 96 0);
    --wb-mint: rgb(10 128 76);
    --wb-accent-bg: rgb(150 196 250);
    --bg-gradient: radial-gradient(circle at 10% 0%, #ffffff 0%, #eef2f9 45%, #dfe6f2 100%);
    --surface: #ffffff;
    --surface-alt: #eef2f9;
    --board-bg: #e6ecf6;
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: 1px solid rgba(30, 41, 66, 0.12);
    --shadow-soft: 0 16px 36px -22px rgba(30, 41, 66, 0.35);
    --primary-color: #1e2942;
    --accent-color: #2f62c8;
    --text-main: #1e2942;
    --text-muted: #4c5a78;
    --tile-normal: #fbf6ea;
    --tile-selected: #7cc8ff;
    --tile-text: #18233f;
    --tile-glow: rgba(47, 98, 200, 0.75);
    --wb-board-bg: linear-gradient(180deg, #e9eef7 0%, #dde5f1 100%);
    --wb-theme-color: #eef2f9;
    color: var(--text-main);
}

/* ---------- Cassino: feltro verde-musgo, peças de marfim e pérola ---------- */
body.wb-mobile-ui[data-wb-theme='casino'],
body.stats-page[data-wb-theme='casino'] {
    --wb-surface: rgb(40 62 38);
    --wb-ink: rgb(246 238 216);
    --wb-accent: rgb(214 178 92);
    --bg-gradient:
        radial-gradient(ellipse at 50% 18%, rgba(140, 170, 96, 0.28) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, #3d5a32 0%, #2c4526 52%, #1a2a17 100%);
    --surface: #2c4526;
    --surface-alt: #253b20;
    --board-bg: #22371e;
    --glass-bg: rgba(26, 44, 24, 0.86);
    --glass-border: 1px solid rgba(214, 178, 92, 0.32);
    --shadow-soft: 0 22px 44px -26px rgba(0, 0, 0, 0.8);
    --primary-color: #f6eed8;
    --accent-color: #d6b25c;
    --text-main: #f6eed8;
    --text-muted: #cfc6a8;
    /* Marfim nas peças comuns, pérola na seleção; especiais em pedras de cassino */
    --tile-normal: #f1e6c8;
    --tile-selected: #ece7f3;
    --tile-bonus: #e9c65a;
    --tile-bomb: #d8665c;
    --tile-time: #7ccf9f;
    --tile-missile: #8fb1dc;
    --tile-special-bomb: #e2a15a;
    --tile-ice: #d6eef2;
    --tile-text: #2a1c10;
    --tile-glow: rgba(255, 236, 200, 0.95);
    --wb-tile-face: #f1e6c8;
    --wb-tile-face-hi: #fffaf0;
    --wb-tile-edge: #b59c66;
    --wb-tile-ink: #2a1c10;
    --wb-board-bg:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(180deg, #2f4b29 0%, #233a1f 100%);
    --wb-board-rim: 0 0 0 3px #6b4a26, 0 0 0 5px #d6b25c;
    --wb-theme-color: #1a2a17;
}

/* ---------- Noir: preto e branco com efeitos coloridos ---------- */
body.wb-mobile-ui[data-wb-theme='noir'],
body.stats-page[data-wb-theme='noir'] {
    --wb-surface: rgb(22 22 24);
    --wb-ink: rgb(250 250 250);
    --wb-accent: rgb(0 229 255);
    --bg-gradient:
        radial-gradient(circle at 12% 8%, rgba(255, 0, 170, 0.2) 0%, transparent 38%),
        radial-gradient(circle at 88% 22%, rgba(0, 229, 255, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(255, 214, 0, 0.12) 0%, transparent 45%), #050505;
    --surface: #111111;
    --surface-alt: #0b0b0b;
    --board-bg: #000000;
    --glass-bg: rgba(14, 14, 16, 0.9);
    --glass-border: 1px solid rgba(255, 255, 255, 0.16);
    --shadow-soft: 0 22px 44px -26px rgba(0, 0, 0, 0.9);
    --primary-color: #ffffff;
    --accent-color: #00e5ff;
    --text-main: #fafafa;
    --text-muted: #b5b5b5;
    --tile-normal: #f7f7f7;
    --tile-selected: #ffffff;
    --tile-bonus: #ffe600;
    --tile-bomb: #ff2e63;
    --tile-time: #00f5a0;
    --tile-missile: #00b3ff;
    --tile-special-bomb: #ff7a00;
    --tile-ice: #b8f3ff;
    --tile-text: #0a0a0a;
    /* "rainbow": cada peça da palavra em formação ganha uma cor (gameEngine.js) */
    --tile-glow: rainbow;
    --wb-tile-face: #f7f7f7;
    --wb-tile-face-hi: #ffffff;
    --wb-tile-edge: #9a9a9a;
    --wb-tile-ink: #0a0a0a;
    --wb-board-bg: #000000;
    --wb-board-rim:
        0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 22px rgba(255, 0, 170, 0.25),
        0 0 34px rgba(0, 229, 255, 0.2);
    --wb-theme-color: #050505;
}

/* ---------- Superfícies com degradê escrito em várias linhas (fora do script) ---------- */
body.wb-mobile-ui[data-wb-theme] #start-screen.start-screen-layout,
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) {
    background: var(--bg-gradient);
    background-attachment: fixed;
}

body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .start-screen-layout::before {
    opacity: 0.35;
}

body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .start-home-card,
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .wb-sheet,
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .hud-inner,
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .glass-panel {
    background: var(--glass-bg);
    border: var(--glass-border);
    color: var(--text-main);
}

body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .app-bottom-nav {
    background: var(--glass-bg);
    border-color: rgb(from var(--wb-accent) r g b / 0.25);
}

body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .current-word-shell {
    background: var(--glass-bg);
    border-color: rgb(from var(--wb-accent) r g b / 0.3);
}

body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) #game-container,
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) #gameCanvas {
    background: var(--wb-board-bg);
}

body.wb-mobile-ui[data-wb-theme='casino'] #game-container,
body.wb-mobile-ui[data-wb-theme='noir'] #game-container {
    box-shadow: var(--wb-board-rim);
}

/* Cartões de modo: mantêm a cor de cada modo, sobre o painel do tema */
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) .hm-card {
    background-color: var(--surface);
    color: var(--text-main);
}

/* ---------- Claro: textos brancos fixos sobre painéis claros ---------- */
body.wb-mobile-ui[data-wb-theme='light']
    :is(
        .hm-name,
        .hm-desc,
        .qs-row,
        .qs-row-label,
        .app-nav-btn,
        .hud-stat-compact,
        .hud-mission-center,
        .hud-action,
        .current-word-shell,
        .wb-sheet h2,
        .wb-sheet h3,
        .start-home-card
    ) {
    color: var(--text-main);
}

/* Cores de destaque dos modos, escurecidas para ler sobre branco */
body.wb-mobile-ui[data-wb-theme='light'] .hm-arcade {
    --hm-ink: #d23c3c;
}
body.wb-mobile-ui[data-wb-theme='light'] .hm-zen {
    --hm-ink: #12965a;
}
body.wb-mobile-ui[data-wb-theme='light'] .hm-thematic {
    --hm-ink: #a87400;
}
body.wb-mobile-ui[data-wb-theme='light'] .hm-ladder {
    --hm-ink: #6a48d6;
}
body.wb-mobile-ui[data-wb-theme='light'] .hm-daily {
    --hm-ink: #b65f00;
}
body.wb-mobile-ui[data-wb-theme='light'] .hm-duels {
    --hm-ink: #1f78c4;
}

body.wb-mobile-ui[data-wb-theme='light'] #app-bottom-nav .app-nav-btn--store,
body.wb-mobile-ui[data-wb-theme='light'] #app-bottom-nav .app-nav-btn--store i {
    color: #a87400;
}

body.wb-mobile-ui[data-wb-theme='light'] #app-bottom-nav .app-nav-btn.app-nav-btn--active,
body.wb-mobile-ui[data-wb-theme='light'] #app-bottom-nav .app-nav-btn.app-nav-btn--active i {
    color: #1f4fae;
}

body.wb-mobile-ui[data-wb-theme='light'] #app-bottom-nav .app-nav-btn.app-nav-btn--active {
    background: rgba(47, 98, 200, 0.12);
    box-shadow: inset 0 0 0 1px rgba(47, 98, 200, 0.35);
}

/* Partida: chip de pontos e botão Sair */
body.wb-mobile-ui[data-wb-theme='light'] .current-word-score-chip {
    color: #7a5200;
}

body.wb-mobile-ui[data-wb-theme='light'] .hud-action--exit {
    color: #b42318;
    background: rgba(214, 69, 69, 0.1);
}

body.wb-mobile-ui[data-wb-theme='light'] .btn-close {
    filter: none;
}

/* ---------- Cassino: detalhes dourados ---------- */
body.wb-mobile-ui[data-wb-theme='casino'] .hm-card,
body.wb-mobile-ui[data-wb-theme='casino'] .qs-row {
    border-color: rgba(214, 178, 92, 0.35);
}

/* ---------- Noir: contraste máximo e contorno colorido ---------- */
body.wb-mobile-ui[data-wb-theme='noir'] .hm-card,
body.wb-mobile-ui[data-wb-theme='noir'] .qs-row {
    background-color: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.18);
}

body.wb-mobile-ui[data-wb-theme='noir'] #start-screen .btn-play-main {
    background: linear-gradient(100deg, #ff2bd6 0%, #7c4dff 35%, #00e5ff 70%, #00f5a0 100%);
    color: #050505;
}

body.wb-mobile-ui[data-wb-theme='noir'] .app-nav-btn--active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 -2px 0 #ff2bd6;
}

/* ---------- Seletor de tema na Config ---------- */
.qs-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.qs-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.22);
    border-radius: 14px;
    background: transparent;
    color: inherit;
    font-size: var(--fs-xs, 0.76rem);
    font-weight: 700;
    min-height: 44px;
}

.qs-theme-option[aria-pressed='true'] {
    border-color: var(--accent-color, #67d7ff);
    box-shadow: 0 0 0 2px rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.35);
}

.qs-theme-option:focus-visible {
    outline: 2px solid var(--accent-color, #67d7ff);
    outline-offset: 2px;
}

.qs-theme-swatch {
    position: relative;
    width: 100%;
    max-width: 58px;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
}

/* Miniatura: fundo do tema + duas pecinhas */
.qs-theme-swatch::before,
.qs-theme-swatch::after {
    content: '';
    position: absolute;
    top: 9px;
    width: 15px;
    height: 16px;
    border-radius: 4px;
}

.qs-theme-swatch::before {
    left: 10px;
}

.qs-theme-swatch::after {
    right: 10px;
}

.qs-theme-swatch--dark {
    background: radial-gradient(circle at 10% 10%, #233f77 0%, #0b1734 60%);
}

.qs-theme-swatch--dark::before,
.qs-theme-swatch--dark::after {
    background: #f6ecd6;
}

.qs-theme-swatch--dark::after {
    background: #7cc8ff;
}

.qs-theme-swatch--light {
    background: linear-gradient(180deg, #ffffff 0%, #dfe6f2 100%);
    box-shadow: inset 0 0 0 1px rgba(30, 41, 66, 0.15);
}

.qs-theme-swatch--light::before,
.qs-theme-swatch--light::after {
    background: #fbf6ea;
    box-shadow: 0 2px 0 #c9b48a;
}

.qs-theme-swatch--casino {
    background: radial-gradient(circle at 50% 40%, #3d5a32 0%, #1a2a17 100%);
    box-shadow: inset 0 0 0 2px #d6b25c;
}

.qs-theme-swatch--casino::before {
    background: #f1e6c8;
}

.qs-theme-swatch--casino::after {
    background: linear-gradient(135deg, #ffffff 0%, #ece7f3 50%, #f6e7ee 100%);
}

.qs-theme-swatch--noir {
    background: #050505;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.qs-theme-swatch--noir::before {
    background: #f7f7f7;
}

.qs-theme-swatch--noir::after {
    background: #f7f7f7;
    box-shadow:
        0 0 8px #ff2bd6,
        0 0 12px #00e5ff;
}

body.wb-mobile-ui[data-wb-theme='light'] :is(.hm-tag, .hm-meta) {
    color: var(--hm-ink, var(--hm-accent));
}

/* No cartão de tema, o nome do tema escolhido é só uma nota (como o idioma) */
#quick-settings-modal .qs-theme-card #qs-theme-state {
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Claro: o "X" de fechar é branco e o ícone do Bootstrap é invertido; sobre o
   fundo claro, os dois precisam voltar a escuro */
body.wb-mobile-ui[data-wb-theme='light'] :is(.screen, .about-modal-content) .btn-close {
    --wb-btn-close-icon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E2942' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E");
}

body.wb-mobile-ui[data-wb-theme='light'] .wb-sheet-head .btn-close {
    filter: none;
}

/* Claro: o aviso do Passe VIP começa num marrom fixo; sobre o branco, dourado claro */
body.wb-mobile-ui[data-wb-theme='light'] .pm-vip-lock {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.4) 0%, rgba(255, 255, 255, 0.9) 75%);
    border-color: rgba(168, 116, 0, 0.35);
}

/* Claro: o idioma escolhido é uma pílula escura, então o nome vai em branco */
body.wb-mobile-ui[data-wb-theme='light']
    #quick-settings-modal
    .language-flag-btn:is(.btn-primary, .btn-primary-soft, .active, [aria-pressed='true'])
    .qs-lang-name {
    color: #ffffff;
}

/* Claro: botões "outline-light" do Bootstrap são brancos; sobre branco, escuros */
body.wb-mobile-ui[data-wb-theme='light'] .btn-outline-light {
    color: var(--text-main);
    border-color: rgba(30, 41, 66, 0.3);
}

/* Botão secundário de contorno (Copiar texto): o cinza do Bootstrap some nos
   fundos dos temas */
body.wb-mobile-ui[data-wb-theme]:not([data-wb-theme='dark']) #share-screen .btn-outline-secondary {
    color: var(--text-muted);
    border-color: rgb(from var(--wb-accent) r g b / 0.4);
}

body.wb-mobile-ui[data-wb-theme='light'] .quick-settings-language-note {
    color: var(--text-muted);
}