/* =====================================================================
   TEMAS da interface do jogo (escolhidos na janela Temas, js/temas.js).
   Só aparência: nada aqui muda posição, atalho ou regra do jogo.
   - sem atributo  : Clássico (o visual de css/style.css)
   - data-tema     : qual tema (moderno, gelo, teia, floresta...)
   - data-estilo   : a família de regras que o tema usa (mod | orn)
   Temas da mesma família só trocam as variáveis --orn-* / cores.
   ===================================================================== */

:root {
  /* cantoneira (filigrana) e gema de cada canto, usadas como máscara: a cor vem do tema */
  --canto-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27%27%3E%3Cpath%20d%3D%27M2%2027V9.5C2%205.4%205.4%202%209.5%202H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6.5%2027V13c0-3.6%202.9-6.5%206.5-6.5h14%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M7%201.6%2012.4%207%207%2012.4%201.6%207z%27%2F%3E%3Cpath%20d%3D%27M27%204.5h-6M4.5%2027v-6%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canto-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27translate(28%200)%20scale(-1%201)%27%3E%3Cpath%20d%3D%27M2%2027V9.5C2%205.4%205.4%202%209.5%202H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6.5%2027V13c0-3.6%202.9-6.5%206.5-6.5h14%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M7%201.6%2012.4%207%207%2012.4%201.6%207z%27%2F%3E%3Cpath%20d%3D%27M27%204.5h-6M4.5%2027v-6%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canto-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27translate(0%2028)%20scale(1%20-1)%27%3E%3Cpath%20d%3D%27M2%2027V9.5C2%205.4%205.4%202%209.5%202H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6.5%2027V13c0-3.6%202.9-6.5%206.5-6.5h14%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M7%201.6%2012.4%207%207%2012.4%201.6%207z%27%2F%3E%3Cpath%20d%3D%27M27%204.5h-6M4.5%2027v-6%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canto-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27translate(28%2028)%20scale(-1%20-1)%27%3E%3Cpath%20d%3D%27M2%2027V9.5C2%205.4%205.4%202%209.5%202H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6.5%2027V13c0-3.6%202.9-6.5%206.5-6.5h14%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M7%201.6%2012.4%207%207%2012.4%201.6%207z%27%2F%3E%3Cpath%20d%3D%27M27%204.5h-6M4.5%2027v-6%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%272.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27translate(28%200)%20scale(-1%201)%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%272.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27translate(0%2028)%20scale(1%20-1)%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%272.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20transform%3D%27translate(28%2028)%20scale(-1%20-1)%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%272.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---------------------------------------------------------------------
   MODERNO: grafite e azul-escuro, cantos suaves, barras vibrantes
   --------------------------------------------------------------------- */
:root[data-estilo="mod"] {
  --bg: #0a0d13; --panel: #121722; --panel-2: #182030; --slot: #0c1018;
  --border: #243047; --border-2: #34415c; --text: #e6e9ef; --muted: #8e98ab;
  --gold: #ecc66c; --gold-2: #c9962d; --mod-acento: #5b8cff;
}
[data-estilo="mod"] #topbar { background: rgba(8, 11, 17, .95); border-bottom: 1px solid #1f2a3d; box-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
[data-estilo="mod"] .logo { border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(236, 198, 108, .25); }
[data-estilo="mod"] .tb-nav button { border-radius: 4px; padding: 5px 11px; }
[data-estilo="mod"] .tb-nav button:hover { background: #151d2c; border-color: #2c3a55; }
[data-estilo="mod"] .panel {
  background: rgba(15, 19, 29, var(--panel-alpha, .93)); border-color: #243047; border-radius: 5px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .035);
}
/* filete de destaque no topo de cada painel (dourado -> azul) */
[data-estilo="mod"] .panel:not(.floating) { position: relative; }   /* o flutuante continua fixed (antes caía no fim da página) */
[data-estilo="mod"] .panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--mod-acento) 45%, transparent 85%); opacity: .85; }
[data-estilo="mod"] .tb-nav button span { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
[data-estilo="mod"] .ptitle { background: linear-gradient(#18202f, #121825); border-bottom-color: #243047; letter-spacing: .1em; font-size: 12.5px; color: #f0d38a; }
[data-estilo="mod"] .hunt-select { background: linear-gradient(#1a2233, #121826); border-color: #2f3c58; border-radius: 4px; }
[data-estilo="mod"] .scene { border: 1px solid #2c3a55; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 10px 28px rgba(0, 0, 0, .55); }
[data-estilo="mod"] .map-idle { border: 1px solid #2c3a55; border-radius: 5px; }
[data-estilo="mod"] .hotbar { background: rgba(15, 19, 29, .93); border-color: #243047; border-radius: 5px; }
[data-estilo="mod"] .hb { border-radius: 4px; border-color: #2a3550; }
/* botões (13/10/2026): mais sóbrios. O comum é grafite-azulado; o principal, bronze escuro com o texto dourado (antes um bloco amarelo) */
[data-estilo="mod"] .btn { background: linear-gradient(#1d2536, #151b28); border-color: #2f3b55; border-radius: 3px; color: #d6dbe6; }
[data-estilo="mod"] .btn:hover { border-color: #4a5f8c; color: #eef1f7; }
[data-estilo="mod"] .btn.primary { background: linear-gradient(#3a3122, #261f15); border-color: #8a6c33; color: #ecd08e; }
[data-estilo="mod"] .btn.primary:hover:not(:disabled) { background: linear-gradient(#483b28, #2e2619); border-color: #b48a42; color: #f7e1a8; }
[data-estilo="mod"] .btn.danger { background: linear-gradient(#5a2320, #3a1412); border-color: #c0453a; }
[data-estilo="mod"] .bar { background: #070a10; border-color: #1d2638; border-radius: 6px; }
[data-estilo="mod"] .bar .fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
[data-estilo="mod"] .bar.hp .fill { background: linear-gradient(#ff6d61, #d8382d 55%, #a6241c); }
[data-estilo="mod"] .bar.mp .fill { background: linear-gradient(#6fa6ff, #3b73ea 55%, #2551b8); }
[data-estilo="mod"] .bar.xp .fill { background: linear-gradient(#ffd866, #e0a826 55%, #a97a12); }
[data-estilo="mod"] .bar.thin .fill { background: linear-gradient(#7fb0ff, #4a7fe8); }
[data-estilo="mod"] .pcard { background: linear-gradient(160deg, #1a2233, #111725); border-color: #2a3650; border-radius: 5px; }
[data-estilo="mod"] .pcard::before { background: linear-gradient(var(--mod-acento), transparent); }
[data-estilo="mod"] .pc-actions .btn { background: #1a2232; border-color: #2f3c58; }
[data-estilo="mod"] .pc-actions .btn:hover { border-color: var(--mod-acento); }
[data-estilo="mod"] .pc-actions .btn.primary { background: linear-gradient(#3a3122, #261f15); border-color: #8a6c33; color: #ecd08e; }
[data-estilo="mod"] .pc-eq .slot { border-radius: 3px; background: radial-gradient(circle at 50% 40%, #1f2840, #10151f); }
[data-estilo="mod"] .win-box { border-radius: 6px; border-color: #2a3650; }
/* campos e listas de escolha no azul-escuro do tema */
[data-estilo="mod"] :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea) { background: #0b0f17; border-color: #2a3650; }
[data-estilo="mod"] .mk-painel, [data-estilo="mod"] .mk-cab, [data-estilo="mod"] .mk-leilao, [data-estilo="mod"] .mk-nota { background: #111725; border-color: #243047; }
[data-estilo="mod"] .mk-form { background: #0e1320; border-color: #243047; }
[data-estilo="mod"] .mk-topo { background: linear-gradient(#18202f, #121825); border-bottom-color: #243047; }
[data-estilo="mod"] .mk-moeda { background: #0b0f17; border-color: #243047; }
[data-estilo="mod"] .mk-it:hover { background: #151c2b; }
[data-estilo="mod"] .mk-it.on { background: #1a2335; }
[data-estilo="mod"] .mk-tab tbody tr:hover { background: #141b29; }
[data-estilo="mod"] .mk-tab td { border-bottom-color: #1c2538; }
[data-estilo="mod"] .win-head { background: linear-gradient(#18202f, #121825); }

/* ---------------------------------------------------------------------
   ORNAMENTADO: molduras de metal, cantoneiras com gema, filetes dourados.
   As cores vêm das variáveis --orn-* (cada tema elemental troca só elas).
   --------------------------------------------------------------------- */
:root[data-tema="floresta"] {
  --orn-claro: #dbe9a4; --orn-metal: #7f9c3e; --orn-escuro: #2b3a15; --orn-gema: #8cff70;
  --orn-fundo-1: #131a10; --orn-fundo-2: #0b0f09; --orn-titulo: #e4f2bd; --bg: #080b06;
}
:root[data-estilo="orn"] {
  --panel: var(--orn-fundo-1); --panel-2: #221e19; --slot: #0d0c0a;
  --border: var(--orn-escuro); --border-2: color-mix(in srgb, var(--orn-metal) 55%, #000);
  --gold: var(--orn-claro); --muted: #a39a8a;
  --orn-moldura: linear-gradient(180deg, var(--orn-claro), var(--orn-metal) 45%, var(--orn-escuro));
  --orn-filete: linear-gradient(90deg, transparent, var(--orn-claro), transparent);
}

/* painéis: borda de metal + filete interno + cantoneiras (::before) e gemas (::after) */
[data-estilo="orn"] .panel, [data-estilo="orn"] .hotbar, [data-estilo="orn"] .win-box, [data-estilo="orn"] .pcard {
  position: relative; border: 2px solid; border-image: var(--orn-moldura) 1; border-radius: 0;
  background: linear-gradient(var(--orn-fundo-1), var(--orn-fundo-2));
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px color-mix(in srgb, var(--orn-metal) 30%, transparent), 0 6px 18px rgba(0, 0, 0, .6);
}
[data-estilo="orn"] .panel { background: linear-gradient(color-mix(in srgb, var(--orn-fundo-1) 94%, transparent), color-mix(in srgb, var(--orn-fundo-2) 94%, transparent)); }
[data-estilo="orn"] .panel::before, [data-estilo="orn"] .hotbar::before, [data-estilo="orn"] .win-box::before, [data-estilo="orn"] .pcard::before,
[data-estilo="orn"] .panel::after, [data-estilo="orn"] .hotbar::after, [data-estilo="orn"] .win-box::after, [data-estilo="orn"] .pcard::after {
  --orn-canto-pad: 30px;
  content: ''; position: absolute; inset: -1px; z-index: 4; pointer-events: none; opacity: 1; border-radius: 0; width: auto;
  -webkit-mask: var(--canto-tl) top left / var(--orn-canto, 30px) no-repeat, var(--canto-tr) top right / var(--orn-canto, 30px) no-repeat,
                var(--canto-bl) bottom left / var(--orn-canto, 30px) no-repeat, var(--canto-br) bottom right / var(--orn-canto, 30px) no-repeat;
          mask: var(--canto-tl) top left / var(--orn-canto, 30px) no-repeat, var(--canto-tr) top right / var(--orn-canto, 30px) no-repeat,
                var(--canto-bl) bottom left / var(--orn-canto, 30px) no-repeat, var(--canto-br) bottom right / var(--orn-canto, 30px) no-repeat;
  background: linear-gradient(135deg, var(--orn-claro), var(--orn-metal) 55%, var(--orn-claro));
}
[data-estilo="orn"] .panel::after, [data-estilo="orn"] .hotbar::after, [data-estilo="orn"] .win-box::after, [data-estilo="orn"] .pcard::after {
  -webkit-mask: var(--gema-tl) top left / var(--orn-canto, 30px) no-repeat, var(--gema-tr) top right / var(--orn-canto, 30px) no-repeat,
                var(--gema-bl) bottom left / var(--orn-canto, 30px) no-repeat, var(--gema-br) bottom right / var(--orn-canto, 30px) no-repeat;
          mask: var(--gema-tl) top left / var(--orn-canto, 30px) no-repeat, var(--gema-tr) top right / var(--orn-canto, 30px) no-repeat,
                var(--gema-bl) bottom left / var(--orn-canto, 30px) no-repeat, var(--gema-br) bottom right / var(--orn-canto, 30px) no-repeat;
  background: var(--orn-gema); filter: drop-shadow(0 0 3px var(--orn-gema));
}
[data-estilo="orn"] .pcard { --orn-canto: 20px; }
[data-estilo="orn"] .pcard.dead { border-image: linear-gradient(#ff8a7a, #7a1d14) 1; }

[data-estilo="orn"] .ptitle {
  padding-left: 30px; padding-right: 26px; color: var(--orn-titulo); letter-spacing: .12em; text-shadow: 0 1px 2px #000;
  background: linear-gradient(color-mix(in srgb, var(--orn-metal) 18%, #15120f), #110f0c);
  border-bottom: 1px solid; border-image: var(--orn-filete) 1;
}
[data-estilo="orn"] .sk-title { color: var(--orn-claro); opacity: .75; }
[data-estilo="orn"] .sk-row, [data-estilo="orn"] .kv span { border-color: transparent; }

/* topo: barra de metal; atalhos viram ladrilhos de pedra */
[data-estilo="orn"] #topbar {
  background: linear-gradient(color-mix(in srgb, var(--orn-metal) 14%, #17140f), #0c0a08);
  border-bottom: 2px solid; border-image: var(--orn-moldura) 1; box-shadow: 0 3px 14px rgba(0, 0, 0, .6);
}
[data-estilo="orn"] .logo { border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--orn-metal), 0 0 12px color-mix(in srgb, var(--orn-gema) 40%, transparent); }
[data-estilo="orn"] .tb-name { color: var(--orn-titulo); font-family: Cinzel, serif; }
[data-estilo="orn"] .tb-nav { gap: 6px; }
[data-estilo="orn"] .tb-nav button {
  min-width: 62px; padding: 5px 8px; border-radius: 3px; color: var(--orn-titulo);
  background: linear-gradient(#2c2823, #171411); border: 1px solid var(--orn-escuro);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, .1), inset 0 0 0 1px #000, 0 2px 4px rgba(0, 0, 0, .5);
}
[data-estilo="orn"] .tb-nav button:hover { border-color: var(--orn-claro); background: linear-gradient(#3a342c, #1c1814); box-shadow: inset 0 0 0 1px #000, 0 0 10px color-mix(in srgb, var(--orn-claro) 35%, transparent); }

/* centro: seletor de hunt e tela do jogo em moldura de "portal" */
[data-estilo="orn"] .hunt-select {
  border-radius: 2px; color: var(--orn-titulo); border: 1px solid var(--orn-metal);
  background: linear-gradient(color-mix(in srgb, var(--orn-metal) 20%, #1d1915), #110f0c);
  box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .5);
}
[data-estilo="orn"] .scene, [data-estilo="orn"] .map-idle {
  border: 3px solid; border-image: var(--orn-moldura) 1; border-radius: 0;
  box-shadow: 0 0 0 1px #000, 0 0 0 5px color-mix(in srgb, var(--orn-escuro) 85%, #000), 0 0 0 6px var(--orn-metal), 0 12px 30px rgba(0, 0, 0, .7);
}
[data-estilo="orn"] .target-bar { border-color: var(--orn-metal); border-radius: 2px; }

/* barra de magias e slots */
[data-estilo="orn"] .hotbar { --orn-canto: 20px; padding: 7px 10px; }
[data-estilo="orn"] .hb, [data-estilo="orn"] .hb-label { border-radius: 3px; border-color: var(--orn-escuro); box-shadow: inset 0 0 0 1px #000; }
[data-estilo="orn"] .hb-label { color: var(--orn-titulo); }
[data-estilo="orn"] .pc-eq .slot { border-radius: 2px; border-color: #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orn-metal) 35%, transparent); }

/* botões de pedra entalhada */
[data-estilo="orn"] .btn, [data-estilo="orn"] .pc-actions .btn {
  border-radius: 2px; color: #ece0c4; text-shadow: 0 1px 1px #000;
  background: linear-gradient(#3b3732, #24211d 60%, #1b1916); border: 1px solid var(--orn-escuro);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 2px #000;
}
[data-estilo="orn"] .btn:hover, [data-estilo="orn"] .pc-actions .btn:hover { border-color: var(--orn-claro); }
[data-estilo="orn"] .btn.primary, [data-estilo="orn"] .pc-actions .btn.primary {
  color: #1d1406; text-shadow: none; border-color: var(--orn-claro);
  background: linear-gradient(var(--orn-claro), var(--orn-metal));
}
[data-estilo="orn"] .btn.danger { background: linear-gradient(#5a231d, #34120e); border-color: #9e3a2c; }

/* barras com brilho de joia */
[data-estilo="orn"] .bar { border-radius: 2px; border-color: #000; background: #080706; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orn-metal) 25%, transparent); }
[data-estilo="orn"] .bar .fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .3); }

/* janelas */
[data-estilo="orn"] .win-box { --orn-canto: 30px; }
[data-estilo="orn"] .win-head { background: linear-gradient(color-mix(in srgb, var(--orn-metal) 18%, #15120f), #110f0c); border-bottom: 1px solid; border-image: var(--orn-filete) 1; padding-left: 30px; padding-right: 26px; }
[data-estilo="orn"] .win-head h2 { color: var(--orn-titulo); }

/* ---------------------------------------------------------------------
   Janela "Temas" (js/temas.js): cartões com prévia, como uma loja
   --------------------------------------------------------------------- */
#temas-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .72); }
#temas-win[hidden] { display: none; }
.tm-caixa { width: min(980px, 100%); max-height: 100%; overflow-y: auto; padding: 18px 20px 22px;
  background: linear-gradient(#161a22, #0f1218); border: 1px solid #2c3446; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7); color: var(--text); }
.tm-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-topo h2 { margin: 0; font-family: Cinzel, serif; font-size: 20px; letter-spacing: .06em; color: var(--gold); }
.tm-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #6b2a2a; background: #2a1414; color: #f0a0a0; font-size: 15px; }
.tm-x:hover { background: #3a1a1a; }
.tm-sub { margin: 6px 0 16px; color: var(--muted); font-size: 13px; }
.tm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tm-cartao { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 10px;
  background: #141822; border: 1px solid #262e40; }
.tm-cartao.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(232, 184, 74, .18); }
.tm-previa { position: relative; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: #0a0c10; border: 1px solid #000; }
.tm-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-selo { position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: #0e2a14; background: #6fdc8c; box-shadow: 0 0 10px rgba(111, 220, 140, .5); }
.tm-cartao b { margin-top: 4px; font-family: Cinzel, serif; color: var(--gold); font-size: 15px; }
.tm-cartao small { color: var(--muted); min-height: 2.6em; }
.tm-cartao .btn { margin-top: 4px; }

/* ---------------------------------------------------------------------
   TEIA: cantoneiras de teia com pingentes e uma aranha pendurada no fio
   --------------------------------------------------------------------- */
:root[data-tema="teia"] {
  /* teia (máscaras; a cor vem do tema) */
  --canto-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%202L40.0%202.0M2%202L37.2%2016.2M2%202L28.9%2028.9M2%202L16.2%2037.2M2%202L2.0%2040.0%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M15.0%202.0Q12.0%203.9%2014.1%206.9Q10.5%207.6%2011.2%2011.2Q7.6%2010.5%206.9%2014.1Q4.0%2011.9%202.0%2015.0M26.0%202.0Q20.4%205.4%2024.3%2011.0Q17.6%2012.3%2019.0%2019.0Q12.3%2017.6%2011.0%2024.3Q5.7%2020.3%202.0%2026.0M36.0%202.0Q28.1%206.9%2033.5%2014.7Q24.1%2016.7%2026.0%2026.0Q16.6%2024.1%2014.7%2033.5Q7.3%2028.0%202.0%2036.0%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M2%202h36M2%202v36%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M10%202l1.6%209-1.6-1.4-1.6%201.4zM18%202l1.2%206-1.2-1-1.2%201zM26%202l1%204-1-.8-1%20.8zM2%2010l9%201.6-1.4-1.6%201.4-1.6zM2%2018l6%201.2-1-1.2%201-1.2z%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canto-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate(40%200)%20scale(-1%201)%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%202L40.0%202.0M2%202L37.2%2016.2M2%202L28.9%2028.9M2%202L16.2%2037.2M2%202L2.0%2040.0%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M15.0%202.0Q12.0%203.9%2014.1%206.9Q10.5%207.6%2011.2%2011.2Q7.6%2010.5%206.9%2014.1Q4.0%2011.9%202.0%2015.0M26.0%202.0Q20.4%205.4%2024.3%2011.0Q17.6%2012.3%2019.0%2019.0Q12.3%2017.6%2011.0%2024.3Q5.7%2020.3%202.0%2026.0M36.0%202.0Q28.1%206.9%2033.5%2014.7Q24.1%2016.7%2026.0%2026.0Q16.6%2024.1%2014.7%2033.5Q7.3%2028.0%202.0%2036.0%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M2%202h36M2%202v36%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M10%202l1.6%209-1.6-1.4-1.6%201.4zM18%202l1.2%206-1.2-1-1.2%201zM26%202l1%204-1-.8-1%20.8zM2%2010l9%201.6-1.4-1.6%201.4-1.6zM2%2018l6%201.2-1-1.2%201-1.2z%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canto-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate(0%2040)%20scale(1%20-1)%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%202L40.0%202.0M2%202L37.2%2016.2M2%202L28.9%2028.9M2%202L16.2%2037.2M2%202L2.0%2040.0%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M15.0%202.0Q12.0%203.9%2014.1%206.9Q10.5%207.6%2011.2%2011.2Q7.6%2010.5%206.9%2014.1Q4.0%2011.9%202.0%2015.0M26.0%202.0Q20.4%205.4%2024.3%2011.0Q17.6%2012.3%2019.0%2019.0Q12.3%2017.6%2011.0%2024.3Q5.7%2020.3%202.0%2026.0M36.0%202.0Q28.1%206.9%2033.5%2014.7Q24.1%2016.7%2026.0%2026.0Q16.6%2024.1%2014.7%2033.5Q7.3%2028.0%202.0%2036.0%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M2%202h36M2%202v36%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M10%202l1.6%209-1.6-1.4-1.6%201.4zM18%202l1.2%206-1.2-1-1.2%201zM26%202l1%204-1-.8-1%20.8zM2%2010l9%201.6-1.4-1.6%201.4-1.6zM2%2018l6%201.2-1-1.2%201-1.2z%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canto-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate(40%2040)%20scale(-1%20-1)%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%202L40.0%202.0M2%202L37.2%2016.2M2%202L28.9%2028.9M2%202L16.2%2037.2M2%202L2.0%2040.0%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M15.0%202.0Q12.0%203.9%2014.1%206.9Q10.5%207.6%2011.2%2011.2Q7.6%2010.5%206.9%2014.1Q4.0%2011.9%202.0%2015.0M26.0%202.0Q20.4%205.4%2024.3%2011.0Q17.6%2012.3%2019.0%2019.0Q12.3%2017.6%2011.0%2024.3Q5.7%2020.3%202.0%2026.0M36.0%202.0Q28.1%206.9%2033.5%2014.7Q24.1%2016.7%2026.0%2026.0Q16.6%2024.1%2014.7%2033.5Q7.3%2028.0%202.0%2036.0%27%20stroke-width%3D%271.1%27%2F%3E%3Cpath%20d%3D%27M2%202h36M2%202v36%27%20stroke-width%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M10%202l1.6%209-1.6-1.4-1.6%201.4zM18%202l1.2%206-1.2-1-1.2%201zM26%202l1%204-1-.8-1%20.8zM2%2010l9%201.6-1.4-1.6%201.4-1.6zM2%2018l6%201.2-1-1.2%201-1.2z%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27%27%3E%3Cpath%20d%3D%27M6%201.5%2010.5%206%206%2010.5%201.5%206z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate(40%200)%20scale(-1%201)%27%3E%3Cpath%20d%3D%27M6%201.5%2010.5%206%206%2010.5%201.5%206z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate(0%2040)%20scale(1%20-1)%27%3E%3Cpath%20d%3D%27M6%201.5%2010.5%206%206%2010.5%201.5%206z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --gema-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate(40%2040)%20scale(-1%20-1)%27%3E%3Cpath%20d%3D%27M6%201.5%2010.5%206%206%2010.5%201.5%206z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
[data-tema="teia"] .panel, [data-tema="teia"] .win-box { --orn-canto: 40px; }
[data-tema="teia"] .pcard, [data-tema="teia"] .hotbar { --orn-canto: 28px; }
[data-tema="teia"] .panel::before, [data-tema="teia"] .win-box::before, [data-tema="teia"] .pcard::before, [data-tema="teia"] .hotbar::before {
  background: linear-gradient(135deg, #f4f0ff, #b9b0cf 50%, #f4f0ff); filter: drop-shadow(0 0 2px rgba(200, 185, 255, .6)); }

/* ---------------------------------------------------------------------
   NEON: vidro escuro com faixas de luz nas laterais (efeitos de perfil do
   Discord). Cada tema troca só --neon / --neon-claro; a Aurora usa uma
   faixa de várias cores (--neon-faixa).
   --------------------------------------------------------------------- */
:root[data-tema="esmeralda"] { --neon: #33f59a; --neon-claro: #b9ffd9; }
:root[data-tema="safira"]    { --neon: #3aa8ff; --neon-claro: #c4e5ff; }
:root[data-tema="ametista"]  { --neon: #b46bff; --neon-claro: #e6d1ff; }
:root[data-tema="rosa"]      { --neon: #ff5cc8; --neon-claro: #ffd0ef; }
:root[data-tema="ambar"]     { --neon: #ffb340; --neon-claro: #ffe6bd; }
:root[data-tema="aurora"]    { --neon: #a98bff; --neon-claro: #f0e8ff;
  --neon-faixa: linear-gradient(transparent, #7ef9ff 20%, #a98bff 45%, #ff8de1 70%, #ffd27a 88%, transparent);
  --neon-linha: linear-gradient(90deg, transparent, #7ef9ff, #a98bff, #ff8de1, #ffd27a, transparent); }
:root[data-estilo="neon"] {
  --bg: #06070c; --panel: #0d1017; --panel-2: #131722; --slot: #080a10;
  --border: color-mix(in srgb, var(--neon) 28%, #1b2030); --border-2: color-mix(in srgb, var(--neon) 40%, #232a3a);
  --text: #e8ebf2; --muted: #9098aa; --gold: var(--neon-claro);
}
[data-estilo="neon"] .panel, [data-estilo="neon"] .hotbar, [data-estilo="neon"] .win-box, [data-estilo="neon"] .pcard {
  position: relative; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 19, 29, var(--panel-alpha, .93)), rgba(8, 10, 16, var(--panel-alpha, .93)));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 28px color-mix(in srgb, var(--neon) 7%, transparent);
}
/* as duas faixas de luz: lateral esquerda (::before) e direita (::after) */
[data-estilo="neon"] .panel::before, [data-estilo="neon"] .panel::after,
[data-estilo="neon"] .hotbar::before, [data-estilo="neon"] .hotbar::after,
[data-estilo="neon"] .win-box::before, [data-estilo="neon"] .win-box::after,
[data-estilo="neon"] .pcard::before, [data-estilo="neon"] .pcard::after {
    content: ''; position: absolute; top: 6%; bottom: 6%; width: 3px; z-index: 3; pointer-events: none; border-radius: 3px; opacity: 1;
  background: var(--neon-faixa, linear-gradient(transparent, var(--neon) 30%, var(--neon) 70%, transparent));
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--neon) 80%, transparent), 0 0 4px var(--neon);
}
[data-estilo="neon"] .panel::before, [data-estilo="neon"] .hotbar::before, [data-estilo="neon"] .win-box::before, [data-estilo="neon"] .pcard::before { left: 0; }
[data-estilo="neon"] .panel::after, [data-estilo="neon"] .hotbar::after, [data-estilo="neon"] .win-box::after, [data-estilo="neon"] .pcard::after { right: 0; }
[data-estilo="neon"] .pcard { border-radius: 10px; }
[data-estilo="neon"] .pcard::before, [data-estilo="neon"] .pcard::after { opacity: .6; }
[data-estilo="neon"] .ptitle { background: transparent; color: var(--neon-claro); letter-spacing: .12em;
  text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 70%, transparent); border-bottom: 1px solid; border-image: var(--neon-linha, linear-gradient(90deg, transparent, var(--neon), transparent)) 1; }
[data-estilo="neon"] #topbar { background: rgba(6, 7, 12, .92); border-bottom: 1px solid; border-image: var(--neon-linha, linear-gradient(90deg, transparent, var(--neon), transparent)) 1;
  box-shadow: 0 4px 22px color-mix(in srgb, var(--neon) 18%, transparent); }
[data-estilo="neon"] .tb-name { color: var(--neon-claro); text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 60%, transparent); }
[data-estilo="neon"] .tb-nav button { border-radius: 10px; }
[data-estilo="neon"] .tb-nav button:hover { background: color-mix(in srgb, var(--neon) 10%, transparent); border-color: color-mix(in srgb, var(--neon) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 30%, transparent); }
[data-estilo="neon"] .logo { border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 0 16px color-mix(in srgb, var(--neon) 60%, transparent); }
[data-estilo="neon"] .hunt-select { border-radius: 10px; background: rgba(12, 14, 22, .9); border-color: var(--border-2); }
[data-estilo="neon"] .scene, [data-estilo="neon"] .map-idle { border: 1px solid color-mix(in srgb, var(--neon) 55%, transparent); border-radius: 12px;
  box-shadow: 0 0 0 1px #000, 0 0 24px color-mix(in srgb, var(--neon) 30%, transparent), 0 10px 30px rgba(0, 0, 0, .6); }
[data-estilo="neon"] .btn, [data-estilo="neon"] .pc-actions .btn { border-radius: 8px; background: rgba(14, 17, 26, .9); border-color: var(--border-2); }
[data-estilo="neon"] .btn:hover, [data-estilo="neon"] .pc-actions .btn:hover { border-color: var(--neon); box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 40%, transparent); }
[data-estilo="neon"] .btn.primary, [data-estilo="neon"] .pc-actions .btn.primary { color: #0a0b10; font-weight: 700; border-color: var(--neon-claro);
  background: linear-gradient(var(--neon-claro), var(--neon)); box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 50%, transparent); }
[data-estilo="neon"] .btn.danger { background: linear-gradient(#5a2320, #3a1412); border-color: #e0554a; }
[data-estilo="neon"] .hb, [data-estilo="neon"] .hb-label, [data-estilo="neon"] .pc-eq .slot { border-radius: 7px; }
[data-estilo="neon"] .bar { border-radius: 6px; border-color: #000; background: #05060a; }
[data-estilo="neon"] .bar .fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 8px currentColor; }
[data-estilo="neon"] .bar.hp .fill { background: linear-gradient(#ff6f63, #d8362b); color: #ff4a3d; }
[data-estilo="neon"] .bar.mp .fill { background: linear-gradient(#6fb0ff, #2f68e0); color: #3f86ff; }
[data-estilo="neon"] .win-head { background: transparent; border-bottom: 1px solid; border-image: var(--neon-linha, linear-gradient(90deg, transparent, var(--neon), transparent)) 1; }
[data-estilo="neon"] .win-head h2 { color: var(--neon-claro); text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 60%, transparent); }

/* ---------------------------------------------------------------------
   Faixa "Visualizando" (botão Ver da janela Temas): o tema fica aplicado
   só até escolher Usar ou Voltar
   --------------------------------------------------------------------- */
#tema-previa { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 12px;
  background: rgba(10, 12, 18, .94); border: 1px solid var(--gold); box-shadow: 0 8px 30px rgba(0, 0, 0, .6), 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
#tema-previa[hidden] { display: none; }
#tema-previa b { font-family: Cinzel, serif; color: var(--gold); letter-spacing: .06em; }
#tema-previa small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tm-cartao .tm-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }

/* =====================================================================
   DETALHES DOS TEMAS ELEMENTAIS: desenhos SVG (máscaras; a cor vem do
   tema), gerados de uma vez. Cada tema usa os 2 pseudo-elementos dos
   painéis: ::before (cantos ou neve no topo) e ::after (gemas, chamas,
   raios ou flocos).
   ===================================================================== */
:root {
  --cipo-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20transform%3D%27%27%3E%0A%20%20%3Cpath%20d%3D%27M2%206C18%201%2030%2013%2046%206S61%203%2064%208M6%202C1%2018%2013%2030%206%2046S3%2061%208%2064%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M24%209q5%206%200%209q-4-2%200-5M9%2024q6%205%209%200q-2-4-5%200%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%2F%3E%0A%20%20%3Cellipse%20cx%3D%2716%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-25%2016%204)%27%2F%3E%3Cellipse%20cx%3D%2733%27%20cy%3D%2710%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(25%2033%2010)%27%2F%3E%3Cellipse%20cx%3D%2752%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-15%2052%204)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2716%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(65%204%2016)%27%2F%3E%3Cellipse%20cx%3D%2710%27%20cy%3D%2733%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(115%2010%2033)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2752%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(75%204%2052)%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%279%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(45%209%209)%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cipo-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20transform%3D%27translate(64%200)%20scale(-1%201)%27%3E%0A%20%20%3Cpath%20d%3D%27M2%206C18%201%2030%2013%2046%206S61%203%2064%208M6%202C1%2018%2013%2030%206%2046S3%2061%208%2064%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M24%209q5%206%200%209q-4-2%200-5M9%2024q6%205%209%200q-2-4-5%200%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%2F%3E%0A%20%20%3Cellipse%20cx%3D%2716%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-25%2016%204)%27%2F%3E%3Cellipse%20cx%3D%2733%27%20cy%3D%2710%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(25%2033%2010)%27%2F%3E%3Cellipse%20cx%3D%2752%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-15%2052%204)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2716%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(65%204%2016)%27%2F%3E%3Cellipse%20cx%3D%2710%27%20cy%3D%2733%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(115%2010%2033)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2752%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(75%204%2052)%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%279%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(45%209%209)%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cipo-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20transform%3D%27translate(0%2064)%20scale(1%20-1)%27%3E%0A%20%20%3Cpath%20d%3D%27M2%206C18%201%2030%2013%2046%206S61%203%2064%208M6%202C1%2018%2013%2030%206%2046S3%2061%208%2064%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M24%209q5%206%200%209q-4-2%200-5M9%2024q6%205%209%200q-2-4-5%200%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%2F%3E%0A%20%20%3Cellipse%20cx%3D%2716%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-25%2016%204)%27%2F%3E%3Cellipse%20cx%3D%2733%27%20cy%3D%2710%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(25%2033%2010)%27%2F%3E%3Cellipse%20cx%3D%2752%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-15%2052%204)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2716%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(65%204%2016)%27%2F%3E%3Cellipse%20cx%3D%2710%27%20cy%3D%2733%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(115%2010%2033)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2752%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(75%204%2052)%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%279%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(45%209%209)%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cipo-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20transform%3D%27translate(64%2064)%20scale(-1%20-1)%27%3E%0A%20%20%3Cpath%20d%3D%27M2%206C18%201%2030%2013%2046%206S61%203%2064%208M6%202C1%2018%2013%2030%206%2046S3%2061%208%2064%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M24%209q5%206%200%209q-4-2%200-5M9%2024q6%205%209%200q-2-4-5%200%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%2F%3E%0A%20%20%3Cellipse%20cx%3D%2716%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-25%2016%204)%27%2F%3E%3Cellipse%20cx%3D%2733%27%20cy%3D%2710%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(25%2033%2010)%27%2F%3E%3Cellipse%20cx%3D%2752%27%20cy%3D%274%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(-15%2052%204)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2716%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(65%204%2016)%27%2F%3E%3Cellipse%20cx%3D%2710%27%20cy%3D%2733%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(115%2010%2033)%27%2F%3E%3Cellipse%20cx%3D%274%27%20cy%3D%2752%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(75%204%2052)%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%279%27%20rx%3D%274.6%27%20ry%3D%272.1%27%20transform%3D%27rotate(45%209%209)%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --neve-capa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2014%27%3E%3Cpath%20d%3D%27M0%200H60V6C52%2012%2046%206%2040%2010C34%2014%2028%207%2020%2011C14%2014%208%208%200%206Z%27%2F%3E%3C%2Fsvg%3E");
  --floco: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M16%2016L30.0%2016.0M24.5%2016.0L27.9%2018.9M24.5%2016.0L27.9%2013.1M16%2016L23.0%2028.1M20.3%2023.4L19.5%2027.8M20.3%2023.4L24.5%2024.9M16%2016L9.0%2028.1M11.8%2023.4L7.6%2024.9M11.8%2023.4L12.6%2027.8M16%2016L2.0%2016.0M7.5%2016.0L4.1%2013.1M7.5%2016.0L4.1%2018.9M16%2016L9.0%203.9M11.7%208.6L12.5%204.2M11.7%208.6L7.5%207.1M16%2016L23.0%203.9M20.3%208.6L24.5%207.1M20.3%208.6L19.5%204.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E");
  --aranha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2052%27%3E%3Cpath%20d%3D%27M12%200V30%27%20stroke%3D%27%23000%27%20stroke-width%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2737%27%20r%3D%275.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2730%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M7%2034L1%2029M7%2036L0%2037M7%2038L1%2045M8%2040L3%2049%20M17%2034L23%2029M17%2036L24%2037M17%2038L23%2045M16%2040L21%2049%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}

/* ---------- GELO (neve): neve acumulada no topo, flocos nos cantos, neve caindo ---------- */
:root[data-tema="gelo"] {
  --orn-claro: #ffffff; --orn-metal: #a9d4f5; --orn-escuro: #2c4a66; --orn-gema: #e9f7ff;
  --orn-fundo-1: #121c28; --orn-fundo-2: #0a1119; --orn-titulo: #eaf6ff; --bg: #060a10;
}
[data-tema="gelo"] .panel, [data-tema="gelo"] .win-box, [data-tema="gelo"] .hotbar {
  background:
    radial-gradient(1.6px 1.6px at 20% 15%, rgba(255, 255, 255, .9) 50%, transparent 55%) 0 0 / 90px 90px,
    radial-gradient(1.1px 1.1px at 65% 45%, rgba(255, 255, 255, .75) 50%, transparent 55%) 0 0 / 90px 90px,
    radial-gradient(2.2px 2.2px at 40% 80%, rgba(225, 242, 255, .85) 50%, transparent 55%) 0 0 / 130px 130px,
    linear-gradient(rgba(18, 28, 40, .94), rgba(10, 17, 25, .94));
  animation: neve-cai 16s linear infinite;
}
@keyframes neve-cai { to { background-position: 22px 90px, -14px 90px, 12px 130px, 0 0; } }
[data-tema="gelo"] .panel::before, [data-tema="gelo"] .win-box::before, [data-tema="gelo"] .hotbar::before {
  inset: 0 0 auto 0; height: 14px;
  -webkit-mask: var(--neve-capa) repeat-x left top / 60px 14px; mask: var(--neve-capa) repeat-x left top / 60px 14px;
  background: linear-gradient(#ffffff, #dcefff); filter: drop-shadow(0 2px 2px rgba(0, 30, 60, .6));
}
[data-tema="gelo"] .panel::after, [data-tema="gelo"] .win-box::after, [data-tema="gelo"] .hotbar::after, [data-tema="gelo"] .pcard::after {
  -webkit-mask: var(--floco) left 4px top 13px / 20px no-repeat, var(--floco) right 4px top 13px / 20px no-repeat,
                var(--floco) left 4px bottom 4px / 16px no-repeat, var(--floco) right 4px bottom 4px / 16px no-repeat;
          mask: var(--floco) left 4px top 13px / 20px no-repeat, var(--floco) right 4px top 13px / 20px no-repeat,
                var(--floco) left 4px bottom 4px / 16px no-repeat, var(--floco) right 4px bottom 4px / 16px no-repeat;
  background: #ffffff; filter: drop-shadow(0 0 3px rgba(170, 220, 255, .95));
}
[data-tema="gelo"] .pcard::after { -webkit-mask-size: 14px; mask-size: 14px; -webkit-mask-position: left 3px top 3px, right 3px top 3px, left 3px bottom 3px, right 3px bottom 3px; mask-position: left 3px top 3px, right 3px top 3px, left 3px bottom 3px, right 3px bottom 3px; }
[data-tema="gelo"] .ptitle { padding-top: 13px; padding-left: 30px; }
[data-tema="gelo"] .scene { box-shadow: 0 0 0 1px #000, 0 0 0 5px #1d3147, 0 0 0 6px #cfe9ff, 0 0 22px rgba(190, 230, 255, .35); }

/* ---------- TERRA (floresta): cipós com folhas crescendo dos cantos ---------- */
:root[data-tema="floresta"] { --orn-claro: #d8c58a; --orn-metal: #7a8a3a; --orn-escuro: #2e3216; --orn-gema: #ff7a7a; --orn-titulo: #e8f2c4; }
[data-tema="floresta"] .panel, [data-tema="floresta"] .win-box { --orn-canto: 58px; }
[data-tema="floresta"] .pcard, [data-tema="floresta"] .hotbar { --orn-canto: 40px; }
[data-tema="floresta"] .panel::before, [data-tema="floresta"] .win-box::before, [data-tema="floresta"] .pcard::before, [data-tema="floresta"] .hotbar::before {
  -webkit-mask: var(--cipo-tl) top left / var(--orn-canto) no-repeat, var(--cipo-tr) top right / var(--orn-canto) no-repeat,
                var(--cipo-bl) bottom left / var(--orn-canto) no-repeat, var(--cipo-br) bottom right / var(--orn-canto) no-repeat;
          mask: var(--cipo-tl) top left / var(--orn-canto) no-repeat, var(--cipo-tr) top right / var(--orn-canto) no-repeat,
                var(--cipo-bl) bottom left / var(--orn-canto) no-repeat, var(--cipo-br) bottom right / var(--orn-canto) no-repeat;
  background: linear-gradient(135deg, #c3eb85, #5c9a30 55%, #33621c); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
[data-tema="floresta"] .ptitle { background: linear-gradient(#3a2c18, #241a0e); padding-left: 34px; }

/* ---------- TEIA: cinza-violeta, teia nos cantos e uma aranha descendo no fio ---------- */
:root[data-tema="teia"] {
  --orn-claro: #e6e0f2; --orn-metal: #7b7391; --orn-escuro: #2a2633; --orn-gema: #b28dff;
  --orn-fundo-1: #17151d; --orn-fundo-2: #0c0b10; --orn-titulo: #efe9ff; --bg: #060508;
}
[data-tema="teia"] .panel::after {
  -webkit-mask: var(--gema-tl) top left / var(--orn-canto) no-repeat, var(--gema-tr) top right / var(--orn-canto) no-repeat,
                var(--gema-bl) bottom left / var(--orn-canto) no-repeat, var(--gema-br) bottom right / var(--orn-canto) no-repeat,
                var(--aranha) right 46px top -4px / 16px 35px no-repeat;
          mask: var(--gema-tl) top left / var(--orn-canto) no-repeat, var(--gema-tr) top right / var(--orn-canto) no-repeat,
                var(--gema-bl) bottom left / var(--orn-canto) no-repeat, var(--gema-br) bottom right / var(--orn-canto) no-repeat,
                var(--aranha) right 46px top -4px / 16px 35px no-repeat;
  background: #d9d0ee; filter: drop-shadow(0 0 2px rgba(178, 141, 255, .7));
  animation: aranha-desce 4.5s ease-in-out infinite;
}
@keyframes aranha-desce {
  0%, 100% { -webkit-mask-position: top left, top right, bottom left, bottom right, right 46px top -6px; mask-position: top left, top right, bottom left, bottom right, right 46px top -6px; }
  50% { -webkit-mask-position: top left, top right, bottom left, bottom right, right 46px top 3px; mask-position: top left, top right, bottom left, bottom right, right 46px top 3px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-tema="gelo"] .panel, [data-tema="gelo"] .win-box, [data-tema="gelo"] .hotbar,
  [data-tema="teia"] .panel::after { animation: none; }
}

/* botões de dificuldade (lista de hunts) mantêm as cores próprias em qualquer tema
   (o .btn de cada tema pintava por cima: "Médio" ficava texto escuro em fundo escuro) */
:root[data-estilo] .btn.diff-easy { background: linear-gradient(#3f8f3a, #2a6a26); border-color: #5fc46a; color: #f0fff0; text-shadow: none; }
:root[data-estilo] .btn.diff-medium { background: linear-gradient(#f3e08a, #d8c25a); border-color: #fff0a0; color: #2a2208; text-shadow: none; }
:root[data-estilo] .btn.diff-hard { background: linear-gradient(#7a2c24, #5a231d); border-color: #e0574a; color: #ffe8e4; text-shadow: none; }

/* ---------- botão do Helper no topo: destacado em qualquer tema ---------- */
#topbar button.tb-helper {
  position: relative; overflow: hidden; color: #fff8e0; font-weight: 700;
  background: linear-gradient(135deg, #2b5fd9, #7b3fe4 55%, #c23fb8);
  border: 1px solid #ffd76a; border-radius: 10px;
  animation: helper-brilho 2.4s ease-in-out infinite;
}
#topbar button.tb-helper span { display: inline-block; animation: helper-balanca 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
#topbar button.tb-helper::after {   /* reflexo de luz passando */
  content: ''; position: absolute; inset: -30% -80%; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%);
  animation: helper-reflexo 3.2s ease-in-out infinite;
}
#topbar button.tb-helper:hover { filter: brightness(1.15); transform: translateY(-1px); }
@keyframes helper-brilho {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 6px rgba(255, 215, 106, .45); }
  50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 215, 106, .9), 0 0 22px rgba(150, 90, 255, .6); }
}
@keyframes helper-balanca { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(-8deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-2px) rotate(8deg); } }
@keyframes helper-reflexo { 0%, 55% { translate: -60% 0; } 85%, 100% { translate: 60% 0; } }
@media (prefers-reduced-motion: reduce) {
  #topbar button.tb-helper, #topbar button.tb-helper span, #topbar button.tb-helper::after { animation: none; }
}
/* topo em 3 colunas nas telas largas: nome | Helper no centro | atalhos (nada se sobrepõe) */
@media (min-width: 1100px) {
  #topbar { display: grid; grid-template-columns: auto 1fr auto; }
  #topbar .tb-nav { justify-self: end; flex-wrap: nowrap; }
}
.tb-centro { display: flex; justify-content: center; }
@media (max-width: 1099px) { .tb-centro { flex: 1 1 auto; } }
#topbar .tb-centro button.tb-helper { padding-left: 18px; padding-right: 18px; }
#topbar button.tb-helper { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12px; padding: 4px 18px; }
#topbar button.tb-helper span { font-size: 20px; }
/* telas bem largas: cabe no centro exato da tela sem encostar nos atalhos */
@media (min-width: 1600px) { #topbar { grid-template-columns: 1fr auto 1fr; } }

/* >>> TEMAS FOFOS (gerado por ferramentas/gerar-temas-fofos.cjs; não edite à mão) */
:root[data-tema="pandavermelho"] { --bg: #170d09; --panel: #26150e; --panel-2: #301a11; --slot: #1b0f0a; --border: #5e301a; --border-2: #8a4622; --text: #fbefe3; --muted: #cfae95; --gold: #f3d9bd; --gold-2: #d0581e; --mod-acento: #e0703a; }
[data-tema="pandavermelho"] #topbar { background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2022%2012'%3E%3Cpath%20d%3D'M2%2010q6-10%2018-8q-8%206-18%208z'%20fill%3D'%237a9a3a'%2F%3E%3Cpath%20d%3D'M4%209q6-4%2014-6'%20stroke%3D'%234e6a1e'%20stroke-width%3D'.7'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E") 0 0/60px 34px repeat, #1b0f0a; border-bottom: 2px solid #8a4622; }
[data-tema="pandavermelho"] .panel { background: rgba(0,0,0,.08) #26150e; border: 2px solid #8a4622; border-radius: 16px; }
[data-tema="pandavermelho"] .panel::before { left: auto; right: 8px; top: 4px; width: 30px; height: 27px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2036'%3E%3Ccircle%20cx%3D'7'%20cy%3D'9'%20r%3D'6'%20fill%3D'%238a2f0e'%2F%3E%3Ccircle%20cx%3D'33'%20cy%3D'9'%20r%3D'6'%20fill%3D'%238a2f0e'%2F%3E%0A%3Ccircle%20cx%3D'7'%20cy%3D'9'%20r%3D'3.4'%20fill%3D'%23fff3e6'%2F%3E%3Ccircle%20cx%3D'33'%20cy%3D'9'%20r%3D'3.4'%20fill%3D'%23fff3e6'%2F%3E%0A%3Cellipse%20cx%3D'20'%20cy%3D'21'%20rx%3D'16'%20ry%3D'13'%20fill%3D'%23d0581e'%2F%3E%0A%3Cellipse%20cx%3D'13'%20cy%3D'15'%20rx%3D'2.6'%20ry%3D'1.8'%20fill%3D'%23fff3e6'%2F%3E%3Cellipse%20cx%3D'27'%20cy%3D'15'%20rx%3D'2.6'%20ry%3D'1.8'%20fill%3D'%23fff3e6'%2F%3E%0A%3Cellipse%20cx%3D'20'%20cy%3D'27'%20rx%3D'9.5'%20ry%3D'6.5'%20fill%3D'%23fff3e6'%2F%3E%3Cellipse%20cx%3D'8'%20cy%3D'24'%20rx%3D'3'%20ry%3D'4'%20fill%3D'%23fff3e6'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'24'%20rx%3D'3'%20ry%3D'4'%20fill%3D'%23fff3e6'%2F%3E%0A%3Cpath%20d%3D'M13%2021q-1%205%201%208M27%2021q1%205-1%208'%20stroke%3D'%238a2f0e'%20stroke-width%3D'2.2'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%0A%3Ccircle%20cx%3D'13.5'%20cy%3D'19.5'%20r%3D'2.4'%20fill%3D'%23231208'%2F%3E%3Ccircle%20cx%3D'26.5'%20cy%3D'19.5'%20r%3D'2.4'%20fill%3D'%23231208'%2F%3E%0A%3Ccircle%20cx%3D'14.2'%20cy%3D'18.6'%20r%3D'.8'%20fill%3D'%23fff'%2F%3E%3Ccircle%20cx%3D'27.2'%20cy%3D'18.6'%20r%3D'.8'%20fill%3D'%23fff'%2F%3E%0A%3Cellipse%20cx%3D'20'%20cy%3D'24.5'%20rx%3D'2.4'%20ry%3D'1.6'%20fill%3D'%23231208'%2F%3E%3Cpath%20d%3D'M20%2026q-1.4%201.8-3%20.8M20%2026q1.4%201.8%203%20.8'%20stroke%3D'%23231208'%20stroke-width%3D'.9'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity: 1; z-index: 3; }
[data-tema="pandavermelho"] .panel::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 10px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%208'%3E%3Crect%20width%3D'24'%20height%3D'8'%20rx%3D'4'%20fill%3D'%23b84a17'%2F%3E%3Crect%20x%3D'5'%20width%3D'4'%20height%3D'8'%20fill%3D'%23f3d9bd'%2F%3E%3Crect%20x%3D'15'%20width%3D'4'%20height%3D'8'%20fill%3D'%23f3d9bd'%2F%3E%3C%2Fsvg%3E") left center/24px 8px repeat-x; opacity: .45; pointer-events: none; z-index: 2; }
[data-tema="pandavermelho"] .ptitle { color: #f3d9bd; padding-right: 44px; background: linear-gradient(#26150e, #1b0f0a); border-bottom: 1px dashed #8a4622; }
[data-tema="pandavermelho"] .win-box { border: 2px solid #8a4622; border-radius: 18px; background: #26150e; position: relative; }
[data-tema="pandavermelho"] .win-head { background: linear-gradient(#26150e, #1b0f0a); position: relative; }
[data-tema="pandavermelho"] .win-head::after { content: ''; position: absolute; right: 52px; top: 50%; translate: 0 -50%; width: 34px; height: 30px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2036'%3E%3Ccircle%20cx%3D'7'%20cy%3D'9'%20r%3D'6'%20fill%3D'%238a2f0e'%2F%3E%3Ccircle%20cx%3D'33'%20cy%3D'9'%20r%3D'6'%20fill%3D'%238a2f0e'%2F%3E%0A%3Ccircle%20cx%3D'7'%20cy%3D'9'%20r%3D'3.4'%20fill%3D'%23fff3e6'%2F%3E%3Ccircle%20cx%3D'33'%20cy%3D'9'%20r%3D'3.4'%20fill%3D'%23fff3e6'%2F%3E%0A%3Cellipse%20cx%3D'20'%20cy%3D'21'%20rx%3D'16'%20ry%3D'13'%20fill%3D'%23d0581e'%2F%3E%0A%3Cellipse%20cx%3D'13'%20cy%3D'15'%20rx%3D'2.6'%20ry%3D'1.8'%20fill%3D'%23fff3e6'%2F%3E%3Cellipse%20cx%3D'27'%20cy%3D'15'%20rx%3D'2.6'%20ry%3D'1.8'%20fill%3D'%23fff3e6'%2F%3E%0A%3Cellipse%20cx%3D'20'%20cy%3D'27'%20rx%3D'9.5'%20ry%3D'6.5'%20fill%3D'%23fff3e6'%2F%3E%3Cellipse%20cx%3D'8'%20cy%3D'24'%20rx%3D'3'%20ry%3D'4'%20fill%3D'%23fff3e6'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'24'%20rx%3D'3'%20ry%3D'4'%20fill%3D'%23fff3e6'%2F%3E%0A%3Cpath%20d%3D'M13%2021q-1%205%201%208M27%2021q1%205-1%208'%20stroke%3D'%238a2f0e'%20stroke-width%3D'2.2'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%0A%3Ccircle%20cx%3D'13.5'%20cy%3D'19.5'%20r%3D'2.4'%20fill%3D'%23231208'%2F%3E%3Ccircle%20cx%3D'26.5'%20cy%3D'19.5'%20r%3D'2.4'%20fill%3D'%23231208'%2F%3E%0A%3Ccircle%20cx%3D'14.2'%20cy%3D'18.6'%20r%3D'.8'%20fill%3D'%23fff'%2F%3E%3Ccircle%20cx%3D'27.2'%20cy%3D'18.6'%20r%3D'.8'%20fill%3D'%23fff'%2F%3E%0A%3Cellipse%20cx%3D'20'%20cy%3D'24.5'%20rx%3D'2.4'%20ry%3D'1.6'%20fill%3D'%23231208'%2F%3E%3Cpath%20d%3D'M20%2026q-1.4%201.8-3%20.8M20%2026q1.4%201.8%203%20.8'%20stroke%3D'%23231208'%20stroke-width%3D'.9'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; pointer-events: none; }
[data-tema="pandavermelho"] .pcard { background: linear-gradient(160deg, #26150e, #1b0f0a); border: 2px solid #8a4622; border-radius: 14px; }
[data-tema="pandavermelho"] .hotbar { background: #26150e; border: 2px solid #8a4622; border-radius: 14px; }
[data-tema="pandavermelho"] .btn { border-radius: 999px; background: #1b0f0a; border-color: #8a4622; }
[data-tema="pandavermelho"] .btn:hover { border-color: #e0703a; }
[data-tema="pandavermelho"] .btn.primary { background: linear-gradient(#e0703a, #a8441a); border-color: #f3d9bd; color: #1a0f12; }
[data-tema="pandavermelho"] .scene { border-radius: 16px; box-shadow: 0 0 0 2px #000, 0 0 0 5px #8a4622, 0 0 0 6px #e0703a, 0 8px 26px rgba(0,0,0,.5); }
[data-tema="pandavermelho"] .bar.thin .fill { background: linear-gradient(#e0703a, #a8441a); }
[data-tema="pandavermelho"] .hunt-select { border-radius: 999px; border-color: #8a4622; }
/* <<< TEMAS FOFOS */