/* MMIdle — interface no estilo dos menus antigos (Ragnarok / Game Boy). Tema CLARO (27/10/2026); o escuro vem depois trocando só as variáveis
   e os recursos de prototipo/ui/ (gerados por arte/ferramentas/montar-ui.py a partir das folhas do Pixellab).
   PADRÃO DE UI: contorno escuro de 2 px, quinas retas, relevo claro em cima e sombra embaixo, animações em degraus (steps), nada de sombras suaves. */
@font-face { font-family: "VT323"; src: url(../ui/fonte/VT323-Regular.ttf) format("truetype"); font-display: swap; }   /* fonte de pixel livre (SIL OFL) com acentos; troque aqui para outra */
:root {
  --linha: #2a2f4a; --brilho: #ffffffaa; --barra-fundo: #46508a; --sombra-placar: #c9d1ee; --fundo-pagina: #1b1d22;
  --ok-bg: #cfe8d3; --erro-bg: #f1d3cb; --ok-bg2: #e3efe6; --erro-bg2: #f6dfd6; --ouro-bg: #fbf1cf; --fundo2: #bcc5e6;
  --ui-barra: url(../ui/claro/barra.png);
  --ui-barra-fill-azul: url(../ui/claro/barra-fill-azul.png);
  --ui-barra-fill-ouro: url(../ui/claro/barra-fill-ouro.png);
  --ui-barra-fill-vermelho: url(../ui/claro/barra-fill-vermelho.png);
  --ui-botao: url(../ui/claro/botao.png?v=2);
  --ui-botao-d: url(../ui/claro/botao-d.png?v=2);
  --ui-botao-h: url(../ui/claro/botao-h.png?v=2);
  --ui-botao-ouro: url(../ui/claro/botao-ouro.png?v=2);
  --ui-botao-ouro-h: url(../ui/claro/botao-ouro-h.png?v=2);
  --ui-botao-p: url(../ui/claro/botao-p.png?v=2);
  --ui-botao-verde: url(../ui/claro/botao-verde.png?v=2);
  --ui-botao-vermelho: url(../ui/claro/botao-vermelho.png?v=2);
  --ui-botao-vermelho-h: url(../ui/claro/botao-vermelho-h.png?v=2);
  --cor-botao: #c9d1ee; --cor-botao-h: #dbe3ff; --cor-botao-p: #b5bcd6; --cor-botao-d: #9aa3c4; --cor-botao-ouro: #ddc286; --cor-botao-ouro-h: #fbe0a2; --cor-botao-verde: #97dda2; --cor-botao-vermelho: #dd908a; --cor-botao-vermelho-h: #fbada6;
  --ui-janela: url(../ui/claro/janela.png);
  --ui-jb-fechar: url(../ui/claro/jb-fechar.png);
  --ui-jb-fechar-h: url(../ui/claro/jb-fechar-h.png);
  --ui-jb-fechar-p: url(../ui/claro/jb-fechar-p.png);
  --ui-jb-grip: url(../ui/claro/jb-grip.png);
  --ui-jb-maximizar: url(../ui/claro/jb-maximizar.png);
  --ui-jb-maximizar-h: url(../ui/claro/jb-maximizar-h.png);
  --ui-jb-maximizar-p: url(../ui/claro/jb-maximizar-p.png);
  --ui-jb-minimizar: url(../ui/claro/jb-minimizar.png);
  --ui-jb-minimizar-h: url(../ui/claro/jb-minimizar-h.png);
  --ui-jb-minimizar-p: url(../ui/claro/jb-minimizar-p.png);

  --tinta: #2a2f4a; --tinta2: #46508a; --suave: #5b6490; --quadro: #9aa3c4; --quadro-claro: #c9d1ee; --papel: #f4ead0; --papel2: #d9c99a; --papel3: #eef1fb;
  --ouro: #e8b84a; --ouro-esc: #a87a1c; --verm: #d4503e; --verm-esc: #8e2a22; --azul: #4a7fd8; --azul-esc: #26468c; --verde: #58b06a; --verde-esc: #2d6d3b;
  --fonte: "VT323", "Trebuchet MS", "Segoe UI", Verdana, Arial, sans-serif;
}
html[data-tema="escuro"] {
  --tinta: #ececf0; --tinta2: #cfcfd5; --suave: #aaaab2; --quadro: #4a4a50; --quadro-claro: #252528; --papel: #19191b; --papel2: #313135; --papel3: #222225;
  --ouro: #e8b84a; --ouro-esc: #f2c14e; --verm: #d4503e; --verm-esc: #ff8f7c; --azul: #4a7fd8; --azul-esc: #8db4ff; --verde: #58b06a; --verde-esc: #7fd993;
  --linha: #070708; --brilho: #0009; --barra-fundo: #070708; --sombra-placar: #070708; --fundo-pagina: #0f0f10;
  --ok-bg: #234a30; --erro-bg: #4a2a2a; --ok-bg2: #1f3a2a; --erro-bg2: #3d2420; --ouro-bg: #3a331c; --fundo2: #1b1b1d;
  --ui-barra: url(../ui/escuro/barra.png?v=3);
  --ui-barra-fill-azul: url(../ui/escuro/barra-fill-azul.png?v=3);
  --ui-barra-fill-ouro: url(../ui/escuro/barra-fill-ouro.png?v=3);
  --ui-barra-fill-vermelho: url(../ui/escuro/barra-fill-vermelho.png?v=3);
  --ui-botao: url(../ui/escuro/botao.png?v=3);
  --ui-botao-d: url(../ui/escuro/botao-d.png?v=3);
  --ui-botao-h: url(../ui/escuro/botao-h.png?v=3);
  --ui-botao-ouro: url(../ui/escuro/botao-ouro.png?v=3);
  --ui-botao-ouro-h: url(../ui/escuro/botao-ouro-h.png?v=3);
  --ui-botao-p: url(../ui/escuro/botao-p.png?v=3);
  --ui-botao-verde: url(../ui/escuro/botao-verde.png?v=3);
  --ui-botao-vermelho: url(../ui/escuro/botao-vermelho.png?v=3);
  --ui-botao-vermelho-h: url(../ui/escuro/botao-vermelho-h.png?v=3);
  --cor-botao: #6a6e7d; --cor-botao-h: #9398ac; --cor-botao-p: #5a5e6a; --cor-botao-d: #555a6c; --cor-botao-ouro: #dab155; --cor-botao-ouro-h: #f8ce70; --cor-botao-verde: #73da83; --cor-botao-vermelho: #da655c; --cor-botao-vermelho-h: #f88077;
  --ui-janela: url(../ui/escuro/janela.png?v=3);
  --ui-jb-fechar: url(../ui/escuro/jb-fechar.png?v=3);
  --ui-jb-fechar-h: url(../ui/escuro/jb-fechar-h.png?v=3);
  --ui-jb-fechar-p: url(../ui/escuro/jb-fechar-p.png?v=3);
  --ui-jb-grip: url(../ui/escuro/jb-grip.png?v=3);
  --ui-jb-maximizar: url(../ui/escuro/jb-maximizar.png?v=3);
  --ui-jb-maximizar-h: url(../ui/escuro/jb-maximizar-h.png?v=3);
  --ui-jb-maximizar-p: url(../ui/escuro/jb-maximizar-p.png?v=3);
  --ui-jb-minimizar: url(../ui/escuro/jb-minimizar.png?v=3);
  --ui-jb-minimizar-h: url(../ui/escuro/jb-minimizar-h.png?v=3);
  --ui-jb-minimizar-p: url(../ui/escuro/jb-minimizar-p.png?v=3);
}
* { box-sizing: border-box; }
html, body { font-synthesis: none; margin: 0; height: calc(var(--vh, 1vh) * 100); overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; touch-action: manipulation; background: var(--fundo-pagina); font-family: var(--fonte); color: var(--tinta); }
canvas { display: block; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }

