/* Cell Sim — painel de osciloscópio de bancada.
   Projeto SEPARADO do TENNIS GAME; paleta de acento (lima/petróleo) é
   a mesma por pedido do usuário, mas a linguagem de hardware (metal
   escovado, CRT fósforo verde, potenciômetros) é própria deste jogo. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --petrol-1: #0d3540;
  --petrol-2: #06232a;
  --petrol-deep: #051a20;
  --lime-1: #eaff9a;
  --lime-2: #c7f91a;
  --lime-3: #8fb800;
  --white: #ffffff;
  --text-dim: #9db3ba;

  /* Metal da carcaça: verde-oliva escovado (mesma família do
     osciloscópio real, não o petróleo do TENNIS GAME - a carcaça é
     hardware, o acento lima é que faz a ponte com a identidade). */
  --metal-hi: #333a2c;
  --metal-mid: #232819;
  --metal-lo: #171b10;
  --metal-line: #454d38;
  --phosphor: #7fffb0;
  --phosphor-dim: #3a6b52;
  --crt-bg: #04120a;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(1400px 900px at 50% -10%, #0e1310 0%, #060805 55%, #030403 100%);
  color: var(--white);
  font-family: 'Barlow Condensed', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px 60px;
}
/* Pedido do usuario (2026-09-08): "quero que o layout ocupe a tela
   toda do celular" - em telas estreitas o #device vira a tela inteira
   (sem a margem/padding que sobra preto ao redor no desktop), mas os
   parafusos/cantos decorativos internos continuam existindo (o usuario
   pediu manter eles). */
@media (max-width: 560px) {
  html, body { padding: 0; }
  body { align-items: stretch; width: 100%; }
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* ========================================================= */
/* Corpo do aparelho                                          */
/* ========================================================= */

#device {
  position: relative;
  /* Pedido do usuario (2026-09-08): "mude a interface para 9:16
     deixando a tela sozinha em cima e todo o resto embaixo dela" -
     layout unico (nao so' mobile) em coluna estreita, parecido com um
     celular em pe' - largura maxima baseada em altura de viewport pra'
     favorecer proporcao vertical em telas grandes tambem. */
  width: min(480px, 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 8%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--metal-hi) 0%, var(--metal-mid) 45%, var(--metal-lo) 100%);
  border-radius: 14px;
  padding: 0 0 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 40px 90px -30px rgba(0,0,0,.85),
    0 2px 0 rgba(0,0,0,.6);
}
/* Tela cheia no celular: sem cantos arredondados nem sombra externa
   flutuante (nao faz sentido com o #device colado nas bordas do
   viewport) - os parafusos/screws internos continuam, so' a MOLDURA
   externa do aparelho que some. */
@media (max-width: 560px) {
  #device {
    width: 100%;
    /* Pedido do usuario (2026-09-08): "nao pode ter rolagem" - altura
       TRAVADA (nao min-height) em 100dvh (unidade que desconta a barra
       do navegador mobile, ao contrario de 100vh) + overflow:hidden,
       tudo dentro precisa caber - ver .compact-hide e o resto deste
       bloco pra' como o conteudo foi comprimido pra caber. */
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
  }
}

.screw {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a7a72, #201f18 72%);
  box-shadow: 0 1px 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.5);
}
.screw::after {
  content: ''; position: absolute; left: 16%; top: 46%; width: 68%; height: 1.4px;
  background: rgba(0,0,0,.6); transform: rotate(35deg);
}

/* ---------- chapa superior com a marca ---------- */
.top-plate {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 26px 10px;
}
.top-plate .screw.tl { left: 14px; top: 14px; }
.top-plate .screw.tr { right: 14px; top: 14px; }

.brand { text-align: center; }
.brand-name {
  display: block;
  font-weight: 700; font-size: 22px; letter-spacing: .1em;
  color: #d9e8d2;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 14px rgba(127,255,176,.08);
}
.brand-model {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .08em; color: #7c8a72; margin-top: 2px;
}

.power-led {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 6px 2px rgba(127,255,176,.85), inset 0 0 2px rgba(0,0,0,.4);
}

/* ---------- corpo principal: tela sozinha em cima, resto embaixo ----------
   Pedido do usuario (2026-09-08): layout 9:16 fixo, nao so' responsivo -
   `.chassis` sempre em coluna (tela primeiro, depois os paineis). */
.chassis {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 22px 0;
}

/* ===== Tela CRT do organismo ===== */
.crt-bay { min-width: 0; }

.crt-frame {
  position: relative;
  background: linear-gradient(160deg, #0f120c, #070804);
  border-radius: 10px;
  padding: 14px 14px 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 6px 18px rgba(0,0,0,.7),
    0 1px 0 rgba(255,255,255,.04);
}

#box-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--crt-bg);
  box-shadow:
    inset 0 0 0 3px #0a2015,
    inset 0 0 40px 10px rgba(0,0,0,.8);
  /* Buffer real do canvas e' sempre 720x720 - CSS so' controla
     tamanho de EXIBICAO, preservando proporcao quadrada mesmo em
     viewports estreitas (ver historico: distorcia sem isso).
     Layout 9:16 (2026-09-08): a tela ocupa a largura toda disponivel
     do dispositivo, sem mais dividir espaco com uma coluna lateral. */
  width: min(440px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

#box-wrap canvas {
  display: block;
  cursor: crosshair;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Grade de calibracao do osciloscopio, por CIMA do canvas - decorativa,
   nao intercepta clique (pointer-events:none). */
.crt-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(rgba(127,255,176,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,255,176,.07) 1px, transparent 1px),
    linear-gradient(rgba(127,255,176,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,255,176,.14) 1px, transparent 1px);
  background-size: 12.5% 12.5%, 12.5% 12.5%, 50% 50%, 50% 50%;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
}
.crt-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 60px 16px rgba(0,0,0,.55);
}
.crt-sheen {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 16%, transparent 30%);
}

.crt-caption {
  display: flex; justify-content: space-between;
  padding: 8px 4px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .06em; color: var(--phosphor-dim);
}

/* ===== Painéis abaixo da tela: mostrador + potenciometros =====
   Layout 9:16 (2026-09-08): nao e' mais coluna lateral, e' o bloco
   inteiro logo abaixo da tela, largura total do dispositivo. */
