/* Painel de operação. Denso, sem enfeite: o que conta é número e relógio. */

:root {
  --fundo: #0F110F;
  --superficie: #171A17;
  --superficie-2: #1E221E;
  --texto: #F1F1F1;
  --texto-2: rgba(241, 241, 241, 0.72);
  --texto-3: rgba(241, 241, 241, 0.55);
  --verde: #00ED5F;
  --ambar: #E9B000;
  --vermelho: #FF6B57;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 48px;
  background: var(--fundo);
  color: var(--texto);
  font: 450 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- barra ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 0;
  margin-bottom: 8px;
}

.barra__marca { font-weight: 600; letter-spacing: -0.02em; }
.barra__marca span { color: var(--verde); }

.barra__placar { display: flex; gap: 28px; margin-left: auto; }

.placar { display: flex; flex-direction: column; line-height: 1.25; }
.placar__rotulo { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-3); }
.placar__valor { font: 600 24px/1.2 var(--mono); margin-top: 4px; }
.placar__nota { font-size: 11px; color: var(--texto-3); }
[data-vivo] .placar__valor { color: var(--verde); }

.barra__pulso {
  display: flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); color: var(--texto-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
[data-estado="vivo"] .pulso { background: var(--verde); animation: bate 2s ease-in-out infinite; }
[data-estado="morto"] .pulso { background: var(--vermelho); }
[data-estado="morto"] { color: var(--vermelho); }

@keyframes bate { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* ---------- aviso ---------- */

.aviso {
  background: var(--superficie-2);
  color: var(--ambar);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ---------- cola de sessão ---------- */

.cola {
  display: grid; gap: 12px;
  background: var(--superficie); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px;
}
.cola__campo { width: 100%; }
.cola textarea {
  width: 100%; background: var(--superficie-2); border: 0; border-radius: 10px;
  color: var(--texto); padding: 12px; font: 500 12px/1.5 var(--mono); resize: vertical;
}
.cola textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.cola .botao { justify-self: start; }
.cola__retorno { margin: 0; font: 500 12px var(--mono); color: var(--texto-3); min-height: 1em; }

/* ---------- controles ---------- */

.controles { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__rotulo { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-3); }
.campo__caixa {
  display: flex; align-items: center; gap: 6px;
  background: var(--superficie); border-radius: 10px; padding: 0 12px; height: 44px;
}
.campo__caixa:focus-within { outline: 2px solid var(--verde); outline-offset: 1px; }
.campo__prefixo, .campo__sufixo { font: 500 13px var(--mono); color: var(--texto-3); }
.campo input {
  background: none; border: 0; color: var(--texto); width: 92px; height: 100%;
  font: 600 16px var(--mono);
}
.campo input:focus { outline: none; }

.botao {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--verde); color: #0B1F12;
  font: 600 14px/1 inherit; cursor: pointer;
}
.botao:disabled { opacity: 0.45; cursor: progress; }
.botao__custo { font: 500 11px var(--mono); opacity: 0.7; }
.botao--fio { background: var(--superficie); color: var(--texto-2); }
.botao--fio[aria-pressed="true"] { background: var(--superficie-2); color: var(--verde); }

/* ---------- lista ---------- */

.lista { display: grid; gap: 12px; }
.vazio { color: var(--texto-3); font-size: 14px; padding: 32px 0; }

.carta { background: var(--superficie); border-radius: 14px; padding: 18px 20px; }
.carta[data-vencida="sim"] { opacity: 0.45; }

.carta__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.carta__jogo strong { display: block; font-size: 18px; letter-spacing: -0.015em; }
.carta__jogo span { font-size: 12px; color: var(--texto-3); }
.carta__lucro { text-align: right; flex-shrink: 0; }
.carta__lucro strong { display: block; font: 600 28px/1 var(--mono); color: var(--verde); }
.carta__lucro span { font-size: 11px; color: var(--texto-3); }

.carta__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 14px; font-size: 12px; color: var(--texto-3);
}
.etiqueta {
  font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--superficie-2); padding: 5px 9px; border-radius: 6px;
}
.etiqueta[data-vivo="true"] { color: var(--verde); }

.carta__relogio { margin-left: auto; font: 500 12px var(--mono); }
.carta__relogio[data-urgente="true"] { color: var(--vermelho); }

/* ---------- pernas ---------- */

.pernas { width: 100%; border-collapse: collapse; font-size: 14px; }
.pernas th {
  text-align: left; font: 500 10px/1 var(--mono); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--texto-3); padding: 0 10px 8px 0; font-weight: 500;
}
.pernas td { padding: 8px 10px 8px 0; color: var(--texto-2); }
.pernas tr + tr td { box-shadow: inset 0 1px 0 rgba(241, 241, 241, 0.06); }
.pernas .num { font: 500 14px var(--mono); text-align: right; }
.pernas .forte { color: var(--texto); font-weight: 600; }
.pernas th:nth-child(n+3) { text-align: right; }
.pernas a { color: var(--texto); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(0, 237, 95, 0.4); }
.pernas a:hover { color: var(--verde); }

/* ---------- rodapé ---------- */

.rodape {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 28px; font: 500 11px var(--mono); color: var(--texto-3);
}
.rodape__nota { font-family: inherit; max-width: 46ch; }

/* ---------- porta ---------- */

.entrada { display: grid; place-items: center; min-height: 100vh; }
.porta {
  display: grid; gap: 16px; width: min(320px, 100%);
  background: var(--superficie); padding: 28px; border-radius: 16px;
}
.porta__marca { font-weight: 600; letter-spacing: -0.02em; }
.porta__marca span { color: var(--verde); }
.porta .campo input { width: 100%; }
.porta .botao { justify-content: center; }
.porta__erro { margin: 0; font-size: 13px; color: var(--vermelho); }

/* ---------- celular ---------- */

@media (max-width: 720px) {
  .barra { gap: 14px; }
  .barra__placar { margin-left: 0; width: 100%; gap: 20px; justify-content: space-between; }
  .placar__valor { font-size: 20px; }
  .controles .botao { flex: 1 1 auto; justify-content: center; }
  .carta__topo { flex-direction: column; gap: 8px; }
  .carta__lucro { text-align: left; }
  .carta__relogio { margin-left: 0; }
  .pernas { font-size: 13px; }
  .pernas th:first-child, .pernas td:first-child { display: none; }
}