/* Chronia Online: moldura de três colunas sobre a arte da caverna, menu escuro por categorias,
   conteúdo em papel claro, texto pequeno e denso e os sprites do próprio jogo. */
@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/Cinzel.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --fundo: #0c120e;
  --papel: #efe5cc;
  --papel-claro: #f7f0de;
  --linha-1: #f3ead4;
  --linha-2: #e6d8b8;
  --borda: #8f7a55;
  --borda-clara: #c9b68e;
  --tinta: #2a2016;
  --tinta-suave: #5c4e3c;
  --link: #1d4f96;
  --link-forte: #0f3369;
  --titulo: #2d251b;
  --titulo-texto: #efd590;
  --cabecalho: #4a3d2c;
  --menu: #263029;
  --menu-linha: #182019;
  --menu-alto: #33403a;
  --menu-texto: #ece4ca;
  --menu-titulo: #161c18;
  --ouro: #f0cf78;
  --musgo: #4c5f45;
  --musgo-claro: #7b9174;
  --musgo-escuro: #222b1f;
  --bronze: #8d5d17;
  --bronze-claro: #c4913f;
  --bronze-escuro: #3d2905;
  --ok: #24721f;
  --erro: #a3290f;
  --serifa: "Cinzel", "Trajan Pro", Georgia, serif;
  --texto: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--fundo); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 13px/1.45 var(--texto);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-forte); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

img.sprite { image-rendering: pixelated; vertical-align: middle; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pular { position: absolute; left: 8px; top: -40px; z-index: 10; padding: 6px 10px; background: var(--papel); }
.pular:focus { top: 8px; }

/* Arte do topo: a cena da caverna atrás do logo e das laterais da moldura. */
.arte {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 620px;
  overflow: hidden;
  background: #050806 url("/static/cena.webp") 62% 40% / cover no-repeat;
}
.cena-video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 18, 14, 0) 45%, var(--fundo) 100%);
}