.control-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -- mostrador digital secundario -- */
.readout-panel {
  position: relative;
  background: linear-gradient(160deg, #171b10, #0e100a);
  border-radius: 8px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.4);
}
.readout-label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 9px; letter-spacing: .1em; color: #7c8a72; margin-bottom: 6px;
  /* padding-left maior que o `.corner-screw.tl` (left:6px, 10px de
     diametro) - senao a primeira silaba do rotulo nasce embaixo dele. */
  padding: 0 2px 0 18px;
  gap: 6px;
}
.readout-label > span:first-child { flex-shrink: 0; }

.readout-glass {
  background: var(--crt-bg);
  border-radius: 4px;
  padding: 9px 10px;
  box-shadow: inset 0 0 0 2px #0a2015, inset 0 3px 10px rgba(0,0,0,.7);
}
.readout-line {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--phosphor);
  text-shadow: 0 0 4px rgba(127,255,176,.5);
  padding: 2.5px 0;
  letter-spacing: .01em;
}
.readout-line span:nth-child(2) { flex: 1; color: #bcd9c8; }
.readout-line .mono { color: var(--phosphor); font-weight: 700; font-variant-numeric: tabular-nums; }
.readout-line .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 3px currentColor; }
.readout-line.total-deaths {
  border-top: 1px dashed rgba(127,255,176,.25); margin-top: 4px; padding-top: 6px;
}
/* Pedido do usuario (2026-09-07): "nivel 1 junto com tempo da fase tem
   que vir la em cima da telemetria" - linha de tempo + barra regressiva
   dentro do MESMO painel/estetica CRT das outras linhas, logo abaixo do
   NIVEL, antes do TOTAL. */
.level-time-line { padding-bottom: 1px; }
.top-level-timer-bar {
  margin: 0 0 5px; height: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}

/* -- potenciometros -- */
.knob-panel {
  background: linear-gradient(160deg, rgba(255,255,255,.03), transparent);
  border-radius: 8px;
  padding: 10px 6px;
  display: flex;
  justify-content: space-around;
}
.knob-group {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.knob-wrap { width: 52px; height: 52px; position: relative; }
.knob {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  z-index: 2; /* fica ACIMA do `.sr-slider` real - captura o drag/roda do
                 mouse; o slider por baixo continua focavel e operavel
                 por teclado (Tab + setas) mesmo escondido atras. */
  cursor: grab;
  background: radial-gradient(circle at 32% 26%, #5c5c56, #232320 55%, #131311);
  box-shadow:
    0 4px 6px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -3px 4px rgba(0,0,0,.6);
  touch-action: none;
}
.knob:active { cursor: grabbing; }
.knob::before {
  /* anel de referencia (escala) ao redor do knob */
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  background:
    repeating-conic-gradient(from -132deg,
      rgba(220,216,200,.55) 0deg .8deg, transparent .8deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 78%, transparent 79%);
          mask: radial-gradient(circle, transparent 66%, #000 67%, #000 78%, transparent 79%);
}
.knob::after {
  /* ponteiro */
  content: '';
  position: absolute; left: 50%; top: 10%; width: 2.5px; height: 36%;
  background: #e4dfc9; border-radius: 2px;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--knob-angle, -132deg));
  box-shadow: 0 0 2px rgba(0,0,0,.7);
}
.knob-cap {
  font-size: 10px; letter-spacing: .08em; color: var(--text-dim); text-align: center;
}
.knob-readout {
  font-size: 10px; color: var(--lime-2); font-weight: 700;
}

/* input real, mantido pra' acessibilidade/teclado e pra' `main.js`
   continuar ouvindo o MESMO elemento - visualmente invisivel, o
   `.knob` de cima e' so' a representacao. */
.sr-slider {
  position: absolute; inset: 0; width: 100%; opacity: 0;
  z-index: 1;
  -webkit-appearance: none; appearance: none;
  pointer-events: none; /* o `.knob` (z-index 2) e' quem recebe mouse/touch - isto so' fica focavel/operavel por teclado */
}
.knob-wrap:has(.sr-slider:focus-visible) .knob {
  outline: 2px solid var(--lime-2);
  outline-offset: 3px;
}

/* -- esquema de cores + audio -- */
.switch-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.03), transparent);
  border-radius: 8px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.panel-caption {
  font-size: 9px; letter-spacing: .1em; color: #7c8a72;
  /* mesma razao do `.readout-label` acima - limpar o `.corner-screw.tl`. */
  padding-left: 16px;
}
/* Pedido do usuario (2026-09-07): "deixa a escolha de cores bem mais
   minimalista e discreta" - trocado de uma "chapa" cheia (gradiente +
   borda + sombra interna) por um texto simples, sem moldura propria;
   so' aparece contorno/realce no hover/focus, pra' nao competir
   visualmente com o resto do painel de controles. */
.scheme-mini {
  display: flex; align-items: baseline; gap: 6px;
  cursor: pointer;
}
.scheme-mini-cap {
  font-size: 9px; letter-spacing: .1em; color: #5c6854; text-transform: uppercase;
}
.scheme-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: #a9b89f;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .04em;
  padding: 1px 2px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.scheme-select:hover,
.scheme-select:focus-visible { color: #d9e8d2; border-bottom-color: var(--metal-line); outline: none; }

.toggle-switch {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin-top: 2px;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 34px; height: 16px; border-radius: 9px; position: relative; flex-shrink: 0;
  background: linear-gradient(180deg, #1a1e12, #0e100a);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: box-shadow .15s;
}
.toggle-knob {
  position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #7a7a72, #2a2a24 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.toggle-switch input:checked + .toggle-track .toggle-knob {
  transform: translateX(18px);
  background: radial-gradient(circle at 32% 26%, #eaffc0, var(--lime-2) 65%, var(--lime-3));
  box-shadow: 0 0 6px rgba(199,249,26,.8);
}
.toggle-cap { font-size: 10px; letter-spacing: .07em; color: var(--text-dim); }

/* -- status do orgao vital (nucleo/parede) --
   Preenche o espaco que sobrava vazio na coluna de controles (achado
   numa 1a inspecao visual, 2026-09-07) com informacao que ja existia
   nos dados da simulacao (`sim.metastasisBoost`, `sim.nucleusCellIds`)
   mas nao tinha NENHUM indicador na interface ate' agora. */
.organ-status-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.03), transparent);
  border-radius: 8px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; /* ocupa o espaco restante da coluna - resolve o vazio */
}
.organ-gauge {
  height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #10140b, #060802);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden;
}
.organ-gauge-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--lime-3), var(--lime-2));
  box-shadow: 0 0 6px rgba(199,249,26,.6);
  transition: width .4s ease, background .4s ease;
}
.organ-gauge-fill.danger {
  background: linear-gradient(90deg, #8a2a2a, #ff2d55);
  box-shadow: 0 0 8px rgba(255,45,85,.7);
}
.organ-status-lines { display: flex; flex-direction: column; gap: 4px; }
.organ-status-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; color: var(--text-dim); letter-spacing: .04em;
}
.organ-status-line .mono { color: var(--lime-2); font-weight: 700; font-size: 10px; }
.organ-status-line .mono.danger { color: #ff5b7a; }

.organ-led-row {
  display: flex; gap: 6px; margin-top: auto; padding-top: 4px;
}
.organ-led {
  flex: 1; height: 5px; border-radius: 2px;
  background: linear-gradient(180deg, #101a10, #0a0e08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.organ-led.lit {
  background: linear-gradient(180deg, var(--lime-1), var(--lime-2));
  box-shadow: 0 0 6px rgba(199,249,26,.7), inset 0 1px 1px rgba(255,255,255,.3);
}
.organ-led.lit.breached {
  background: linear-gradient(180deg, #ff8a9a, #ff2d55);
  box-shadow: 0 0 6px rgba(255,45,85,.7), inset 0 1px 1px rgba(255,255,255,.3);
}
.organ-led-caption {
  font-size: 8.5px; letter-spacing: .06em; color: #5c665f; text-align: center;
}

/* ========================================================= */
/* Faixa inferior: ferramentas + acoes                        */
/* ========================================================= */
.bottom-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 22px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Pedido do usuario (2026-09-07): "ESQUEMA D COR E AUDIO vao pro
   rodape, junto com pausar e reiniciar" - grupo discreto (sem chapa
   propria, ja' minimalista desde a mudanca anterior de `.scheme-mini`),
   simetrico ao `.action-bank` do outro lado do rodape. */
.scheme-audio-bank {
  display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}

.tool-bank {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.panel-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  position: relative;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #3a4230, #1c2116);
  border: 1px solid var(--metal-line);
  border-radius: 5px;
  color: #d9e8cf;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 11px 6px 9px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -6px 10px rgba(0,0,0,.25);
  transition: transform .08s, box-shadow .08s, background .12s;
}
.panel-btn:hover { filter: brightness(1.12); }
.panel-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.panel-btn.active {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--lime-1), var(--lime-2));
  color: var(--petrol-deep);
  border-color: var(--lime-3);
  box-shadow: 0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5), 0 0 14px rgba(199,249,26,.4);
}