/* ---------- botões (9-slice do Pixellab; hover, pressionado e desligado trocam a imagem) ---------- */
button { font: 700 18px/1.25 var(--fonte); color: var(--tinta); cursor: pointer; --btn-corpo: var(--cor-botao); background: linear-gradient(var(--btn-corpo), var(--btn-corpo)) 5px 5px / calc(100% - 10px) calc(100% - 10px) no-repeat border-box; border: 0 solid transparent; image-rendering: pixelated;
  border-image: var(--ui-botao) 15 fill / 15px / 0 stretch; padding: 8px 14px; min-height: 32px; text-shadow: 0 1px 0 var(--brilho); transition: none; }
button:hover:not(:disabled) { border-image-source: var(--ui-botao-h); --btn-corpo: var(--cor-botao-h); }
button:active:not(:disabled) { border-image-source: var(--ui-botao-p); --btn-corpo: var(--cor-botao-p); padding-top: 9px; padding-bottom: 7px; }
button:disabled { border-image-source: var(--ui-botao-d); --btn-corpo: var(--cor-botao-d); color: var(--suave); cursor: not-allowed; text-shadow: none; }
button.on, .lopt.on, .carta.on, #hVel button.on { border-image-source: var(--ui-botao-verde); --btn-corpo: var(--cor-botao-verde); }
#hud #bLutar, button.grande { border-image-source: var(--ui-botao-ouro); --btn-corpo: var(--cor-botao-ouro); font-weight: 800; }
#hud #bLutar:hover:not(:disabled), button.grande:hover:not(:disabled) { border-image-source: var(--ui-botao-ouro-h); --btn-corpo: var(--cor-botao-ouro-h); }
button.grande:disabled { border-image-source: var(--ui-botao-d); --btn-corpo: var(--cor-botao-d); }
#hud #bReset { border-image-source: var(--ui-botao-vermelho); --btn-corpo: var(--cor-botao-vermelho); } #hud #bReset:hover { border-image-source: var(--ui-botao-vermelho-h); --btn-corpo: var(--cor-botao-vermelho-h); }
select { font: 600 18px var(--fonte); color: var(--tinta); background: var(--papel3); border: 2px solid var(--linha); border-radius: 0; padding: 3px 5px; box-shadow: inset 0 2px 0 var(--brilho), inset 0 -2px 0 var(--quadro-claro); }

/* ---------- janelas (moldura do Pixellab; criadas por js/janelas.js) ---------- */
.janela { position: fixed; display: flex; flex-direction: column; border: solid transparent; border-width: 56px 20px 24px 20px; image-rendering: pixelated;
  border-image: var(--ui-janela) 56 20 24 20 fill / 56px 20px 24px 20px stretch; min-width: 260px; min-height: 120px; max-height: calc((var(--vh, 1vh) * 100) - 76px); animation: janela-abre .24s steps(4); }
