/* Painel de Gráficos e desempenho (configuração do jogador).
   Folha separada: css/style.css está no teto do gate de tamanho de arquivo. */

.gfx-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.gfx-legend { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .05em; }

.gfx-preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gfx-preset {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  cursor: pointer;
}
.gfx-preset.active {
  border-color: rgba(255, 200, 90, .8);
  background: rgba(255, 200, 90, .18);
}
.gfx-detected { font-size: 11px; opacity: .65; margin-top: 4px; }

.gfx-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}
.gfx-group { border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 6px 8px; }
.gfx-group-head {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 4px;
}
.gfx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 2px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.gfx-row:first-of-type { border-top: none; }
.gfx-row-text { font-size: 12px; line-height: 1.35; }
.gfx-row-desc { opacity: .7; font-size: 11px; }
.gfx-row select { font-size: 12px; padding: 3px 5px; flex: none; min-width: 108px; }

.gfx-fps {
  font-size: 11px;
  opacity: .85;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .3);
}