/* =============================================================================
   DESTINYTALE UI KIT v2 — COMPONENTES                              ui/mocks/_kit/kit.css
   Depende de tokens.css. Regras de porte [P1..P12] no topo de tokens.css. Ornamentos em ornaments/ (build.mjs).
   Nome de classe = nome que vai para o .rcss (não renomear no porte). Os nomes da v1 foram MANTIDOS.
   ============================================================================= */

/* =============================================================================
   1. JANELA
   .dt-window > .dt-noise .dt-frame .dt-corner x4 .dt-head(.dt-sigil .dt-head-glow .t-eyebrow .t-h1 .dt-rule) .dt-close .dt-body .dt-foot
   Matéria: veludo (gradiente + ruído) + moldura de metal (ninepatch) + 4 cantos ornamentais + sigilo de identidade.
   ============================================================================= */
.dt-window {
  position: absolute;
  background-image: linear-gradient(180deg, #181210 0%, #0e0a08 45%, #0a0705 100%);
  color: #f3e9d8;
}
.dt-window.fx-open { animation: dtwindowin 0.26s ease-out; }
/* ruído do veludo (irmão, não pinta por cima do conteúdo: z-index 0 e o conteúdo é relative) */
.dt-noise { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-image: url(ornaments/noise.png); background-repeat: repeat; opacity: 0.7; }
/* brilho quente no topo (o candelabro atrás do título) */
.dt-head-glow { position: absolute; left: 0px; right: 0px; top: 0px; height: 120px; background-image: url(ornaments/head_glow.png); background-size: 100% 100%; background-repeat: no-repeat; }
/* moldura de metal: ninepatch 128x128, fatia 40 [P11] */
.dt-frame { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; border-width: 40px; border-color: #00000000; border-image: url(ornaments/frame_win.png) 40 fill / 40px stretch; }
/* halo escuro atrás da janela: separa do mundo sem box-shadow (irmão com radial) */
.dt-window-shade { position: absolute; left: -90px; top: -60px; right: -90px; bottom: -110px; background-image: radial-gradient(ellipse at 50% 45%, #000000cc 30%, #00000000 70%); }

/* cantos ornamentais 72x72 (PNG) — sobre a moldura, 8px para fora */
.dt-corner { position: absolute; width: 72px; height: 72px; background-repeat: no-repeat; background-size: 72px 72px; }
.dt-corner.tl { left: -8px;  top: -8px;    background-image: url(ornaments/corner_tl.png); }
.dt-corner.tr { right: -8px; top: -8px;    background-image: url(ornaments/corner_tr.png); }
.dt-corner.bl { left: -8px;  bottom: -8px; background-image: url(ornaments/corner_bl.png); }
.dt-corner.br { right: -8px; bottom: -8px; background-image: url(ornaments/corner_br.png); }
/* cantos pequenos (painel interno) */
.dt-corner.sm { width: 36px; height: 36px; background-size: 36px 36px; }
.dt-corner.sm.tl { left: -4px; top: -4px; background-image: url(ornaments/corner_s_tl.png); }
.dt-corner.sm.tr { right: -4px; top: -4px; background-image: url(ornaments/corner_s_tr.png); }
.dt-corner.sm.bl { left: -4px; bottom: -4px; background-image: url(ornaments/corner_s_bl.png); }
.dt-corner.sm.br { right: -4px; bottom: -4px; background-image: url(ornaments/corner_s_br.png); }

/* fio de luz no topo (mantido para as telas v1; na v2 a moldura já traz o fio) */
.dt-topline { position: absolute; left: 60px; right: 60px; top: 2px; height: 1px; background-image: linear-gradient(90deg, #f0cf8500 0%, #f0cf85cc 50%, #f0cf8500 100%); }

/* cabeçalho: sigilo à esquerda + eyebrow + título display + régua com gemas */
.dt-head { position: relative; padding: 26px 96px 0px 96px; text-align: center; }
.dt-head .t-eyebrow { display: block; height: 16px; line-height: 16px; }
.dt-head .t-h1 { display: block; margin-top: 4px; white-space: nowrap; }
.dt-head-left { text-align: left; padding-left: 104px; }
.dt-head-left .dt-rule { justify-content: flex-start; }
.dt-head-left .dt-rule-line.r { flex: 0 0 120px; }
.dt-head.compact { padding-top: 18px; }
.dt-head.compact .t-h1 { font-size: 32px; }
.dt-sigil { position: absolute; left: 28px; top: 20px; width: 64px; height: 64px; background-repeat: no-repeat; background-size: 64px 64px; }
.dt-sigil.sm { width: 48px; height: 48px; background-size: 48px 48px; left: 24px; top: 16px; }

/* régua: linha que afina + gemas no centro (PNG) + linha */
.dt-rule { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 18px; margin: 10px 0px 0px 0px; }
.dt-rule-line { flex: 1; height: 1px; max-width: 260px; background-image: linear-gradient(90deg, #d4a24f00 0%, #d4a24f99 100%); }
.dt-rule-line.r { background-image: linear-gradient(90deg, #d4a24f99 0%, #d4a24f00 100%); }
.dt-rule-diamond { width: 120px; height: 18px; background-image: url(ornaments/rule_center.png); background-repeat: no-repeat; background-size: 120px 18px; }
.dt-rule.sm { height: 12px; }
.dt-rule.sm .dt-rule-diamond { width: 60px; height: 12px; background-image: url(ornaments/rule_center_sm.png); background-size: 60px 12px; }

/* X de fechar: placa chanfrada (PNG) que acende em ouro [P12] */
.dt-close { position: absolute; right: 18px; top: 18px; width: 28px; height: 28px; background-image: url(ornaments/close_x.png); background-repeat: no-repeat; background-size: 28px 28px; }
.dt-close .ff-icon { display: none; }
.dt-close:hover  { background-image: url(ornaments/close_x_hover.png); }
.dt-close:active { transform: translateY(1px); }

.dt-body { position: relative; padding: 18px 32px 18px 32px; }
.dt-foot {
  position: relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 16px 32px 26px 32px;
}
.dt-foot-line { position: absolute; left: 48px; right: 48px; top: 0px; height: 1px; background-image: linear-gradient(90deg, #d4a24f00 0%, #d4a24f66 50%, #d4a24f00 100%); }

/* =============================================================================
   2. SEÇÃO / PAINEL / DIVISÓRIA
   ============================================================================= */
.dt-section { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 24px; margin: 4px 0px 12px 0px; white-space: nowrap; }
.dt-section .ff-icon { font-size: 13px; color: #d4a24f; width: 18px; text-align: center; }
.dt-section .t-section { text-shadow: 0px 1px 0px #000000; }
.dt-section-gem { width: 10px; height: 10px; background-image: url(ornaments/gem_10.png); background-size: 10px 10px; background-repeat: no-repeat; flex-shrink: 0; }
.dt-section-line { flex: 1; height: 1px; background-image: linear-gradient(90deg, #d4a24f80 0%, #d4a24f00 100%); }

/* painel rebaixado: fundo mais fundo + moldura fina (PNG ninepatch 48, fatia 14) */
.dt-panel { position: relative; background-color: #0c0806c9; border-width: 14px; border-color: #00000000; border-image: url(ornaments/frame_panel.png) 14 / 14px stretch; }
.dt-panel-pad { padding: 4px 6px; }
.dt-panel.flat { border-width: 1px; border-image: none; border-color: #2a2119; background-color: #0c0806b3; }

.dt-hr { height: 1px; background-image: linear-gradient(90deg, #d4a24f00 0%, #d4a24f55 50%, #d4a24f00 100%); margin: 12px 0px; }

/* =============================================================================
   3. ABAS — placa chanfrada (3 fatias PNG); ativa acende e ganha gema por baixo
   ============================================================================= */
.dt-tabs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.dt-tab {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px;
  height: 40px; padding: 0px 18px; white-space: nowrap;
  border-width: 0px 20px; border-color: #00000000; border-image: url(ornaments/tab.png) 0 20 fill / 0px 20px stretch;
  font-family: Spectral; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #b5a78f;
  transition: color 0.12s ease-out;
}
.dt-tab .ff-icon { font-size: 13px; color: #7d7261; transition: color 0.12s ease-out; }
.dt-tab:hover { border-image: url(ornaments/tab_hover.png) 0 20 fill / 0px 20px stretch; color: #fbf3e4; }
.dt-tab:hover .ff-icon { color: #d4a24f; }
.dt-tab.is-active { border-image: url(ornaments/tab_active.png) 0 20 fill / 0px 20px stretch; color: #fbf3e4; text-shadow: 0px 0px 10px #d4a24f80; }
.dt-tab.is-active .ff-icon { color: #f0cf85; }
/* gema sob a aba ativa (mesmo nome da v1: .dt-tab-glow) */
.dt-tab-glow { display: none; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background-image: url(ornaments/gem_10.png); background-size: 10px 10px; background-repeat: no-repeat; }
.dt-tab.is-active .dt-tab-glow { display: block; }
.dt-tab-sm { height: 34px; padding: 0px 14px; font-size: 14px; }

/* abas "linha" (segundo nível): texto espaçado + gema-sublinhado */
.dt-subtabs { display: flex; flex-direction: row; gap: 26px; height: 32px; border-bottom-width: 1px; border-color: #2a2119; }
.dt-subtab { position: relative; height: 32px; line-height: 30px; font-family: Spectral; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #7d7261; white-space: nowrap; transition: color 0.12s ease-out; }
.dt-subtab:hover { color: #f3e9d8; }
.dt-subtab.is-active { color: #f0cf85; }
.dt-subtab-bar { display: none; position: absolute; left: 0px; right: 0px; bottom: -1px; height: 2px; background-image: linear-gradient(90deg, #d4a24f00 0%, #f0cf85 50%, #d4a24f00 100%); }
.dt-subtab.is-active .dt-subtab-bar { display: block; }

/* =============================================================================
   4. BOTÕES — a chapa do site oficial (3 fatias PNG 168x44, fatia 28) [P11][P12]
   Medido em destinytale.com.br (.dest-primary-button / images/btn/btn-large.webp): chapa lisa de
   canto 4, aro de 1px #c8ac82, gradiente vertical #c2995d -> #fcce8d, texto #2a201c com luz
   #e8caa0cc embaixo, SEM espaçamento entre letras. Ver docs/ui-botao-padrao-site.md.
   ============================================================================= */
.dt-btn {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0px 22px; white-space: nowrap;
  font-family: Spectral; font-size: 16px; font-weight: 700; letter-spacing: 0px;
  border-width: 0px 28px; border-color: #00000000;
  transition: color 0.12s ease-out, transform 0.08s ease-out;
}
.dt-btn .ff-icon { font-size: 13px; }
.dt-btn:hover { transform: translateY(-1px); }
.dt-btn:active { transform: translateY(1px); }
.dt-btn-sm { height: 34px; padding: 0px 14px; font-size: 14px; letter-spacing: 0px; gap: 8px; border-width: 0px 22px; }
.dt-btn-lg { height: 52px; font-size: 18px; letter-spacing: 0px; padding: 0px 30px; }
.dt-btn-block { width: 100%; }

/* primário: a chapa de ouro do site, texto escuro com luz quente embaixo */
.dt-btn-primary { border-image: url(ornaments/btn_primary.png) 0 28 fill / 0px 28px stretch; color: #2a201c; text-shadow: 0px 1px 0px #e8caa0cc; }
.dt-btn-primary:hover  { border-image: url(ornaments/btn_primary_hover.png) 0 28 fill / 0px 28px stretch; }
.dt-btn-primary:active { border-image: url(ornaments/btn_primary_down.png) 0 28 fill / 0px 28px stretch; }
/* brilho que atravessa o primário no hover (filho, pai com overflow hidden) */
.dt-btn-shine-box { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; }
.dt-btn-shine { position: absolute; left: 0px; top: 0px; width: 48px; height: 100%; opacity: 0; transform: skewX(-18deg);
  background-image: linear-gradient(90deg, #ffffff00 0%, #fffaf080 50%, #ffffff00 100%); }
.dt-btn-primary:hover .dt-btn-shine { opacity: 1; animation: dtsweep 1.1s ease-in-out infinite; }
/* halo do primário (irmão; sem box-shadow) */
.dt-btn-halo { position: absolute; left: -14px; top: -10px; right: -14px; bottom: -14px; opacity: 0; background-image: radial-gradient(ellipse at 50% 50%, #d4a24f59 0%, #d4a24f00 70%); transition: opacity 0.18s ease-out; }
.dt-btn-primary:hover .dt-btn-halo { opacity: 1; }

/* secundário: o botão de formulário do site — fundo quase preto, fio de ouro, texto ouro */
.dt-btn-secondary { border-image: url(ornaments/btn_secondary.png) 0 28 fill / 0px 28px stretch; color: #dba25c; }
.dt-btn-secondary:hover { border-image: url(ornaments/btn_secondary_hover.png) 0 28 fill / 0px 28px stretch; color: #fbf3e4; text-shadow: 0px 0px 10px #dba25c99; }

/* neutro: sem placa; ganha placa fraca no hover */
.dt-btn-ghost { border-image: none; color: #b5a78f; font-family: Barlow; font-weight: 600; letter-spacing: 0px; font-size: 15px; }
.dt-btn-ghost:hover { border-image: url(ornaments/btn_ghost_hover.png) 0 28 fill / 0px 28px stretch; color: #fbf3e4; }

/* perigo: placa rubi */
.dt-btn-danger { border-image: url(ornaments/btn_danger.png) 0 28 fill / 0px 28px stretch; color: #f6d9d4; }
.dt-btn-danger:hover { border-image: url(ornaments/btn_danger_hover.png) 0 28 fill / 0px 28px stretch; color: #ffffff; }

/* desabilitado: placa apagada e riscada */
.dt-btn.is-disabled, .dt-btn.is-disabled:hover, .dt-btn.is-disabled:active {
  border-image: url(ornaments/btn_disabled.png) 0 28 fill / 0px 28px stretch; color: #514738; text-shadow: none; transform: none;
}
.dt-btn.is-disabled .dt-btn-shine, .dt-btn.is-disabled .dt-btn-halo { opacity: 0; animation: none; }

/* botão-linha de menu (Menu do Jogo): placa larga, ícone em medalhão, seta-gema à direita */
.dt-menurow {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 14px;
  height: 52px; padding: 0px 18px 0px 14px; width: 100%; white-space: nowrap;
  background-color: #100c0999; border-width: 1px; border-color: #2a2119; color: #e9dfcc;
  font-family: Spectral; font-size: 17px; font-weight: 600; letter-spacing: 0px;
  transition: border-color 0.12s ease-out, background-color 0.12s ease-out, color 0.12s ease-out;
}
.dt-menurow .ff-icon { width: 20px; text-align: center; font-size: 15px; color: #8a6532; transition: color 0.12s ease-out; }
.dt-menurow-arrow { margin-left: auto; width: 12px; height: 12px; background-image: url(ornaments/chev_r.png); background-size: 12px 12px; background-repeat: no-repeat; opacity: 0.5; }
.dt-menurow-arrow.ff-icon { font-size: 0px; color: #00000000; }
.dt-menurow:hover { border-color: #d4a24f80; background-color: #1c1512; color: #fbf3e4; }
.dt-menurow:hover .ff-icon { color: #f0cf85; }
.dt-menurow:hover .dt-menurow-arrow { opacity: 1; }
.dt-menurow-bar { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background-image: linear-gradient(180deg, #f0cf85 0%, #8a6532 100%); opacity: 0; transition: opacity 0.12s ease-out; }
.dt-menurow:hover .dt-menurow-bar { opacity: 1; }
.dt-menurow-glow { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; background-image: linear-gradient(90deg, #d4a24f2e 0%, #d4a24f00 60%); transition: opacity 0.12s ease-out; }
.dt-menurow:hover .dt-menurow-glow { opacity: 1; }
.dt-menurow.danger { color: #e8b0a8; border-color: #4a201b; background-color: #1c0d0b99; }
.dt-menurow.danger .ff-icon { color: #a4443a; }
.dt-menurow.danger:hover { border-color: #d94a3d; background-color: #3a1512; color: #ffffff; }
.dt-menurow.danger .dt-menurow-bar { background-image: linear-gradient(180deg, #ff8a7a 0%, #7a2a22 100%); }
.dt-menurow.danger .dt-menurow-glow { background-image: linear-gradient(90deg, #d94a3d2e 0%, #d94a3d00 60%); }

/* =============================================================================
   5. CAMPOS: input, checkbox, toggle, slider, select, radio-segmentado
   ============================================================================= */
.dt-field { display: flex; flex-direction: column; gap: 6px; }
.dt-label { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #b5a78f; }

/* input: rebaixo escuro (ninepatch 48, fatia 12) que acende no foco */
.dt-input {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px;
  height: 40px; padding: 0px 2px;
  border-width: 12px; border-color: #00000000; border-image: url(ornaments/input.png) 12 fill / 12px stretch;
}
.dt-input .ff-icon { font-size: 13px; color: #7d7261; }
.dt-input input, .dt-input-text { flex: 1; height: 16px; line-height: 16px; font-size: 16px; color: #f3e9d8; }
.dt-input-hint { position: absolute; left: 26px; top: 0px; height: 16px; line-height: 16px; font-size: 16px; color: #5f5547; }
.dt-input:hover { border-image: url(ornaments/input_focus.png) 12 fill / 12px stretch; }
.dt-input.is-focus { border-image: url(ornaments/input_focus.png) 12 fill / 12px stretch; }
.dt-input.is-focus .ff-icon { color: #d4a24f; }
.dt-caret { display: inline-block; width: 1px; height: 16px; background-color: #f0cf85; vertical-align: middle; animation: dtpulse 1s linear infinite; }
.dt-input-sm { height: 34px; }

/* checkbox: placa chanfrada com gema (PNG) */
.dt-check { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 32px; color: #e9dfcc; font-size: 16px; white-space: nowrap; }
.dt-check-box { position: relative; width: 20px; height: 20px; flex-shrink: 0; background-image: url(ornaments/check_off.png); background-size: 20px 20px; background-repeat: no-repeat; }
.dt-check-mark { display: none; }
.dt-check:hover .dt-check-box { background-image: url(ornaments/check_hover.png); }
.dt-check:hover { color: #fbf3e4; }
.dt-check.is-on .dt-check-box, .dt-check.is-on:hover .dt-check-box { background-image: url(ornaments/check_on.png); }
.dt-check.is-disabled { color: #514738; }
.dt-check.is-disabled .dt-check-box, .dt-check.is-disabled:hover .dt-check-box { background-image: url(ornaments/check_dis.png); }

/* toggle: trilho rebaixado, gema redonda */
.dt-toggle { display: flex; flex-direction: row; align-items: center; gap: 12px; height: 32px; color: #b5a78f; font-size: 16px; white-space: nowrap; }
.dt-toggle-track { position: relative; width: 46px; height: 22px; border-radius: 11px; background-color: #080503; border-width: 1px; border-color: #3d3024; transition: border-color 0.18s ease-out, background-color 0.18s ease-out; }
.dt-toggle-knob { position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-image: url(ornaments/knob_off.png); background-size: 18px 18px; background-repeat: no-repeat; transition: transform 0.18s ease-out; }
.dt-toggle.is-on .dt-toggle-track { background-color: #2a1e10; border-color: #d4a24f; }
.dt-toggle.is-on .dt-toggle-knob { transform: translateX(24px); background-image: url(ornaments/knob_gold.png); }
.dt-toggle.is-on { color: #fbf3e4; }

/* slider: trilho rebaixado, preenchimento ouro, polegar = gema (PNG), valor à direita em Spectral */
.dt-slider { display: flex; flex-direction: row; align-items: center; gap: 16px; height: 36px; }
.dt-slider-label { width: 200px; font-size: 16px; color: #e9dfcc; white-space: nowrap; }
.dt-slider-track { position: relative; flex: 1; height: 8px; background-color: #080503; border-width: 1px; border-color: #3d3024; }
.dt-slider-fill { position: absolute; left: 0px; top: 0px; height: 6px; background-image: linear-gradient(90deg, #8a6532 0%, #d4a24f 70%, #f0cf85 100%); }   /* [P9] largura vem do C++ */
.dt-slider-thumb { position: absolute; top: -8px; width: 22px; height: 22px; margin-left: -11px; background-image: url(ornaments/thumb_gem.png); background-size: 22px 22px; background-repeat: no-repeat; transition: transform 0.12s ease-out; }
.dt-slider:hover .dt-slider-thumb { transform: scale(1.15); }
.dt-slider-value { width: 84px; text-align: right; font-family: Spectral; font-size: 17px; font-weight: 700; color: #f0cf85; white-space: nowrap; }
.dt-slider.is-disabled .dt-slider-label, .dt-slider.is-disabled .dt-slider-value { color: #514738; }
.dt-slider.is-disabled .dt-slider-fill { background-image: none; background-color: #2a2119; }
.dt-slider.is-disabled .dt-slider-thumb { opacity: 0.3; }

/* select (combo) */
.dt-select { position: relative; width: 220px; }
.dt-select-box {
  display: flex; flex-direction: row; align-items: center; gap: 8px; height: 40px; padding: 0px 2px;
  border-width: 12px; border-color: #00000000; border-image: url(ornaments/input.png) 12 fill / 12px stretch; color: #f3e9d8; font-size: 16px;
}
.dt-select-box span.v { flex: 1; white-space: nowrap; }
.dt-select-box .ff-icon { display: none; }
.dt-select-chev { width: 12px; height: 12px; background-image: url(ornaments/chev_d.png); background-size: 12px 12px; background-repeat: no-repeat; transition: transform 0.18s ease-out; }
.dt-select-box:hover { border-image: url(ornaments/input_focus.png) 12 fill / 12px stretch; }
.dt-select.is-open .dt-select-box { border-image: url(ornaments/input_focus.png) 12 fill / 12px stretch; }
.dt-select.is-open .dt-select-chev { transform: rotate(180deg); }
.dt-select-list { display: none; position: absolute; left: 0px; right: 0px; top: 42px; z-index: 20; padding: 2px 0px;
  border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
.dt-select.is-open .dt-select-list { display: block; animation: dtfadein 0.12s ease-out; }
.dt-option { position: relative; height: 34px; line-height: 34px; padding: 0px 10px; margin: 0px -8px; font-size: 16px; color: #e9dfcc; white-space: nowrap; }
.dt-option:hover { background-image: linear-gradient(90deg, #d4a24f33 0%, #d4a24f0a 100%); color: #fbf3e4; }
.dt-option.is-selected { color: #f0cf85; }
.dt-option.is-selected .dt-option-bar { position: absolute; left: 0px; top: 8px; bottom: 8px; width: 2px; background-color: #d4a24f; }

/* escolha fixa (radio segmentado): placas coladas; ativa = ouro */
.dt-seg { display: flex; flex-direction: row; }
.dt-seg-item {
  height: 34px; padding: 0px 16px; line-height: 32px; font-family: Spectral; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: #b5a78f; white-space: nowrap;
  background-color: #0c0806; border-width: 1px; border-color: #3d3024; margin-left: -1px;
  transition: color 0.12s ease-out, background-color 0.12s ease-out;
}
.dt-seg-item:hover { color: #fbf3e4; background-color: #1a1411; border-color: #8a6532; }
.dt-seg-item.is-active { color: #1e1408; background-image: linear-gradient(180deg, #f0cf85 0%, #d4a24f 50%, #a4773a 100%); border-color: #f0cf85; text-shadow: 0px 1px 0px #fff3d666; }

/* radio simples */
.dt-radio { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 30px; font-size: 16px; color: #e9dfcc; }
.dt-radio-dot { width: 18px; height: 18px; background-image: url(ornaments/radio_off.png); background-size: 18px 18px; }
.dt-radio.is-on .dt-radio-dot { background-image: url(ornaments/radio_on.png); }

/* =============================================================================
   6. TABELA — cabeçalho em placa, linhas de 48, hover com luz, pódio com medalha (PNG)
   ============================================================================= */
.dt-table { position: relative; }
.dt-tr { position: relative; display: flex; flex-direction: row; align-items: center; height: 48px; padding: 0px 16px; border-bottom-width: 1px; border-color: #1f1812; transition: background-color 0.12s ease-out; }
.dt-tr:hover { background-image: linear-gradient(90deg, #d4a24f26 0%, #d4a24f08 60%, #d4a24f00 100%); }
.dt-tr.is-me { background-image: linear-gradient(90deg, #d4a24f33 0%, #d4a24f0d 100%); }
.dt-tr.is-me .dt-tr-bar { display: block; background-image: linear-gradient(180deg, #f0cf85 0%, #8a6532 100%); }
.dt-thead { height: 40px; background-image: linear-gradient(180deg, #1a1410 0%, #0f0b08 100%); border-bottom-width: 1px; border-color: #8a6532; }
.dt-thead:hover { background-image: linear-gradient(180deg, #1a1410 0%, #0f0b08 100%); }
.dt-th { font-family: Spectral; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #8a7b62; white-space: nowrap; }
.dt-th.is-sorted { color: #f0cf85; }
.dt-td { font-size: 16px; color: #f3e9d8; white-space: nowrap; }
.dt-td-muted { color: #b5a78f; }
.dt-tbody { position: relative; overflow-y: auto; }
.dt-tbody .dt-tr:nth-child(even) { background-color: #ffffff06; }

/* célula de posição: medalha (PNG) para o top 3, número simples para o resto */
.dt-pos { display: flex; flex-direction: row; align-items: center; gap: 6px; font-family: Spectral; font-weight: 700; font-size: 17px; color: #8a7b62; }
.dt-pos .ff-icon { display: none; }
.dt-pos-star { width: 0px; }
.dt-medal { position: relative; width: 36px; height: 36px; background-size: 36px 36px; background-repeat: no-repeat; text-align: center; line-height: 36px; font-family: Spectral; font-size: 15px; font-weight: 700; color: #fbf3e4; text-shadow: 0px 1px 2px #000000; }
.dt-medal.m1 { background-image: url(ornaments/medal_1.png); }
.dt-medal.m2 { background-image: url(ornaments/medal_2.png); }
.dt-medal.m3 { background-image: url(ornaments/medal_3.png); }

/* retrato: anel ouro (PNG) com o ícone de classe dentro */
.dt-avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; background-image: url(ornaments/ring_44.png); background-size: 44px 44px; background-repeat: no-repeat; }
.dt-avatar img { position: absolute; left: 2px; top: 2px; width: 40px; height: 40px; }   /* retrato_job*.png é 40x40 nativo: 1x */
.dt-avatar.lg { width: 56px; height: 56px; background-size: 56px 56px; }
.dt-avatar.lg img { left: 12px; top: 12px; width: 32px; height: 32px; }

/* bolinha de online com anel pulsando */
.dt-online { position: relative; width: 9px; height: 9px; flex-shrink: 0; }
.dt-online-dot { position: absolute; left: 0px; top: 0px; width: 9px; height: 9px; border-radius: 4px; background-color: #3a3330; }
.dt-online-ring { display: none; position: absolute; left: 0px; top: 0px; width: 9px; height: 9px; border-radius: 4px; border-width: 1px; border-color: #58c46a; }
.dt-online.is-on .dt-online-dot { background-color: #58c46a; }
.dt-online.is-on .dt-online-ring { display: block; animation: dtping 1.8s ease-out infinite; }

/* =============================================================================
   7. LISTA (cartão selecionável com ícone) — placa que acende; selecionado = fio ouro + luz
   ============================================================================= */
.dt-list { display: flex; flex-direction: column; gap: 6px; }
.dt-row {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px;
  min-height: 60px; padding: 6px 12px 6px 8px;
  background-color: #100c09b3; border-width: 1px; border-color: #241c16;
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}
.dt-row:hover { background-color: #1a1411; border-color: #5a4426; }
.dt-row.is-selected { background-image: linear-gradient(90deg, #d4a24f2e 0%, #d4a24f08 100%); border-color: #d4a24f; }
.dt-row-bar { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background-image: linear-gradient(180deg, #f0cf85 0%, #8a6532 100%); opacity: 0; }
.dt-row.is-selected .dt-row-bar { opacity: 1; }
.dt-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
.dt-row-title { font-size: 16px; font-weight: 600; color: #f3e9d8; white-space: nowrap; overflow: hidden; }
.dt-row-sub { font-size: 14px; color: #9a8d75; white-space: nowrap; overflow: hidden; }
.dt-row.is-disabled { opacity: 0.45; }
.dt-tr-bar { display: none; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 3px; }

/* =============================================================================
   8. SLOT DE ITEM + RARIDADE — a moldura É a raridade (ninepatch PNG 80, fatia 18) [P11]
   .dt-slot(.rar-*)(.dt-slot-md|-lg)(.is-selected|.is-active) > .dt-slot-glow .dt-slot-img>img .dt-slot-qty? .dt-slot-sweep?
   O <img> fica dentro da borda: nunca encosta na moldura.
   ============================================================================= */
.dt-slot {
  position: relative; width: 48px; height: 48px; flex-shrink: 0; overflow: hidden;
  background-image: radial-gradient(circle at 50% 45%, #201713 0%, #070403 100%);
  border-width: 8px; border-color: #00000000; border-image: url(ornaments/slot_common.png) 18 / 8px stretch;
}
.dt-slot-md { width: 64px; height: 64px; border-width: 11px; border-image-width: 11px; }
.dt-slot-lg { width: 88px; height: 88px; border-width: 14px; border-image-width: 14px; }
.dt-slot-xl { width: 112px; height: 112px; border-width: 18px; border-image-width: 18px; }
.dt-slot-img { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; }
.dt-slot-img img { max-width: 100%; max-height: 100%; }   /* [PORTE] <img> com width/height ou decorator: image(x contain) */
/* arte do cliente: 1x inteiro ou 2x inteiro com nearest (nunca 1,5x). image-rendering é só do mock; no jogo é o sampler da textura (point) */
.dt-slot-img img.x2 { image-rendering: pixelated; }
.dt-slot-glow { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; opacity: 0.9; }
.dt-slot-qty { position: absolute; right: 1px; bottom: 0px; font-size: 13px; font-weight: 700; color: #fbf3e4; text-shadow: 0px 1px 2px #000000, 0px 0px 4px #000000; }
.dt-slot:hover { border-image: url(ornaments/slot_selected.png) 18 / 8px stretch; }
.dt-slot-md:hover { border-image-width: 11px; } .dt-slot-lg:hover { border-image-width: 14px; } .dt-slot-xl:hover { border-image-width: 18px; }
.dt-slot.is-selected { border-image: url(ornaments/slot_selected.png) 18 / 8px stretch; }
.dt-slot-md.is-selected { border-image-width: 11px; } .dt-slot-lg.is-selected { border-image-width: 14px; } .dt-slot-xl.is-selected { border-image-width: 18px; }
.dt-slot.empty { background-image: radial-gradient(circle at 50% 45%, #14100d 0%, #070403 100%); }
.dt-slot.empty .dt-slot-img { opacity: 0.25; }

.dt-slot.rar-common    { border-image-source: url(ornaments/slot_common.png); }
.dt-slot.rar-uncommon  { border-image-source: url(ornaments/slot_uncommon.png); }
.dt-slot.rar-rare      { border-image-source: url(ornaments/slot_rare.png); }
.dt-slot.rar-epic      { border-image-source: url(ornaments/slot_epic.png); }
.dt-slot.rar-legendary { border-image-source: url(ornaments/slot_legendary.png); }
.dt-slot.rar-mythic    { border-image-source: url(ornaments/slot_mythic.png); }
.dt-slot.is-selected.rar-common, .dt-slot.is-selected.rar-uncommon, .dt-slot.is-selected.rar-rare, .dt-slot.is-selected.rar-epic, .dt-slot.is-selected.rar-legendary, .dt-slot.is-selected.rar-mythic { border-image-source: url(ornaments/slot_selected.png); }
.dt-slot.rar-uncommon  .dt-slot-glow { background-image: radial-gradient(circle at 50% 70%, #5fbd6a4d 0%, #5fbd6a00 70%); }
.dt-slot.rar-rare      .dt-slot-glow { background-image: radial-gradient(circle at 50% 70%, #4b8fe059 0%, #4b8fe000 70%); }
.dt-slot.rar-epic      .dt-slot-glow { background-image: radial-gradient(circle at 50% 70%, #a86be059 0%, #a86be000 70%); }
.dt-slot.rar-legendary .dt-slot-glow { background-image: radial-gradient(circle at 50% 70%, #f0932f66 0%, #f0932f00 70%); animation: dtglow 2.4s ease-in-out infinite; }
.dt-slot.rar-mythic    .dt-slot-glow { background-image: radial-gradient(circle at 50% 70%, #ffd75a73 0%, #ffd75a00 70%); animation: dtglow 1.6s ease-in-out infinite; }
.dt-slot-sweep { display: none; position: absolute; left: 0px; top: 0px; width: 18px; height: 100%; transform: skewX(-18deg);
  background-image: linear-gradient(90deg, #fff4d000 0%, #fff4d073 50%, #fff4d000 100%); }
.dt-slot.rar-mythic .dt-slot-sweep, .dt-slot.rar-legendary .dt-slot-sweep { display: block; animation: dtshimmer 2.8s ease-in-out infinite; }
/* halo externo do slot (irmão, para lendário/mítico em destaque) */
.dt-slot-halo { position: absolute; width: 160px; height: 160px; margin: -80px 0px 0px -80px; left: 50%; top: 50%; opacity: 0.8; }
.dt-slot-halo.legendary { background-image: radial-gradient(circle at 50% 50%, #f0932f40 0%, #f0932f00 60%); animation: dtglow 2.4s ease-in-out infinite; }
.dt-slot-halo.mythic { background-image: radial-gradient(circle at 50% 50%, #ffd75a4d 0%, #ffd75a00 60%); animation: dtglow 1.6s ease-in-out infinite; }
.dt-slot-halo.epic { background-image: radial-gradient(circle at 50% 50%, #a86be040 0%, #a86be000 60%); }
.dt-slot-halo.rare { background-image: radial-gradient(circle at 50% 50%, #4b8fe033 0%, #4b8fe000 60%); }

/* faixa de raridade (3 fatias PNG 96x22, fatia 8) */
.dt-ribbon { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0px 10px; white-space: nowrap;
  font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #fbf3e4; text-shadow: 0px 1px 1px #000000;
  border-width: 0px 8px; border-color: #00000000; border-image: url(ornaments/ribbon_common.png) 0 8 fill / 0px 8px stretch; }
.dt-ribbon.rar-uncommon  { border-image-source: url(ornaments/ribbon_uncommon.png); }
.dt-ribbon.rar-rare      { border-image-source: url(ornaments/ribbon_rare.png); }
.dt-ribbon.rar-epic      { border-image-source: url(ornaments/ribbon_epic.png); }
.dt-ribbon.rar-legendary { border-image-source: url(ornaments/ribbon_legendary.png); }
.dt-ribbon.rar-mythic    { border-image-source: url(ornaments/ribbon_mythic.png); color: #1e1408; text-shadow: none; }

/* =============================================================================
   9. BARRAS — bezel de metal (3 fatias PNG 64x22, fatia 10) + preenchimento + gloss + varredura
   .dt-bar > .dt-bar-lag? .dt-bar-fill .dt-bar-gloss .dt-bar-shine-box>.dt-bar-shine .dt-bar-text
   [P9] fill e lag usam transform: scaleX(f); o C++ interpola.
   ============================================================================= */
.dt-bar { position: relative; height: 20px; overflow: hidden; border-width: 0px 10px; border-color: #00000000; border-image: url(ornaments/bar_bezel.png) 0 10 fill / 0px 10px stretch; }
.dt-bar-thin { height: 8px; border-width: 1px; border-image: none; border-color: #3d3024; background-color: #080503; }
.dt-bar-fill, .dt-bar-lag { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 100%; transform-origin: 0% 50%; }
.dt-bar-fill { background-image: linear-gradient(180deg, #f0cf85 0%, #d4a24f 45%, #8a6532 100%); }
.dt-bar-thin .dt-bar-fill { background-image: linear-gradient(90deg, #8a6532 0%, #d4a24f 70%, #f0cf85 100%); }
.dt-bar-lag  { background-color: #fff1d6; opacity: 0.55; }
.dt-bar-gloss { position: absolute; left: 0px; right: 0px; top: 0px; height: 45%; background-image: linear-gradient(180deg, #ffffff40 0%, #ffffff00 100%); }
.dt-bar-shine-box { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 100%; overflow: hidden; transform-origin: 0% 50%; }
.dt-bar-shine { position: absolute; left: 0px; top: 0px; width: 60px; height: 100%; transform: skewX(-18deg); background-image: linear-gradient(90deg, #ffffff00 0%, #ffffff4d 50%, #ffffff00 100%); animation: dtsweep 2.6s ease-in-out infinite; }
.dt-bar-text { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; text-align: center; font-size: 13px; font-weight: 700; line-height: 18px; color: #ffffff; text-shadow: 0px 1px 2px #000000; }
.dt-bar.hp .dt-bar-fill  { background-image: linear-gradient(180deg, #ff7a6a 0%, #c42b22 55%, #7d1611 100%); }
.dt-bar.mp .dt-bar-fill  { background-image: linear-gradient(180deg, #74b4ff 0%, #2f6fd0 55%, #173f80 100%); }
.dt-bar.stm .dt-bar-fill { background-image: linear-gradient(180deg, #8fe37a 0%, #3f9d34 55%, #22591b 100%); }
.dt-bar.exp .dt-bar-fill { background-image: linear-gradient(90deg, #8a6532 0%, #f0cf85 100%); }
.dt-bar.low .dt-bar-fill { animation: dtpulse 0.9s ease-in-out infinite; }
/* barra de risco (chance de aging): trilho colorido de rubi a ouro; o marcador aponta o valor */
.dt-bar.risk { height: 14px; }
.dt-bar.risk .dt-bar-fill { background-image: linear-gradient(90deg, #7a2a22 0%, #d94a3d 25%, #d4a24f 60%, #58c46a 100%); }

/* =============================================================================
   10. TOOLTIP — moldura de metal com fundo opaco (ninepatch PNG 64, fatia 20); SEMPRE dentro da janela
   POSICIONAMENTO (C++): à direita do elemento; se não couber na JANELA, espelha; se ainda não couber, acima.
   ============================================================================= */
.dt-tip { position: absolute; z-index: 50; width: 280px; padding: 0px 2px 4px 2px; border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
.dt-tip.fx-open { animation: dtrise 0.14s ease-out; }
.dt-tip-top { display: none; }
.dt-tip-title { font-family: Spectral; font-size: 18px; font-weight: 700; line-height: 1.2; text-shadow: 0px 1px 0px #000000; }
.dt-tip-kind { font-family: Spectral; font-size: 12px; letter-spacing: 3px; color: #8a7b62; margin-top: 3px; }
.dt-tip-sep { height: 1px; background-image: linear-gradient(90deg, #d4a24f66 0%, #d4a24f00 100%); margin: 8px 0px; }
.dt-tip-line { font-size: 15px; line-height: 21px; }
.dt-tip-req { font-size: 15px; line-height: 21px; color: #7d7261; }
.dt-tip-desc { font-size: 15px; line-height: 21px; color: #c9b892; }
.dt-tip-price { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-top: 8px; font-family: Spectral; font-size: 18px; font-weight: 700; color: #f0cf85; }
.dt-tip-price .ff-icon { font-size: 14px; }
/* cores de atributo (CoinShop.cpp:565-634), aquecidas */
.st-dmg  { color: #ff8a7a; } .st-atk { color: #ff9e70; } .st-spd { color: #ffb285; } .st-crit { color: #ff7aa0; }
.st-rng  { color: #e6b887; } .st-def { color: #8cc8ff; } .st-abs { color: #86f0c8; } .st-blk { color: #c8ccff; }
.st-hp   { color: #ff7a6e; } .st-mp  { color: #7aa8ff; } .st-stm { color: #7ae68c; } .st-mag { color: #cc8cff; }
.st-dur  { color: #b4e0b4; } .st-upg { color: #ffcc55; } .st-lvl { color: #e8e089; }

/* =============================================================================
   11. MODAL DE CONFIRMAÇÃO
   ============================================================================= */
.dt-scrim { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 80; background-image: radial-gradient(ellipse at 50% 50%, #050302b3 0%, #050302e6 100%); }
.dt-scrim.fx-open { animation: dtfadein 0.18s ease-out; }
.dt-modal { position: absolute; left: 50%; top: 50%; z-index: 90; width: 440px; transform: translateX(-50%) translateY(-50%); }
.dt-modal .dt-window { position: relative; }
.dt-modal.fx-open .dt-window { animation: dtmodalin 0.2s ease-out; }
.dt-kv { display: flex; flex-direction: row; align-items: center; height: 30px; font-size: 16px; }
.dt-kv-k { flex: 1; color: #b5a78f; }
.dt-kv-v { font-weight: 600; color: #f3e9d8; }
.dt-kv.total { height: 40px; border-top-width: 1px; border-color: #8a653266; margin-top: 4px; }
.dt-kv.total .dt-kv-k { color: #d4a24f; font-family: Spectral; font-weight: 700; letter-spacing: 3px; font-size: 14px; }
.dt-kv.total .dt-kv-v { color: #f0cf85; font-family: Spectral; font-size: 22px; font-weight: 700; }

/* =============================================================================
   12. BADGE / CHIP / TIMER / SPINNER / TOAST / VAZIO
   ============================================================================= */
.dt-badge { display: inline-block; height: 22px; padding: 0px 8px; line-height: 20px; border-width: 1px; white-space: nowrap;
  font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.dt-badge-gold    { color: #1e1408; background-image: linear-gradient(180deg, #f0cf85 0%, #d4a24f 100%); border-color: #f0cf85; }
.dt-badge-outline { color: #d4a24f; background-color: #0c0806; border-color: #8a6532; }
.dt-badge-green   { color: #9fe8ac; background-color: #0e2a15; border-color: #2c7a3c; }
.dt-badge-red     { color: #ffb3a8; background-color: #3a1210; border-color: #a4443a; }
.dt-badge-muted   { color: #b5a78f; background-color: #1a1411; border-color: #3d3024; }
.dt-badge-new { animation: dtglow 1.6s ease-in-out infinite; }

.dt-timer { display: flex; flex-direction: column; gap: 2px; }
.dt-timer-label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-family: Spectral; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #d4a24f; }
.dt-timer-value { font-family: Spectral; font-size: 36px; font-weight: 700; letter-spacing: 2px; color: #fbf3e4; text-shadow: 0px 2px 0px #000000; }
.dt-timer.is-urgent .dt-timer-value { animation: dturgent 1s ease-in-out infinite; }

.dt-spin { display: inline-block; animation: dtspin 1s linear infinite; }
.dt-loading { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; color: #b5a78f; font-size: 16px; }
.dt-loading .ff-icon { color: #d4a24f; font-size: 18px; }

.dt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.dt-empty .ff-icon { font-size: 34px; color: #8a6532; margin-bottom: 8px; text-shadow: 0px 0px 18px #d4a24f66; }
.dt-empty-sigil { width: 72px; height: 72px; background-size: 72px 72px; background-repeat: no-repeat; opacity: 0.55; margin-bottom: 8px; }
.dt-empty-title { font-family: Spectral; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #f0cf85; }
.dt-empty-sub { font-size: 15px; color: #8a7b62; }

/* toast: placa de metal com barra de tempo; trilho fixo no topo-centro, acima de qualquer véu */
.dt-toast-rail { position: absolute; left: 50%; top: 28px; z-index: 120; width: 380px; margin-left: -190px; display: flex; flex-direction: column; gap: 8px; }
.dt-toast { position: relative; z-index: 120; width: 380px; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 2px 6px 6px 6px; overflow: hidden;
  border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
.dt-toast.fx-open { animation: dtmodalin 0.18s ease-out; }
.dt-toast .ff-icon { font-size: 22px; width: 28px; text-align: center; }
.dt-toast-title { font-family: Spectral; font-size: 17px; font-weight: 700; }
.dt-toast-msg { font-size: 15px; color: #b5a78f; }
.dt-toast-time { position: absolute; left: -14px; right: -14px; bottom: -18px; height: 3px; transform-origin: 0% 50%; animation: dtdrain 3s linear infinite; }
.dt-toast.ok   .ff-icon, .dt-toast.ok   .dt-toast-title { color: #58c46a; } .dt-toast.ok   .dt-toast-time { background-color: #58c46a; }
.dt-toast.bad  .ff-icon, .dt-toast.bad  .dt-toast-title { color: #d94a3d; } .dt-toast.bad  .dt-toast-time { background-color: #d94a3d; }
.dt-toast.warn .ff-icon, .dt-toast.warn .dt-toast-title { color: #d4a24f; } .dt-toast.warn .dt-toast-time { background-color: #d4a24f; }
.dt-toast.info .ff-icon, .dt-toast.info .dt-toast-title { color: #5aa0d6; } .dt-toast.info .dt-toast-time { background-color: #5aa0d6; }

/* aviso inline: barra lateral + fundo tingido, texto claro */
.dt-note { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 14px 10px 14px;
  background-color: #2a1f12b3; border-width: 1px; border-left-width: 3px; border-color: #6b5230; border-left-color: #d4a24f; color: #f3e9d8; font-size: 15px; line-height: 20px; }
.dt-note .ff-icon { color: #d4a24f; font-size: 14px; margin-top: 3px; }
.dt-note.bad { background-color: #2a1311b3; border-color: #7a3029; border-left-color: #d94a3d; }
.dt-note.bad .ff-icon { color: #d94a3d; }
.dt-note.ok { background-color: #0f2616b3; border-color: #2f7a47; border-left-color: #58c46a; color: #cdeed6; }
.dt-note.ok .ff-icon { color: #58c46a; }
.dt-note.info { background-color: #0f1d2ab3; border-color: #2f5a7a; border-left-color: #5aa0d6; color: #d6e6f3; }
.dt-note.info .ff-icon { color: #5aa0d6; }
.dt-note.fx-fade { animation: dtnotefade 3s linear; }
@keyframes dtnotefade { 0% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } }

/* =============================================================================
   13. SCROLL  [PORTE] no RCSS:
     scrollbarvertical { width: 10dp; } scrollbarvertical slidertrack { background-color: #00000066; }
     scrollbarvertical sliderbar { decorator: linear-gradient(180deg, #8a6532, #5a3f1c); min-height: 28dp; border: 2dp #0a0705; }
     scrollbarvertical sliderbar:hover, sliderbar:active { decorator: linear-gradient(180deg, #f0cf85, #8a6532); }
     scrollbarvertical sliderarrowdec, sliderarrowinc { height: 0dp; }
   Toda área de rolagem termina em .dt-scroll-fade (irmão, gradiente até o fundo do painel) para a dobra ser visível.
   ============================================================================= */
.dt-scroll-demo { position: relative; width: 10px; background-color: #00000066; }
.dt-scroll-demo-bar { position: absolute; left: 0px; width: 10px; background-image: linear-gradient(180deg, #8a6532 0%, #5a3f1c 100%); }
.dt-scroll-demo-bar.is-hover { background-image: linear-gradient(180deg, #f0cf85 0%, #8a6532 100%); }
.dt-scroll-fade { position: absolute; left: 0px; right: 10px; bottom: 0px; height: 36px; background-image: linear-gradient(180deg, #0c080600 0%, #0c0806fa 100%); }
/* barra de rolagem DESENHADA (o headless não pinta a webkit): mock.js cria .dt-sb em todo [data-sb]. No RCSS é o scrollbarvertical acima. */
.dt-sb { position: absolute; top: 0px; right: 0px; width: 8px; background-color: #00000066; border-left-width: 1px; border-color: #1c1510; }
.dt-sb-thumb { position: absolute; left: 0px; width: 8px; background-image: linear-gradient(180deg, #8a6532 0%, #5a3f1c 100%); border-width: 1px; border-color: #0a0705; }
.dt-sb-thumb:hover { background-image: linear-gradient(180deg, #f0cf85 0%, #8a6532 100%); }

/* =============================================================================
   14. ANCORAGEM NA TELA (centro). O wrapper centraliza; a janela dentro anima.
   ============================================================================= */
.dt-anchor-center { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.dt-anchor-center > .dt-window { position: relative; }
/* véu suave do mundo quando uma janela abre (o mock faz em .world::after) */
.dt-scrim-soft { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-image: radial-gradient(ellipse at 50% 45%, #00000059 0%, #000000a6 100%); }

/* =============================================================================
   15. CORES DE PÓDIO/RARIDADE vencem a cor base do componente
   ============================================================================= */
.dt-pos.rank-1, .dt-td.rank-1 { color: #f0cf85; }
.dt-pos.rank-2, .dt-td.rank-2 { color: #d7dce3; }
.dt-pos.rank-3, .dt-td.rank-3 { color: #e2a878; }
.dt-row-title.rar-uncommon { color: #5fbd6a; } .dt-row-title.rar-rare { color: #4b8fe0; } .dt-row-title.rar-epic { color: #a86be0; }
.dt-row-title.rar-legendary { color: #f0932f; } .dt-row-title.rar-mythic { color: #ffd75a; }
.dt-kv-v.c-value { color: #0af34b; } .dt-kv-v.c-bad { color: #d94a3d; } .dt-kv-v.c-ok { color: #58c46a; }

/* =============================================================================
   16. NOTIFICAÇÃO CENTRALIZADA  (ImGuiNotify::Notify*Centered)
   ============================================================================= */
.dt-notify-dim { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 85; background-color: #00000080; }
.dt-notify-dim.fx-open { animation: dtfadein 0.2s ease-out; }
.dt-notify-center { position: absolute; left: 50%; top: 50%; width: 440px; height: 170px; margin-left: -220px; margin-top: -120px; z-index: 95; }
.dt-notify-center.fx-open  { animation: dtmodalin 0.2s ease-out; }
.dt-notify-center.fx-close { animation: dtnotifyout 0.8s ease-in; }
.dt-notify-glow { position: absolute; left: -80px; top: -60px; right: -80px; bottom: -60px; }
.dt-notify-box { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
.dt-notify-accent { position: absolute; left: 30px; right: 30px; top: 0px; height: 2px; }
.dt-notify-item { position: absolute; left: 188px; top: 18px; width: 64px; height: 64px; }
.dt-notify-icon { position: absolute; left: 188px; top: 18px; width: 64px; height: 64px; border-radius: 32px; background-color: #19120f; border-width: 2px; text-align: center; line-height: 60px; font-size: 26px; }
.dt-notify-title { position: absolute; left: 0px; right: 0px; top: 92px; text-align: center; font-family: Spectral; font-size: 20px; font-weight: 700; color: #fbf3e4; }
.dt-notify-msg { position: absolute; left: 0px; right: 0px; top: 120px; text-align: center; font-size: 15px; color: #b5a78f; }
.dt-notify-track { position: absolute; left: 20px; right: 20px; bottom: 12px; height: 3px; background-color: #221a18; }
.dt-notify-time { position: absolute; left: 0px; top: 0px; width: 100%; height: 3px; transform-origin: 0% 50%; animation: dtdrain 5s linear infinite; }
.dt-notify-center.ok   .dt-notify-glow { background-image: radial-gradient(ellipse at 50% 50%, #58c46a59 0%, #58c46a00 60%); }
.dt-notify-center.bad  .dt-notify-glow { background-image: radial-gradient(ellipse at 50% 50%, #d94a3d59 0%, #d94a3d00 60%); }
.dt-notify-center.warn .dt-notify-glow { background-image: radial-gradient(ellipse at 50% 50%, #d4a24f59 0%, #d4a24f00 60%); }
.dt-notify-center.info .dt-notify-glow { background-image: radial-gradient(ellipse at 50% 50%, #5aa0d659 0%, #5aa0d600 60%); }
.dt-notify-center.ok   .dt-notify-icon { border-color: #58c46a; color: #58c46a; } .dt-notify-center.bad .dt-notify-icon { border-color: #d94a3d; color: #d94a3d; }
.dt-notify-center.warn .dt-notify-icon { border-color: #d4a24f; color: #d4a24f; } .dt-notify-center.info .dt-notify-icon { border-color: #5aa0d6; color: #5aa0d6; }
.dt-notify-center.ok   .dt-notify-accent, .dt-notify-center.ok   .dt-notify-time { background-color: #58c46a; }
.dt-notify-center.bad  .dt-notify-accent, .dt-notify-center.bad  .dt-notify-time { background-color: #d94a3d; }
.dt-notify-center.warn .dt-notify-accent, .dt-notify-center.warn .dt-notify-time { background-color: #d4a24f; }
.dt-notify-center.info .dt-notify-accent, .dt-notify-center.info .dt-notify-time { background-color: #5aa0d6; }
@keyframes dtnotifyout { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } }

/* =============================================================================
   17. EXPLOSÃO DE PARTÍCULAS — losangos ouro (sucesso) / rubi (falha)
   ============================================================================= */
.dt-burst { position: absolute; left: 50%; top: 50%; width: 0px; height: 0px; z-index: 94; }
.dt-burst-p { position: absolute; width: 7px; height: 7px; opacity: 0; background-image: linear-gradient(135deg, #fff0c4 0%, #d4a24f 100%); transform: rotate(45deg); }
.dt-burst.bad .dt-burst-p { background-image: linear-gradient(135deg, #ffb0a6 0%, #d94a3d 100%); }
.dt-burst-p.a.fx-run { animation: dtbursta 1.4s ease-out; }
.dt-burst-p.b.fx-run { animation: dtburstb 1.8s ease-out; }
.dt-burst-p.c.fx-run { animation: dtburstc 1.1s ease-out; }
.dt-burst-p.d.fx-run { animation: dtburstd 1.5s ease-out; }
.dt-burst-p.e.fx-run { animation: dtburste 1.5s ease-out; }
.dt-burst .dt-burst-p.fx-run.fx-loop { animation-iteration-count: infinite; }
.dt-burst.bad .dt-burst-p.fx-run { animation-duration: 0.9s; }
@keyframes dtbursta { 0% { transform: translateY(0px) rotate(45deg); opacity: 1; } 60% { transform: translateY(-120px) rotate(45deg); opacity: 0.9; } 100% { transform: translateY(-60px) rotate(45deg); opacity: 0; } }
@keyframes dtburstb { 0% { transform: translateY(0px) rotate(45deg); opacity: 1; } 55% { transform: translateY(-170px) rotate(45deg); opacity: 0.8; } 100% { transform: translateY(-90px) rotate(45deg); opacity: 0; } }
@keyframes dtburstc { 0% { transform: translateY(0px) rotate(45deg); opacity: 1; } 50% { transform: translateY(-80px) rotate(45deg); opacity: 0.8; } 100% { transform: translateY(-30px) rotate(45deg); opacity: 0; } }
@keyframes dtburstd { 0% { transform: translateX(0px) translateY(0px) rotate(45deg); opacity: 1; } 55% { transform: translateX(-50px) translateY(-130px) rotate(45deg); opacity: 0.85; } 100% { transform: translateX(-80px) translateY(-50px) rotate(45deg); opacity: 0; } }
@keyframes dtburste { 0% { transform: translateX(0px) translateY(0px) rotate(45deg); opacity: 1; } 55% { transform: translateX(50px) translateY(-130px) rotate(45deg); opacity: 0.85; } 100% { transform: translateX(80px) translateY(-50px) rotate(45deg); opacity: 0; } }

/* =============================================================================
   18. MENU ANCORADO (popup preso a um botão)
   ============================================================================= */
.dt-menu { position: absolute; z-index: 40; width: 240px; padding: 0px 2px; border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
.dt-menu.fx-open { animation: dtrise 0.12s ease-out; }
.dt-menu-top { display: none; }
.dt-menu-title { height: 32px; line-height: 32px; margin: -6px -8px 4px -8px; padding: 0px 12px; font-family: Spectral; font-size: 15px; font-weight: 700; color: #f0cf85; border-bottom-width: 1px; border-color: #3d3024; }
.dt-menu .dt-option { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 34px; line-height: 34px; }
.dt-menu .dt-option .ff-icon { width: 14px; font-size: 12px; color: #8a6532; text-align: center; }
.dt-menu .dt-option:hover .ff-icon { color: #d4a24f; }
.dt-menu .dt-option.is-current { color: #6b645e; }
.dt-menu .dt-option.is-current .ff-icon { color: #4a403b; }
.dt-menu .dt-option.danger { color: #f0b9b1; }
.dt-menu .dt-option.danger .ff-icon { color: #d94a3d; }
.dt-menu .dt-option.danger:hover { background-image: linear-gradient(90deg, #d94a3d33 0%, #d94a3d0a 100%); color: #ffffff; }
.dt-menu-sep { height: 1px; margin: 4px -8px; background-color: #2a2119; }
.dt-menu-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 6px 0px; }

/* =============================================================================
   19. TEXTAREA
   ============================================================================= */
.dt-textarea { position: relative; height: 96px; padding: 0px 2px; overflow-y: auto;
  border-width: 12px; border-color: #00000000; border-image: url(ornaments/input.png) 12 fill / 12px stretch;
  font-size: 16px; line-height: 20px; color: #f3e9d8; white-space: pre-wrap; word-break: break-word; }
.dt-textarea:hover, .dt-textarea.is-focus { border-image: url(ornaments/input_focus.png) 12 fill / 12px stretch; }

/* =============================================================================
   20. SELO DE ESTADO
   ============================================================================= */
.dt-state { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; height: 26px; padding: 0px 10px; white-space: nowrap;
  border-width: 1px; font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.dt-state .ff-icon { font-size: 11px; }
.dt-state-dot { width: 7px; height: 7px; border-radius: 3px; }
.dt-state.ok, .dt-state.edit { color: #9fe8ac; background-color: #0e2a15b3; border-color: #2c7a3c; }
.dt-state.ok .dt-state-dot, .dt-state.edit .dt-state-dot { background-color: #58c46a; animation: dtpulse 1.6s ease-in-out infinite; }
.dt-state.lock { color: #f0cf85; background-color: #2a1f12b3; border-color: #8a6532; }
.dt-state.lock .ff-icon { color: #d4a24f; }
.dt-state.live { color: #d4b8f5; background-color: #24163599; border-color: #a878e099; animation: dtlive 1.6s ease-in-out infinite; }
.dt-state.live .dt-state-dot { background-color: #d4b8f5; }
.dt-state.off { color: #8a7b62; background-color: #1a1411; border-color: #3d3024; }
.dt-state.off .dt-state-dot { background-color: #514738; }
.dt-state.bad { color: #ff9a8e; background-color: #2e1210; border-color: #7a3029; }
.dt-state.bad .ff-icon { color: #d94a3d; }
@keyframes dtlive { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } }

/* =============================================================================
   21. HUD DE EVENTO (topo-centro)
   ============================================================================= */
.dt-hud { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 10px 4px 10px;
  border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
.dt-hud-top { display: none; }
.dt-hud-row { display: flex; flex-direction: row; align-items: center; gap: 24px; }
.dt-hud-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dt-hud-label { font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #d4a24f; }
.dt-hud-value { font-family: Spectral; font-size: 26px; font-weight: 700; letter-spacing: 1px; color: #fbf3e4; line-height: 1.1; text-shadow: 0px 2px 0px #000000; }
.dt-hud-score { display: flex; flex-direction: row; align-items: center; gap: 14px; font-family: Spectral; font-weight: 700; }
.dt-hud-score .team-a { font-size: 30px; color: #5aa0d6; }
.dt-hud-score .team-b { font-size: 30px; color: #d94a3d; }
.dt-hud-vs { font-size: 13px; letter-spacing: 2px; color: #8a7b62; }
.dt-timer.is-approaching .dt-timer-value, .dt-hud-value.is-approaching { color: #f0cf85; }
.dt-hud-value.is-urgent { animation: dturgent 1s ease-in-out infinite; }
.dt-timer.is-live .dt-timer-value, .dt-hud-value.is-live { color: #d4b8f5; animation: dtlive 1.6s ease-in-out infinite; }

/* =============================================================================
   22. ANÚNCIO GRANDE (5..1 / LUTE! / ROUND N) — metal, contorno escuro, luz atrás, réguas com gemas
   ============================================================================= */
.dt-announce { position: absolute; left: 0px; right: 0px; top: 20%; z-index: 60; text-align: center; opacity: 0; }
.dt-announce.fx-run { animation: dtannounce 1s ease-out; }
.dt-announce.fx-hold { opacity: 1; }
.dt-announce-glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 260px; margin: -130px 0px 0px -450px; background-image: radial-gradient(ellipse at 50% 50%, #d4a24f4d 0%, #d4a24f00 65%); }
.dt-announce-line { position: relative; width: 640px; height: 18px; margin: 0px auto; background-image: url(ornaments/rule_center.png); background-repeat: no-repeat; background-position: center; background-size: 120px 18px; }
.dt-announce-text { position: relative; font-family: Spectral; font-size: 104px; font-weight: 700; letter-spacing: 6px; line-height: 1.05; color: #f6e2b0; text-shadow: 0px 3px 0px #3a2a10, 0px 0px 2px #000000, 0px 0px 28px #d4a24f99; }
.dt-announce-sub { position: relative; font-family: Spectral; font-size: 22px; font-weight: 700; letter-spacing: 8px; color: #f0cf85; margin-bottom: 4px; text-shadow: 0px 1px 0px #000000; }
.dt-announce.bad .dt-announce-text { color: #ffd6cf; text-shadow: 0px 3px 0px #3a1010, 0px 0px 2px #000000, 0px 0px 28px #d94a3dbb; }
.dt-announce.bad .dt-announce-glow { background-image: radial-gradient(ellipse at 50% 50%, #d94a3d4d 0%, #d94a3d00 65%); }
@keyframes dtannounce { 0% { opacity: 0; transform: scale(1.25); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* =============================================================================
   23. CAMPO NUMÉRICO COM PASSO (InputInt)
   ============================================================================= */
.dt-stepper { display: flex; flex-direction: row; align-items: stretch; height: 40px; }
.dt-stepper-btn { width: 40px; text-align: center; line-height: 38px; font-family: Spectral; font-size: 20px; font-weight: 700; color: #f0cf85;
  background-color: #0c0806; border-width: 1px; border-color: #3d3024; transition: border-color 0.12s ease-out, color 0.12s ease-out, background-color 0.12s ease-out; }
.dt-stepper-btn:hover { border-color: #d4a24f; color: #fbf3e4; background-color: #1a1411; }
.dt-stepper-btn.is-disabled, .dt-stepper-btn.is-disabled:hover { color: #3d3024; border-color: #241c16; background-color: #0c0806; }
.dt-stepper-value { flex: 1; min-width: 72px; padding: 0px 10px; text-align: center; line-height: 38px;
  font-family: Spectral; font-size: 20px; font-weight: 700; color: #fbf3e4; background-color: #080503; border-width: 1px; border-left-width: 0px; border-right-width: 0px; border-color: #3d3024; }
.dt-stepper.is-focus .dt-stepper-value { border-color: #d4a24f; }
.dt-stepper-sm { height: 32px; }
.dt-stepper-sm .dt-stepper-btn { width: 32px; line-height: 30px; font-size: 17px; }
.dt-stepper-sm .dt-stepper-value { line-height: 30px; font-size: 17px; min-width: 44px; }

/* =============================================================================
   24. DICA DE TECLA  .dt-kbd
   ============================================================================= */
.dt-kbd { display: inline-block; min-width: 20px; height: 20px; padding: 0px 5px; margin-left: 8px; line-height: 18px; text-align: center;
  font-family: Barlow; font-size: 12px; font-weight: 700; letter-spacing: 0px; border-width: 1px; border-radius: 2px;
  color: #b5a78f; background-color: #0c0806; border-color: #514738; }
.dt-btn-primary .dt-kbd { color: #2a201c; background-color: #ffffff26; border-color: #2a201c73; }
.dt-btn-secondary .dt-kbd { color: #dba25c; background-color: #00000000; border-color: #dba25c73; }
.dt-btn-danger .dt-kbd { color: #f6d9d4; background-color: #00000000; border-color: #f6d9d466; }
.dt-btn.is-disabled .dt-kbd { color: #514738; border-color: #2f2725; background-color: #00000000; }
.dt-tab, .dt-menurow, .dt-seg-item, .dt-state, .dt-badge { white-space: nowrap; }

/* =============================================================================
   25. VIP / PAINEL TRAVADO
   ============================================================================= */
.dt-badge-vip { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; height: 22px; padding: 0px 8px; white-space: nowrap;
  font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #ffb347; background-color: #2e1a0cd9; border-width: 1px; border-color: #a8602a; }
.dt-badge-vip .ff-icon { font-size: 11px; color: #ff9a33; }
.dt-panel.is-locked .dt-locked-content { opacity: 0.5; }

/* =============================================================================
   26. SLOT ATIVO (seleção múltipla, verde)
   ============================================================================= */
.dt-slot.is-active, .dt-slot.is-active:hover { border-image: url(ornaments/slot_active.png) 18 / 8px stretch; }
.dt-slot-md.is-active { border-image-width: 11px; } .dt-slot-lg.is-active { border-image-width: 14px; }
.dt-slot.is-active .dt-slot-glow { opacity: 1; background-image: radial-gradient(circle at 50% 70%, #58c46a59 0%, #58c46a00 70%); animation: none; }
.dt-slot-check { display: none; position: absolute; left: 1px; top: 0px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: #58c46a; text-shadow: 0px 1px 1px #000000; }
.dt-slot.is-active .dt-slot-check { display: block; }
.dt-slot-qty.pill { right: 1px; bottom: 1px; height: 16px; padding: 0px 4px; line-height: 16px; font-size: 12px; color: #ffd75a; background-color: #000000c7; text-shadow: none; }

/* =============================================================================
   28. PAINEL DE HUD FLUTUANTE (Quest Tracker etc.)
   ============================================================================= */
.dt-hudpanel { position: absolute; width: 270px; border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; padding: 0px 2px; }
.dt-hudpanel-top { display: none; }
.dt-hudpanel-head { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 30px; margin: -8px -10px 0px -10px; padding: 0px 8px 0px 12px; border-bottom-width: 1px; border-color: #3d3024; }
.dt-hudpanel-title { flex: 1; font-family: Spectral; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #f0cf85; white-space: nowrap; overflow: hidden; }
.dt-hudpanel-n { height: 18px; padding: 0px 6px; line-height: 16px; font-size: 12px; font-weight: 700; color: #b5a78f; background-color: #1a1411; border-width: 1px; border-color: #3d3024; }
.dt-hudpanel-toggle { width: 22px; height: 22px; text-align: center; line-height: 20px; font-size: 11px; color: #8a7b62; transition: color 0.12s ease-out; }
.dt-hudpanel-toggle .ff-icon { display: inline-block; transition: transform 0.18s ease-out; }
.dt-hudpanel-toggle:hover { color: #fbf3e4; }
.dt-hudpanel.is-collapsed > .dt-hudpanel-head .dt-hudpanel-toggle .ff-icon { transform: rotate(-90deg); }
.dt-hudpanel.is-collapsed > .dt-hudpanel-body { display: none; }
.dt-hudpanel.is-collapsed > .dt-hudpanel-head { border-bottom-width: 0px; }
.dt-hudpanel-body { padding: 8px 0px 0px 0px; display: flex; flex-direction: column; gap: 6px; }
.dt-hudpanel-item { background-color: #100c09cc; border-width: 1px; border-color: #241c16; }
.dt-hudpanel-item-head { display: flex; flex-direction: row; align-items: center; gap: 6px; height: 28px; padding: 0px 4px 0px 8px; }
.dt-hudpanel-item-title { flex: 1; font-size: 15px; font-weight: 600; color: #f3e9d8; white-space: nowrap; overflow: hidden; }
.dt-hudpanel-item-body { padding: 0px 8px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.dt-hudpanel-item.is-min .dt-hudpanel-item-body { display: none; }
.dt-hudpanel-item.is-min .dt-hudpanel-toggle .ff-icon { transform: rotate(-90deg); }
.dt-bar-sm { height: 16px; }
.dt-bar-sm .dt-bar-text { line-height: 14px; }
.dt-bar.done .dt-bar-fill { background-image: linear-gradient(180deg, #8fe39f 0%, #3f9d5a 55%, #22592f 100%); }
.dt-btn-xs { height: 26px; padding: 0px 10px; font-size: 12px; letter-spacing: 0px; border-width: 0px 16px; }
.dt-btn.fx-glow .dt-btn-shine { opacity: 1; animation: dtsweep 1.8s ease-in-out infinite; }

/* =============================================================================
   29. CHIP DE VALOR
   ============================================================================= */
.dt-chip { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 32px; padding: 0px 12px 0px 6px; white-space: nowrap;
  background-color: #0c0806d9; border-width: 1px; border-color: #3d3024; font-size: 15px; color: #b5a78f; transition: border-color 0.12s ease-out; }
.dt-chip:hover { border-color: #d4a24f; }
.dt-chip > .ff-icon { width: 22px; text-align: center; font-size: 13px; color: #d4a24f; }
.dt-chip > img { width: 22px; height: 22px; }
.dt-chip > b { font-family: Spectral; font-weight: 700; color: #f3e9d8; }
.dt-chip.warn > b, .dt-chip.warn > .ff-icon { color: #d4a24f; } .dt-chip.value > b, .dt-chip.value > .ff-icon { color: #0af34b; }
.dt-chip.info > b, .dt-chip.info > .ff-icon { color: #5aa0d6; } .dt-chip.gold > b, .dt-chip.gold > .ff-icon { color: #f0cf85; }
.dt-slot.dt-slot-xs { width: 26px; height: 26px; border-width: 4px; border-image-width: 4px; }

/* =============================================================================
   30. MOLDURA DE PREVIEW 3D
   ============================================================================= */
.dt-preview3d { position: relative; width: 280px; height: 350px; overflow: hidden;
  border-width: 14px; border-color: #00000000; border-image: url(ornaments/frame_panel.png) 14 / 14px stretch;
  background-image: radial-gradient(ellipse at 50% 40%, #2a201a 0%, #0b0807 75%); }
.dt-preview3d.is-transparent { background-image: none; background-color: #00000000; }
.dt-preview3d-floor { position: absolute; left: 30px; right: 30px; bottom: 18px; height: 50px; background-image: radial-gradient(ellipse at 50% 50%, #d4a24f59 0%, #d4a24f00 70%); }
.dt-rotate { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; height: 36px; }
.dt-rotate-btn { width: 32px; height: 32px; text-align: center; line-height: 30px; font-size: 13px; color: #f0cf85; background-color: #0c0806; border-width: 1px; border-color: #3d3024; transition: border-color 0.12s ease-out, color 0.12s ease-out; }
.dt-rotate-btn:hover { border-color: #d4a24f; color: #fbf3e4; }
.dt-rotate-label { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #8a7b62; white-space: nowrap; }

/* =============================================================================
   31-33. TABELA DENSA (GM) / CÉLULA EDITÁVEL / ESTADO DE LINHA
   ============================================================================= */
.dt-table.dense .dt-tr { height: 38px; padding: 0px 10px; gap: 8px; }
.dt-table.dense .dt-tr.tall { height: 44px; }
.dt-table.dense .dt-tr.compact { height: 32px; }
.dt-table.dense .dt-thead { height: 34px; }
.dt-table.dense .dt-tbody .dt-tr:nth-child(even) { background-color: #ffffff08; }
.dt-th-sm { display: flex; flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden;
  font-family: Barlow; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #8a7b62; }
.dt-th-sm .ff-icon { font-size: 10px; color: #6b5a44; }
.dt-th-sm.is-sorted { color: #f0cf85; }
.dt-td.num { text-align: right; font-weight: 600; }
.dt-td.dim { color: #6b645e; }
.dt-cell { height: 28px; padding: 0px 8px; line-height: 26px; white-space: nowrap; overflow: hidden;
  font-size: 15px; color: #f3e9d8; background-color: #080503b3; border-width: 1px; border-color: #2f2725; transition: border-color 0.12s ease-out; }
.dt-cell:hover { border-color: #57493f; }
.dt-cell.is-focus { border-color: #d4a24f; background-color: #120d0c; }
.dt-cell.r { text-align: right; }
.dt-ibtn { width: 28px; height: 28px; flex-shrink: 0; text-align: center; line-height: 26px; font-size: 12px;
  color: #d4a24f; background-color: #0c0806; border-width: 1px; border-color: #3d3024;
  transition: color 0.12s ease-out, border-color 0.12s ease-out, background-color 0.12s ease-out; }
.dt-ibtn:hover { color: #fbf3e4; border-color: #d4a24f; background-color: #1a1411; }
.dt-ibtn.danger { color: #d94a3d; }
.dt-ibtn.danger:hover { color: #ffffff; border-color: #d94a3d; background-color: #4a1a15; }
.dt-ibtn.ok { color: #58c46a; }
.dt-ibtn.ok:hover { color: #ffffff; border-color: #58c46a; background-color: #143020; }
.dt-ibtn.plain { color: #b5a78f; }
.dt-ibtn.is-disabled, .dt-ibtn.is-disabled:hover { color: #3d3024; border-color: #241c16; background-color: #0c0806; }
.dt-table .dt-tr.is-mod, .dt-table.dense .dt-tbody .dt-tr.is-mod { background-color: #32280a80; }
.dt-tr.is-mod .dt-tr-bar { display: block; background-color: #d4a24f; }
.dt-table .dt-tr.is-del, .dt-table.dense .dt-tbody .dt-tr.is-del { background-color: #2a0f0d80; }
.dt-tr.is-del .dt-td, .dt-tr.is-del .dt-cell { color: #6b645e; }
.dt-tr.is-del .dt-tr-bar { display: block; background-color: #d94a3d; }
.dt-table .dt-tr.tint-warn, .dt-table.dense .dt-tbody .dt-tr.tint-warn { background-color: #d4a24f17; }
.dt-table .dt-tr.tint-ok,   .dt-table.dense .dt-tbody .dt-tr.tint-ok   { background-color: #58c46a14; }
.dt-table .dt-tr.tint-bad,  .dt-table.dense .dt-tbody .dt-tr.tint-bad  { background-color: #d94a3d17; }
.dt-table .dt-tr.tint-wait, .dt-table.dense .dt-tbody .dt-tr.tint-wait { background-color: #d4a24f0a; }
.dt-badge-warn { color: #1e1406; background-color: #d4a24f; border-color: #f0cf85; }

/* =============================================================================
   34. TRILHO DE NAVEGAÇÃO LATERAL
   ============================================================================= */
.dt-nav { display: flex; flex-direction: column; gap: 4px; width: 220px; padding: 2px; }
.dt-nav-item { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; height: 40px; padding: 0px 12px; white-space: nowrap;
  font-family: Spectral; font-size: 16px; font-weight: 600; color: #cfc4b0; border-width: 1px; border-color: #00000000;
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out; }
.dt-nav-item .ff-icon { width: 18px; text-align: center; font-size: 14px; color: #8a6532; }
.dt-nav-item:hover { background-color: #1a1411; border-color: #3d3024; color: #fbf3e4; }
.dt-nav-item:hover .ff-icon { color: #d4a24f; }
.dt-nav-bar { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background-image: linear-gradient(180deg, #f0cf85 0%, #8a6532 100%); opacity: 0; }
.dt-nav-item.is-active { background-image: linear-gradient(90deg, #d4a24f2e 0%, #d4a24f08 100%); border-color: #8a653299; color: #fbf3e4; }
.dt-nav-item.is-active .ff-icon { color: #f0cf85; }
.dt-nav-item.is-active .dt-nav-bar { opacity: 1; }
.dt-nav-item.is-parent { font-weight: 700; }
.dt-nav-sub { display: flex; flex-direction: column; gap: 2px; }
.dt-nav-sub .dt-nav-item { height: 34px; padding-left: 34px; font-size: 15px; font-family: Barlow; font-weight: 500; }
.dt-nav-sep { height: 1px; margin: 6px 4px; background-color: #2a2119; }
.dt-nav-foot { margin-top: 8px; padding: 8px 6px 2px 6px; border-top-width: 1px; border-color: #2a2119; font-size: 13px; line-height: 18px; color: #6b645e; }

/* =============================================================================
   35. PLACA DE VALOR (stat herói: CHANCE 45% / GOLD / SALDO) e ESTRELA DE FAVORITO
   .dt-stat > .dt-stat-k .dt-stat-v (.dt-bar?)
   ============================================================================= */
.dt-stat { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 14px; background-color: #0c0806c9; border-width: 14px; border-color: #00000000; border-image: url(ornaments/frame_panel.png) 14 / 14px stretch; }
.dt-stat-k { font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #8a7b62; white-space: nowrap; }
.dt-stat-v { font-family: Spectral; font-size: 28px; font-weight: 700; color: #f0cf85; line-height: 1; white-space: nowrap; text-shadow: 0px 1px 0px #000000; }
.dt-stat-v.sm { font-size: 22px; }
.dt-star { width: 18px; height: 18px; background-image: url(ornaments/star_off.png); background-size: 18px 18px; background-repeat: no-repeat; }
.dt-star.is-on { background-image: url(ornaments/star_fav.png); }
.dt-gem { display: inline-block; width: 14px; height: 14px; background-image: url(ornaments/gem_14.png); background-size: 14px 14px; background-repeat: no-repeat; vertical-align: middle; }
.dt-gem.sm { width: 10px; height: 10px; background-image: url(ornaments/gem_10.png); background-size: 10px 10px; }
.dt-gem.green { background-image: url(ornaments/gem_green_10.png); width: 10px; height: 10px; background-size: 10px 10px; }
.dt-gem.hollow { background-image: url(ornaments/gem_hollow_12.png); width: 12px; height: 12px; background-size: 12px 12px; }
/* marca d'água de sigilo (grande, apagada) num painel vazio ou cabeçalho */
.dt-watermark { position: absolute; width: 160px; height: 160px; background-size: 160px 160px; background-repeat: no-repeat; opacity: 0.08; }

/* =============================================================================
   36. QUESTS — pedidos v2 (progressao, 15/09)
   .dt-objective(.done) > .dt-objective-head > .dt-objective-check .dt-objective-name .dt-objective-map? .dt-objective-n   +   .dt-bar.dt-bar-thin > .dt-bar-fill
     Linha de objetivo: nome creme à esquerda, "N/M" Spectral à direita, mapa apagado opcional, barra 10 dp embaixo.
     Texto NUNCA dentro da barra (contraste). .done = verde com ✓. Cor do fill por classe ou pelo C++ (P9).
   .dt-reward(.value|.info|.gold|.arcane) > (.dt-slot.dt-slot-sm | .dt-reward-glyph>.ff-icon) .dt-reward-main > .dt-reward-v .dt-reward-k
     Ladrilho de recompensa 56 dp: arte real no slot 40 OU glifo em rebaixo; valor Spectral 15; rótulo 13. flex 1 1 144.
   .dt-typetag.daily|weekly|repeat|unique > .ff-icon + texto   — selo de TIPO (ícone, borda e fundo 8 % na cor do tipo)
   .dt-kbd.lg — tecla 26 dp com base 3 dp mais escura, texto creme 13
   ============================================================================= */
.dt-objective { display: flex; flex-direction: column; gap: 5px; }
.dt-objective-head { display: flex; flex-direction: row; align-items: baseline; gap: 8px; height: 20px; }
.dt-objective-name { flex: 1; font-size: 15px; color: #f3e9d8; white-space: nowrap; overflow: hidden; }
.dt-objective-map { font-size: 13px; color: #7d7261; white-space: nowrap; }
.dt-objective-n { font-family: Spectral; font-size: 15px; font-weight: 700; color: #f0cf85; white-space: nowrap; }
.dt-objective-check { display: none; font-size: 12px; color: #58c46a; }
.dt-objective .dt-bar-thin { height: 10px; }
.dt-objective.done .dt-objective-name { color: #9fe8ac; }
.dt-objective.done .dt-objective-n { color: #58c46a; }
.dt-objective.done .dt-objective-check { display: inline-block; }
.dt-objective.done .dt-bar-fill { background-image: linear-gradient(90deg, #2c7a3c 0%, #58c46a 70%, #9fe8ac 100%); }

.dt-reward { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1 1 144px; height: 56px; padding: 0px 10px 0px 6px; min-width: 0px;
  background-color: #0c0806c9; border-width: 1px; border-color: #2a2119; transition: border-color 0.12s ease-out; }
.dt-reward:hover { border-color: #8a6532; }
.dt-slot.dt-slot-sm { width: 40px; height: 40px; border-width: 7px; border-image-width: 7px; }
.dt-reward-glyph { width: 40px; height: 40px; flex-shrink: 0; text-align: center; line-height: 38px; background-color: #080503; border-width: 1px; border-color: #3d3024; }
.dt-reward-glyph .ff-icon { font-size: 16px; color: #d4a24f; }
.dt-reward-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0px; }
.dt-reward-v { font-family: Spectral; font-size: 15px; font-weight: 700; color: #f3e9d8; white-space: nowrap; overflow: hidden; }
.dt-reward-k { font-size: 13px; color: #8a7b62; white-space: nowrap; overflow: hidden; }
.dt-reward.value .dt-reward-v, .dt-reward.value .dt-reward-glyph .ff-icon { color: #0af34b; }
.dt-reward.info .dt-reward-v, .dt-reward.info .dt-reward-glyph .ff-icon { color: #5aa0d6; }
.dt-reward.gold .dt-reward-v, .dt-reward.gold .dt-reward-glyph .ff-icon { color: #f0cf85; }
.dt-reward.arcane .dt-reward-v, .dt-reward.arcane .dt-reward-glyph .ff-icon { color: #a878e0; }

.dt-typetag { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 24px; padding: 0px 9px; white-space: nowrap;
  font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 2px; border-width: 1px; }
.dt-typetag .ff-icon { font-size: 11px; }
.dt-typetag.daily  { color: #9fe8ac; border-color: #58c46a99; background-color: #58c46a14; } .dt-typetag.daily .ff-icon { color: #58c46a; }
.dt-typetag.weekly { color: #bcd9f0; border-color: #5aa0d699; background-color: #5aa0d614; } .dt-typetag.weekly .ff-icon { color: #5aa0d6; }
.dt-typetag.repeat { color: #f0cf85; border-color: #d4a24f99; background-color: #d4a24f14; } .dt-typetag.repeat .ff-icon { color: #d4a24f; }
.dt-typetag.unique { color: #d4b8f5; border-color: #a878e099; background-color: #a878e014; } .dt-typetag.unique .ff-icon { color: #a878e0; }

.dt-kbd.lg { min-width: 26px; height: 26px; padding: 0px 7px; line-height: 22px; margin-left: 0px; font-size: 13px; color: #f3e9d8;
  background-color: #1a1411; border-color: #3d3024; border-bottom-width: 3px; border-bottom-color: #0a0705; }

/* =============================================================================
   37. PEDIDOS v2 — progressao (Bot, TeleportCore), 15/09
   .dt-select.up            — a lista abre para CIMA (combo no fim da janela)
   .dt-tip.line             — tooltip de UMA linha, 32 dp: título 16 + estado 14 na mesma linha; moldura a 10 dp
   .dt-typetag.neutral|positive|gold|arcane|danger (+ .fill) — selo de TIPO com os tons da paleta fechada
       (daily=positive, weekly=info, repeat=gold, unique=arcane já existem em §36; .fill = cheio com texto escuro)
   ============================================================================= */
.dt-select.up .dt-select-list { top: auto; bottom: 42px; }
.dt-tip.line { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; width: auto; height: 32px; padding: 0px 6px;
  border-width: 10px; border-image-width: 10px; white-space: nowrap; }
.dt-tip.line .dt-tip-title { font-size: 16px; line-height: 1; }
.dt-tip.line .dt-tip-line, .dt-tip.line .dt-tip-req { font-size: 14px; line-height: 1; }
.dt-typetag.neutral  { color: #b5a78f; border-color: #3d3024; background-color: #1a141180; } .dt-typetag.neutral .ff-icon { color: #7d7261; }
.dt-typetag.positive { color: #9fe8ac; border-color: #58c46a99; background-color: #58c46a14; } .dt-typetag.positive .ff-icon { color: #58c46a; }
.dt-typetag.info     { color: #bcd9f0; border-color: #5aa0d699; background-color: #5aa0d614; } .dt-typetag.info .ff-icon { color: #5aa0d6; }
.dt-typetag.gold     { color: #f0cf85; border-color: #d4a24f99; background-color: #d4a24f14; } .dt-typetag.gold .ff-icon { color: #d4a24f; }
.dt-typetag.arcane   { color: #d4b8f5; border-color: #a878e099; background-color: #a878e014; } .dt-typetag.arcane .ff-icon { color: #a878e0; }
.dt-typetag.danger   { color: #ff9a8e; border-color: #d94a3d99; background-color: #d94a3d14; } .dt-typetag.danger .ff-icon { color: #d94a3d; }
.dt-typetag.gold.fill   { color: #1e1408; border-color: #f0cf85; background-image: linear-gradient(180deg, #f0cf85 0%, #d4a24f 100%); } .dt-typetag.gold.fill .ff-icon { color: #4e3517; }
.dt-typetag.danger.fill { color: #ffe1dc; border-color: #d94a3d; background-image: linear-gradient(180deg, #a4332a 0%, #6a1f18 100%); } .dt-typetag.danger.fill .ff-icon { color: #ffb0a6; }
.dt-typetag.positive.fill { color: #0e2a15; border-color: #9fe8ac; background-image: linear-gradient(180deg, #9fe8ac 0%, #58c46a 100%); } .dt-typetag.positive.fill .ff-icon { color: #143d1e; }
.dt-typetag.arcane.fill { color: #f4ecff; border-color: #d4b8f5; background-image: linear-gradient(180deg, #a878e0 0%, #63398f 100%); } .dt-typetag.arcane.fill .ff-icon { color: #f0dcff; }

/* =============================================================================
   38. PEDIDOS v2 — gm (AdminPanel), 15/09
   .dt-slot.dt-slot-row   — 34 dp, borda 5: ícone de item numa linha de tabela densa (38). ATENÇÃO: .dt-slot-sm já é 40/7 (§36, progressao).
   .dt-tip.sm             — tooltip de uma linha, 28 dp, moldura a 12: para botão-ícone de linha
   .dt-stat.inline        — contador de cabeçalho: valor + rótulo numa linha, 38 dp
   ============================================================================= */
.dt-slot.dt-slot-row { width: 34px; height: 34px; border-width: 5px; border-image-width: 5px; }
.dt-tip.sm { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; width: auto; height: 28px; padding: 0px 4px;
  border-width: 12px; border-image-width: 12px; white-space: nowrap; }
.dt-tip.sm .dt-tip-title { font-size: 14px; line-height: 1; font-family: Barlow; font-weight: 600; color: #f3e9d8; }
.dt-tip.sm .dt-tip-line, .dt-tip.sm .dt-tip-req { font-size: 13px; line-height: 1; }
.dt-stat.inline { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; height: 38px; padding: 0px 12px; border-width: 12px; border-image-width: 12px; }
.dt-stat.inline .dt-stat-v { font-size: 20px; }
.dt-stat.inline .dt-stat-k { font-size: 11px; }

/* =============================================================================
   39. PEDIDOS v2 — social (HUD, PvP, emblema), 15/09
   .dt-hud-corner.tl|tr|bl|br — cantos de 22 dp para a moldura compacta (frame_tip): 9 dp para fora
   .dt-announce-veil          — véu radial escuro atrás do anúncio (irmão, antes do .dt-announce); não cobre o centro
   .dt-emblem(.lg|.md|.sm) > img  + .dt-emblem-halo — moldura de painel para imagem que NÃO é item (emblema de clã, dungeon)
   .dt-teamcrest.a|b(.sm|.lg)  — losango de time (a = safira, b = rubi) com fio claro; .dt-hud-score .team-a/.team-b ganham .name
   sigilo de PvP: ornaments/sigil_swords.png
   ============================================================================= */
.dt-hud-corner { position: absolute; width: 22px; height: 22px; background-repeat: no-repeat; background-size: 22px 22px; }
.dt-hud-corner.tl { left: -9px;  top: -9px;    background-image: url(ornaments/corner_h_tl.png); }
.dt-hud-corner.tr { right: -9px; top: -9px;    background-image: url(ornaments/corner_h_tr.png); }
.dt-hud-corner.bl { left: -9px;  bottom: -9px; background-image: url(ornaments/corner_h_bl.png); }
.dt-hud-corner.br { right: -9px; bottom: -9px; background-image: url(ornaments/corner_h_br.png); }

.dt-announce-veil { position: absolute; left: 0px; right: 0px; top: 8%; height: 34%; z-index: 59; background-image: radial-gradient(ellipse at 50% 50%, #000000b3 0%, #00000080 45%, #00000000 72%); }

.dt-emblem { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  width: 72px; height: 72px; border-width: 14px; border-color: #00000000; border-image: url(ornaments/frame_panel.png) 14 / 14px stretch;
  background-image: radial-gradient(circle at 50% 45%, #201713 0%, #070403 100%); }
.dt-emblem img { max-width: 100%; max-height: 100%; }
.dt-emblem.sm { width: 48px; height: 48px; border-width: 10px; border-image-width: 10px; }
.dt-emblem.md { width: 96px; height: 96px; }
.dt-emblem.lg { width: 128px; height: 128px; border-width: 16px; border-image-width: 16px; }
.dt-emblem.wide { width: 100%; height: 120px; }
.dt-emblem.fallback { font-family: Spectral; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: #514738; }
.dt-emblem-halo { position: absolute; left: -24px; top: -24px; right: -24px; bottom: -24px; background-image: radial-gradient(circle at 50% 50%, #d4a24f40 0%, #d4a24f00 65%); }

.dt-teamcrest { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; transform: rotate(45deg); border-width: 2px; }
.dt-teamcrest.a { background-image: linear-gradient(135deg, #8fc2ff 0%, #4b8fe0 45%, #1f4a86 100%); border-color: #d8ecff; }
.dt-teamcrest.b { background-image: linear-gradient(135deg, #ffb0a6 0%, #d94a3d 45%, #6a1f18 100%); border-color: #ffe1dc; }
.dt-teamcrest.sm { width: 14px; height: 14px; border-width: 1px; }
.dt-teamcrest.lg { width: 34px; height: 34px; border-width: 3px; }
.dt-hud-score .team-a, .dt-hud-score .team-b { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.dt-hud-score .name { font-family: Spectral; font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.dt-hud-score .team-a .name { color: #8fc2ff; } .dt-hud-score .team-b .name { color: #ffb0a6; }
.c-team-a { color: #5aa0d6; } .c-team-b { color: #d94a3d; }
.dt-emblem-halo.fx-glow { animation: dtglow 2.4s ease-in-out infinite; }

/* =============================================================================
   40. PEDIDOS v2 — economia, 15/09
   .dt-reel (palco de roleta, 252 dp) > .dt-reel-reel > .dt-reel-floor .dt-reel-beam(.b) .dt-reel-strip(.fx-spin) > .dt-reel-item(.is-center) > .dt-slot + .dt-reel-ghost.g1|g2
       .dt-reel-mask-l/-r  .dt-reel-window-glow .dt-reel-window .dt-reel-ptr.t|b > .dt-reel-ptr-halo .dt-reel-ptr-tri .dt-reel-ptr-gem
       .dt-reel-streaks > .dt-reel-streak  .dt-reel-rays .dt-reel-winhalo .dt-reel-pop .dt-burst.dt-reel-burst .dt-reel-prize(.dt-reel-prize10) .dt-reel-frame
     Estados no ANCESTRAL (janela ou palco): .is-spin (rastro + pulso), .is-win (raios, halo, salto, faixa de prêmio), .is-win10 (faixa larga).
     O C++ só move o translateX da .dt-reel-strip (P9). Igual nas duas roletas (SorteioCoins, CaixaRoleta).
   .dt-ring-timer(.is-urgent) > .dt-ring-fill (conic-gradient, ângulo pelo C++) .dt-ring-gem .dt-ring-in > .dt-ring-n .dt-ring-k
   .dt-plate(.is-active|.zero|.compact) > .dt-corner.sm (só ativa) .dt-plate-k (> .dt-plate-radio? .ff-icon?) .dt-plate-v(.coin) .dt-plate-gem
   .dt-modal.danger > .dt-danger-glow + .t-eyebrow/.t-h1 rubi + .dt-danger-q; botão perigo à direita
   .dt-note > .dt-note-time — barra de tempo que esvazia no pé do aviso (rubi; .ok verde; .wait/.warn ouro; .info)
   ============================================================================= */
  .dt-reel { position: relative; height: 252px; margin: 10px 32px 0px 32px; }
  .dt-reel-reel { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; background-image: radial-gradient(ellipse at 50% 40%, #1c1410 0%, #080503 75%); }
  .dt-reel-floor { position: absolute; left: 180px; right: 180px; bottom: 30px; height: 60px; background-image: radial-gradient(ellipse at 50% 50%, #d4a24f26 0%, #d4a24f00 70%); }
  .dt-reel-beam { position: absolute; left: 50%; top: -40px; width: 300px; height: 160px; margin-left: -150px; background-image: radial-gradient(ellipse at 50% 0%, #f0cf854d 0%, #f0cf8514 40%, #f0cf8500 70%); }
  .dt-reel-beam.b { top: auto; bottom: -40px; background-image: radial-gradient(ellipse at 50% 100%, #f0cf8540 0%, #f0cf8510 40%, #f0cf8500 70%); }
  .dt-reel-strip { position: absolute; left: 0px; top: 40px; height: 110px; width: 3000px; }
  .dt-reel-strip.fx-spin { animation: dtreelspin 0.5s linear infinite; }
  @keyframes dtreelspin { 0% { transform: translateX(0px); } 100% { transform: translateX(-440px); } }
  .dt-reel-item { position: absolute; top: 7px; width: 96px; height: 96px; }
  .dt-reel-item .dt-slot { width: 96px; height: 96px; border-width: 15px; border-image-width: 15px; }
  .is-win .dt-reel-item.is-center { transform: scale(1.12); }
  .dt-reel-item.is-center .dt-slot { background-image: radial-gradient(circle at 50% 45%, #3a2a14 0%, #0c0806 100%); }
  .dt-reel-ghost { position: absolute; left: 15px; top: 15px; width: 66px; height: 66px; display: none; }
  .dt-reel-ghost img { position: absolute; }
  .dt-reel-strip.fx-spin .dt-reel-ghost { display: block; }
  .dt-reel-strip.fx-spin .dt-reel-ghost.g1 { transform: translateX(26px); opacity: 0.35; }
  .dt-reel-strip.fx-spin .dt-reel-ghost.g2 { transform: translateX(52px); opacity: 0.15; }
  .dt-reel-strip.fx-spin .dt-reel-item .dt-slot-img { opacity: 0.85; }
  /* máscaras laterais (vizinhos apagam) */
  .dt-reel-mask-l { position: absolute; left: 0px; top: 0px; width: 260px; height: 100%; background-image: linear-gradient(90deg, #080503 0%, #080503e6 25%, #08050300 100%); }
  .dt-reel-mask-r { position: absolute; right: 0px; top: 0px; width: 260px; height: 100%; background-image: linear-gradient(270deg, #080503 0%, #080503e6 25%, #08050300 100%); }
  /* janela central */
  .dt-reel-window { position: absolute; left: 50%; top: 23px; width: 144px; height: 144px; margin-left: -72px; border-width: 18px; border-color: #00000000; border-image: url(ornaments/slot_selected.png) 18 / 18px stretch; }
  .dt-reel-window-glow { position: absolute; left: 50%; top: 5px; width: 220px; height: 180px; margin-left: -110px; background-image: radial-gradient(ellipse at 50% 50%, #f0cf8540 0%, #f0cf8500 62%); }
  .dt-reel-ptr { position: absolute; left: 50%; width: 40px; height: 30px; margin-left: -20px; }
  .dt-reel-ptr.t { top: -14px; }
  .dt-reel-ptr.b { top: 170px; }
  .dt-reel-ptr .dt-reel-ptr-halo { z-index: 0; }
  .dt-reel-ptr-halo { position: absolute; left: -20px; top: -20px; width: 80px; height: 70px; background-image: radial-gradient(ellipse at 50% 50%, #f0cf8559 0%, #f0cf8500 60%); }
  .dt-reel-ptr-tri { position: absolute; left: 8px; width: 24px; height: 24px; transform: rotate(45deg); background-image: linear-gradient(135deg, #fff0c4 0%, #f0cf85 30%, #d4a24f 60%, #8a6532 100%); border-width: 2px; border-color: #2a1c0a; }
  .dt-reel-ptr.t .dt-reel-ptr-tri { top: 0px; }
  .dt-reel-ptr.b .dt-reel-ptr-tri { top: 6px; }
  .dt-reel-ptr-gem { position: absolute; left: 13px; width: 14px; height: 14px; background-image: url(ornaments/gem_14.png); background-size: 14px 14px; }
  .dt-reel-ptr.t .dt-reel-ptr-gem { top: 7px; }
  .dt-reel-ptr.b .dt-reel-ptr-gem { top: 11px; }
  /* girando */
  .dt-reel-streaks { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none; overflow: hidden; }
  .is-spin .dt-reel-streaks { display: block; }
  .dt-reel-streak { position: absolute; left: 0px; height: 2px; width: 260px; background-image: linear-gradient(90deg, #f0cf8500 0%, #fff0c4b3 50%, #f0cf8500 100%); animation: dtreelstreak 0.6s linear infinite; }
  @keyframes dtreelstreak { 0% { transform: translateX(820px); } 100% { transform: translateX(-280px); } }
  .is-spin .dt-reel-window-glow, .is-spin .dt-reel-ptr-gem { animation: dtpulse 0.5s ease-in-out infinite; }
  /* resultado */
  .dt-reel-rays { position: absolute; left: 50%; top: 95px; width: 560px; height: 560px; margin: -280px 0px 0px -280px; display: none; opacity: 0.9;
    background-image: conic-gradient(from 0deg at 50% 50%, #ffd75a00 0deg, #ffd75a4d 10deg, #ffd75a00 20deg, #ffd75a00 40deg, #ffd75a4d 50deg, #ffd75a00 60deg, #ffd75a00 80deg, #ffd75a4d 90deg, #ffd75a00 100deg, #ffd75a00 120deg, #ffd75a4d 130deg, #ffd75a00 140deg, #ffd75a00 160deg, #ffd75a4d 170deg, #ffd75a00 180deg, #ffd75a00 200deg, #ffd75a4d 210deg, #ffd75a00 220deg, #ffd75a00 240deg, #ffd75a4d 250deg, #ffd75a00 260deg, #ffd75a00 280deg, #ffd75a4d 290deg, #ffd75a00 300deg, #ffd75a00 320deg, #ffd75a4d 330deg, #ffd75a00 340deg, #ffd75a00 360deg); animation: dtreelrays 14s linear infinite; }
  @keyframes dtreelrays { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  .is-win .dt-reel-rays { display: block; }
  .dt-reel-winhalo { position: absolute; left: 50%; top: 95px; width: 260px; height: 260px; margin: -130px 0px 0px -130px; display: none; background-image: radial-gradient(circle at 50% 50%, #ffd75a73 0%, #ffd75a00 55%); animation: dtglow 1.2s ease-in-out infinite; }
  .is-win .dt-reel-winhalo { display: block; }
  .dt-reel-pop { position: absolute; left: 50%; top: 47px; width: 96px; height: 96px; margin-left: -48px; display: none; transform: scale(1.12); }
  .dt-reel-pop .dt-slot { width: 96px; height: 96px; border-width: 15px; border-image-width: 15px; background-image: radial-gradient(circle at 50% 45%, #3a2a14 0%, #0c0806 100%); }
  .is-win .dt-reel-pop { display: block; }
  .is-win .dt-reel-rays { opacity: 0.7; }
  .is-win .dt-reel-window { border-image-source: url(ornaments/slot_mythic.png); }
  .dt-reel-burst { left: 50%; top: 95px; }
  .dt-reel-prize { position: absolute; left: 50%; bottom: 2px; width: 460px; height: 50px; margin-left: -230px; display: none; flex-direction: row; align-items: center; justify-content: center; gap: 14px;
    border-width: 20px; border-color: #00000000; border-image: url(ornaments/frame_tip.png) 20 fill / 20px stretch; }
  .is-win .dt-reel-prize { display: flex; }
  .is-win .dt-reel-prize.dt-reel-prize10, .is-win10 .dt-reel-prize { display: none; }
  .is-win.is-win10 .dt-reel-prize.dt-reel-prize10 { display: flex; width: 660px; margin-left: -330px; }
  .dt-reel-prize.fx-run { animation: dtrise 0.3s ease-out; }
  .dt-reel-prize .dt-slot { width: 40px; height: 40px; border-width: 6px; border-image-width: 6px; }
  .dt-reel-prize-k { font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #d4a24f; white-space: nowrap; }
  .dt-reel-prize-n { font-family: Spectral; font-size: 22px; font-weight: 700; white-space: nowrap; text-shadow: 0px 1px 0px #000000, 0px 0px 14px #ffd75a55; }
  .dt-reel-frame { position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px; border-width: 14px; border-color: #00000000; border-image: url(ornaments/frame_panel.png) 14 / 14px stretch; }
  .dt-reel .dt-corner.sm { z-index: 3; }

.dt-ring-timer { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0px 0px -56px; border-radius: 56px; background-color: #2a2119; }
.dt-ring-fill { position: absolute; left: 0px; top: 0px; width: 112px; height: 112px; border-radius: 56px; }   /* background-image: conic-gradient(...) inline pelo C++ */
.dt-ring-in { position: absolute; left: 8px; top: 8px; width: 96px; height: 96px; border-radius: 48px; background-image: radial-gradient(circle at 50% 40%, #1c1410 0%, #080503 100%); border-width: 1px; border-color: #3d3024; }
.dt-ring-n { position: absolute; left: 0px; top: 18px; width: 96px; text-align: center; font-family: Spectral; font-size: 42px; font-weight: 700; line-height: 1; color: #fbf3e4; text-shadow: 0px 2px 0px #000000, 0px 0px 18px #d4a24f66; }
.dt-ring-k { position: absolute; left: 0px; top: 62px; width: 96px; text-align: center; font-family: Spectral; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #8a7b62; }
.dt-ring-gem { position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; background-image: url(ornaments/gem_14.png); background-size: 14px 14px; }
.dt-ring-timer.is-urgent .dt-ring-n, .is-urgent .dt-ring-n { animation: dturgent 1s ease-in-out infinite; }
.dt-ring-timer.static { position: relative; left: 0px; top: 0px; margin: 0px; }

.dt-plate { position: relative; flex: 1; height: 86px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0px 16px;
  background-color: #0c0806c9; border-width: 1px; border-color: #3d3024; transition: border-color 0.12s ease-out, background-color 0.12s ease-out; }
.dt-plate:hover { border-color: #8a6532; background-color: #1a1411; }
.dt-plate.is-active { border-color: #f0cf85; background-image: linear-gradient(180deg, #d4a24f2e 0%, #d4a24f08 100%); }
.dt-plate .dt-corner { display: none; }
.dt-plate.is-active .dt-corner { display: block; }
.dt-plate-gem { position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background-image: url(ornaments/gem_10.png); background-size: 10px 10px; display: none; }
.dt-plate.is-active .dt-plate-gem { display: block; }
.dt-plate-k { display: flex; flex-direction: row; align-items: center; gap: 8px; font-family: Spectral; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #8a7b62; white-space: nowrap; }
.dt-plate.is-active .dt-plate-k { color: #d4a24f; }
.dt-plate-v { font-family: Spectral; font-size: 26px; font-weight: 700; color: #f0cf85; line-height: 1.05; white-space: nowrap; }
.dt-plate-v.coin { color: #ffd75a; }
.dt-plate.zero .dt-plate-v { color: #514738; }
.dt-plate-radio { width: 18px; height: 18px; flex-shrink: 0; background-image: url(ornaments/radio_off.png); background-size: 18px 18px; }
.dt-plate.is-active .dt-plate-radio { background-image: url(ornaments/radio_on.png); }
/* compacta (SorteioCoins): 196x64, rádio absoluto à esquerda, título 17 + valor 14 */
.dt-plate.compact { flex: 0 0 196px; width: 196px; height: 64px; gap: 2px; padding: 0px 14px 0px 40px; }
.dt-plate.compact .dt-plate-radio { position: absolute; left: 12px; top: 23px; }
.dt-plate.compact .dt-plate-k { font-size: 17px; letter-spacing: 0px; color: #fbf3e4; }
.dt-plate.compact.is-active .dt-plate-k { color: #fbf3e4; }
.dt-plate.compact .dt-plate-v { font-family: Barlow; font-size: 14px; font-weight: 400; color: #b5a78f; }
.dt-plate.compact .dt-plate-v b { font-family: Spectral; font-weight: 700; color: #ffd75a; }

.dt-danger-glow { position: absolute; left: -120px; top: -90px; right: -120px; bottom: -90px; background-image: radial-gradient(ellipse at 50% 50%, #d94a3d66 0%, #d94a3d00 62%); }
.dt-modal.danger .t-eyebrow { color: #e0786c; }
.dt-modal.danger .t-h1 { color: #ffd6cf; text-shadow: 0px 2px 0px #000000, 0px 0px 22px #d94a3d88; }
.dt-modal.danger .dt-head.compact .t-h1 { font-size: 30px; }
.dt-danger-q { text-align: center; font-size: 16px; color: #e9dfcc; line-height: 22px; }
.dt-danger-q b { color: #ff9a8e; }

.dt-note-time { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 2px; transform-origin: 0% 50%; animation: dtdrain 5s linear infinite; background-color: #d94a3d; }
.dt-note.ok .dt-note-time { background-color: #58c46a; }
.dt-note.wait .dt-note-time, .dt-note.warn .dt-note-time { background-color: #d4a24f; }
.dt-note.info .dt-note-time { background-color: #5aa0d6; }