/* placar.css — the arcade concept's only stylesheet.
 *
 * Architecture, and how it differs from the other concepts here:
 *
 *   - Flat snake_case classes, one per node, state as a separate class. No element selectors doing
 *     structural work (that is the journal), no BEM (the magazine), no data-part layers (the
 *     dashboard).
 *   - Layout is CSS Grid with named areas and deliberately uneven tracks: `painel_largo` spans two
 *     columns, `painel_alto` spans two rows. The board is asymmetric by construction.
 *   - Tokens are `--arc-*` and describe a cabinet: cabine, face, fita, realce.
 *   - Three breakpoints, in px, at 560, 860 and 1180 — a board is a grid and its column count is the
 *     thing that changes, so the trigger is device width rather than the journal's line-length rem.
 *   - Motion exists here (the panels lift, the ribbon slides) and every bit of it is switched off
 *     under prefers-reduced-motion.
 */

.arc_salao {
  --arc-cabine: #0f1014;
  --arc-cabine-funda: #090a0d;
  --arc-face: #f6f6f6;
  --arc-face-fria: #eaeaeb;
  --arc-tinta: #15161a;
  --arc-tinta-fraca: #6f7072;
  --arc-tinta-clara: #f4f4f6;
  --arc-tinta-clara-fraca: #a4a4a7;
  --arc-fita: #17181c;
  --arc-sobre-fita: #ffffff;
  --arc-realce: #ffd400;
  --arc-realce-fita: #ffd400;
  --arc-sobre-realce: #101014;
  --arc-linha: #c5c5c6;
  --arc-linha-cabine: #414246;

  --arc-display: 'Arial Black', 'Helvetica Neue', Impact, Haettenschweiler, 'Franklin Gothic Bold', sans-serif;
  --arc-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --arc-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --arc-vao: 0.75rem;
  --arc-canto: 3px;

  /* The shared game runtime reads these. */
  --arc-primary: #17181c;
  --arc-secondary: #090a0d;
  --arc-accent: #ffd400;
  --arc-text: #15161a;
  --arc-bg: #f6f6f6;
  --arc-surface: #eaeaeb;
  --arc-border: #c5c5c6;
  --arc-tint: #eaeaeb;
  --arc-radius: var(--arc-canto);
  --arc-shadow: 0 2px 0 #c5c5c6;
  --arc-section: 1.5rem;
  --arc-gap: var(--arc-vao);
  --arc-max: 68rem;
  --arc-head-font: 'Arial Black', 'Helvetica Neue', Impact, Haettenschweiler, 'Franklin Gothic Bold', sans-serif;
  --arc-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  margin: 0;
  padding: 0;
  background: var(--arc-cabine);
  color: var(--arc-tinta-clara);
  font-family: var(--arc-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.arc_pular {
  position: absolute;
  left: -9999px;
}
.arc_pular:focus {
  left: 0.75rem;
  top: 0.75rem;
  z-index: 3;
  background: var(--arc-realce-fita);
  color: var(--arc-sobre-realce);
  padding: 0.6rem 1rem;
  font-weight: 700;
}
.arc_salao :focus-visible {
  outline: 3px solid var(--arc-realce-fita);
  outline-offset: 2px;
}
.arc_oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.arc_salao > main {
  max-width: var(--arc-max);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}
.arc_salao h2 {
  font-family: var(--arc-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--arc-tinta-clara);
  margin: 2rem 0 var(--arc-vao);
}
.arc_salao a {
  color: var(--arc-realce);
}

/* ------------------------------------------------------- integrated introduction
   Not a hero: no full-width band, no background image, no centred column. A left-aligned block of
   brand, one line and three facts, sitting directly above the board. */

.arc_entrada {
  border-left: 6px solid var(--arc-fita);
  padding: 0.25rem 0 0.25rem 1rem;
  margin-bottom: 1.5rem;
}
.arc_entrada_marca {
  font-family: var(--arc-display);
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--arc-tinta-clara);
}
.arc_entrada_linha {
  font-size: 1.0625rem;
  color: var(--arc-tinta-clara-fraca);
  margin: 0.4rem 0 0;
  max-width: 44ch;
}
.arc_entrada_dados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.75rem 0 0;
  font-family: var(--arc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-realce);
}

