/* ocostume.com (16.78). Os valores são os da app (src/theme/tokens.ts, docs/DESIGN.md): a ameixa e
   o osso, a menta como destaque, a Bricolage, as três barras. Escuro por defeito e claro quando o
   telemóvel ou o computador o pedem, como a app. A letra vem de cá, não do Google Fonts: a
   política de privacidade diz que nada vai para terceiros. */

@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/BricolageGrotesque-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/BricolageGrotesque-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Display';
  src: url('/fonts/BricolageGrotesqueDisplay-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

:root {
  /* A paleta ameixa e osso (DESIGN.md, 2). */
  --ink: #1b0e19;
  --ink-2: #2e1526;
  --ink-3: #3a1c31;
  --bone: #f6efe7;
  --bone-dim: rgba(246, 239, 231, 0.7);
  --line: rgba(246, 239, 231, 0.22);
  --divider: rgba(246, 239, 231, 0.1);
  --accent: #7fe3b0;
  --on-accent: #1b0e19;
  /* As barras da marca não mudam com o tema. */
  --mint: #7fe3b0;
  --acid: #edd84f;
  --pink: #ff5c8a;
  --fill: rgba(237, 216, 79, 0.3);

  /* As cores dos jogos do percurso (src/core/games.ts). */
  --g-medusa: #71d759;
  --g-categories: #ffa245;
  --g-mostlikely: #09d5d5;
  --g-paranoia: #d4bc02;
  --g-never: #c0abfe;
  --g-faker: #71d759;
  --g-trial: #79c2ff;
  --g-conta: #c0abfe;
  --g-toast: #f3c969;

  /* Espaço: a escala da app para dentro dos grupos, e dois degraus maiores para a página. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;
  --s-section: clamp(48px, 11vw, 80px);
  --gutter: clamp(20px, 5.5vw, 34px);

  /* Cantos (DESIGN.md, rounded). */
  --r-md: 14px;
  --r-card: 16px;
  --r-panel: 20px;

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #f6efe7;
    --ink-2: #ece1d5;
    --ink-3: #e0d1c0;
    --bone: #1b0e19;
    --bone-dim: rgba(27, 14, 25, 0.7);
    --line: rgba(27, 14, 25, 0.22);
    --divider: rgba(27, 14, 25, 0.12);
    /* A menta dá 1,3:1 sobre o osso; a mesma matiz escura, como na app. */
    --accent: #0a6b43;
    --on-accent: #f6efe7;
    --fill: rgba(237, 216, 79, 0.6);
    --g-medusa: #227403;
    --g-categories: #8c4f02;
    --g-mostlikely: #076f6f;
    --g-paranoia: #6e6105;
    --g-never: #6947b0;
    --g-faker: #227403;
    --g-trial: #0465a0;
    --g-conta: #6947b0;
    --g-toast: #7c5a00;
    color-scheme: light;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Bricolage', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  /* Texto claro sobre escuro pede mais entrelinha; no claro volta ao 1,55 da app. */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: light) {
  body {
    line-height: 1.55;
  }
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-section);
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--bone);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms var(--ease-out);
}
a:hover {
  color: var(--accent);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* A marca: três barras desencontradas, com as proporções do ícone (DESIGN.md, «A marca»). */
.marks {
  display: block;
  width: 36px;
  height: auto;
  flex: none;
}

/* A marca com o nome, no topo de cada página. O alvo chega aos 44 px. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand:hover {
  color: var(--bone);
}

h1,
h2 {
  font-family: 'Bricolage Display', 'Bricolage', system-ui, sans-serif;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
/* Display (DESIGN.md, 3): apertado, a 800. */
h1 {
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(23px, 5.6vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.dim {
  color: var(--bone-dim);
}
.small {
  font-size: 15px;
  line-height: 1.5;
}

/* O botão da app (DESIGN.md, Buttons): grande, franco, afunda ao toque. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 19px 24px;
  border-radius: var(--r-card);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}
.button:hover {
  color: var(--on-accent);
  background: color-mix(in oklch, var(--accent), var(--bone) 14%);
}
.button:active {
  transform: scale(0.975);
}
.button:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: var(--r-card);
}

/* ---------- O início ---------- */

.hero {
  margin-top: var(--s-section);
}
/* A frase da app em grande: é o que se lê primeiro. */
.hero h1 {
  font-size: clamp(52px, 15vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  max-width: 9ch;
}
.lead {
  margin: var(--s-6) 0 0;
  max-width: 34ch;
  font-size: clamp(19px, 4.6vw, 22px);
  line-height: 1.45;
  color: var(--bone-dim);
}
.cta {
  margin-top: var(--s-6);
  display: grid;
  justify-items: start;
  gap: var(--s-3);
}
.cta p {
  margin: 0;
  max-width: 40ch;
}

.section {
  margin-top: var(--s-section);
}
.kicker {
  margin: 0 0 var(--s-4);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--accent);
}

/* O percurso, como em «A noite»: uma linha da noite com um troço por jogo, e a legenda por
   baixo. A cor nunca vai sozinha: o nome do jogo está sempre ao lado. */
.route-line {
  display: flex;
  gap: 3px;
  margin-bottom: var(--s-5);
}
.route-line span {
  height: 6px;
  border-radius: 999px;
  background: var(--c);
}
.route {
  display: grid;
  gap: var(--s-4);
  margin: 0;
}
.route div {
  display: grid;
  gap: var(--s-1);
}
/* Com largura, o grupo à esquerda e os jogos à direita, como numa ementa. */
@media (min-width: 520px) {
  .route div {
    grid-template-columns: 8.5em 1fr;
    gap: var(--s-3);
    align-items: baseline;
  }
}
.route dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--bone-dim);
}
.route dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-weight: 600;
}
.route dd span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}
.route dd span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c);
}
.route .end {
  color: var(--g-toast);
}