/* LED de verdade: SEMPRE mostra a cor da ferramenta (nao so' quando
   ativo) - achado numa checagem visual (2026-09-07): usar a MESMA cor
   lima do botao.active pro LED fazia ele desaparecer contra o proprio
   fundo lima do botao selecionado (LED e fundo ficavam identicos). Em
   vez disso, o LED e' a identidade visual FIXA da ferramenta (mesma cor
   usada no jogo pra' aquele tipo de celula/remedio) - com um anel escuro
   proprio (`box-shadow` interno) garantindo contraste em QUALQUER
   fundo, inclusive o lima do estado ativo. O estado ativo continua
   comunicado pelo fundo do botao inteiro, nao pelo LED sozinho. */
.btn-led {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--led-color, var(--lime-2));
  box-shadow:
    0 0 0 2px rgba(0,0,0,.45),
    0 0 5px 1px var(--led-color, var(--lime-2)),
    inset 0 0 2px rgba(255,255,255,.5);
}
.panel-btn:not(.active) .btn-led { opacity: .55; box-shadow: 0 0 0 2px rgba(0,0,0,.45), inset 0 1px 1px rgba(0,0,0,.4); }

.action-bank {
  display: flex; gap: 8px; flex-shrink: 0;
}

/* Pedido do usuario (2026-09-07): "reiniciar e iniciar/reiniciar devem
   ser um pouco mais minimalistas e discretos, com botoes que parecam
   da maquina, integrados ao design do restante do device" - trocado o
   volume "chapa alta" (gradiente forte + sombra de 3px + borda clara)
   por uma placa fina GRAVADA no proprio chassi (fundo quase igual ao
   painel ao redor, so' uma sombra interna sutil - como um botao
   fisico rebaixado, nao "flutuando" por cima). */