.janela[hidden] { display: none; }
@keyframes janela-abre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.janela .jbarra { position: absolute; left: -20px; right: -20px; top: -56px; height: 56px; cursor: move; touch-action: none; user-select: none; }
.janela .jtitulo { position: absolute; left: 20px; top: 8px; right: 100px; font: 800 20px/18px var(--fonte); color: var(--tinta); text-shadow: 1px 1px 0 var(--brilho); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }
.janela .jb { position: absolute; top: 9px; width: 20px; height: 21px; padding: 0; min-height: 0; border: 0; border-image: none; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.janela .jb:hover:not(:disabled), .janela .jb:active:not(:disabled) { border-image: none; padding: 0; }
.janela .jb-min { right: 65px; background-image: var(--ui-jb-minimizar); } .janela .jb-min:hover { background-image: var(--ui-jb-minimizar-h); } .janela .jb-min:active { background-image: var(--ui-jb-minimizar-p); }
.janela .jb-max { right: 42px; background-image: var(--ui-jb-maximizar); } .janela .jb-max:hover { background-image: var(--ui-jb-maximizar-h); } .janela .jb-max:active { background-image: var(--ui-jb-maximizar-p); }
.janela .jb-x { right: 20px; background-image: var(--ui-jb-fechar); } .janela .jb-x:hover { background-image: var(--ui-jb-fechar-h); } .janela .jb-x:active { background-image: var(--ui-jb-fechar-p); }
.janela .jgrip { position: absolute; right: -6px; bottom: -8px; width: 16px; height: 16px; background: var(--ui-jb-grip) no-repeat; image-rendering: pixelated; cursor: nwse-resize; touch-action: none; }
.janela .jcorpo { flex: 1; min-height: 0; overflow: auto; margin: 4px; background: var(--papel); border: 2px solid var(--linha); box-shadow: inset 0 0 0 2px var(--papel2); scrollbar-color: var(--quadro) var(--papel2); }
.janela.minimizada { min-height: 0; height: auto !important; } .janela.minimizada .jcorpo, .janela.minimizada .jgrip { display: none; }
.janela.minimizada { border-bottom-width: 14px; }
.na-janela { position: static !important; inset: auto !important; width: auto !important; max-height: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 10px 12px !important; overflow: visible !important; z-index: auto !important; }
.na-janela .fechar { display: none; }

/* ---------- barra superior ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 12px 8px; font-size: 18px; color: var(--tinta);
  background: linear-gradient(var(--papel3) 0 45%, var(--quadro-claro) 45% 100%); border-bottom: 3px solid var(--linha); box-shadow: 0 3px 0 var(--tinta2); z-index: 8; }
#hud .marca { font-weight: 800; letter-spacing: .5px; font-size: 25px; margin-right: auto; text-shadow: 1px 1px 0 var(--brilho); }
#hud .marca span { font-weight: 600; font-size: 17px; color: var(--suave); margin-left: 8px; }
#hud .marca span.nome { cursor: text; border-bottom: 2px dotted transparent; } #hud .marca span.nome:hover, #hud .marca span.nome:focus-visible { border-bottom-color: var(--suave); color: var(--tinta); outline: none; }
#hud .marca input.nomeIn { font: inherit; font-size: 17px; font-weight: 600; color: var(--tinta); background: var(--papel); border: 2px solid var(--linha); box-shadow: inset 0 0 0 2px var(--papel2); padding: 0 4px; margin: 0; box-sizing: content-box; letter-spacing: 0; }
#hud .dado { background: var(--papel); border: 2px solid var(--linha); padding: 2px 8px; box-shadow: inset 0 0 0 2px var(--papel2); }
#hud b { color: var(--ouro-esc); } #hud #bSede b { color: var(--tinta); } #hud #bSede b.aviso { color: var(--verm-esc); }
#hud button { min-height: 30px; padding: 6px 12px; }
#hVel { display: flex; align-items: center; gap: 3px; } #hVel button { padding: 3px 8px; min-height: 26px; font-size: 17px; }
#dica { position: fixed; bottom: 0; left: 0; right: 0; padding: 6px 14px; font-size: 17px; color: var(--tinta); background: var(--quadro-claro); border-top: 3px solid var(--linha); z-index: 8; }

/* ---------- conteúdo das janelas ---------- */
.painel { position: fixed; right: 16px; top: 64px; width: 360px; background: var(--papel); border: 2px solid var(--linha); padding: 14px; max-height: calc((var(--vh, 1vh) * 100) - 80px); overflow-y: auto; }
.painel[hidden] { display: none; }
.painel h3 { margin: 0 0 4px; font-size: 22px; color: var(--azul-esc); }
.painel .sub { color: var(--suave); font-size: 18px; margin-bottom: 10px; }
.painel button.op { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 10px 14px; font-size: 18px; }
.painel button.op small { display: block; color: var(--suave); font-size: 17px; font-weight: 600; }
.painel .esp { margin: 10px 0 4px; padding-top: 6px; border-top: 2px dashed var(--quadro); }
.painel .esp small { color: var(--suave); }
.painel .oprow { display: flex; align-items: center; gap: 4px; } .painel .oprow button.op { flex: 1 1 auto; width: auto; } .painel .oprow .ibtn { flex: 0 0 22px; margin-left: 2px; }
.painel .esp button.op { margin: 4px 0; padding: 8px 14px; font-size: 17px; }
.painel button.op.ent { flex: 1 1 70px; width: auto; text-align: center; margin: 4px 3px 0 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .acoes button { flex: 1 1 100px; font-size: 17px; padding: 6px 8px; }
.mini { font-size: 17px; color: var(--suave); margin-top: 4px; line-height: 1.4; font-weight: 600; } .mini .aviso, .mini.aviso, .aviso { color: var(--verm-esc); }
.ok { color: var(--verde-esc); font-weight: 800; }
.raro { font-weight: 800; } .r-Comum { color: var(--suave); } .r-Incomum { color: var(--azul-esc); } .r-Raro { color: #a88a00; } html[data-tema="escuro"] .r-Raro { color: #f2cf4a; } .r-Épico { color: #6a3aa8; } .r-Lendário { color: #d9680c; } html[data-tema="escuro"] .r-Lendário { color: #ff9a3c; }

/* barras de atributo (estilo simples na mesma paleta) */
.barra { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 18px; }
.barra span { width: 104px; color: var(--tinta2); font-weight: 600; }
.barra i { flex: 1; height: 12px; background: var(--barra-fundo); border: 2px solid var(--linha); box-shadow: inset 0 2px 0 var(--linha); overflow: hidden; }
.barra i em { display: block; height: 100%; background: linear-gradient(var(--verde) 0 50%, #3f9a55 50% 100%); transition: width .3s steps(6); }
.barra b { width: 26px; text-align: right; color: var(--tinta); }
.barra button.tr { font-size: 15px; padding: 2px 8px; min-height: 24px; }
.barra button.tr.ativo { border-image-source: var(--ui-botao-vermelho); --btn-corpo: var(--cor-botao-vermelho); }
.treino { margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--tinta2); border-top: 2px dashed var(--quadro); padding-top: 8px; }
.treino .aviso { color: var(--verm-esc); }
.cand { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; background: var(--papel3); border: 2px solid var(--quadro); padding: 8px; margin: 8px 0; font-size: 18px; }
.cand canvas { width: 90px; height: 90px; background: var(--quadro-claro); border: 2px solid var(--linha); image-rendering: pixelated; } .cand > button { grid-column: 1 / -1; margin: 0; }
.cand small { color: var(--suave); line-height: 1.4; } .mstats { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font-size: 15px; color: var(--suave); } .mstats b { color: var(--tinta); }

/* ---------- luta ---------- */
#luta { position: fixed; background: none; } #luta[hidden] { display: none; }
.lbox { position: relative; }
.lbox h2 { margin: 0 0 8px; font-size: 27px; color: var(--tinta); } .lbox h2 small { color: var(--suave); font-weight: 600; font-size: 18px; }
.lbox h4 { margin: 14px 0 6px; font-size: 20px; color: var(--azul-esc); } .lbox h4 small { color: var(--suave); font-weight: 600; }
.lrow { display: flex; flex-wrap: wrap; gap: 8px; }
.lopt { flex: 1 1 200px; text-align: left; padding: 11px 14px; font-size: 18px; }
.lopt small { display: block; color: var(--suave); font-size: 17px; font-weight: 600; margin-top: 3px; line-height: 1.4; } .lopt em { color: var(--azul-esc); font-style: normal; font-weight: 600; }
.carta { flex: 0 1 140px; text-align: left; font-size: 18px; display: block; padding: 10px 12px; }
.carta b { display: block; font-size: 18px; } .carta span { display: block; color: var(--tinta2); font-size: 17px; margin: 2px 0; font-weight: 600; } .carta i { display: block; color: var(--suave); font-size: 15px; font-style: normal; font-weight: 600; }
.carta.bloq { opacity: .45; cursor: default; } .carta.imp { border-image-source: var(--ui-botao-d); --btn-corpo: var(--cor-botao-d); }
.lacao { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.lacao button.grande { font-size: 21px; padding: 12px 30px; letter-spacing: 1px; }
.lplacar { display: flex; align-items: center; justify-content: space-between; text-align: center; font-size: 18px; color: var(--tinta2); margin: 6px 0; font-weight: 600; }
.lplacar .pl { font-size: 38px; font-weight: 800; color: var(--tinta); text-shadow: 2px 2px 0 var(--sombra-placar); } .lplacar .pl small { font-size: 17px; color: var(--suave); font-weight: 600; text-shadow: none; }
#lRing { text-align: center; margin: 8px 0; } .ringue { width: 100%; max-width: 520px; image-rendering: pixelated; border: 3px solid var(--linha); box-shadow: inset 0 0 0 2px var(--quadro); }
.ldeckIA { font-size: 17px; color: var(--suave); margin: 4px 0 8px; font-weight: 600; } .ldeckIA span { display: inline-block; background: var(--papel3); border: 2px solid var(--quadro); padding: 0 7px; margin: 2px 3px; color: var(--tinta2); }
.lrounds { display: flex; gap: 10px; flex-wrap: wrap; } .lres { flex: 1 1 260px; background: var(--papel3); border: 2px solid var(--quadro); padding: 8px 10px; font-size: 18px; line-height: 1.5; } .lres em { color: var(--ouro-esc); }
.lvenc { margin: 8px 0; font-weight: 800; text-align: center; padding: 6px; border: 2px solid var(--linha); } .lvenc.j { background: var(--ok-bg); } .lvenc.a { background: var(--erro-bg); }
.lrisco { font-size: 18px; margin: 8px 0 0; padding: 6px 10px; border: 2px solid var(--verde-esc); background: var(--ok-bg2); color: var(--verde-esc); font-weight: 600; } .lrisco.alto { background: var(--erro-bg2); color: var(--verm-esc); border-color: var(--verm-esc); }
.lcint { background: var(--ouro-bg); border: 2px solid var(--ouro-esc); padding: 8px 10px; margin: 6px 0; font-size: 18px; font-weight: 600; }
.lmodo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: var(--papel3); border: 2px solid var(--quadro); padding: 8px 10px; font-size: 18px; font-weight: 600; }
.lmodo label { display: block; } .lmodo small { color: var(--suave); }
.regra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--papel3); border: 2px solid var(--quadro); padding: 6px 8px; margin: 6px 0; font-size: 18px; }
.regra select { max-width: 100%; } .regra button { margin-left: auto; padding: 2px 8px; min-height: 24px; color: var(--verm-esc); }
.lring { position: relative; text-align: center; } .limg { display: block; margin: 0 auto; width: min(100%, 384px); image-rendering: pixelated; background: var(--quadro-claro); border: 3px solid var(--linha); }
.lrot { position: absolute; left: 0; right: 0; top: 10px; font: 900 35px var(--fonte); color: var(--ouro); text-shadow: 2px 2px 0 var(--linha), -2px -2px 0 var(--linha), 2px -2px 0 var(--linha), -2px 2px 0 var(--linha); pointer-events: none; }
/* barras de mana e dano: moldura do Pixellab, preenchimento em tiras */
.lmana, .ldano { position: relative; height: 26px; margin: 4px 0; box-sizing: border-box; border: 3px solid #050506; outline: 2px solid #4a4a50; outline-offset: -5px;
  background: repeating-linear-gradient(45deg, #0e0e0f 0 2px, #1d1d20 2px 4px); box-shadow: 0 0 0 1px #3a3a3f, inset 0 2px 0 rgba(255,255,255,.07); image-rendering: pixelated; }
.lmana i, .ldano i { position: absolute; left: 3px; top: 3px; bottom: 3px; max-width: calc(100% - 6px); background: var(--ui-barra-fill-azul) repeat-x; background-size: auto 100%; image-rendering: pixelated; transition: width .35s steps(7); }
.ldano i { background-image: var(--ui-barra-fill-vermelho); } .ldano.atord i { background-image: var(--ui-barra-fill-ouro); }
.lmana span, .ldano span { position: absolute; inset: 0; font-size: 15px; line-height: 20px; font-weight: 800; color: #fff; text-align: center; text-shadow: 1px 1px 0 var(--linha), -1px 1px 0 var(--linha), 1px -1px 0 var(--linha), -1px -1px 0 var(--linha); }
.llog { font-size: 17px; max-height: 190px; overflow: auto; background: var(--papel3); border: 2px solid var(--linha); padding: 6px 8px; margin: 6px 0; line-height: 1.45; font-weight: 600; }
.llog .lj { color: var(--verde-esc); } .llog .la { color: var(--verm-esc); } .llog .nt { color: var(--suave); font-style: italic; }
.lslots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.lslot { flex: 1 1 130px; min-height: 40px; background: var(--papel3); border: 2px dashed var(--quadro); padding: 6px 8px; font-size: 18px; cursor: pointer; }
.lslot.cheio { border-style: solid; border-color: var(--verde-esc); background: var(--ok-bg2); } .lslot em { color: var(--suave); }

/* ---------- telas cheias: abertura e fim de carreira ---------- */
#abertura, #fimCarreira { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--vh, 1vh) * 100); z-index: 30; overflow-y: auto; padding: 24px 12px; background: repeating-linear-gradient(45deg, var(--quadro-claro) 0 14px, var(--fundo2) 14px 28px); }
#fimCarreira { z-index: 29; }
#abertura[hidden], #fimCarreira[hidden] { display: none; }
.abox { max-width: 900px; margin: 0 auto; text-align: center; }
.abox h2 { font-size: 35px; margin: 6px 0; text-shadow: 2px 2px 0 var(--brilho); } .abox p { color: var(--tinta2); max-width: 560px; margin: 4px auto 18px; font-size: 20px; line-height: 1.5; font-weight: 600; }
.acartas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 18px; }
.acarta { width: 250px; min-height: 330px; border: 3px solid var(--linha); background: var(--papel); box-shadow: inset 0 0 0 3px var(--papel2), 4px 4px 0 #0004; color: var(--tinta); padding: 14px; }
.acarta.verso { cursor: pointer; background: repeating-linear-gradient(45deg, var(--azul-esc), var(--azul-esc) 10px, var(--tinta2) 10px, var(--tinta2) 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-color: var(--ouro-esc); box-shadow: inset 0 0 0 3px var(--ouro), 4px 4px 0 #0004; }
.acarta.verso span { font-size: 100px; font-weight: 800; color: var(--ouro); text-shadow: 3px 3px 0 var(--linha); } .acarta.verso small { color: #fff; font-weight: 700; }
.acarta.verso:hover { transform: translateY(-4px); }
.acarta.frente { text-align: left; animation: vira .35s steps(5); }
.acarta.frente canvas { display: block; margin: 0 auto 6px; width: 150px; height: 130px; image-rendering: pixelated; }
.acarta.frente > b { display: block; font-size: 25px; text-align: center; } .acarta.frente > em { display: block; text-align: center; color: var(--azul-esc); font-style: normal; font-size: 18px; margin-bottom: 8px; font-weight: 700; }
@keyframes vira { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
.abox button.grande { padding: 14px 34px; font-size: 24px; letter-spacing: 1px; }
.acarta.frente.sel { border-color: var(--ouro-esc); box-shadow: inset 0 0 0 3px var(--ouro), 4px 4px 0 #0004; }
.acarta.frente button.esc { width: 100%; margin-top: 10px; padding: 10px 8px; font-size: 20px; }
#fimCarreira canvas { display: block; margin: 8px auto; width: 120px; height: 120px; background: var(--quadro-claro); border: 3px solid var(--linha); image-rendering: pixelated; }
#fimCarreira .acarta { min-height: 0; } #fimCarreira .acarta .mini { margin: 8px 0 12px; line-height: 1.6; } #fimCarreira .acarta button.grande { width: 100%; padding: 12px 10px; font-size: 20px; }

/* ---------- ícones e retratos ---------- */
.ic { height: 22px; width: auto; vertical-align: -6px; margin-right: 4px; image-rendering: pixelated; }
.ret { image-rendering: pixelated; display: inline-block; } .retw { display: inline-block; } .retw.esp .ret { transform: scaleX(-1); }
.lopt .retw { float: left; margin: 0 12px 0 -2px; } .lopt::after { content: ""; display: block; clear: both; }
.info-ret { float: right; margin: 0 0 6px 10px; } .info-ret .ret { background: var(--papel3); border: 2px solid var(--linha); }
.lplacar > div:first-child .ret, .lplacar > div:last-child .ret { background: var(--papel3); border: 2px solid var(--linha); }
.cand canvas, .acarta.frente canvas, #fimCarreira canvas { image-rendering: pixelated; }
.carta i .ic { height: 16px; vertical-align: -3px; }

/* ---------- aviso ---------- */
#aviso { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); max-width: 420px; background: var(--papel); border: 3px solid var(--linha); box-shadow: inset 0 0 0 3px var(--ouro), 5px 5px 0 #0005; padding: 14px 18px; font-size: 20px; line-height: 1.5; cursor: pointer; z-index: 60; font-weight: 600; }
#aviso[hidden] { display: none; }
#aviso small { color: var(--suave); display: block; margin-top: 4px; }
@media (max-width: 700px) { #dica { font-size: 15px; } .janela { min-width: 0; } }

/* contraste dos botões coloridos no tema escuro: texto escuro sobre verde (selecionado) e ouro (principal) */
html[data-tema="escuro"] button.on, html[data-tema="escuro"] .lopt.on, html[data-tema="escuro"] .carta.on, html[data-tema="escuro"] #hVel button.on { color: #0d2014; text-shadow: none; }
html[data-tema="escuro"] .lopt.on small, html[data-tema="escuro"] .lopt.on em, html[data-tema="escuro"] .carta.on span, html[data-tema="escuro"] .carta.on i { color: #17361f; }
html[data-tema="escuro"] #hud #bLutar, html[data-tema="escuro"] button.grande { color: #1d1404; text-shadow: none; }
html[data-tema="escuro"] #hud #bReset { color: #fff; text-shadow: 1px 1px 0 #4a120c; }

/* tela de luta narrada (2026-10-27): sem ringue; o cabeçalho pisca em quem sofre o golpe e o registro conta a luta */
.lplacar > div[data-lado].golpe { animation: lpisca-golpe .6s steps(3); }
.lplacar > div[data-lado].defesa { animation: lpisca-defesa .6s steps(3); }
@keyframes lpisca-golpe { 0%, 100% { filter: none; transform: none; } 33% { filter: brightness(1.8) sepia(1) hue-rotate(-30deg) saturate(4); transform: translateX(-3px); } 66% { transform: translateX(3px); } }
@keyframes lpisca-defesa { 0%, 100% { filter: none; } 50% { filter: brightness(1.5) hue-rotate(160deg) saturate(2); } }
.lplacar .chao { display: block; color: var(--roxo, #8a5cc7); font-weight: 700; font-size: 16px; margin-top: 2px; }
.llog { min-height: 150px; max-height: 260px; margin: 8px 0; }
.llog .rnd { color: var(--tinta); font-weight: 800; margin-top: 6px; border-top: 2px solid var(--linha); padding-top: 4px; }

/* bandeirinha de nacionalidade (ui/bandeiras.png: Brasil, EUA, Daguestão, 18x16 cada) */
.flag { display: inline-block; width: 18px; height: 16px; background: url(../ui/bandeiras.png) no-repeat; image-rendering: pixelated; vertical-align: -2px; margin-right: 2px; }
.flag.f-brasil { background-position: 0 0; } .flag.f-eua { background-position: -18px 0; } .flag.f-daguestao { background-position: -36px 0; }

.sub .titulo { color: var(--ouro, #e8b84a); font-weight: 700; }

/* luta narrada: vozes do registro (narrador, comentarista, córner) e posição atual */
.llog .nar { color: var(--tinta); } .llog .com { color: #3a7fc4; font-style: italic; margin-left: 12px; } .llog .cor { color: #b87a10; margin-left: 12px; font-weight: 700; }
html[data-tema="escuro"] .llog .com { color: #7fd0ff; } html[data-tema="escuro"] .llog .cor { color: #ffb25b; }
.lbars { margin-top: 2px; } .lplacar { align-items: stretch; } .lplacar > div[data-lado] { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; } .lplacar > div[data-lado] br { display: none; } .lplacar > div[data-lado] b { margin: 4px 0 2px; } .lplacar > div[data-lado] .lbars { margin-top: auto; align-self: stretch; padding-top: 6px; } .lplacar > .pl { flex: 0 0 auto; padding: 0 6px; align-self: center; } .lplacar .lpos { display: block; margin-top: 4px; }

/* botão de mover equipamento: quatro setas nas diagonais do mapa (mesmos sentidos da grade isométrica) */
.btnmv { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 6px 6px 6px 0; vertical-align: top; }
.btnmv svg { display: block; }

/* pintura das paredes */
.paleta { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 8px 0; }
.amostra { height: 30px; min-height: 0; padding: 0; border: 2px solid var(--linha); border-image: none; cursor: pointer; }
.amostra.on { outline: 3px solid var(--ouro, #e8b84a); outline-offset: 1px; }
.pfer { display: flex; gap: 6px; } .pfer .op { flex: 1; text-align: center; margin: 4px 0; }

#pinCursor { position: fixed; z-index: 9999; pointer-events: none; display: flex; align-items: center; gap: 4px; font-size: 20px; text-shadow: 0 0 3px #000; }
#pinCursor i { display: inline-block; width: 16px; height: 16px; border: 2px solid #000; }

/* botão do HUD com aparência de dado (Elenco clicável) e linhas do painel do elenco */
#hud .dado.clicavel { cursor: pointer; font: inherit; }
.linha-elenco { display: flex; gap: 8px; align-items: center; text-align: left; width: 100%; margin: 3px 0; }
.linha-elenco .le-ret { flex: 0 0 auto; } .linha-elenco .le-txt { flex: 1; } .linha-elenco small { display: block; opacity: .85; line-height: 1.3; }
/* amostras de piso na customização */
.paleta.pisos { display: flex; flex-wrap: wrap; gap: 4px; }
.amostra.piso { width: 44px; height: 24px; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; border: 2px solid rgba(0,0,0,.6); background-color: transparent; }
.amostra.piso.on { outline: 2px solid #ffd86b; }
.pfer { flex-wrap: wrap; }
#pinCursor[hidden] { display: none; }
.barraE { height: 5px; background: rgba(0,0,0,.45); border: 1px solid rgba(0,0,0,.6); margin: 2px 0 4px; } .barraE i { display: block; height: 100%; }

/* botão "i" e balão de explicação (28/10) */
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin-left: 6px; border-radius: 50%; font: bold 13px/1 serif; font-style: italic; cursor: help; vertical-align: middle; }
#dicaPop { position: fixed; z-index: 99999; padding: 10px 12px; font-size: 13px; line-height: 1.4; background: #101828; color: #e8eef8; border: 2px solid #8fb0e0; box-shadow: 0 4px 14px rgba(0,0,0,.6); pointer-events: auto; }
#dicaPop[hidden] { display: none; }
.vagas { margin: 2px 0 6px; font-size: 15px; }
button.coach { text-align: left; }
button.coach small { display: block; }

/* cartões de contratação (28/10) */
.coachCard { margin: 6px 0; padding: 6px; border: 2px solid rgba(0,0,0,.45); background: rgba(0,0,0,.18); }
.coachTop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.coachTop small, .contratado small { display: block; opacity: .85; line-height: 1.3; }
.coachTop .contratar { flex: 0 0 auto; width: auto; min-width: 92px; text-align: center; }
.contratado { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 5px 6px; border-left: 3px solid #6bd18a; background: rgba(107,209,138,.10); }
.contratado .dem { flex: 0 0 auto; width: auto; padding: 3px 8px; font-size: 12px; }
#treinPanel .coachTop > span, #treinPanel .contratado > span { flex: 1 1 auto; min-width: 0; }
#treinPanel .coachTop button.contratar { width: 104px; max-width: 104px; flex: 0 0 104px; margin: 0; padding: 6px 4px; }
#treinPanel .contratado button.dem { width: auto; max-width: none; flex: 0 0 auto; margin: 0; }
/* separador de blocos no registro da luta e cartas indisponíveis na posição (28/10) */
#lLog .sep { text-align: center; opacity: .55; font-size: 11px; letter-spacing: 1px; margin: 6px 0; border: 0; }
.carta.indisp { opacity: .35; filter: grayscale(.8); }

/* cartas da luta compactas com botão de informação (28/10) */
.cartaW { position: relative; flex: 0 1 132px; } .cartaW .carta { width: 100%; padding: 8px 10px; } .cartaW .carta i { margin-top: 2px; }
.cartaW .ibtn { position: absolute; top: 5px; right: 5px; margin: 0; z-index: 2; }

/* ícone, custo de mana (azul) e botão i no topo da carta */
.cartaW .cartaTopo { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; gap: 4px; z-index: 2; pointer-events: none; }
.cartaW .cartaTopo .ibtn { position: static; margin: 0 0 0 2px; pointer-events: auto; }
.cartaW .cartaTopo .ic { height: 16px; }
.cartaW .cartaTopo .custo { font-style: normal; font-weight: 800; font-size: 18px; color: #2f6fd8; min-width: 10px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.cartaW .carta b { padding-right: 62px; }
html[data-tema="escuro"] .cartaW .cartaTopo .custo { color: #7fb0ff; text-shadow: none; }
/* todas as cartas do mesmo tamanho (28/10) */
.lrow.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.lrow.cartas .cartaW { flex: none; min-width: 0; height: 96px; } .lrow.cartas .cartaW .carta { height: 100%; box-sizing: border-box; }
.lrow.cartas > .carta { height: 96px; box-sizing: border-box; min-width: 0; }
.lrow.cartas .carta b { line-height: 1.05; }

/* ---------- texto dos botões cinza (29/10, pedido do Vitor) ----------
   Texto principal BRANCO com contorno preto; texto secundário (as linhas pequenas dentro do botão) em cor própria, para não se confundir com o cinza do botão.
   Botões verdes (.on), dourados (.grande, Lutar), os de janela (.jb), o "i" e as amostras de cor ficam como estavam. Para testar outras cores: prototipo/teste-cores.html */
:root {
  --btn-t1: #ffffff; --btn-t2: #d9dbe4; --btn-off: #c4c7d2; --btn-t2-off: #8d8f98;
  --btn-contorno: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
html[data-tema] button:not(.on):not(.grande):not(.jb):not(.ibtn):not(.amostra):not(#bLutar) { color: var(--btn-t1); text-shadow: var(--btn-contorno); }
html[data-tema] button:disabled:not(.on):not(.grande):not(.jb):not(.ibtn):not(.amostra):not(#bLutar) { color: var(--btn-off); }
html[data-tema] .painel button.op:not(.on) small, html[data-tema] .lopt:not(.on) small, html[data-tema] .carta:not(.on) span, html[data-tema] .carta:not(.on) i,
html[data-tema] button.coach:not(.on) small { color: var(--btn-t2); text-shadow: var(--btn-contorno); }
html[data-tema] .painel button.op:disabled:not(.on) small, html[data-tema] .lopt:disabled:not(.on) small, html[data-tema] .carta:disabled:not(.on) span, html[data-tema] .carta:disabled:not(.on) i,
html[data-tema] button.coach:disabled:not(.on) small { color: var(--btn-t2-off); }

/* balão de descrição (botões "i" e itens do topo): mesma fonte de pixel do jogo, mais legível (29/10) */
#dicaPop { font-family: var(--fonte); font-size: 18px; font-weight: 600; line-height: 1.25; }

/* ---------- perfil do lutador (29/10): foto de frente ao lado dos dados e skills em colunas alinhadas (nome | barra | valor | botão) ---------- */
.ficha { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.ficha .foto { flex: 0 0 auto; width: 112px; height: 128px; image-rendering: pixelated; background: var(--papel3); border: 2px solid var(--linha); box-shadow: inset 0 0 0 2px var(--papel2); }
.ficha-txt { flex: 1 1 auto; min-width: 0; } .ficha-txt h3 { margin: 0 0 6px; } .ficha-txt .sub { margin-bottom: 0; }
#info .barra { display: grid; grid-template-columns: 118px minmax(0, 1fr) 28px 70px; align-items: center; column-gap: 6px; margin: 5px 0; }
#info .barra span { width: auto; white-space: nowrap; }
#info .barra i { min-width: 0; }
#info .barra b { width: auto; text-align: right; }
#info .barra button.tr { width: 70px; min-height: 26px; padding: 2px 4px; text-align: center; }

/* stats dos lutadores dentro da luta */
.lstats { margin: 4px 0; }
.lstt { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
.lstt th { font-weight: normal; padding: 1px 4px; }
.lstt td { padding: 0 4px; }
.lstt td.ok { color: #3a8a3a; font-weight: bold; }
.lgrupo { margin: 8px 0 2px; font-size: 14px; opacity: .8; border-bottom: 1px solid rgba(128,128,128,.4); }
.cintGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0; } .cintCard { text-align: center; font-size: 13px; } .cintCard img { width: 100px; height: 100px; image-rendering: pixelated; display: block; margin: 0 auto; } .cintCard small { display: block; opacity: .75; }
.aulaLin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin: 3px 0; } .aulaLin .aulaMot { flex-basis: 100%; opacity: .75; } .aulaLin .op { width: auto; padding: 2px 10px; }
.criador { max-width: 760px; } .crGrade { display: flex; gap: 18px; flex-wrap: wrap; text-align: left; } .crCol { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.crCol label { display: flex; flex-direction: column; gap: 2px; } .crCol input[type=text] { padding: 4px 6px; font: inherit; } .crLin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .crLin .op { width: auto; padding: 2px 8px; margin: 0; }
.crCor { width: 22px; height: 22px; border: 2px solid var(--linha); cursor: pointer; display: inline-block; } .crCor.on { outline: 3px solid var(--ouro); }
.crStat { display: grid; grid-template-columns: 130px 28px 1fr 28px 28px; align-items: center; gap: 4px; } .crStat i { height: 10px; background: rgba(0,0,0,.35); display: block; } .crStat i em { display: block; height: 100%; background: var(--verde); } .crPts { margin: 4px 0; }

/* tela principal (01/11): fundo de fibra de carbono, lutador grande e botões só com ícones nas laterais */
#hub { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--vh, 1vh) * 100 - var(--hubTop, 0px)); z-index: 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hubFundo { position: absolute; inset: 0; background: #000 url('../ui/cena/octagono.png?v=1') center bottom / contain no-repeat; image-rendering: pixelated; }
.hubFundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 70%, rgba(0,0,0,0), rgba(0,0,0,.45) 85%); }
#hubLut { touch-action: none; position: relative; height: min(calc(var(--vh, 1vh) * 84), 760px); width: auto; image-rendering: auto; margin-top: 40px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)); }
.hubCol { position: absolute; top: 50%; transform: translateY(-46%); display: flex; flex-direction: column; gap: 14px; } .hubCol.esq { left: max(14px, 6vw); } .hubCol.dir { right: max(14px, 6vw); }
.hubBt { position: relative; } .hubBt > button:not(.ibtn) { width: 76px; height: 76px; padding: 0; display: flex; align-items: center; justify-content: center; }
.hubBt > button:not(.ibtn) img { width: 48px; height: 48px; image-rendering: pixelated; } .hubBt .hubCasa { font-size: 44px; line-height: 1; color: var(--tinta); }
.hubBt .ibtn { position: absolute; top: -6px; right: -6px; margin: 0; z-index: 2; }
.hubTroca { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; } .hubTroca button { width: 54px; height: 40px; padding: 0; font-size: 20px; }
#bHub { position: static; padding: 2px 8px; } #bHub img { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; }
#hud { z-index: 4; }
/* na tela principal o topo mostra só dinheiro, patrocínio e fama */
body.modo-hub #hud > :not([data-dica="din"]):not([data-dica="renda"]):not([data-dica="fama"]):not([data-dica="dinSoq"]):not(.marca) { display: none !important; }
body.modo-hub #hub { top: 46px; --hubTop: 46px; }
/* criador de lutador na tela inicial (01/11): mesmo fundo de carbono e o lutador grande respirando */
#abertura { background-color: #000; background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-attachment: fixed; }   /* (11/11) o fundo é o octógono da divisão 5 (jogo.js); o carbono antigo saiu */
.criador { max-width: 1000px; } .crImg { flex: 0 0 auto; align-items: center; } #crHD { height: min(calc(var(--vh, 1vh) * 68), 560px); width: auto; image-rendering: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
/* botões de texto da tela principal */
.hubBtn { width: 170px; padding: 14px 10px; font-size: 22px; } .hubCol { gap: 16px; }
body.modo-hub #hud > #bDev, body.modo-hub #hud > #bReset { display: inline-block !important; }
/* tela principal (01/11): lutador grande à esquerda, todos os botões à direita */
#hub { justify-content: flex-start; }
#hubLut { height: min(calc(var(--vh, 1vh) * 100 - 64px), 980px); margin: 8px 0 0 max(8px, 5vw, calc(var(--oct-l, 0px) + var(--oct-w, 0px) * .14)); filter: none; }   /* (11/11) em tela larga o lutador fica dentro da imagem do octógono */
.hubCol.dir { right: max(24px, 7vw); transform: translateY(-48%); }
#hubLut { margin-top: 0; max-width: none; }

/* criador: carta da raridade no fim (01/11) */
.crRar { display: flex; justify-content: center; margin: 10px 0 6px; } .crRar .acarta { width: 190px; min-height: 120px; }
.crImg { display: flex; flex-direction: column; justify-content: flex-start; }

/* luta: imagem HD dos lutadores (01/11) */
.lhdw { height: 150px; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; } .lhd { image-rendering: auto; display: block; }
.lplacar > div[data-lado].golpe { animation: lpisca-tremor .6s steps(3); } @keyframes lpisca-tremor { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }
.lhd[data-hd="a"] { transform: scaleX(-1); }

/* tela principal: status e barra do treino (01/11) */
#hubSt { position: absolute; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: 22px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; white-space: nowrap; pointer-events: none; z-index: 2; }
#hubBar { position: absolute; transform: translateX(-50%); width: 230px; height: 18px; background: #1d1d1d; border: 3px solid #000; box-sizing: border-box; z-index: 2; }
#hubBar i { display: block; height: 100%; background: #3fbf4f; width: 0; } #hubBar[hidden] { display: none; }
#hubLes { position: absolute; transform: translateX(-50%); width: 230px; height: 18px; background: #1d1d1d; border: 3px solid #000; box-sizing: border-box; z-index: 2; } #hubLes i { display: block; height: 100%; width: 0; } #hubLes[hidden] { display: none; }
.crCor.tem { outline: 2px solid #8fd48f; outline-offset: -2px; }
.crLin button.op.mini { display: inline-block; width: auto; min-height: 0; padding: 3px 10px; margin: 2px 3px; font-size: 15px; }

/* skill em treino pisca em verde (02/11) */
.barra.treinando em { animation: pisca-treino 1s steps(2, jump-none) infinite; } @keyframes pisca-treino { 0% { background: #3fbf4f; filter: brightness(1.3); } 100% { background: #1d5a28; filter: none; } }

/* stamina baixa pisca: amarelo abaixo de 30%, vermelho abaixo de 10% (02/11) */
.barra.stamBaixa em { animation: pisca-stam-a 1s steps(2, jump-none) infinite; } .barra.stamCrit em { animation: pisca-stam-v .6s steps(2, jump-none) infinite; }
@keyframes pisca-stam-a { 0% { background: #f2d12e; } 100% { background: #7a6a14; } } @keyframes pisca-stam-v { 0% { background: #e03a3a; } 100% { background: #5a1414; } }
#lojaPanel .crLin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } #lojaPanel .crRot { flex: 0 0 64px; font-size: 15px; color: var(--suave, #aab); }
#lojaPanel .crLin input[type=text] { flex: 1 1 150px; min-width: 0; padding: 4px; }
/* dinheiro REAL (verde, nota) separado do dinheiro do jogo (moeda dourada) (02/11) */
.dinReal { border-color: #2e9d55 !important; } .dinReal b, .dinReal .rs { color: #8fe3ab; } .dinReal .icReal { vertical-align: middle; margin-right: 4px; image-rendering: pixelated; }
.soqIc { vertical-align: middle; }

/* celular em pé (03/11): lutador à esquerda menor e botões mais estreitos à direita, sem cobrir o lutador */
@media (max-width: 700px) {
  .hubBtn { width: 108px; padding: 9px 4px; font-size: 17px; min-height: 0; } .hubCol { gap: 9px; }
  .hubCol.dir { right: 6px; transform: translateY(-50%); }
  #hubLut { margin-left: 2px; }
  #hud { padding: 4px 6px 6px; gap: 4px 6px; }
}

/* botões lisos (03/11): o miolo do botão é pintado também por trás da imagem (cor do corpo de cada estado), para não aparecer linha nas emendas do 9-slice quando a tela tem escala fracionada (celular, zoom, DPR 1,25) */
.ibtn, .jb, .amostra { background-image: none; }

/* troféus em pixel art (03/11): no lugar do emoji; pequeno no texto, maior no botão do perfil */
.trofIc { height: 20px; width: auto; image-rendering: pixelated; vertical-align: -4px; } .trofIc.grande { height: 26px; vertical-align: middle; }
.cgrupo { margin: 8px 0 2px; font-size: 17px; font-weight: 800; opacity: .9; border-bottom: 1px solid rgba(128,128,128,.4); }
/* Punho Dourado = moeda premium (dinheiro de verdade) (03/11; antes era o punho vermelho "soquinhos") */
.dinSoq { border-color: #c79a12 !important; } .dinSoq b { color: #ffd54a; } .dinSoq .icSoq { vertical-align: middle; margin-right: 4px; image-rendering: pixelated; }

.ajl { margin: 4px 0 8px; padding-left: 18px; font-size: 16px; line-height: 1.25; } .ajl li { margin-bottom: 4px; }

/* cena de treino (03/11, fase 1): academia de fundo no modo de 1 lutador */
#hubCena { position: absolute; left: 0; top: 0; image-rendering: pixelated; }

/* fundo do octógono: em tela larga a imagem não estica (laterais pretas); em tela estreita/em pé ela cobre */
@media (max-aspect-ratio: 1/1) { .hubFundo { background-size: cover; } }

/* lista de skills do menu Treinar: colunas que se ajustam; no celular, 2 colunas de botões achatados */
.statGrade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0; }
.painel .statGrade button.op { margin: 0; min-width: 0; }
/* celular (tela estreita ou em pé): botões dos menus achatados, um embaixo do outro, no máximo 2 por linha */
@media (max-width: 700px) {
  .painel button.op { padding: 6px 10px; margin: 4px 0; min-height: 0; font-size: 17px; line-height: 1.15; }
  .painel button.op small { display: inline; margin-left: 6px; font-size: 14px; line-height: 1.1; }
  .painel .esp button.op { padding: 6px 10px; margin: 3px 0; }
  .statGrade { grid-template-columns: 1fr 1fr; gap: 5px; }
  .painel .statGrade button.op { padding: 5px 8px; font-size: 16px; }
  .painel .statGrade button.op small { display: block; margin: 0; font-size: 13px; }
  .acoes button { flex: 1 1 45%; padding: 5px 8px; min-height: 0; }
  button.grande { padding-top: 8px; padding-bottom: 8px; }
  .lrow.cartas { grid-template-columns: 1fr 1fr; gap: 6px; } .lrow.cartas .cartaW, .lrow.cartas > .carta { height: 74px; }
}
@media (max-width: 700px) {
  /* Loja e Customizar: opções (cortes, tatuagens...) em 2 por linha; as cores continuam como estavam */
  #lojaPanel .crLin button.op, #lojaPanel .crLin button.op.mini { flex: 1 1 45%; width: auto; margin: 0; display: block; font-size: 15px; padding: 5px 6px; text-align: center; }
}
@media (max-width: 700px) {
  /* escolha de adversário e opções da luta: botões achatados (linhas juntas em vez de uma embaixo da outra) */
  button.lopt { padding: 5px 8px; font-size: 14px; line-height: 1.15; min-height: 0; margin: 3px 0; }
  button.lopt small { display: inline; font-size: 13px; }
}
@media (max-width: 700px) { canvas.lhd { height: 132px !important; width: auto !important; } }

/* seletor de idioma (PT | EN) */
#bLang { position: fixed; left: 6px; bottom: 6px; z-index: 70; padding: 3px 8px; min-height: 0; font-size: 15px; opacity: .85; }
#bLang b { color: #ffd34d; }
/* placar da luta: o centro (round e posição) nunca esmaga as colunas dos lutadores, em qualquer idioma */
.lplacar > .pl { flex: 0 1 34%; min-width: 0; overflow-wrap: anywhere; }
.lplacar > div[data-lado] { flex: 1 1 33%; min-width: 0; }

/* tutorial do começo do jogo (05/11) */
#tutorial { position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tutCaixa { background: var(--papel, #1c1c1e); color: var(--texto, #eee); border: 3px solid #d9a62a; max-width: 520px; width: 100%; padding: 16px 18px; max-height: calc(var(--vh, 1vh) * 90); overflow: auto; }
.tutCaixa h3 { margin: 0 0 8px; font-size: 26px; color: #f2c94c; }
.tutCaixa p { margin: 6px 0; font-size: 20px; line-height: 1.25; }
.tutPontos { display: flex; gap: 6px; justify-content: center; margin: 12px 0 8px; } .tutPontos i { width: 10px; height: 10px; background: #666; display: block; } .tutPontos i.on { background: #f2c94c; }
.tutBotoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .tutBotoes .tutPula { margin-right: auto; opacity: .8; }

/* tutorial guiado (05/11): escurece a tela e destaca só o alvo */
.g-bloq { position: fixed; z-index: 99990; background: rgba(0,0,0,.72); } .g-bloq.g-cap { background: transparent; }
.g-foco { position: fixed; z-index: 99991; border: 3px solid #f2c94c; box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 18px 4px rgba(242,201,76,.8); pointer-events: none; animation: gpulsa 1.1s ease-in-out infinite; }
@keyframes gpulsa { 50% { box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 28px 10px rgba(242,201,76,.95); } }
.g-seta { position: fixed; z-index: 99992; font-size: 44px; line-height: 1; color: #f2c94c; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; pointer-events: none; animation: gbate .7s ease-in-out infinite alternate; }
@keyframes gbate { to { transform: translate(var(--bx, 0), var(--by, 8px)); } }
.g-balao { position: fixed; z-index: 99993; width: min(92vw, 340px); background: var(--papel, #1c1c1e); color: var(--texto, #eee); border: 3px solid #d9a62a; padding: 10px 12px; box-sizing: border-box; }
.g-balao h4 { margin: 0 0 4px; font-size: 24px; color: #f2c94c; } .g-balao p { margin: 4px 0; font-size: 19px; line-height: 1.2; }
.g-balao .rod { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .g-balao .rod span { flex: 1; font-size: 15px; opacity: .7; } .g-balao .dica { color: #8fe08f; font-size: 17px; }

/* (05/11) listas de escolha em coluna, finas e achatadas (sparring: stats e parceiros) */
.paleta.lista { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.paleta.lista button.op { width: 100%; min-height: 0; padding-top: 4px; padding-bottom: 4px; display: flex; justify-content: space-between; align-items: center; text-align: left; }

/* molduras da foto do perfil (Loja de PD, 05/11) */
canvas.foto.mold-ouro { border: 3px solid #d4a62a; box-shadow: 0 0 0 2px #7a5a10, 0 0 10px #f2c94c; }
canvas.foto.mold-carbono { border: 3px solid #2b2d33; box-shadow: 0 0 0 2px #8a8f9a, inset 0 0 6px #000; }
canvas.foto.mold-chama { border: 3px solid #ff7a1a; box-shadow: 0 0 0 2px #b52a00, 0 0 12px #ff5a00; animation: moldChama 1.2s ease-in-out infinite alternate; }
canvas.foto.mold-gelo { border: 3px solid #bfeaff; box-shadow: 0 0 0 2px #5aa8d8, 0 0 12px #9fd8ff; }
canvas.foto.mold-neon { border: 3px solid #d27cff; box-shadow: 0 0 0 2px #7a1fc0, 0 0 14px #b026ff; }
canvas.foto.mold-arco { border: 3px solid #f33; animation: moldArco 3s linear infinite; }
@keyframes moldChama { from { box-shadow: 0 0 0 2px #b52a00, 0 0 6px #ff5a00; } to { box-shadow: 0 0 0 2px #ff7a1a, 0 0 16px #ffb000; } }
@keyframes moldArco { 0% { border-color: #f33; box-shadow: 0 0 10px #f33; } 20% { border-color: #fc3; box-shadow: 0 0 10px #fc3; } 40% { border-color: #3c6; box-shadow: 0 0 10px #3c6; } 60% { border-color: #3cf; box-shadow: 0 0 10px #3cf; } 80% { border-color: #c3f; box-shadow: 0 0 10px #c3f; } 100% { border-color: #f33; box-shadow: 0 0 10px #f33; } }

/* (05/11) celular: o lutador do criador e os outros canvas dentro de janelas não podem prender o dedo (o scroll de página precisa passar por cima deles) */
#abertura canvas, .janela canvas, .painel canvas, #luta canvas, #info canvas { touch-action: pan-y; }
#abertura, #fimCarreira, .painel, .janela .jcorpo { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 700px) {
  #crHD { height: min(calc(var(--vh, 1vh) * 36), 320px); max-width: 100%; }
  .criador .crGrade { gap: 8px; }
  #abertura { padding: 12px 10px 80px; }
  .criador h1, .criador h2 { font-size: 26px; margin: 4px 0; }
}

/* (05/11) celular: o topo da academia ocupava quase metade da tela; fica compacto, sem a dica do mouse */
@media (max-width: 700px) {
  body:not(.modo-hub) #hud { font-size: 14px; gap: 3px 4px; padding: 3px 5px 4px; }
  body:not(.modo-hub) #hud .marca { font-size: 18px; width: 100%; margin: 0; }
  body:not(.modo-hub) #hud .marca span { font-size: 13px; margin-left: 6px; }
  body:not(.modo-hub) #hud .dado { padding: 0 5px; }
  body:not(.modo-hub) #hud button { min-height: 24px; padding: 2px 7px; font-size: 14px; }
  body:not(.modo-hub) #hud .ic { height: 15px; width: auto; vertical-align: -3px; }
  body:not(.modo-hub) #hud #hVel button { padding: 1px 5px; min-height: 22px; }
  #dica { display: none; }
}

/* barra de toque do mapa (05/11): gira e cancela sem teclado; só aparece em telas de toque/estreitas */
#toqueBarra { position: fixed; left: 0; right: 0; bottom: 8px; z-index: 60; display: none; justify-content: center; gap: 10px; pointer-events: none; }
#toqueBarra button { pointer-events: auto; min-width: 120px; }
@media (max-width: 700px), (pointer: coarse) { #toqueBarra:not([hidden]) { display: flex; } }

/* (05/11) celular: o texto do que o lutador está treinando quebra em linhas em vez de passar por baixo dos botões */
@media (max-width: 700px) { #hubSt { white-space: normal; width: max-content; max-width: 168px; text-align: center; font-size: 17px; line-height: 1.15; } }

/* 05/11: o criador de lutador rola até acima dos botões fixos do canto (idioma, versão, nuvem, bug), para nenhuma opção ficar escondida atrás deles */
#abertura .abox.criador { padding-bottom: 110px; }
@media (max-width: 700px) { #abertura .abox.criador { padding-bottom: 130px; } }

/* 05/11: no computador o lutador grande do criador (canvas com filter) cobria os botões de especialidade; agora ele nunca recebe clique e os campos ficam sempre por cima */
#crHD { pointer-events: none; }
.crGrade .crCol:not(.crImg) { position: relative; z-index: 2; }
.crGrade .crImg { position: relative; z-index: 1; }

/* (09/11) posicionando equipamento no celular: somem os menus; a barrinha fica embaixo do item */
body.posicionando #hud, body.posicionando #dica, body.posicionando #aviso, body.posicionando .painel, body.posicionando #menu, body.posicionando #info, body.posicionando #toqueBarra { display: none !important; }
#posBarra { position: fixed; z-index: 70; transform: translateX(-50%); text-align: center; pointer-events: none; }
#posBarra[hidden] { display: none; }
#posBarra .pbLinha { display: inline-flex; gap: 8px; align-items: center; background: rgba(15,18,26,.92); border: 2px solid var(--linha); border-radius: 12px; padding: 6px 8px; pointer-events: auto; }
#posBarra button { width: 48px; height: 48px; min-width: 48px; font-size: 26px; line-height: 1; padding: 0; border-radius: 10px; }
#posBarra #pbOk { background: #2f9e57; color: #fff; } #posBarra #pbX { background: #a33; color: #fff; }
#posBarra .pbSep { width: 6px; }
#posBarra #pbMsg { font-size: 18px; color: #ffd24a; background: rgba(15,18,26,.85); border-radius: 8px; margin-bottom: 4px; padding: 0 8px; display: inline-block; max-width: 86vw; pointer-events: none; }
#posBarra #pbMsg:empty { display: none; }
#hub[hidden] { display: none; }   /* (09/11) o atributo hidden perdia para o display:flex do #hub: a tela principal cobria o mapa da academia */
#hVel { display: none !important; }   /* (09/11) o tempo agora é do servidor: sem botões de x60/x600 (o painel DEV ainda os aciona por dentro) */

/* (11/11/2026) posição no ranking embaixo do nome do lutador e tela Ranking */
#hud .marca .nomeCol { display: inline-block; vertical-align: top; margin-left: 8px; }
#hud .marca .nomeCol > span { display: block; margin-left: 0; }
#hud .marca .nomeCol > span.rankSub { font-size: 13px; font-weight: 700; color: var(--suave); letter-spacing: 0; line-height: 1.1; margin-top: 1px; }
body:not(.modo-hub) #hud .marca .nomeCol > span.rankSub { font-size: 11px; }
.rkLinha { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 3px 0; background: #23263a; border-left: 5px solid #8a8fa3; cursor: pointer; font-size: 17px; text-align: left; width: 100%; box-sizing: border-box; color: #aeb2c0; }
.rkLinha:hover { background: #2e3250; }
.rkLinha .rkPos { flex: 0 0 3.2em; font-weight: 800; } .rkLinha .rkNome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .rkLinha small { opacity: .85; font-weight: 600; white-space: nowrap; }
.rkLinha.ouro { color: #ffd23c; border-left-color: #ffd23c; background: #3a3216; } .rkLinha.prata { color: #d3dae8; border-left-color: #d3dae8; background: #454c5e; } .rkLinha.bronze { color: #e0893c; border-left-color: #cd7f32; background: #3a2a1c; }
.rkLinha.branco { color: #ffffff; border-left-color: #ffffff; } .rkLinha.cinza { color: #9aa0b0; border-left-color: #5a5f73; }
.rkLinha.eu { outline: 2px solid #5aa0ff; outline-offset: -2px; }
.rkDiv { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 10px 14px; font-size: 18px; }
.sub.rk-ouro { color: #b8860b !important; font-weight: 800; } .sub.rk-prata { color: #7d8799 !important; font-weight: 800; } .sub.rk-bronze { color: #a8631f !important; font-weight: 800; }
.rkStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.rkStats > div { background: #23263a; border: 1px solid #3a3f5c; padding: 4px 6px; text-align: center; color: #dfe3ee; } .rkStats small { display: block; font-size: 12px; opacity: .8; line-height: 1.1; } .rkStats b { font-size: 19px; }
.rkInfo { margin: 6px 0 2px; } .rkBts { display: flex; gap: 8px; margin-top: 8px; } .rkBts .op { flex: 1; margin: 0; text-align: center; } .rkNota { margin-top: 8px; font-size: 14px; opacity: .8; }
.ficha-txt h3 small { font-size: 14px; opacity: .85; }

/* (11/11/2026) edição da tatuagem direto no lutador: botões X e V embaixo dele */
#tatBarra { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; text-align: center; pointer-events: none; }
#tatBarra .tatDica { display: inline-block; background: #000b; color: #fff; font-size: 14px; padding: 4px 10px; margin-bottom: 8px; border: 1px solid #fff4; }
#tatBarra .tatBts { display: flex; gap: 28px; justify-content: center; }
#tatBarra .tatBt { pointer-events: auto; width: 68px; height: 56px; font-size: 32px; line-height: 1; font-weight: 800; border: 3px solid #000; color: #fff; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#tatBarra .tatBt.nao { background: #c0392b; } #tatBarra .tatBt.sim { background: #2e9b4a; }
#tatBarra .tatBt:active { filter: brightness(1.25); }
body.tat-edit #hubLut { cursor: grab; }