/* ------------------------------------------------------- category toolbar */

.arc_trilhos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-top: 2px solid var(--arc-linha-cabine);
  border-bottom: 2px solid var(--arc-linha-cabine);
  padding: 0.6rem 0;
}
.arc_trilho {
  font-family: var(--arc-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--arc-tinta-clara-fraca);
  border: 2px solid var(--arc-linha-cabine);
  padding: 0.5rem 0.85rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: transform 120ms ease, background-color 120ms ease;
}
.arc_trilho:hover {
  color: var(--arc-tinta-clara);
  border-color: var(--arc-realce-fita);
}
.arc_trilho_ativo {
  background: var(--arc-realce-fita);
  border-color: var(--arc-realce-fita);
  color: var(--arc-sobre-realce);
  font-weight: 700;
}

/* ------------------------------------------------------- the board
   Uneven grid. `painel_largo` takes two columns and `painel_alto` two rows, so no two rows of the
   board have the same rhythm. Single column on a phone, where an asymmetric grid would just be a
   confusing scroll. */

.arc_quadro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--arc-vao);
}
.arc_painel,
.arc_painel_largo,
.arc_painel_alto {
  background: var(--arc-face);
  color: var(--arc-tinta);
  border: 2px solid var(--arc-cabine-funda);
  border-bottom-width: 5px;
  border-radius: var(--arc-canto);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  transition: transform 140ms ease;
}
.arc_painel:hover,
.arc_painel_largo:hover,
.arc_painel_alto:hover {
  transform: translateY(-3px);
}
.arc_painel_categoria {
  font-family: var(--arc-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-sobre-realce);
  background: var(--arc-realce-fita);
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  margin: 0 0 0.6rem;
}
.arc_painel_nome {
  font-family: var(--arc-display);
  font-size: 1.375rem;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.arc_painel_nome a {
  color: var(--arc-tinta);
  text-decoration: none;
}
.arc_painel_nome a:hover,
.arc_painel_nome a:focus-visible {
  text-decoration: underline;
}
.arc_painel_texto {
  margin: 0 0 0.75rem;
  color: var(--arc-tinta-fraca);
}
.arc_painel_fichas {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
}
.arc_painel_ficha {
  font-family: var(--arc-mono);
  font-size: 0.75rem;
  border: 1px solid var(--arc-linha);
  padding: 0.15rem 0.45rem;
  color: var(--arc-tinta-fraca);
}
.arc_painel_acao {
  margin: auto 0 0;
}
.arc_painel_acao a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  background: var(--arc-fita);
  color: var(--arc-sobre-fita);
  font-family: var(--arc-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--arc-canto);
}
.arc_painel_acao a:hover {
  background: var(--arc-cabine-funda);
  color: var(--arc-tinta-clara);
}
/* Filtered out by the toolbar. */
.arc_quadro [hidden] {
  display: none;
}

/* ------------------------------------------------------- the local record column */

.arc_placar {
  margin-top: 2.5rem;
  border: 2px dashed var(--arc-linha-cabine);
  padding: 1rem;
}
.arc_placar_titulo {
  margin-top: 0;
  font-size: 1.125rem;
}
.arc_placar p {
  color: var(--arc-tinta-clara-fraca);
  font-size: 0.9375rem;
}
.arc_placar_linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--arc-linha-cabine);
  padding: 0.5rem 0;
  margin: 0;
}
.arc_placar_nome {
  color: var(--arc-tinta-clara);
}
.arc_placar_valor {
  font-family: var(--arc-mono);
  color: var(--arc-realce);
}

/* ------------------------------------------------------- tables (help + questions)
   Scrolls inside its own container, so a wide table never makes the page scroll sideways. */