.rocker-btn {
  background: linear-gradient(180deg, #2b3122, #1a1e13);
  border: 1px solid var(--metal-line);
  border-radius: 4px;
  color: #b9c8ae;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.05);
  transition: filter .1s, box-shadow .08s, color .1s;
}
.rocker-btn:hover { filter: brightness(1.2); color: #d9e8cf; }
.rocker-btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.75); }
.rocker-btn.danger {
  color: #b98077;
}
.rocker-btn.danger:hover { color: #f3d9d0; }
/* Pedido do usuario (2026-09-07): botao de reiniciar CAMPANHA
   (diferente de reiniciar so' o nivel) tem que ser discreto - menor,
   opacidade reduzida, sem cor de alerta - pra nao ser confundido com
   o REINICIAR comum nem convidar clique acidental. */
.rocker-btn.subtle {
  font-size: 8px;
  padding: 6px 10px;
  opacity: .55;
}
.rocker-btn.subtle:hover { opacity: .9; }

/* ========================================================= */
/* Grade de ventilacao decorativa (base)                      */
/* ========================================================= */
.vent-strip {
  height: 8px;
  margin: 14px 22px 0;
  background: repeating-linear-gradient(90deg, #0c0f08 0 3px, transparent 3px 7px);
  border-radius: 2px;
  opacity: .8;
}

/* ========================================================= */
/* Modo de jogo: mira, ataque (Ondas/Niveis), banco de modo   */
/* Pedido do usuario (2026-09-07): "um dial faz girar no      */
/* perimetro da tela um marcador que e' de onde vai vir a     */
/* infeccao" + dois modos de jogo pra' comparar.               */
/* ========================================================= */

/* Marcador de mira - posicionado via JS (`main.js`) com left/top em %
   sobre `#box-wrap` (que e' sempre position:relative e overflow:hidden -
   ver regra existente), acompanhando o giro do dial de mira. Pedido do
   usuario (2026-09-07): "quero um pequena seta (triangulo) esverdeada
   com metade da opacidade assim como a cor de elementos que ja tem na
   tela e nao uma bola vermelha" - triangulo pequeno na cor fosforo
   verde (mesma familia da grade/traco do osciloscopio, `--phosphor`),
   50% opacidade, apontando pra' DENTRO do box (rotacao setada via JS
   com base no angulo de mira, `transform:rotate(...)`) - reforca "aqui
   e' a entrada da infeccao" sem chamar tanta atencao quanto um circulo
   vermelho solido. */
/* Pedido do usuario (2026-09-07, segunda rodada): "a seta da mira...
   continua saindo pra fora da tela ficando sem visibilidade, e ela tem
   que ser o dobro do tamanho" - dobrado de 7/10px pra 14/20px (e o
   inset em `main.js:AIM_MARKER_INSET` aumentado de 16 pra 28px pra' o
   triangulo maior continuar cabendo inteiro dentro do box). */
/* Pedido do usuario (2026-09-07, terceira rodada): "continua saindo pra
   fora da tela" - o bug real (achado por validacao Playwright com
   medicao geometrica): o `transform-origin` antigo (`50% -10px`) NAO
   coincidia com o ponto de ancoragem (`left`/`top`, calculado em
   `main.js`) - ficava deslocado ~20px dele. Rotacionar em torno de um
   pivot fora do ponto de ancoragem faz o triangulo "orbitar" numa volta
   de ate' ~53px de raio ao redor do ponto real, nao girar no lugar -
   e' por isso que aumentar so' o INSET (empurrar o ponto de ancoragem
   pra' dentro) nunca resolvia de vez: o pior caso girava pra' FORA de
   novo em certos angulos. Corrigido fazendo o `border-top` (ponta do
   triangulo, que fica embaixo por padrao) ficar exatamente NO ponto de
   ancoragem (sem margin-top deslocando), com `transform-origin: 50%
   0%` (topo do elemento = a propria ponta) - agora o triangulo gira
   OLHANDO para o ponto de mira sem nenhum braco de alavanca extra, e
   o inset (`AIM_MARKER_INSET`) volta a ser a folga real e unica que
   importa. */
#aim-marker {
  position: absolute;
  z-index: 5;
  width: 0; height: 0;
  margin-left: -14px; /* centraliza a BASE do triangulo no eixo horizontal */
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 20px solid var(--phosphor); /* ponta pra' CIMA (ver rotacao 180deg em main.js) */
  opacity: 0.5;
  filter: drop-shadow(0 0 4px rgba(127,255,176,.6));
  pointer-events: none;
  transform-origin: 50% 100%; /* pivot EXATAMENTE na ponta do triangulo = o ponto de ancoragem */
}

.attack-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.03), transparent);
  border-radius: 8px;
  padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.attack-panel .panel-caption { align-self: flex-start; }
.attack-panel .knob-group { margin: 2px 0; }

/* Pedido do usuario (2026-09-07, ultima rodada): "organize melhor
   esses 4 circulos que o formam, distribua melhor e igualmente
   simetricamente esses 4 circulos (1 botao, 2 knobs e 1 relogio)
   dentro do espaco reservado" - grid 2x2 SIMETRICO substitui o layout
   assimetrico anterior (coluna dial+velocidade vs. coluna deploy+
   relogio, com alturas/gaps diferentes): agora as 4 celulas tem
   exatamente a MESMA "forma" (circulo + legenda abaixo, mesmo grid-gap
   em ambos os eixos). */
/* Bug real (2026-09-07, ultima rodada): "quando eu aperto o deploy, o
   pointerdown afeta todo o layout dos 4 botoes" - `#deploy-status`
   troca de texto CURTO ("PRONTO") pra' texto LONGO ("SEGURE PARA
   DISPARAR", "TEMPO ESGOTADO - CLIQUE PARA TENTAR DE NOVO") a cada
   mudanca de estado do deploy - como as colunas do grid sao `1fr`
   (largura definida pelo conteudo MAIS LARGO da coluna), um texto
   comprido alargava a coluna inteira e reposicionava os OUTROS 3
   circulos junto. Corrigido dando LARGURA FIXA a cada celula (a
   coluna nao pode mais crescer com o conteudo) - o texto de status
   quebra linha dentro dessa largura em vez de esticar o grid. */
.command-grid {
  display: grid;
  grid-template-columns: repeat(2, 88px);
  gap: 18px 28px;
  justify-items: center;
  padding: 4px 8px;
}
.command-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%;
}
.command-cell-cap {
  font-size: 9px; letter-spacing: .06em; color: var(--text-dim); text-align: center;
}
/* Pedido do usuario (2026-09-07): "o nome mira precisa vir um pouco
   mais pra baixo pois esta sobrepondo os pontos cardeais" - os
   marcadores S/SO/SE (`.dial-cardinal`) se estendem ate' ~13px ABAIXO
   do proprio `.aim-dial-wrap` (58px de altura) - o `gap:4px` padrao do
   `.command-cell` nao dava folga suficiente antes da legenda "MIRA"
   comecar. Empurrado com uma margem extra so' nesta legenda. */
.command-cell-cap.aim-cap { margin-top: 12px; }

/* Dial de mira: mesma base visual do `.knob` generico (potenciometro),
   so' um pouco maior (e' a decisao PRINCIPAL do turno) e SEM o anel de
   escala em graus curto (`.knob::before` generico) - a mira gira 360°
   completos, entao o anel decorativo original (calibrado pra' ±132°)
   nao faz sentido aqui.
   Pedido do usuario (2026-09-07): "o knob da mira tem que girar
   inteiro 'fisicamente' e nao soh o triangulo, o triangulo e' um
   marcador fixo na borda do knob giratorio" - diferente do `.knob`
   generico (so' o PONTEIRO `::after` gira, o corpo do disco fica
   parado), aqui e' o DISCO INTEIRO (`.aim-dial`) que gira via
   `--knob-angle` - o triangulo (`::after`) fica sem rotacao PROPRIA,
   so' acompanha o disco pai (fixo relativo a ele, como gravado na
   borda de um disco de verdade). */
