/* Tema das telas da conta e do título no client web: o mesmo da Godot (godot/interface/gerar_tema.gd e
   paleta.gd). Painéis azul-noite translúcidos, cantos arredondados, borda fina e o brilho ciano (arcano) no
   que tem o foco. As medidas são as da Godot na tela base de 1152 × 648: a .ui inteira é escalada como a
   Godot faz (canvas_items + expand), então 1 px aqui é 1 px da Godot. */
.ui {
  /* as cores ficam só dentro da .ui: o HUD da run (jogo.html) tem as dele */
  --noite: #0b1118;
  --painel: rgba(14, 22, 35, 0.9);
  --painel-claro: rgba(23, 36, 54, 0.92);
  --vidro: rgba(10, 17, 28, 0.94);
  --escurecer: rgba(4, 6, 13, 0.72);
  --borda: #2f5873;
  --borda-clara: #4f88a8;
  --arcano: #6ff3ff;
  --texto: #eef7ff;
  --texto-2: #a9bfd4;
  --texto-mudo: #62788f;
  --contorno: #060a12;
  --cristal: #ff6ad5;
  --ouro: #ffcf5a;
  --vida: #ff4f6e;
  --mana: #4fb3ff;
  --ruptura: #ff3b3b;
  --alerta: #ffa24a;
  --verde: #5ef0a0;
  --comum: #c9d4de;
  --magico: #5aa8ff;
  --raro: #ffd84d;
  --unico: #ff8a3d;
  --botao-a: #5fd35f;
  --botao-b: #ff5f5f;
  --botao-x: #52a7ff;
  --botao-y: #ffd04f;
}
:root { --escala: 1; }