.arc_tabela_rolo {
  overflow-x: auto;
  border: 2px solid var(--arc-linha-cabine);
}
.arc_tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--arc-face);
  color: var(--arc-tinta);
  font-size: 0.9375rem;
}
.arc_tabela th,
.arc_tabela td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--arc-linha);
}
.arc_tabela thead th {
  background: var(--arc-cabine-funda);
  color: var(--arc-tinta-clara);
  font-family: var(--arc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.arc_tabela tbody th {
  font-weight: 700;
}

/* ------------------------------------------------------- a machine page */

.arc_maquina_topo {
  border-left: 6px solid var(--arc-fita);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.arc_maquina_topo h1 {
  font-family: var(--arc-display);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0.3rem 0 0.5rem;
  color: var(--arc-tinta-clara);
}
.arc_maquina_categoria {
  font-family: var(--arc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arc-realce);
  margin: 0;
}
.arc_maquina_mesa {
  background: var(--arc-face);
  border: 2px solid var(--arc-cabine-funda);
  border-bottom-width: 5px;
  border-radius: var(--arc-canto);
  padding: 1rem;
  color: var(--arc-tinta);
}
.arc_maquina_regras,
.arc_maquina_dicas {
  max-width: 62ch;
}
.arc_maquina_regras ol,
.arc_maquina_dicas ul {
  padding-left: 1.35rem;
}
.arc_maquina_regras li,
.arc_maquina_dicas li {
  margin-bottom: 0.5rem;
}
.arc_maquina_notas {
  color: var(--arc-tinta-clara-fraca);
  font-size: 0.9375rem;
}
.arc_maquina_passos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 2px solid var(--arc-linha-cabine);
  margin-top: 2rem;
  padding-top: 1rem;
  font-family: var(--arc-mono);
  font-size: 0.875rem;
}

/* ------------------------------------------------------- prose pages */

.arc_texto {
  max-width: 64ch;
  color: var(--arc-tinta-clara-fraca);
}
.arc_texto h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}
.arc_texto strong {
  color: var(--arc-tinta-clara);
}
.arc_texto ul,
.arc_texto ol {
  padding-left: 1.35rem;
}
.arc_texto li {
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------------- status bar footer */

.arc_barra {
  background: var(--arc-cabine-funda);
  border-top: 3px solid var(--arc-fita);
  padding: 0.75rem 1rem 1.25rem;
  font-family: var(--arc-mono);
  font-size: 0.8125rem;
  color: var(--arc-tinta-clara-fraca);
}
.arc_barra_grupo {
  max-width: var(--arc-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.3rem 0;
}
.arc_barra_estado {
  background: var(--arc-fita);
  color: var(--arc-sobre-fita);
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.arc_barra_ligacao {
  color: var(--arc-tinta-clara);
  text-decoration: none;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
}
.arc_barra_ligacao:hover {
  color: var(--arc-realce);
  text-decoration: underline;
}
.arc_guarda_linha {
  max-width: var(--arc-max);
  margin: 0.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  border-top: 1px solid var(--arc-linha-cabine);
  padding-top: 0.6rem;
}
.arc_guarda_botao {
  font: inherit;
  background: none;
  border: 1px solid var(--arc-realce-fita);
  color: var(--arc-realce);
  padding: 0.35rem 0.7rem;
  min-height: 2.25rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.arc_guarda_botao:hover {
  background: var(--arc-realce-fita);
  color: var(--arc-sobre-realce);
}
.arc_guarda_recado:empty {
  display: none;
}
.arc_guarda_recado {
  color: var(--arc-realce);
}

/* ------------------------------------------------------- three breakpoints */

@media (min-width: 560px) {
  .arc_quadro {
    grid-template-columns: repeat(2, 1fr);
  }
  .arc_painel_largo {
    grid-column: span 2;
  }
}

@media (min-width: 860px) {
  .arc_salao > main {
    padding: 2rem 1.5rem 3rem;
  }
  .arc_quadro {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(11rem, auto);
  }
  .arc_painel_alto {
    grid-row: span 2;
  }
}

@media (min-width: 1180px) {
  .arc_quadro {
    grid-template-columns: repeat(4, 1fr);
  }
  .arc_painel_largo {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Motion off. Every transition and transform above is decorative, so all of it goes. */
@media (prefers-reduced-motion: reduce) {
  .arc_salao *,
  .arc_salao *::before,
  .arc_salao *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .arc_painel:hover,
  .arc_painel_largo:hover,
  .arc_painel_alto:hover {
    transform: none;
  }
}