/* Pedido do usuario (2026-09-07, ultima rodada): "talvez diminuir 10%
   dos dois botoes principais maiores" (dial de mira e DEPLOY) - 64px
   -> 58px (~9.4%, o "10%" pedido). */
.aim-dial-wrap { width: 58px; height: 58px; position: relative; }
.aim-dial::before { display: none; }
.aim-dial {
  /* Cor base SOLIDA (sem gradiente aqui) - o brilho especular vive
     num elemento SEPARADO por cima (`.aim-dial-wrap::after`) que NAO
     gira, ver comentario la' embaixo. */
  background: #3a3a35;
  /* Pedido do usuario (2026-09-07): "o knob que gira tem uma sombra que
     esta girando com ele, e assim como o brilho essa sombra nao
     deveria girar, e isso vale pra todo botao que gira" - o `box-shadow`
     herdado do `.knob` generico (projecao + volume) girava junto por
     estar no MESMO elemento que tem o `transform:rotate()`. Removido
     daqui, recriado como um pseudo-elemento FIXO no wrap
     (`.aim-dial-wrap::before`, abaixo, embaixo do disco) - mesma tecnica
     ja' usada pro brilho, so' que por BAIXO (z-index menor) em vez de
     por cima. */
  box-shadow: none;
  transform: rotate(var(--knob-angle, 0deg));
}
.aim-dial-wrap::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow:
    0 4px 6px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -3px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 1; /* abaixo do `.aim-dial` (z-index:2) - so' da' o volume, nao intercepta clique */
}
/* Pedido do usuario: "quando gira o knob da mira, ele tem um brilho em
   degrade, que gira junto e fica muito falso, porque na vida real o
   brilho nao giraria junto com o knob" - fisicamente correto: a fonte
   de luz e' fixa no AMBIENTE, entao o reflexo especular tem que ficar
   parado enquanto o disco gira por baixo dele. Este pseudo-elemento
   vive no WRAP (que nunca gira, so' o `.aim-dial` filho gira) e fica
   por CIMA, desenhando o mesmo brilho de sempre mas sem herdar a
   rotacao. */
.aim-dial-wrap::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.28), transparent 55%);
  pointer-events: none;
  z-index: 3; /* acima do `.aim-dial` (z-index:2, definido no `.knob` generico) e do triangulo `::after` dele */
}
/* Pedido do usuario: "ele tem um marcador setinha vermelha" - depois
   refinado: "a seta e' bem pequena e minimalista, apenas um pequeno
   triangulo" - so' a PONTA (triangulo isoceles pequeno) perto da borda
   do dial, sem a "haste" da 1a versao, e SEM transform proprio (herda
   a rotacao do disco pai, nao gira sozinho). */
.aim-dial::after {
  top: 6%;
  width: 9px; height: 8px;
  left: 50%;
  transform: translateX(-50%); /* sem `rotate()` - o disco pai (`.aim-dial`) e' quem gira */
  background: #ff2d55;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 4px rgba(255,45,85,.85);
}

.mode-controls {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

/* Alavanca de INTENSIDADE (2026-09-07): "coloque como uma alavanca
   pequena na vertical com regua (marcações) tipo um acelerador de
   aviao" - regua numerada 5→1 (de cima pra baixo) ao lado de um
   trilho vertical com um cabo (`.throttle-handle`) que desliza. */
.throttle-group {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 84px;
}
.throttle-scale {
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: #5c665f;
  padding: 2px 0;
}
.throttle-track {
  position: relative;
  width: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #10140b, #060802);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 2px 6px rgba(0,0,0,.6);
  cursor: pointer;
}
.throttle-rail {
  position: absolute;
  left: 50%; top: 6px; bottom: 6px;
  width: 2px;
  margin-left: -1px;
  background: #2a3222;
  border-radius: 1px;
}
.throttle-handle {
  position: absolute;
  left: 50%;
  bottom: 0%; /* controlado via JS (`ui-knobs.mjs`, `initThrottle`) */
  width: 26px; height: 14px;
  margin-left: -13px; margin-bottom: -7px; /* centraliza o cabo no ponto do valor */
  border-radius: 3px;
  background: linear-gradient(180deg, #5c5c56, #232320 60%, #131311);
  box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.5);
  cursor: grab;
  touch-action: none;
  transition: bottom .08s linear; /* suaviza o "salto" entre degraus (intensidade e' inteira, 1-5) */
}
.throttle-handle:active { cursor: grabbing; }
.throttle-handle::after {
  /* friso central do cabo, textura de grip */
  content: '';
  position: absolute; left: 15%; right: 15%; top: 50%; height: 3px;
  margin-top: -1.5px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 3px);
}
/* Input real invisivel, mantido so' pra acessibilidade/teclado (Tab +
   setas) - o `.throttle-handle` visual e' quem recebe mouse/touch. */
.throttle-sr {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  pointer-events: none;
  writing-mode: vertical-lr;
}

/* Botao de DEPLOY: pedido do usuario (2026-09-07) - "deixe o botao
   atacar com mais cara de botao de maquina, pode ser menor e redondo" -
   circular, tipo botao de disparo de painel industrial (aro metalico
   biselado + capsula vermelha central), em vez do retangulo largo
   generico anterior. O texto de STATUS ("recarregando"/"onda em
   curso"/etc) mora num `<span class="deploy-status">` A PARTE (ver
   HTML) - o botao em si sempre mostra so' "DEPLOY", curto o bastante
   pra caber no circulo em qualquer estado. */
/* Pedido do usuario (2026-09-07, ultima rodada): "talvez diminuir 10%
   dos dois botoes principais maiores" - 68px -> 61px (~10.3%). */
.deploy-btn {
  width: 61px; height: 61px;
  border-radius: 50%;
  position: relative;
  border: none;
  cursor: pointer;
  /* aro metalico biselado */
  background: radial-gradient(circle at 50% 42%, #5a5a54 0%, #2c2c28 62%, #1a1a17 100%);
  box-shadow:
    0 4px 0 rgba(0,0,0,.6),
    0 6px 10px rgba(0,0,0,.5),
    inset 0 2px 2px rgba(255,255,255,.25),
    inset 0 -3px 4px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s, filter .1s;
}
.deploy-btn::before {
  /* capsula vermelha central, afundada dentro do aro */
  content: '';
  position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ff6b7f, #b0203a 55%, #6b0f22 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.35), inset 0 -4px 6px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.4);
}
.deploy-btn span {
  position: relative; z-index: 1;
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .06em;
  color: #ffe4e8;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.deploy-btn:hover:not(:disabled)::before { filter: brightness(1.12); }
.deploy-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.5);
}
.deploy-btn:disabled { opacity: .45; cursor: not-allowed; }
.deploy-btn:disabled::before { filter: grayscale(.6); }