/* ---------- A área das telas, na escala da Godot ---------- */
.ui {
  position: fixed; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--escala));
  width: calc(100vw / var(--escala)); height: calc(100vh / var(--escala));
  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3;
  color: var(--texto); user-select: none; overflow: hidden; z-index: 20;
}
.ui * { box-sizing: border-box; }
.ui-fundo { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, #142338 0%, #0b1118 55%, #070b12 100%); }
.ui-fundo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Textos (as variações do tema) ---------- */
.ui .titulo {
  font-weight: 800; font-size: 36px; font-style: italic; letter-spacing: 1px; color: var(--texto);
  -webkit-text-stroke: 9px #120a26; paint-order: stroke fill; text-shadow: 0 0 18px rgba(111, 243, 255, 0.4);
  line-height: 1.15; padding: 0 6px;
}
.ui .logo {
  font-weight: 800; font-style: italic; font-size: 76px; letter-spacing: 3px; color: #f4f7ff;
  -webkit-text-stroke: 14px #160a2c; paint-order: stroke fill; text-shadow: 0 0 30px rgba(255, 106, 213, 0.5);
}
.ui .subtitulo { font-size: 22px; color: var(--texto-2); }
.ui .cabecalho { font-size: 15px; font-weight: 700; color: var(--arcano); }
.ui .pequeno { font-size: 14px; color: var(--texto-2); font-weight: 600; }
.ui .mudo { font-size: 14px; color: var(--texto-mudo); }
.ui .rotulo-hud { font-size: 17px; font-weight: 700; -webkit-text-stroke: 5px var(--contorno); paint-order: stroke fill; }
.ui .pequeno-hud { font-size: 14px; color: var(--texto-2); -webkit-text-stroke: 4px var(--contorno); paint-order: stroke fill; }
.ui .titulo-carta { font-size: 21px; font-weight: 700; }
.ui .numero-grande {
  font-weight: 800; font-style: italic; font-size: 28px; -webkit-text-stroke: 6px #120a26; paint-order: stroke fill;
}
.ui .separador { height: 2px; background: rgba(47, 88, 115, 0.6); margin: 4px 0; border-radius: 1px; }

/* ---------- Painéis ---------- */
.ui .painel-tela {
  background: var(--painel); border: 2px solid rgba(47, 88, 115, 0.9); border-radius: 14px; padding: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.ui .painel-vidro {
  background: var(--vidro); border: 2px solid rgba(111, 243, 255, 0.55); border-radius: 18px; padding: 22px;
  box-shadow: 0 0 24px rgba(111, 243, 255, 0.14);
}
.ui .painel-fundo { background: rgba(5, 9, 15, 0.65); border: 1px solid rgba(47, 88, 115, 0.5); border-radius: 10px; padding: 10px; }

/* ---------- Botões ---------- */
.ui .botao {
  font: inherit; font-size: 21px; font-weight: 700; color: var(--texto); background: var(--painel-claro);
  border: 2px solid rgba(79, 136, 168, 0.7); border-radius: 12px; padding: 10px 24px; cursor: pointer; min-width: 0;
  position: relative; outline: none; text-align: center; transition: background 0.08s;
}
.ui .botao.menu { font-size: 22px; }
.ui .botao:hover { background: #16263a; border-color: rgba(111, 243, 255, 0.7); color: #fff; }
.ui .botao.desligado { background: rgba(23, 36, 54, 0.5); border-color: rgba(47, 88, 115, 0.4); color: var(--texto-mudo); }
.ui .focavel.foco { outline: none; }
.ui .botao.foco {
  background: #3b7884; border: 3px solid var(--arcano); color: #fff; margin: -1px;
  box-shadow: 0 0 14px rgba(111, 243, 255, 0.45), inset 0 0 0 1px rgba(111, 243, 255, 0.2);
}
.ui .botao.desligado.foco { background: #24404a; color: var(--texto-2); }
.ui .botao.aba-ativa { border-color: var(--arcano); color: var(--arcano); background: #16263a; }

/* ---------- Estrutura das telas da conta (tela_conta.gd) ---------- */
.ui .tela-conta { position: absolute; inset: 0; display: none; }
.ui .tela-conta.aberta { display: block; }
.ui .tela-conta > .escuro { position: absolute; inset: 0; background: rgba(3, 6, 11, 0.9); }
.ui .tela-conta > .coluna {
  position: absolute; inset: 18px 28px 14px 28px; display: flex; flex-direction: column; gap: 12px;
}
.ui .tela-conta .topo { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.ui .tela-conta .topo .titulo { flex: 0 0 auto; }
.ui .tela-conta .topo .vao { flex: 1; }
.ui .tela-conta .topo-direita { display: flex; gap: 18px; align-items: center; justify-content: flex-end; }
.ui .tela-conta .corpo { flex: 1; display: flex; gap: 14px; min-height: 0; }
.ui .tela-conta .rodape { display: flex; gap: 22px; justify-content: center; align-items: center; min-height: 30px; }
.ui .tela-conta .aviso-tela {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); width: 800px; text-align: center;
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.ui .tela-conta .aviso-tela.visivel { opacity: 1; transition: none; }
.ui .contador { display: flex; gap: 6px; align-items: center; }
.ui .contador canvas { width: 24px; height: 24px; }

/* Janela de confirmar */
.ui .janela { position: absolute; inset: 0; background: var(--escurecer); display: none; align-items: center; justify-content: center; z-index: 5; }
.ui .janela.aberta { display: flex; }
.ui .janela .painel-vidro { display: flex; flex-direction: column; gap: 14px; align-items: center; max-width: 560px; }
.ui .janela .texto-janela { width: 400px; text-align: center; }
.ui .janela .linha-botoes { display: flex; gap: 14px; justify-content: center; }
.ui .janela .linha-botoes .botao { min-width: 170px; min-height: 50px; }

/* ---------- Dicas de botão (dica.gd e glifo.gd) ---------- */
.ui .dica { display: flex; align-items: center; gap: 7px; }
.ui .dica.escondida { display: none; }
.ui .glifo { display: inline-flex; gap: 4px; align-items: center; height: 26px; }
.ui .tecla {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 6px; background: #1a2a3c; border: 2px solid #8fb3cc;
  border-bottom-width: 3px; color: var(--texto); font-size: 14px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; line-height: 1;
}
.ui .tecla svg { width: 12px; height: 12px; }
.ui .botao-controle {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #0b1118; border: 2px solid rgba(0, 0, 0, 0.35);
}
.ui .ombro {
  min-width: 34px; height: 24px; border-radius: 8px 8px 5px 5px; background: #24364a; border: 2px solid #8fb3cc;
  color: var(--texto); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.ui .dpad svg { width: 26px; height: 26px; display: block; }

/* ---------- Espaço de item (espaco_item.gd) ---------- */
.ui .espaco {
  position: relative; border-radius: 8px; background: rgba(5, 10, 18, 0.6); border: 1px solid rgba(79, 136, 168, 0.4);
  flex: 0 0 auto; cursor: pointer;
}
.ui .espaco canvas, .ui .espaco img.arte { position: absolute; pointer-events: none; }
.ui .espaco.trancado { border-color: rgba(79, 136, 168, 0.25); cursor: default; }
.ui .espaco.cheio { border-width: 2px; }
.ui .espaco .nivel-trancado { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 12px; color: var(--texto-mudo); }
.ui .espaco .quantidade {
  position: absolute; right: 5px; bottom: 1px; font-size: 14px; font-weight: 700;
  -webkit-text-stroke: 4px var(--contorno); paint-order: stroke fill;
}
.ui .espaco .canto-corrompido { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; background: var(--ruptura); clip-path: polygon(0 0, 100% 0, 100% 100%); border-top-right-radius: 6px; }
.ui .espaco .losangos { position: absolute; left: 0; right: 0; bottom: 3px; display: flex; justify-content: center; gap: 2px; }
.ui .espaco .losangos i { width: 6px; height: 6px; background: var(--arcano); transform: rotate(45deg); opacity: 0.2; }
.ui .espaco .losangos i.cheio { opacity: 1; }
.ui .espaco.marcado::before {
  content: ""; position: absolute; inset: -4px; border: 2px solid var(--ouro); border-radius: 10px; pointer-events: none;
}
.ui .espaco.foco::after {
  content: ""; position: absolute; inset: -3px; border: 3px solid var(--arcano); border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 8px rgba(111, 243, 255, 0.4); animation: pulso-foco 1s ease-in-out infinite;
}
.ui .espaco.marcado.foco::after { inset: -5px; }
@keyframes pulso-foco { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---------- Dica do item (dica_item.gd) ---------- */
.ui .dica-item {
  background: rgba(8, 13, 23, 0.96); border: 2px solid rgba(79, 136, 168, 0.7); border-radius: 10px; padding: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 4px;
}
.ui .dica-item.escondida { display: none; }
.ui .dica-item .nome { font-size: 21px; font-weight: 700; }
.ui .dica-item .linha-cor { height: 2px; margin: 2px 0; }
.ui .dica-item .afixo { display: flex; gap: 6px; align-items: baseline; font-size: 16px; }
.ui .dica-item .afixo span:first-child { flex: 1; }
.ui .dica-item .efeito { font-size: 16px; color: var(--unico); white-space: pre-line; }
.ui .dica-item .piscar { animation: piscar 0.37s ease-in-out 3; }
@keyframes piscar { 0%, 100% { filter: none; } 35% { filter: brightness(2.2); } }

/* ---------- Barra (BarraConta e parecidas) ---------- */
.ui .barra { height: 16px; border-radius: 8px; background: rgba(5, 8, 13, 0.82); border: 2px solid rgba(0, 0, 0, 0.9); overflow: hidden; }
.ui .barra > div { height: 100%; border-radius: 7px; background: var(--ouro); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45); width: 0; }