:root {
  color-scheme: dark;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #d9a441;
  background: #020306;
  text-shadow: 0 0 5px #ff9a1f48;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { text-transform: uppercase; }
button { font: inherit; letter-spacing: inherit; text-transform: inherit; }
[hidden] { display: none !important; }
#moldura {
  display: grid;
  grid-template-areas: "topo topo topo" "esquerda tela direita" "base base base";
  grid-template-columns: 204px minmax(0, 1fr) 224px;
  grid-template-rows: 54px minmax(0, 1fr) 58px;
  gap: 6px;
  width: 100vw;
  height: 100vh;
  padding: 8px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at center, #0b1013, #020306 75%);
}
#moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, #0003 4px);
  opacity: 0.55;
}
.painel {
  position: relative;
  min-width: 0;
  border: 1px solid #d9a44185;
  background: #030508f0;
  box-shadow: inset 0 0 0 1px #d9a44114, 0 0 12px #d9a4410d;
}
.painel::before, .painel::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 2;
  pointer-events: none;
}
.painel::before { top: -1px; left: -1px; border-top: 2px solid #ffb43d; border-left: 2px solid #ffb43d; }
.painel::after { right: -1px; bottom: -1px; border-right: 2px solid #ffb43d; border-bottom: 2px solid #ffb43d; }
.topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
}
.marca {
  color: #ffb546;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  white-space: nowrap;
  text-shadow: 0 0 12px #ff9a1fbf;
}
.marca span { color: #a67932; font-size: 9px; letter-spacing: 1px; }
.topo-centro, .rodape-sistema { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.sinal, .relogio, .rodape-sistema { color: #ad8448; }
.relogio strong { margin-left: 8px; color: #4fb4ff; font-size: 15px; text-shadow: 0 0 8px #4fb4ffa6; }
.led { display: inline-block; flex: none; width: 5px; height: 5px; border-radius: 50%; }
.led.vermelho { background: #ff3b2e; box-shadow: 0 0 7px #ff3b2e; animation: piscar 1.9s steps(1) infinite; }
.led.ambar { background: #ff9a1f; box-shadow: 0 0 7px #ff9a1f; animation: piscar 2.8s steps(1) infinite reverse; }
@keyframes piscar { 0%, 72%, 100% { opacity: 1; } 73%, 92% { opacity: 0.18; } }
.lateral { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.esquerda { grid-area: esquerda; }
.direita { grid-area: direita; }
.lateral .painel { padding: 11px 9px 9px; }
h2 {
  margin: -11px -9px 9px;
  padding: 6px 9px;
  border-bottom: 1px solid #d9a44161;
  background: #d9a44112;
  color: #e8b566;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1.5px;
}
.valor-principal { color: #4fb4ff; font-size: clamp(29px, 3vw, 42px); font-weight: bold; line-height: 1; text-shadow: 0 0 15px #4fb4ffb3; }
.rotulo, .micro { color: #90734c; font-size: 8px; line-height: 1.6; }
#mini-esfera { display: block; width: min(100%, 155px); height: auto; margin: 4px auto 0; border: 1px solid #4fb4ff40; image-rendering: pixelated; }
.linha { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; min-width: 0; padding: 3px 0; font-size: 9px; }
.linha b, .resumo-estreito b { color: #4fb4ff; font-weight: normal; white-space: nowrap; text-shadow: 0 0 7px #4fb4ff73; }
.medidor { height: 5px; padding: 1px; border: 1px solid #4fb4ff7a; background: #07111b; }
.medidor i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2266e8, #4fb4ff); box-shadow: 0 0 6px #2266e8; transition: width 0.15s linear; }
.medidor.vermelho { border-color: #ff3b2e6b; background: #160808; }
.medidor.vermelho i { background: linear-gradient(90deg, #8c241b, #ff3b2e); box-shadow: 0 0 6px #ff3b2e; }
.medidor.tipo-comum i { background: #4fb4ff; }
.medidor.tipo-rapida i { background: #5fffd0; }
.medidor.tipo-blindada i { background: #ffb347; }
.medidor.tipo-distancia i { background: #b48cff; }
.micro { padding: 3px 5px; }
.grupos-painel { min-height: 104px; }
#lista-grupos { display: flex; flex-direction: column; gap: 4px; max-height: min(20vh, 165px); overflow-y: auto; scrollbar-color: #d9a441 #020306; }
.item-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 5px;
  border: 1px solid #d9a44155;
  color: #b4c9d8;
  background: #091017;
  text-align: left;
  cursor: pointer;
}
.item-grupo:hover, .item-grupo:focus-visible, .item-grupo.selecionado { border-color: #ffb347; color: #ffb347; background: #d9a44118; outline: none; }
.barras-grupo { display: flex; width: 100%; height: 4px; overflow: hidden; background: #07111b; }
.barras-grupo i { display: block; height: 100%; }
.composicao .linha { padding: 2px 0; }
.composicao .medidor { margin-bottom: 3px; }
.poderes .medidor, .objetivo .medidor { margin-bottom: 5px; }
#tela {
  grid-area: tela;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d9a44194;
  background: #020306;
  box-shadow: inset 0 0 26px #000, 0 0 12px #d9a44114;
}
#c { display: block; width: 100%; height: 100%; touch-action: none; }
.tela-mira { position: absolute; inset: 7px; border: 1px solid #d9a4411a; pointer-events: none; }
.tela-mira::before, .tela-mira::after { content: ""; position: absolute; width: 18px; height: 18px; }
.tela-mira::before { top: 0; left: 0; border-top: 1px solid #d9a441; border-left: 1px solid #d9a441; }
.tela-mira::after { right: 0; bottom: 0; border-right: 1px solid #d9a441; border-bottom: 1px solid #d9a441; }
#caixa { position: absolute; z-index: 4; border: 1px dashed #ffb347; background: #ffb34714; pointer-events: none; box-shadow: 0 0 9px #ffb34755; }
.objetivos .linha b { color: #ff9a1f; }
.estado-escudo { color: #4fb4ff; font-size: 8px; line-height: 1.6; }
.mapa-painel { text-align: center; }
.mapa-painel h2, .log-painel h2 { text-align: left; }
#minimapa { display: block; width: min(100%, 180px); height: auto; margin: 0 auto; border: 1px solid #d9a44159; image-rendering: pixelated; cursor: crosshair; }
#minimapa:focus-visible { outline: 1px solid #4fb4ff; }
.legenda { display: flex; justify-content: space-between; gap: 3px; margin-top: 5px; color: #977956; font-size: 7px; letter-spacing: 0; }
.legenda span:nth-child(1) { color: #4fb4ff; }
.legenda span:nth-child(2) { color: #b48cff; }
.legenda span:nth-child(3) { color: #ff3b2e; }
.log-painel { flex: 1; min-height: 70px; }
#log-eventos { display: flex; flex-direction: column; gap: 4px; overflow: hidden; color: #bd9b68; font-size: 8px; line-height: 1.35; }
#log-eventos div:first-child { color: #ffb43d; }
.base { grid-area: base; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; color: #a68657; font-size: 8px; line-height: 1.5; }
.controles { max-width: 83%; }
.resumo-estreito { display: none; }
.sobreposicao {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at center, #0d141adb, #020306f7 70%);
}
.cartao {
  width: min(100%, 540px);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(20px, 5vw, 44px);
  border: 1px solid #d9a441;
  background: #020306e6;
  box-shadow: 0 0 30px #d9a44129, inset 0 0 30px #d9a4410a;
  text-align: center;
}
.sobretitulo { color: #8f7552; font-size: 9px; letter-spacing: 2px; }
.cartao h1 { margin: 15px 0 9px; color: #ffb43d; font-size: clamp(40px, 7vw, 72px); font-weight: normal; letter-spacing: 9px; text-shadow: 0 0 8px #b36a16, 0 0 32px #ff9a1f99; }
.cartao p { color: #d9a441; font-size: 10px; line-height: 1.8; }
.cartao .instrucao { color: #8aa0a9; font-size: 9px; }
.como-jogar { margin: 18px auto; max-width: 370px; color: #8aa0a9; font-size: 9px; line-height: 1.8; text-align: left; }
.separador { width: 80%; height: 1px; margin: 20px auto; background: linear-gradient(90deg, transparent, #d9a441, transparent); }
.estatisticas { margin: 20px 0; color: #4fb4ff; font-size: 9px; line-height: 2; }
.cartao button { min-width: 150px; margin: 12px 5px 0; padding: 11px 16px; border: 1px solid #d9a441; color: #ffb43d; background: #d9a4410f; cursor: pointer; }
.cartao button:hover, .cartao button:focus-visible { border-color: #4fb4ff; color: #4fb4ff; background: #2266e81a; outline: none; box-shadow: 0 0 12px #4fb4ff59; }
@media (max-width: 999px) {
  #moldura { grid-template-areas: "topo" "tela" "base"; grid-template-columns: minmax(0, 1fr); grid-template-rows: 84px minmax(0, 1fr) 82px; gap: 4px; padding: 5px; }
  .lateral, .topo-centro, .controles { display: none; }
  .topo { flex-wrap: wrap; gap: 2px 10px; padding: 8px 10px; }
  .marca { font-size: 13px; }
  .marca span { font-size: 8px; }
  .relogio strong { font-size: 12px; }
  .resumo-estreito { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font-size: 9px; }
  .resumo-estreito span { white-space: nowrap; }
  .base { flex-wrap: wrap; gap: 3px; padding: 7px 10px; }
  .rodape-sistema { font-size: 8px; }
}
@media (max-width: 520px) {
  .marca span { display: none; }
  .resumo-estreito { font-size: 8px; letter-spacing: 0; }
  .cartao { padding: 22px 12px; }
  .cartao h1 { letter-spacing: 4px; }
}
@media (max-height: 750px) and (min-width: 1000px) {
  #mini-esfera { max-height: 95px; object-fit: contain; }
  .lateral .painel { padding-bottom: 5px; }
  .composicao .medidor { margin-bottom: 1px; }
  #minimapa { width: min(100%, 140px); }
}