/* Pedido do usuario (2026-09-07): "tire esse nome ORCAMENTO... ao
   redor do botao DEPLOY terao varios pequenos leds que acenderao ou
   apagarao conforme a quantidade de celulas (municao), comeca todas
   acesas e vao se apagando conforme vai gastando" + "apenas o numero
   da contagem da municao permanece e vai para debaixo do botao
   deploy, discreto" - `.deploy-status` (texto de status variavel, que
   causava o bug de layout do grid) foi substituido por: (1)
   `.ammo-ring`, anel de LEDs fixos gerados por JS
   (`main.js:ensureAmmoLeds`) ao redor do `.deploy-btn`, cada um
   posicionado por `--led-angle` (custom property por LED); (2)
   `.ammo-count`, so' o numero cru, discreto, embaixo do botao. */
.deploy-cell { position: relative; }
.ammo-ring {
  position: absolute;
  top: 0; left: 50%;
  width: 61px; height: 61px; /* mesmo tamanho do .deploy-btn - o anel fica JUSTO ao redor dele */
  transform: translateX(-50%);
  pointer-events: none;
}
.ammo-led {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #3a4a3a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  /* raio do anel = metade do deploy-btn + um pouco de folga (fica
     "colado" na borda externa do aro metalico) */
  transform: rotate(var(--led-angle)) translateY(-38px);
}
.ammo-led.lit {
  background: var(--phosphor);
  box-shadow: 0 0 3px 1px rgba(127,255,176,.85);
}
.ammo-count {
  font-size: 11px; letter-spacing: .04em; color: var(--text-dim); text-align: center;
  font-weight: 700;
}

.cooldown-bar, .level-timer-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #10140b, #060802);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden;
}
.cooldown-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff6b85, #ff2d55);
  transition: width .15s linear;
}

/* Relogio analogico de cooldown (modo Ondas, 2026-09-07): "quero
   aqueles classico, fundo branco, ponteiro vermelho, marcadores preto,
   ponteiro pequeno estilo seta triangulo alongada" - mostrador de
   relogio de parede/cozinha de verdade, nao mais um painel escuro
   high-tech (1a versao rejeitada). `--cooldown-frac` (0 a 1) continua
   setado via JS a cada frame (`main.js`) e controla so' a ROTACAO do
   ponteiro - o fundo branco e os 12 marcadores pretos sao fixos,
   decorativos (nao mudam com o cooldown). */
.cooldown-clock {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* Pedido do usuario (2026-09-07, ultima rodada): "distribua melhor e
   igualmente simetricamente esses 4 circulos (1 botao, 2 knobs e 1
   relogio)" - aumentado de 34 pra 44px pra' ficar mais proximo em
   escala visual do knob de velocidade (52px) dentro do grid 2x2, sem
   competir tamanho com os dois circulos PRINCIPAIS (mira/deploy,
   ~58-61px). */
.cooldown-clock-face {
  --cooldown-frac: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  position: relative;
  background: #f4f2ea; /* branco levemente marfim - nunca puro #fff, combina com o resto do painel sem destoar */
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 0 0 2px #1a1a18, inset 0 -1px 2px rgba(0,0,0,.15);
}
.cooldown-clock-face::before {
  /* 12 marcadores pretos ao redor do mostrador, tipo relogio de
     parede classico - `repeating-conic-gradient` desenha os 12 tracos
     de uma vez, sem precisar de 12 elementos. */
  content: '';
  position: absolute; inset: 2px; border-radius: 50%;
  background: repeating-conic-gradient(#1a1a18 0deg 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%, #000 92%, transparent 93%);
          mask: radial-gradient(circle, transparent 78%, #000 79%, #000 92%, transparent 93%);
}
.cooldown-clock-hand {
  /* Ponteiro vermelho fino, TRIANGULAR alongado (nao um retangulo
     simples) - `clip-path` afunila a ponta, como o ponteiro dos
     segundos de um relogio classico. */
  position: absolute; left: 50%; top: 14%; width: 5px; height: 38%;
  margin-left: -2.5px;
  background: #d4342a;
  clip-path: polygon(50% 0%, 100% 85%, 50% 100%, 0% 85%);
  transform-origin: bottom center;
  transform: rotate(calc(var(--cooldown-frac) * 360deg));
}
.cooldown-clock-face::after {
  /* pino central do ponteiro */
  content: '';
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
  margin-left: -2px; margin-top: -2px;
  border-radius: 50%;
  background: #1a1a18;
}
.cooldown-clock-label {
  font-size: 9px; letter-spacing: .04em; color: var(--lime-2);
}
.level-timer-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--lime-3), var(--lime-2));
  transition: width .15s linear, background .3s;
}
.level-timer-fill.danger {
  background: linear-gradient(90deg, #8a2a2a, #ff2d55);
}
.level-timer-label, .level-budget-label {
  font-size: 11px; color: var(--lime-2); align-self: center;
}

.mode-bank {
  display: flex; align-items: center; gap: 8px;
}
.mode-bank .panel-caption { margin-right: 2px; }
.mode-bank .panel-btn { flex: 0 0 auto; min-width: 120px; }

/* ========================================================= */
/* Camada extra de detalhe "maquina cientifica" (2026-09-07)  */
/* Pedido do usuario: "adicione mais uma camada de detalhe em */
/* toda a interface para parecer mais real, para que pareca   */
/* uma maquina cientifica" - parafusos em todo painel, etiqueta */
/* de serie, regua de calibracao decorativa, tags de canto na  */
/* tela CRT, indicador de "sinal vivo" piscando.               */
/* ========================================================= */

/* Parafuso generico reposicionavel em qualquer canto de
   qualquer painel com `position:relative` - reusa o `.screw` ja'
   existente (mesmo visual da chapa superior), so' adiciona a
   posicao conforme o canto. */
.corner-screw.tl { left: 6px; top: 6px; }
.corner-screw.tr { right: 6px; top: 6px; }
.corner-screw.bl { left: 6px; bottom: 6px; }
.corner-screw.br { right: 6px; bottom: 6px; }

.serial-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: .02em;
  color: #4a5a4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* deixa o flex encolher este item em vez de estoura-lo pra fora do painel */
  margin-right: 10px; /* evita que o ultimo digito fique atras do parafuso decorativo do canto */
}

