/* ==========================================================================
   Midgard Idle: tema escuro. Tudo sob html[data-mg-theme="dark"] (atributo posto por appearance.js; "auto" ja chega resolvido).
   O CSS do jogo (Tailwind gerado) e quase todo movido por tokens --color-ro-*, entao a maior parte do tema e trocar os tokens na raiz.
   Os tokens derivados (color-mix) sao recalculados sozinhos. O resto sao regras com cor fixa no CSS do jogo, reescritas uma a uma abaixo.
   Contraste: texto normal >= 4.5:1 e texto grande/controle >= 3:1 sobre as superficies (janela #1b2331, painel #232d42, campo #141b28).
   Nao toca em sprites, icones, canvas, QR code (bg-white) nem nos tooltips, que ja sao escuros no tema claro.
   Fica fora de qualquer @layer de proposito: CSS sem camada ganha das camadas do Tailwind.
   ========================================================================== */

/* ---- 1. Tokens ---- */
html[data-mg-theme="dark"] {
  color-scheme: dark;
  /* superficies */
  --color-ro-window-bg: #1b2331;
  --color-ro-window-border: #3a4660;
  --color-ro-panel-bg: #232d42;
  --color-ro-stat-cell-light: #28334a;
  --color-ro-vitals-panel: #1f2736;
  --color-ro-row-even: #212b3d;
  --color-ro-inventory-favorite-tab: #34466e;
  /* chanfros: a luz do topo vira um brilho discreto e o fundo do chanfro some */
  --color-ro-bevel-light: #2e3a53;
  --color-ro-bevel-face: #243048;
  /* bordas e sulcos */
  --color-ro-icon-frame: #3a4866;
  --color-ro-panel-groove-dark: #9db2dd;
  --color-ro-divider-sparkle: #6f86bd;
  /* texto */
  --color-ro-body: #e6ebf5;
  --color-ro-muted: #a3b3cf;
  --color-ro-stat-label-text: #bccbe6;
  --color-ro-login-label: #a9bbdc;
  --color-ro-error: #ff8a94;
  --color-ro-accent: #ff6b9c;
  /* campos */
  --color-ro-chat-input: #161d2b;
  --color-ro-input-placeholder: #8496b5;
  --color-ro-input-disabled: #7a8aa6;
  --color-ro-segmented-item: #90a1c0;
  /* barras de rolagem */
  --color-ro-scroll-thumb-top: #8aa0d0;
  --color-ro-scroll-thumb-mid: #7189bd;
  --color-ro-scroll-thumb-bottom: #5f78ad;
  --color-ro-scroll-thumb-border: #7d93c2;
  /* o brilho branco dos controles claros vira um reflexo fraco */
  --background-image-ro-control-default: linear-gradient(to bottom, #ffffff14 0%, #fff0 48%), linear-gradient(to bottom, var(--color-ro-bevel-light), var(--color-ro-bevel-face));
  --inset-shadow-ro-inner-border: inset 0 1px 0 #ffffff14;
  --shadow-ro-frame-edge: 0 0 0 1px color-mix(in srgb, var(--color-ro-panel-groove-dark) 30%, transparent), 0 -1px 2px #ffffff10;
  --shadow-ro-portrait-well: inset 0 0 0 1px color-mix(in srgb, var(--color-ro-panel-groove-dark) 26%, transparent), inset 0 4px 7px -3px #00000080, 0 1px 0 #ffffff10;
  --background-ro-portrait-well: linear-gradient(to bottom, #232d42, var(--color-ro-window-bg));
  --background-image-ro-segmented-item-selected: linear-gradient(to bottom, #ffffff18 0%, #fff0 55%), linear-gradient(to bottom, #34426138, #34426138);
  --shadow-ro-segmented: inset 0 1px 2px #00000066;
  --shadow-ro-scroll-track: inset 0 0 0 1px #9db2dd33, inset 0 2px 4px #00000066, 0 1px 0 #ffffff0d;
  --shadow-ro-input: inset 0 0 0 1px #6f82ad, inset 0 2px 4px #00000066, 0 1px 0 #ffffff0d;
  --shadow-ro-input-focus: inset 0 0 0 1px var(--color-ro-icon-arrow), inset 0 2px 4px #00000066, 0 0 0 3px #8aa2e659;
  --shadow-ro-input-invalid: inset 0 0 0 1px var(--color-ro-error), inset 0 2px 4px #00000066;
  --shadow-ro-button-default-hover: inset 0 1px 0 #ffffff14, 0 1px 2px #00000066;
  --shadow-ro-button-default-active: inset 0 1px 2px #00000080;
  --shadow-ro-control-default: inset 0 1px 0 #ffffff14, inset 0 -1px 0 #00000059, 0 1px 2px #00000059;
  --shadow-ro-choice-face: inset 0 1px 0 #ffffff14, 0 1px 2px #00000059;
  --shadow-ro-badge-quiet: inset 0 0 0 1px var(--color-ro-icon-frame), 0 1px 2px #00000059;
  --shadow-ro-panel-soft: 0 1px 3px #00000066;
  --shadow-ro-window: 0 10px 18px -3px #000000b3, 0 4px 6px -4px #000000b3;
  --background-image-ro-button-default: linear-gradient(to bottom, var(--color-ro-bevel-light), var(--color-ro-bevel-face));
  --background-image-ro-button-default-hover: linear-gradient(to bottom, #36456a, #2d3a58);
  --background-image-ro-button-default-active: linear-gradient(to bottom, #1d2740, #222d47);
  --background-image-ro-badge: linear-gradient(to bottom, #ffffff30 0%, #fff0 52%), linear-gradient(to bottom, #3f5a98, #2f4885);
  --background-image-ro-badge-accent: linear-gradient(to bottom, #ffffff40 0%, #fff0 52%), linear-gradient(to bottom, #a8184f, #8f1243);
  --background-image-ro-badge-quiet: linear-gradient(to bottom, var(--color-ro-bevel-light), var(--color-ro-stat-cell-light));
}
/* Janelas do jogo e chat redefinem tokens na propria classe (so no tema claro): o escuro precisa vir junto. */
html[data-mg-theme="dark"] .ro-game-surface {
  --color-ro-window-bg: #1b2331;
  --color-ro-body: #e6ebf5;
  --color-ro-panel-bg: #232d42;
  --color-ro-vitals-panel: #1f2736;
  --color-ro-panel-groove-dark: #9db2dd;
  --color-ro-icon-frame: #3a4866;
  --color-ro-accent: #78b0f2;
}
html[data-mg-theme="dark"] .ro-game-chat { --color-ro-icon-frame: #4a5f8c; }

/* ---- 2. Base ---- */
html[data-mg-theme="dark"] body { color: var(--color-ro-body); }
html[data-mg-theme="dark"] ::selection { background: #4d6aa4; color: #fff; }

/* ---- 3. Texto: utilitarios com cor fixa ---- */
html[data-mg-theme="dark"] .text-ro-body\/70 { color: color-mix(in srgb, var(--color-ro-body) 72%, transparent); }
html[data-mg-theme="dark"] .text-ro-body\/75 { color: color-mix(in srgb, var(--color-ro-body) 78%, transparent); }
html[data-mg-theme="dark"] .text-ro-stat-label-text\/65 { color: color-mix(in srgb, var(--color-ro-stat-label-text) 78%, transparent); }
html[data-mg-theme="dark"] .text-ro-stat-label-text\/70 { color: color-mix(in srgb, var(--color-ro-stat-label-text) 82%, transparent); }
html[data-mg-theme="dark"] .text-ro-stat-label-text\/75 { color: color-mix(in srgb, var(--color-ro-stat-label-text) 86%, transparent); }
html[data-mg-theme="dark"] .text-ro-icon-orb-core { color: #c9d6ee; }
html[data-mg-theme="dark"] .text-ro-icon-arrow-edge { color: #9db4ec; }
html[data-mg-theme="dark"] .text-ro-icon-arrow { color: #9db4ec; }
html[data-mg-theme="dark"] .text-ro-mark-common { color: #c4cbd8; }
html[data-mg-theme="dark"] .text-ro-mark-uncommon { color: #7ce4a0; }
html[data-mg-theme="dark"] .text-ro-mark-rare { color: #8fb0ff; }
html[data-mg-theme="dark"] .text-ro-mark-legendary { color: #ffd266; }
html[data-mg-theme="dark"] .border-ro-mark-common { border-color: #8a93a6; }
html[data-mg-theme="dark"] .border-ro-mark-uncommon { border-color: #4fbf7a; }
html[data-mg-theme="dark"] .border-ro-mark-rare { border-color: #6a8fe6; }
html[data-mg-theme="dark"] .border-ro-mark-legendary { border-color: #d9a82e; }
html[data-mg-theme="dark"] .text-ro-tray-discord-accent { color: #9aa5ff; }
html[data-mg-theme="dark"] .ro-chat-composer-input::placeholder { color: #8da0c2; }
html[data-mg-theme="dark"] .ro-login-otp>div:last-child { color: color-mix(in srgb, var(--color-ro-stat-label-text) 80%, transparent); }

/* codigos de cor do Ragnarok nas descricoes (^000099 azul, ^000000 preto, ^777777 cinza) viram estilo inline: reescritos por atributo */
html[data-mg-theme="dark"] [style*="color: rgb(0, 0, 153)"] { color: #8fb0ff !important; }
html[data-mg-theme="dark"] [style*="color: rgb(0, 0, 0)"] { color: var(--color-ro-body) !important; }
html[data-mg-theme="dark"] [style*="color: rgb(119, 119, 119)"] { color: #aab6cc !important; }

/* ---- 4. Fundos e bordas com cor fixa ---- */
html[data-mg-theme="dark"] .bg-white\/90 { background-color: #1b2331e6; }
html[data-mg-theme="dark"] .bg-ro-panel-bg\/30 { background-color: color-mix(in srgb, var(--color-ro-panel-bg) 30%, transparent); }
html[data-mg-theme="dark"] .bg-ro-panel-bg\/65 { background-color: color-mix(in srgb, var(--color-ro-panel-bg) 65%, transparent); }
html[data-mg-theme="dark"] .hover\:bg-ro-stat-cell-light\/50:hover { background-color: color-mix(in srgb, var(--color-ro-stat-cell-light) 70%, transparent); }
html[data-mg-theme="dark"] .border-ro-window-border\/50 { border-color: color-mix(in srgb, var(--color-ro-window-border) 55%, transparent); }
html[data-mg-theme="dark"] .border-ro-window-border\/60 { border-color: color-mix(in srgb, var(--color-ro-window-border) 65%, transparent); }
html[data-mg-theme="dark"] .border-ro-window-border\/70 { border-color: color-mix(in srgb, var(--color-ro-window-border) 75%, transparent); }
html[data-mg-theme="dark"] .border-ro-icon-frame\/50 { border-color: color-mix(in srgb, var(--color-ro-icon-frame) 55%, transparent); }
html[data-mg-theme="dark"] .border-ro-icon-frame\/60 { border-color: color-mix(in srgb, var(--color-ro-icon-frame) 65%, transparent); }
html[data-mg-theme="dark"] :where(.divide-ro-window-border\/60>:not(:last-child)) { border-color: color-mix(in srgb, var(--color-ro-window-border) 65%, transparent); }
html[data-mg-theme="dark"] .border-ro-error\/30 { border-color: #ff8a944d; }
html[data-mg-theme="dark"] .border-ro-error\/35 { border-color: #ff8a9459; }
html[data-mg-theme="dark"] .border-ro-error\/40 { border-color: #ff8a9466; }
html[data-mg-theme="dark"] .bg-ro-error\/5 { background-color: #ff8a9414; }
html[data-mg-theme="dark"] .bg-ro-error\/10 { background-color: #ff8a9424; }
html[data-mg-theme="dark"] .hover\:bg-ro-error\/10:hover { background-color: #ff8a9424; }
html[data-mg-theme="dark"] .bg-ro-accent\/5 { background-color: #ff6b9c14; }
html[data-mg-theme="dark"] .bg-ro-accent\/10,
html[data-mg-theme="dark"] .hover\:bg-ro-accent\/10:hover { background-color: #ff6b9c24; }

/* ---- 5. Componentes com cor fixa no CSS do jogo ---- */
/* casas de slot (hover, ativo, selecionado) */
html[data-mg-theme="dark"] .ro-slot:hover:not(:disabled)>.ro-slot__face,
html[data-mg-theme="dark"] .ro-slot.is-hover:not(:disabled)>.ro-slot__face,
html[data-mg-theme="dark"] .ro-slot.ro-slot-state[data-slot-state=selected]>.ro-slot__face { background: #3a4670; }
html[data-mg-theme="dark"] .ro-slot:active:not(:disabled)>.ro-slot__face,
html[data-mg-theme="dark"] .ro-slot.is-active:not(:disabled)>.ro-slot__face,
html[data-mg-theme="dark"] .ro-slot.ro-slot-state[data-slot-state=pressed]>.ro-slot__face { background: #2f3a5e; }
html[data-mg-theme="dark"] .ro-slot[data-slot-appearance=transparent]>.ro-slot__face,
html[data-mg-theme="dark"] .ro-slot[data-slot-appearance=transparent]:hover:not(:disabled)>.ro-slot__face { background: 0 0; }
html[data-mg-theme="dark"] .ro-character-slot:hover:not(:disabled)>.ro-slot__face { background: #2c3857; }
/* abas, listas, selects */
html[data-mg-theme="dark"] .ro-tab-tool:hover:not(:disabled) { background: #3a2535; }
html[data-mg-theme="dark"] .ro-select-paper-option[aria-selected=true]:not([aria-disabled=true]) { background: #2f3d5f; }
html[data-mg-theme="dark"] .ro-select-paper-option[data-active=true]:not([aria-selected=true]):not([aria-disabled=true]) { background: #283350; }
html[data-mg-theme="dark"] .ro-list-action:hover:not(:disabled),
html[data-mg-theme="dark"] .ro-list-action:focus-visible:not(:disabled),
html[data-mg-theme="dark"] .ro-list-action[aria-pressed=true],
html[data-mg-theme="dark"] .ro-list-action[aria-expanded=true] { background: #2c3856; }
/* chat: campo de digitacao */
html[data-mg-theme="dark"] .ro-chat-composer { color: var(--color-ro-body); background: #161d2b; border-color: #3f5176; box-shadow: inset 0 1px 2px #00000066; }
html[data-mg-theme="dark"] .ro-chat-composer:focus-within { outline-color: #5d7bbd; }
/* barras de HP/SP/EXP: so a calha */
html[data-mg-theme="dark"] .ro-basic-info-gauge .ro-gauge-track { background: #10161f; box-shadow: inset 0 1px 2px #00000080, inset 0 0 0 1px #3a4866; }
/* quantidade nos slots do inventario: contorno claro vira escuro */
html[data-mg-theme="dark"] .ro-inventory-quantity { text-shadow: -1px -1px #0b0f14, 1px -1px #0b0f14, -1px 1px #0b0f14, 1px 1px #0b0f14; }
/* refino */
html[data-mg-theme="dark"] .refinement-risk-safe,
html[data-mg-theme="dark"] .refinement-outcome-safe { color: #9be3b1; background: #1b3427; border-color: #4a9b64; }
html[data-mg-theme="dark"] .refinement-risk-warning,
html[data-mg-theme="dark"] .refinement-outcome-warning { color: #f3d487; background: #3a3118; border-color: #b08b3a; }
html[data-mg-theme="dark"] .refinement-risk-danger,
html[data-mg-theme="dark"] .refinement-outcome-danger { color: #ff9ea6; background: #3d1d24; border-color: #b8525c; }
html[data-mg-theme="dark"] .refinement-attempt-overlay { background: #131a27f0; }
html[data-mg-theme="dark"] .refinement-result-destroyed { background: #3d1d24; }
html[data-mg-theme="dark"] .refinement-result-success { background: #1f2c45eb; }
/* campos preenchidos automaticamente pelo navegador */
html[data-mg-theme="dark"] .ro-login-input:-webkit-autofill,
html[data-mg-theme="dark"] .ro-login-input:-webkit-autofill:hover,
html[data-mg-theme="dark"] .ro-login-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-ro-body); }

/* ---- 5b. Contraste (auditoria WCAG 2.2 AA) ---- */
/* aviso global sobre o mapa: amarelo sobre fundo preto 50% falhava em mapas claros */
html[data-mg-theme="dark"] [data-testid="global-notice-host"] section { background-color: rgba(8, 12, 20, .84); }
/* marcador de radio e caixa de selecao: anel visivel (3:1) sobre a janela */
html[data-mg-theme="dark"] .ro-choice-face { outline: 1px solid #8196c2; outline-offset: -1px; }

/* ---- 6. Paginas de entrada (auth/*.html, tokens proprios --ro-*) ---- */
html[data-mg-theme="dark"] body[data-page] {
  --ro-body: #e6ebf5; --ro-title: #d4def2; --ro-muted: #a3b3cf; --ro-deep: #3d5a99; --ro-accent: #86b2ea; --ro-face: #243048;
  --ro-bevel-light: #2e3a53; --ro-bevel-dark: #0f1521; --ro-error: #ff8a94; --ro-ok: #6fd49a;
}
html[data-mg-theme="dark"] body[data-page]::before { background: linear-gradient(180deg, rgba(5, 8, 14, .55), rgba(5, 8, 14, .8)); }
html[data-mg-theme="dark"] body[data-page] .ro-card { background: #1b2331; border-color: #3a4660; box-shadow: 0 18px 50px rgba(0, 0, 0, .7); }
html[data-mg-theme="dark"] body[data-page] .ro-card__head { background: #2a3a63; background-image: linear-gradient(to bottom, #3b4f84 0%, #2c3c66 40%, #25335a 100%); border-bottom-color: #0b0f14; }
html[data-mg-theme="dark"] body[data-page] .ro-card__title { color: #e6ebf5; }
html[data-mg-theme="dark"] body[data-page] .ro-card__title small { color: #a9bbdc; }
html[data-mg-theme="dark"] body[data-page] input[type=email],
html[data-mg-theme="dark"] body[data-page] input[type=password],
html[data-mg-theme="dark"] body[data-page] input[type=text] { background: #141b28; border-color: #3f5176; color: #e6ebf5; }
html[data-mg-theme="dark"] body[data-page] input:focus { background: #19223a; border-color: #86b2ea; box-shadow: 0 0 0 3px rgba(134, 178, 234, .3); }
html[data-mg-theme="dark"] body[data-page] .ro-btn { background: #3d5a99; border-color: #2a417a; }
html[data-mg-theme="dark"] body[data-page] .ro-btn:hover { background: #4a6bb0; }
html[data-mg-theme="dark"] body[data-page] .ro-btn--ghost { background: #243048; color: #d4def2; border-color: #3f5176; }
html[data-mg-theme="dark"] body[data-page] .ro-btn--ghost:hover { background: #2e3b58; }
html[data-mg-theme="dark"] body[data-page] .msg { background: #232d42; border-color: #3a4866; color: #d4def2; }
html[data-mg-theme="dark"] body[data-page] .msg--error { background: #3d1d24; border-color: #7a3640; color: #ffc2c8; }
html[data-mg-theme="dark"] body[data-page] .msg code { color: #c9d6ee; }
html[data-mg-theme="dark"] body[data-page] .turnstile-note { background: #3d1d24; border-color: #7a3640; color: #ffc2c8; }

/* ---- 7. Seletor de tema nas paginas de entrada (criado por appearance.js) ---- */
.mg-ap-switch { position: fixed; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: calc(100vw - 24px); padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .92); border: 1px solid #c2c2c2; font: 700 13px/1.2 Carlito, "Segoe UI", Arial, sans-serif; color: #273c65; }
.mg-ap-switch label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: inherit; color: inherit; }
.mg-ap-switch select { font: 400 13px/1.2 inherit; font-family: inherit; color: #202020; background: #fff; border: 1px solid #b7c7df; border-radius: 6px; padding: 4px 6px; min-height: 30px; }
html[data-mg-theme="dark"] .mg-ap-switch { background: rgba(27, 35, 49, .94); border-color: #3a4660; color: #bccbe6; }
html[data-mg-theme="dark"] .mg-ap-switch select { color: #e6ebf5; background: #141b28; border-color: #3f5176; }