/* As regras da mesa, cada uma com a barra curta da marca ao meio da primeira linha
   (DESIGN.md, «A marca»: 14 × 5). */
.rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-4);
}
.rules li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.rules li::before {
  content: '';
  height: 5px;
  border-radius: 3px;
  margin-top: 0.72em;
  background: var(--mint);
}
.rules li:nth-child(2)::before {
  background: var(--acid);
}
.rules li:nth-child(3)::before {
  background: var(--pink);
}
.rules strong {
  font-weight: 800;
}

.panel {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-panel);
  background: var(--ink-2);
}
.panel p {
  margin: 0;
}

/* ---------- Os documentos: privacidade, termos, licenças ---------- */

.doc header {
  margin-bottom: var(--s-6);
}
.doc h1 {
  margin-top: var(--s-6);
}
.doc .updated {
  margin: var(--s-2) 0 0;
}
.doc .summary {
  margin: 0;
  font-size: clamp(19px, 4.6vw, 21px);
  line-height: 1.45;
}
/* Um texto legal lê-se de seguida: secções mais juntas do que as do início. */
.doc h2 {
  margin-top: clamp(36px, 8vw, 52px);
  margin-bottom: var(--s-3);
}
.doc p,
.doc ul {
  margin: var(--s-3) 0 0;
}
.doc ul {
  padding-left: 1.2em;
}
.doc li {
  margin: var(--s-2) 0 0;
}
.doc li::marker {
  color: var(--bone-dim);
}

/* O que falta preencher antes de publicar. Não pode ir assim para o ar. */
.fill {
  background: var(--fill);
  color: var(--bone);
  padding: 0 4px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.table-wrap {
  overflow-x: auto;
  margin-top: var(--s-4);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
th,
td {
  text-align: left;
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
/* No telemóvel partem o nome e a licença; a versão fica inteira. */
td:first-child {
  overflow-wrap: anywhere;
}
td:nth-child(2),
th {
  white-space: nowrap;
}
th {
  font-size: 14px;
  font-weight: 600;
  color: var(--bone-dim);
}
tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- O rodapé ---------- */

footer {
  margin-top: var(--s-section);
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider);
  font-size: 15px;
  color: var(--bone-dim);
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-5);
}
/* Alvos de 44 px sem mudar o desenho: o espaço vai para dentro da ligação. */
footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bone-dim);
}
footer nav a:hover {
  color: var(--bone);
}
footer small {
  display: block;
  margin-top: var(--s-2);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .button:active {
    transform: none;
  }
}