/* Regua de calibracao decorativa - fileira de tracos finos, tipo
   escala impressa de instrumento, acima do console de disparo. */
.calibration-ruler {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 10px;
  padding: 0 4px;
}
.calibration-ruler span {
  width: 1.5px; height: 6px;
  background: #4a5a3e;
}
.calibration-ruler span:nth-child(5) { height: 10px; background: #6f8a5a; } /* marca central, um pouco mais alta */

/* Tags de canto na propria tela CRT - como a legenda tecnica
   impressa no vidro de um instrumento de verdade (nome do modelo,
   resolucao) - `pointer-events:none` pra' nao atrapalhar o clique
   no canvas por baixo. */
.crt-corner-tag {
  position: absolute;
  z-index: 4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .06em;
  color: rgba(127,255,176,.35);
  pointer-events: none;
}
.crt-corner-tag.tl { left: 6px; top: 6px; }
.crt-corner-tag.br { right: 6px; bottom: 6px; }

/* Pedido do usuario (2026-09-07): "em volta do knob de mira eu quero
   marcacoes discretas dos pontos cardeais. assim como em volta da tela
   tambem quero marcacoes discretas dos pontos cardeais" - fonte
   discreta (mesma familia mono do resto da telemetria), opacidade
   baixa, so' reforcando a mesma convencao de angulo da mira (0=topo/N,
   sentido horario) sem competir visualmente com o resto do painel. */
.crt-cardinal {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(199, 249, 26, .38);
  pointer-events: none;
  z-index: 4;
}
.crt-cardinal.n { top: 2px; left: 50%; transform: translateX(-50%); }
.crt-cardinal.s { bottom: -1px; left: 50%; transform: translateX(-50%); }
.crt-cardinal.w { left: 4px; top: 50%; transform: translateY(-50%); }
.crt-cardinal.e { right: 4px; top: 50%; transform: translateY(-50%); }
/* Subdivisoes (NE/SE/SO/NO) - perto dos 4 cantos do frame (o box em si
   e' aproximadamente quadrado, entao os cantos do frame ficam bem perto
   da direcao diagonal real de 45/135/225/315deg da mira). */
.crt-cardinal.ne { top: 2px; right: 8px; }
.crt-cardinal.se { bottom: -1px; right: 8px; }
.crt-cardinal.sw { bottom: -1px; left: 8px; }
.crt-cardinal.nw { top: 2px; left: 8px; }

.dial-cardinal {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .05em;
  color: rgba(217, 232, 207, .4);
  pointer-events: none;
  transition: color .1s, text-shadow .1s;
}
/* Pedido do usuario (2026-09-07): "as marcacoes cardeais no knob da
   mira tambem se acendem conforme a agulha esta perto, acende a do
   mais perto" - classe `.lit` alternada via JS (`main.js:
   updateDialCardinalGlow`) no marcador mais proximo do angulo atual da
   mira; mesma cor fosforo verde da seta (`--phosphor`), com glow. */
.dial-cardinal.lit {
  color: var(--phosphor);
  text-shadow: 0 0 5px rgba(127,255,176,.85);
}
.dial-cardinal.n { top: -13px; left: 50%; transform: translateX(-50%); }
.dial-cardinal.s { bottom: -13px; left: 50%; transform: translateX(-50%); }
.dial-cardinal.w { left: -12px; top: 50%; transform: translateY(-50%); }
.dial-cardinal.e { right: -12px; top: 50%; transform: translateY(-50%); }
/* Subdivisoes (NE/SE/SO/NO) - offset diagonal calculado (raio ~40px a
   partir do centro do dial de 64px, sin/cos de 45deg) pra ficarem
   igualmente espacadas entre os 4 pontos principais. */
.dial-cardinal.ne { top: 4px; right: -6px; }
.dial-cardinal.se { bottom: 4px; right: -6px; }
.dial-cardinal.sw { bottom: 4px; left: -6px; }
.dial-cardinal.nw { top: 4px; left: -6px; }

/* LED de "sinal vivo" ao lado do rotulo CH1 - pulsa continuamente
   enquanto a pagina esta' carregada (a simulacao roda o tempo todo,
   exceto pausada - o pulso continua mesmo pausado, e' o "aparelho
   ligado", nao "simulacao avancando" - esse segundo dado ja' esta'
   nos numeros da telemetria). */
.crt-caption-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 4px rgba(127,255,176,.8);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ========================================================= */
/* Telas bem estreitas: bottom-rail tambem empilha            */
/* ========================================================= */
@media (max-width: 420px) {
  .bottom-rail { flex-direction: column; }
}

/* ========================================================= */
/* Mobile sem rolagem (2026-09-08): "nao pode ter rolagem,     */
/* entao tem que ter a tela, e todo o resto bem minimalista   */
/* embaixo dela" - #device virou height:100dvh + overflow:     */
/* hidden (ver acima); aqui: a tela encolhe o quanto precisar  */
/* (flex, nunca estoura), e TUDO abaixo dela fica bem menor -  */
/* padding/gap/fonte reduzidos, telemetria perde as 3 linhas   */
/* menos essenciais (`.compact-hide` - ANOMALIA/APAGANDO/      */
/* MORTES TOTAL, `main.js` continua escrevendo nelas, so' a    */
/* exibicao some). */
@media (max-width: 560px) {
  .top-plate { padding: 8px 16px 4px; }
  .brand-name { font-size: 15px; }
  .brand-model { font-size: 7px; margin-top: 0; }

  .chassis {
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
    padding: 2px 10px 0;
  }

  /* A TELA e' quem manda no espaco (pedido do usuario: "a tela ficou
     minuscula" - antes os paineis pegavam o espaco deles primeiro
     (flex:0 0 auto, dimensao natural) e a tela so' herdava a sobra.
     Invertido: a tela reivindica a maior fatia disponivel (flex-grow
     alto), e' quem os PAINEIS que agora precisam ser espremidos pra'
     caber no que sobrar, nao o contrario. */
  .crt-bay { flex: 10 1 0; min-height: 0; display: flex; }
  .crt-frame { flex: 1 1 auto; padding: 6px 6px 4px; display: flex; flex-direction: column; min-height: 0; width: 100%; }
  /* Pedido do usuario (2026-09-08): "deixa a tela com qualquer altura
     contanto que ocupe toda a tela do celular" - no mobile #box-wrap
     PARA de ser quadrado (era aspect-ratio:1/1, o que limitava a altura
     dele a' propria largura) e preenche TODO o espaco vertical que
     sobrar pra' `.crt-bay`, seja qual for a proporcao resultante. O
     CANVAS por dentro (720x720, fisicamente quadrado) e' quem mantem
     1:1 e fica centralizado - ver `#box-wrap canvas` abaixo -, sobrando
     fundo escuro do CRT (`--crt-bg`, ja existente) nas laterais OU em
     cima/baixo, dependendo de qual dimensao sobrar mais. */
  #box-wrap {
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #box-wrap canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
  }
  .crt-caption { padding: 4px 2px 0; font-size: 7px; }
  .crt-corner-tag { font-size: 7px; }
  .crt-cardinal { font-size: 7px; }

  .control-column { gap: 3px; flex: 0 1 auto; min-height: 0; }

  /* Pedido do usuario (2026-09-08): fundir TELEMETRIA + ORGAO VITAL
     num painel so' - remove o overhead de padding/borda/sombra
     duplicados entre as duas caixas (cada `.readout-panel`/
     `.organ-status-panel` tinha sua propria moldura CRT completa).
     Estrutural (2 `<div>` HTML separados continuam existindo, `main.js`
     escreve nos mesmos ids) - so' a MOLDURA visual e' unificada: o
     ORGAO VITAL perde a propria caixa/sombra/parafusos e vira uma
     continuacao visual dentro da caixa da TELEMETRIA. */
  .readout-panel { padding-bottom: 2px; margin-bottom: 0; }
  .organ-status-panel {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 3px 6px 4px;
    margin-top: -3px; /* cola no painel de cima, sem o gap:3px do control-column */
    border-top: 1px dashed rgba(127,255,176,.2);
  }
  .organ-status-panel .corner-screw { display: none; }

  .compact-hide { display: none; }

  /* Pedido do usuario (2026-09-08): "a tela ficou minuscula" - o
     `.crt-bay` reivindica flex:10, mas so' consegue crescer se o
     "piso" de altura MINIMA da coluna de controles cair bastante -
     flex-shrink sozinho nao comprime `gap`/`padding` herdados do
     desktop, entao TODOS esses valores tiveram que ser reescritos
     explicitamente aqui, nao so' font-size. */
  .readout-panel, .organ-status-panel, .attack-panel { padding: 4px 6px; gap: 3px; }
  .readout-label { font-size: 7px; margin-bottom: 2px; padding-left: 14px; }
  .panel-caption { font-size: 7px; margin-bottom: 2px; padding-left: 12px; }
  .readout-glass { padding: 3px 6px; }
  .readout-line { font-size: 7px; padding: 0.5px 0; gap: 4px; }
  .top-level-timer-bar { height: 2px; margin: 0 0 2px; }

  .organ-gauge { height: 4px; }
  .organ-status-lines { gap: 1px; }
  .organ-status-line { font-size: 7px; }
  .organ-led-row { gap: 3px; padding-top: 2px; }
  .organ-led-caption { font-size: 6px; }

  /* Pedido do usuario (2026-09-08): Central de Comando em 1 linha
     horizontal no mobile (era grid 2x2) - libera bastante altura pra'
     tela do organismo. */
  .command-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
    gap: 4px;
    padding: 2px 4px;
  }
  /* gap um pouco maior que o resto (1px) so' aqui - o relevo 3D do
     `.knob` (sombra/brilho da esfera) "vaza" visualmente alem da caixa
     declarada de 30px e cobria o topo do label VELOCIDADE (achado real
     de validacao). */
  .command-cell { gap: 3px; width: auto; }
  .knob-wrap { width: 30px; height: 30px; }
  .command-cell-cap, .knob-readout, .cooldown-clock-label, .ammo-count { font-size: 6px; }
  .deploy-btn { width: 34px; height: 34px; }
  .cooldown-clock { width: 30px; height: 30px; }
  .calibration-ruler { margin-bottom: 2px; }
  /* O compass ring (`.dial-cardinal`, N/S/L/O ao redor do knob de mira)
     foi calibrado pra' um dial de 64px - em 30px sobrepoe o proprio
     knob e vira ilegivel (achado real de validacao, nao so' estetico).
     Escondido so' no mobile - a mira continua funcionando por toque/
     arraste, so' perde a legenda visual dos pontos cardeais. */
  .dial-cardinal { display: none; }
  /* Pedido do usuario (2026-09-08): simplificar CENTRAL DE COMANDO no
     mobile - remove os nomes dos controles (MIRA/VELOCIDADE), ja'
     reconheciveis pela posicao/icone/valor ao lado; ganha mais altura
     pra' tela do organismo. `.knob-readout`/`.cooldown-clock-label`/
     `.ammo-count` (os VALORES, 1.0x/28.0s/50) continuam visiveis. */
  .command-cell-cap { display: none; }

  .bottom-rail { padding: 3px 6px; gap: 4px; }
  /* Pedido do usuario (2026-09-08): rodape so' com os controles, sem
     os rotulos ESQUEMA/AUDIO - o dropdown/toggle continuam
     reconheciveis sozinhos (o dropdown ja mostra o valor escolhido). */
  /* "esquema" pode sumir (o dropdown ja' mostra o valor escolhido,
     ex: "oficial") - mas o toggle de audio e' so' um switch sem icone,
     sem o texto ninguem adivinha o que ele controla (achado de
     validacao) - AUDIO fica. */
  .scheme-mini-cap { display: none; }
  .toggle-cap { font-size: 6px; }
  /* alvo de toque real (nao so' visual) - min-height sobe pra' perto
     do minimo recomendado (~40px) sem estourar o padding vertical do
     texto, que continua compacto. */
  .rocker-btn { padding: 3px 8px; font-size: 7px; min-height: 34px; }
}