:root {
  --ink: #e6edf3;
  --ink-dim: #93a1b1;
  --ciano: #39e6ff;
  --painel: rgba(6, 10, 16, 0.62);
  --linha: rgba(255, 255, 255, 0.10);
  --r: 3px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #000; color: var(--ink); overflow: hidden;
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; touch-action: none;
}
canvas#cena { display: block; width: 100%; height: 100%; outline: none; }

.ui { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.ui > * { pointer-events: auto; }
.ui[hidden] { display: none; }

.topo { position: absolute; top: 14px; left: 16px; max-width: min(70vw, 520px); }
.topo h1 { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; text-shadow: 0 0 12px rgba(57, 230, 255, 0.35); }
.topo p { color: var(--ink-dim); font-size: 12px; margin-top: 2px; }

.barra {
  /* acima dos créditos, com a altura deles medida pelo app (--creditos-h) */
  position: absolute; left: 50%; bottom: calc(var(--creditos-h, 34px) + 20px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 9px 12px; max-width: calc(100vw - 24px);
}
.barra button {
  font: 600 12px/1 inherit; font-family: inherit; color: #04121a; background: var(--ciano);
  border: 0; border-radius: var(--r); padding: 8px 12px; cursor: pointer; min-width: 96px;
}
.barra button:hover { filter: brightness(1.1); }
.campo { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.campo output { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 72px; text-transform: none; letter-spacing: 0; font-size: 12px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 160px; height: 22px; background: transparent; cursor: ew-resize; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255,255,255,0.22); border-radius: 1px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 8px rgba(57,230,255,0.6); }
input[type=range]::-moz-range-track { height: 2px; background: rgba(255,255,255,0.22); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ciano); }

.dica { position: fixed; right: 16px; top: 16px; color: var(--ink-dim); font-size: 11px; opacity: 0.8; transition: opacity 0.6s; white-space: nowrap; }
.dica.off { opacity: 0; }

.creditos {
  position: absolute; left: 12px; bottom: 10px; max-width: min(78vw, 640px);
  color: var(--ink-dim); font-size: 10.5px; line-height: 1.4;
}
.creditos a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
.creditos a:hover { border-bottom-color: var(--ciano); }
.creditos summary { cursor: pointer; list-style: none; }
.creditos summary::-webkit-details-marker { display: none; }
.creditos .mais { color: var(--ink); border-bottom: 1px dotted rgba(255,255,255,0.35); }
.creditos details[open] .mais { border-bottom-color: var(--ciano); }
.creditos .fontes { margin-top: 6px; padding: 8px 10px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r); max-height: 40vh; overflow: auto; }
.creditos .fontes p + p { margin-top: 4px; }

.aviso { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(30, 6, 10, 0.9); border: 1px solid rgba(255, 90, 90, 0.5); color: #ffd6d6; padding: 14px 18px; border-radius: var(--r); max-width: 80vw; font-size: 13px; z-index: 3; }
.aviso[hidden] { display: none; }

@media (max-width: 640px) {
  /* a dica vira uma linha do cabeçalho (no canto ela caía em cima do título) */
  .dica { position: static; white-space: normal; margin-top: 4px; }
  .barra { gap: 10px; }
  input[type=range] { width: 110px; }
  .creditos { font-size: 9.5px; max-width: calc(100vw - 24px); }
}