.cabeca {
  position: relative;
  z-index: 1;
  height: 210px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  font: 900 clamp(2.4rem, 6vw, 4.2rem)/1 var(--serifa);
  color: var(--ouro);
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #3b2606, 2px 0 0 #3b2606, -2px 0 0 #3b2606, 0 -2px 0 #3b2606, 0 4px 6px rgba(0, 0, 0, 0.8);
}
.logo span { display: block; margin-top: 4px; font-size: 0.42em; letter-spacing: 0.35em; color: #dfe9c8; }
.logo:hover { color: #f8dd92; text-decoration: none; }
.atalhos { display: none; }

/* Moldura: menu, conteúdo e a coluna da direita. */
.moldura {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 224px;
  grid-template-areas: "menu meio lado";
  gap: 10px;
  align-items: start;
}
.col-menu { grid-area: menu; }
.col-meio { grid-area: meio; min-width: 0; }
.col-lado { grid-area: lado; }

/* Caixa: barra de título escura e o papel colado embaixo. */
.caixa {
  margin: 0 0 10px;
  background: var(--papel);
  border: 1px solid #120d07;
  box-shadow: 0 0 0 1px rgba(201, 182, 142, 0.25);
}
.caixa-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 2px 10px;
  font: 700 15px/1.2 var(--serifa);
  letter-spacing: 0.03em;
  color: var(--titulo-texto);
  background: var(--titulo);
  border-bottom: 1px solid #0d0a06;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14);
}
h1.caixa-titulo { font-size: 17px; }
.caixa-titulo:focus { outline: none; }
.caixa-titulo img { margin: -4px 0 -4px -4px; flex: none; }
.titulo-extra { margin-left: auto; font: 400 11px/1 var(--texto); letter-spacing: 0; color: #d9c9a0; }
.caixa-corpo { padding: 10px 12px; }
.caixa-corpo > :first-child { margin-top: 0; }
.caixa-corpo > :last-child { margin-bottom: 0; }
.caixa-corpo p { margin: 0 0 8px; }
.caixa-corpo h2 {
  margin: 16px 0 6px;
  padding-bottom: 2px;
  font: 700 14px/1.3 var(--texto);
  color: var(--titulo);
  border-bottom: 1px solid var(--borda-clara);
}
.caixa-corpo h3 { margin: 12px 0 4px; font: 700 13px/1.3 var(--texto); color: var(--titulo); }
.mais { text-align: right; font-weight: 700; }
.detalhe, .secundario { color: var(--tinta-suave); font-size: 11px; }
.secao-descricao { color: var(--tinta-suave); font-style: italic; }

/* Menu da esquerda */
.caixa-escura { background: var(--menu); border-color: #000; color: var(--menu-texto); }
.caixa-escura .caixa-titulo { background: var(--menu-titulo); }
.conta-curta { text-align: center; }
.conta-curta .botao { display: block; margin: 6px 0; }
.conta-curta a:not(.botao) { color: var(--ouro); }

.menu-principal { background: var(--menu); border: 1px solid #000; margin-bottom: 10px; }
.menu-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 2px 10px;
  font: 700 15px/1.2 var(--serifa);
  color: var(--titulo-texto);
  background: var(--menu-titulo);
  border-top: 1px solid #3c4a40;
  border-bottom: 1px solid #000;
}
.menu-titulo img { margin: -4px 0 -4px -4px; }
.menu-grupo ul { list-style: none; margin: 0; padding: 0; }
.menu-grupo a {
  display: block;
  padding: 4px 10px 4px 22px;
  font-weight: 700;
  font-size: 12px;
  color: var(--menu-texto);
  border-bottom: 1px solid var(--menu-linha);
}
.menu-grupo li:last-child a { border-bottom: 0; }
.menu-grupo a:hover { background: var(--menu-alto); color: #fff; text-decoration: none; }
.menu-grupo a[aria-current="page"] { color: var(--ouro); background: #1d2620; }
.menu-grupo a[aria-current="page"]::before { content: "›"; margin: 0 6px 0 -12px; }

/* Coluna da direita */
.col-lado .caixa-corpo { font-size: 12px; }
.status-servidor { text-align: center; }
.status-servidor p { margin: 2px 0; }
.no-ar { font-weight: 700; color: var(--ok); font-size: 14px; }
.fora-do-ar { font-weight: 700; color: var(--erro); font-size: 14px; }
.botao.botao-largo { display: block; }
.top-dia { list-style: none; margin: 0 0 6px; padding: 0; }
.top-dia li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--borda-clara); }
.top-dia li:last-child { border-bottom: 0; }
.top-dia a { font-weight: 700; overflow-wrap: anywhere; }
.ganho { font-weight: 700; color: var(--ok); font-size: 11px; white-space: nowrap; }
.economia { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0 0 6px; }
.economia dt { color: var(--tinta-suave); }
.economia dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.busca { display: flex; gap: 6px; }
.busca input { flex: 1; min-width: 0; }

.carrossel-trilho {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-item { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.carrossel-item img, .galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--borda);
  background: #050806;
}
.carrossel-item figcaption { margin-top: 4px; }
.carrossel-botoes { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }

.rodape { position: relative; z-index: 1; padding: 14px 16px 24px; text-align: center; color: #a99f86; font-size: 11px; }
.rodape p { margin: 0; }
.rodape a { color: #d8c48f; }

/* Botões e campos: retos, com o relevo dos botões do cliente. */
.botao, .formulario button, .filtros button {
  display: inline-block;
  padding: 5px 12px;
  font: 700 12px/1.2 var(--texto);
  color: #f6eed3;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: var(--musgo);
  border: 1px solid;
  border-color: var(--musgo-claro) var(--musgo-escuro) var(--musgo-escuro) var(--musgo-claro);
  border-radius: 0;
}
.botao:hover { color: #fff; background: #586e50; text-decoration: none; }
.botao:active { border-color: var(--musgo-escuro) var(--musgo-claro) var(--musgo-claro) var(--musgo-escuro); }
.botao-destaque, .formulario .botao { background: var(--bronze); border-color: var(--bronze-claro) var(--bronze-escuro) var(--bronze-escuro) var(--bronze-claro); }
.botao-destaque:hover, .formulario .botao:hover { background: #9d6a1f; }
.botao-destaque:active { border-color: var(--bronze-escuro) var(--bronze-claro) var(--bronze-claro) var(--bronze-escuro); }
.botao-pequeno { padding: 3px 8px; font-size: 11px; }
.botao[aria-current="page"] { background: var(--bronze); border-color: var(--bronze-escuro) var(--bronze-claro) var(--bronze-claro) var(--bronze-escuro); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea {
  font: 13px/1.3 var(--texto);
  color: var(--tinta);
  background: #fffaf0;
  border: 1px solid var(--borda);
  border-radius: 0;
  padding: 4px 6px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--link); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--erro); }

/* Tabelas densas com linhas alternadas */
.tabela-rolagem { overflow-x: auto; margin-bottom: 8px; }
.tabela { width: 100%; border-collapse: collapse; border: 1px solid var(--borda); font-size: 12px; background: var(--linha-1); }
.tabela caption { padding: 4px 8px; text-align: left; font-weight: 700; color: #f6ecd2; background: var(--cabecalho); caption-side: top; }
.tabela caption .detalhe { color: #d9c9a0; }
.tabela th, .tabela td { padding: 3px 8px; text-align: left; vertical-align: middle; }
.tabela thead th { color: #f6ecd2; background: #5b4c37; font-weight: 700; white-space: nowrap; }
.tabela tbody tr:nth-child(even) { background: var(--linha-2); }
.tabela tbody th { font-weight: 700; color: var(--titulo); }
.tabela td a { font-weight: 700; }
.tabela .numero { text-align: right; font-variant-numeric: tabular-nums; }
.celula-sprite { width: 40px; padding: 0 4px !important; text-align: center !important; }
.celula-sprite img { display: block; margin: 0 auto; }
.nome-monstro { text-transform: capitalize; }
.online { color: var(--ok); font-weight: 700; }
.sem-quebra { white-space: nowrap; }

.paginas { margin: 6px 0 0; font-weight: 700; }
.paginas a, .paginas strong { display: inline-block; padding: 0 4px; }
.paginas strong { color: var(--tinta); }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 6px 8px; background: var(--papel-claro); border: 1px solid var(--borda-clara); }
.filtros label { font-weight: 700; }
.filtros.painel { margin: 0 0 10px; }
.filtros input[type="number"] { width: 5.5em; }

/* Página do personagem */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: start; }
.tabela-ficha th { width: 9em; }
.retrato { display: grid; place-items: center; height: 96px; background: var(--papel-claro); border: 1px solid var(--borda); }
.retrato img { width: 64px; height: 64px; }
.quests-todas summary { cursor: pointer; font-weight: 700; color: var(--link); margin-bottom: 8px; }
.quests-cidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; margin-bottom: 8px; }
.tabela-quests td { padding: 2px 6px; }
.tabela-quests tr.feita td { color: var(--tinta); }
.tabela-quests tr:not(.feita) td:nth-child(2) { color: var(--tinta-suave); }
.quest-estado { width: 3.5em; text-align: center !important; white-space: nowrap; }
.feita-marca { font-weight: 700; color: var(--ok); }
.data-curta { width: 1%; color: var(--tinta-suave); }

/* Notícias */
.noticia + .noticia { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda-clara); }
.noticia h2 { margin: 0; border: 0; font-size: 15px; }
.noticia h2 a { color: var(--titulo); }
.noticia-data { color: var(--tinta-suave); font-size: 11px; margin: 0 0 8px !important; }
.texto { overflow-wrap: anywhere; }
.texto p, .texto ul, .texto ol { margin: 0 0 8px; }
.texto img { max-width: 100%; border: 1px solid var(--borda); }
.passos { margin: 0; padding-left: 1.4em; }
.passos li { margin-bottom: 4px; }

/* Blocos dentro de uma caixa (seções de Stats, Wiki e Admin, relatórios da conta). */
.painel { margin: 0 0 10px; padding: 8px 10px; background: var(--papel-claro); border: 1px solid var(--borda-clara); }
.painel h2 { margin: 0 0 6px; padding-bottom: 2px; font: 700 14px/1.3 var(--texto); color: var(--titulo); border-bottom: 1px solid var(--borda-clara); }
.painel h3 { margin: 8px 0 4px; font: 700 13px/1.3 var(--texto); }
.painel > :last-child { margin-bottom: 0; }
.titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--borda-clara); }
.titulo-linha h2, .titulo-linha h3 { margin: 0; padding: 0; border: 0; }
.painel.titulo-linha { padding: 8px 10px; border: 1px solid var(--borda-clara); }

.lista { margin: 0; padding-left: 1.4em; }
.lista li { margin-bottom: 4px; }
.descricao { white-space: pre-line; overflow-wrap: anywhere; }
.mortes { list-style: none; margin: 0; padding: 0; }
.mortes li { padding: 3px 0; border-bottom: 1px solid var(--borda-clara); }
.mortes li:last-child { border-bottom: 0; }

.formulario { max-width: 420px; }
.formulario label:not(.opcao) { display: block; font-weight: 700; margin: 10px 0 3px; }
.formulario label:first-of-type { margin-top: 0; }
.formulario input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .formulario textarea, .formulario select { width: 100%; }
.formulario textarea { resize: vertical; min-height: 8em; }
.formulario .botao { margin-top: 12px; }
.ajuda { color: var(--tinta-suave); font-size: 11px; margin: 3px 0 0; }
.erro { color: var(--erro); font-weight: 700; font-size: 12px; margin: 3px 0 0; }
.alerta { margin: 12px 0 0; padding: 6px 8px; background: #f8ecc4; border: 1px solid var(--bronze-claro); }
.opcoes { border: 0; padding: 0; margin: 10px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.opcoes legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.opcao { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.aviso { margin: 0 0 10px; padding: 6px 10px; background: var(--papel-claro); border: 1px solid var(--borda); }
.aviso-ok { color: var(--ok); border-color: var(--ok); font-weight: 700; }
.aviso-erro { color: var(--erro); border-color: var(--erro); font-weight: 700; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-conta { margin: 10px 0 0; }
.acoes-tabela { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.acoes-tabela form { margin: 0; }
.link, .link-perigo { font: inherit; font-weight: 700; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.link-perigo { color: var(--erro); }
.link:hover, .link-perigo:hover { text-decoration: underline; }
.paginacao { display: flex; flex-wrap: wrap; gap: 4px; }
.download { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.download .botao { margin: 6px 0 8px; }
.galeria { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.galeria .painel { margin: 0; }
.chance-grupo { font: 700 18px/1.2 var(--serifa); color: var(--titulo); }

.abas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.abas a { padding: 3px 10px; font-weight: 700; background: var(--papel-claro); border: 1px solid var(--borda-clara); }
.abas a[aria-current="page"] { color: var(--tinta); background: var(--linha-2); border-color: var(--borda); }
.censo, .dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.censo .painel, .dias .painel { margin: 0; }
.barras { list-style: none; margin: 0; padding: 0; }
.barras li { display: grid; grid-template-columns: 8em 1fr auto; align-items: center; gap: 8px; padding: 2px 0; }
.barra-valor { color: var(--tinta-suave); font-size: 11px; white-space: nowrap; }
progress.barra { width: 100%; height: 10px; appearance: none; border: 1px solid var(--borda); background: var(--papel-claro); }
progress.barra::-webkit-progress-bar { background: var(--papel-claro); }
progress.barra::-webkit-progress-value { background: var(--musgo); }
progress.barra::-moz-progress-bar { background: var(--musgo); }
.totais { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.totais .painel { margin: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.total-rotulo { color: var(--tinta-suave); font-size: 11px; }
.total-valor { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.total-destaque .total-valor { font-size: 16px; color: var(--bronze); }
.tabela-grafico { margin-top: 8px; }
.tabela-grafico summary { cursor: pointer; color: var(--link); font-weight: 700; }
.grafico svg { display: block; width: 100%; height: auto; }
.grafico-grade { stroke: var(--borda-clara); stroke-width: 1; }
.grafico-base { stroke: var(--borda); stroke-width: 1; }
.grafico-eixo { fill: var(--tinta-suave); font: 11px var(--texto); }
.grafico-barra { fill: var(--musgo); }
.grafico-alvo { fill: transparent; }
.grafico-coluna:hover .grafico-barra { fill: var(--bronze); }
.grafico-coluna:hover .grafico-alvo { fill: rgba(141, 93, 23, 0.08); }
.grafico-ouro .grafico-barra { fill: var(--bronze); }
.grafico-ouro .grafico-coluna:hover .grafico-barra { fill: var(--bronze-claro); }

/* Telas médias: a coluna da direita desce para baixo do conteúdo. */
@media (max-width: 1100px) {
  .moldura { grid-template-columns: 190px minmax(0, 1fr); grid-template-areas: "menu meio" "menu lado"; }
  .col-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 10px; align-items: start; }
}

/* Celular: uma coluna, conteúdo primeiro e o menu no fim (atalho no topo). */
@media (max-width: 760px) {
  .arte { height: 300px; }
  .cabeca { height: 130px; flex-direction: column; justify-content: center; gap: 10px; }
  .atalhos { display: flex; gap: 8px; }
  .atalhos a { padding: 4px 12px; font-weight: 700; color: var(--menu-texto); background: rgba(22, 28, 24, 0.85); border: 1px solid #000; }
  .moldura { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meio" "lado" "menu"; padding: 0 6px; }
  .col-lado { grid-template-columns: minmax(0, 1fr); }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .retrato { order: -1; height: 80px; }
  .tabela-ficha th { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho { scroll-behavior: auto; }
}

/* Chronia Admin (site/app_*.go): a mesma moldura, sem a arte nem a coluna da direita. */
.app-topo { display: flex; align-items: baseline; gap: 16px; padding: 10px 16px; background: var(--menu-titulo); border-bottom: 1px solid #000; }
.app-nome { font: 700 18px/1.2 var(--serifa); color: var(--ouro); }
.app-conexao { color: #b9b096; font-size: 11px; }
.moldura-app { max-width: none; padding: 10px; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "menu meio"; }
.app-conectar { max-width: 640px; margin: 24px auto; padding: 0 10px; }
.chave { width: 100%; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; resize: none; margin-bottom: 8px; }

/* Tocador de cams (static/camplayer.js): a tela do jogo, o painel do personagem e os controles. */
.cam { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 10px; align-items: start; }
.cam-tela { position: relative; background: #000; border: 1px solid #120d07; }
.cam-tela canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 230px); object-fit: contain; image-rendering: pixelated; }
.cam-aviso { position: absolute; inset: auto 0 0; margin: 0; padding: 6px 10px; color: var(--menu-texto); background: rgba(0, 0, 0, 0.7); }
.cam-aviso:empty { display: none; }
.cam-lado { font-size: 11px; }
.cam-lado .barra-vida, .cam-lado .barra-mana { height: 12px; border: 1px solid #000; background: #3a2a1a; margin: 2px 0 6px; }
.cam-lado .barra-vida span, .cam-lado .barra-mana span { display: block; height: 100%; }
.cam-lado .barra-vida span { background: #c0392b; }
.cam-lado .barra-mana span { background: #2f5fbf; }
.cam-slots { display: grid; grid-template-columns: repeat(3, 34px); gap: 2px; justify-content: center; margin: 6px 0; }
.cam-slot { width: 34px; height: 34px; border: 1px solid; border-color: #6b5a40 #f7f0de #f7f0de #6b5a40; background: #4a3d2c; }
.cam-slot canvas { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.cam-lado dl { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; margin: 0; }
.cam-lado dd { margin: 0; text-align: right; font-weight: 700; }
.cam-controles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cam-controles input[type="range"] { flex: 1 1 260px; }
.cam-relogio { font-variant-numeric: tabular-nums; min-width: 9em; }
.cam-console { grid-column: 1 / -1; list-style: none; margin: 0; padding: 4px 8px; height: 180px; overflow-y: auto; font: 12px/1.4 var(--texto); background: #1b1f1c; color: #e8e4d4; border: 1px solid #000; }
.cam .detalhe, .cam h2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .cam { grid-template-columns: minmax(0, 1fr); } }


/* Your account → Discord: o código do /link, fácil de ler e copiar */
.codigo-discord { display: inline-block; margin: 4px 0; padding: 3px 8px; font-size: 15px; letter-spacing: 1px;
	background: #fff; border: 1px solid #b9a77f; user-select: all; }