@charset "utf-8";
/* jogoscasino.net — Mesa de Jogo Nocturna (classic-serif variant)
   Ported by hand from the approved SuperDesign draft ac048a2c.
   No Tailwind, no Iconify, no CDN. Cascade layers + custom properties.
   Palette: ink-manganes (#0c0d0e / #7a5a8c / #e2e2e2) — registered footprint. */

@layer fontes, reset, tokens, base, layout, components, jogo, sinal;

/* ------------------------------------------------------------------ fontes */
/* Self-hosted woff2 — no Google CDN (footprint rule). Libre Baskerville and
   Commissioner are variable; DM Mono ships two static weights.
   `unicode-range` keeps latin-ext a separate request so the common case is one file. */
@layer fontes {
  @font-face {
    font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url("/assets/fonts/libre-baskerville-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url("/assets/fonts/libre-baskerville-var-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
      U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Commissioner"; font-style: normal; font-weight: 300 600;
    font-display: swap; src: url("/assets/fonts/commissioner-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Commissioner"; font-style: normal; font-weight: 300 600;
    font-display: swap; src: url("/assets/fonts/commissioner-var-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
      U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "DM Mono"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/dm-mono-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "DM Mono"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/dm-mono-400-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
      U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "DM Mono"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("/assets/fonts/dm-mono-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  table { border-collapse: collapse; }
  button, input, select { font: inherit; color: inherit; }
  summary::-webkit-details-marker { display: none; }
  :focus-visible { outline: 2px solid var(--manganes); outline-offset: 3px; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* ink-manganes. Accent hue 278deg: the only accent corridor under the fleet
       cap (270-300, 1 site). Brass #a1824a was rejected by tools/fleet-design-check.py
       — hue 38.6deg sits in orange/amber (30-60), 47 fleet sites. */
    --tinta: #0c0d0e;          /* baize ground */
    --tinta-funda: #080808;    /* deeper ink, insets */
    --manganes: #7a5a8c;       /* manganes (roxo de manganes) */
    --manganes-claro: #9a7bb0;
    /* AA-safe on the ink grounds: 5.56:1 vs #080808. The structural accent
       --manganes is 3.50:1 and must never carry text or small glyphs. */
    --manganes-texto: #9a7bb0;
    --osso: #e2e2e2;           /* bone */
    --regua: rgb(122 90 140 / 0.22);   /* ledger hairline */
    --regua-forte: rgb(122 90 140 / 0.45);
    --vermelho: #b4453f;       /* roulette red — not the Tailwind #f87171 */
    --preto-mesa: #9aa0a6;     /* roulette black, legible on ink */

    --fonte-titulo: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --fonte-texto: "Commissioner", system-ui, -apple-system, sans-serif;
    --fonte-numero: "DM Mono", ui-monospace, "Courier New", monospace;

    --medida: 68ch;            /* reading measure */
    --caixa: 1400px;           /* max container */
    --gutter: clamp(1.25rem, 4vw, 3.5rem);

    --passo-1: 0.78rem;
    --passo-2: 0.92rem;
    --passo-3: 1.06rem;
    --passo-4: clamp(1.3rem, 2.2vw, 1.65rem);
    --passo-5: clamp(1.7rem, 3.4vw, 2.4rem);
    --passo-6: clamp(2.1rem, 5.2vw, 3.4rem);

    --duracao: 140ms;
    --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  body {
    margin: 0;
    background: var(--tinta-funda);
    color: var(--osso);
    font-family: var(--fonte-texto);
    font-size: var(--passo-3);
    font-weight: 350;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  h1 { font-size: var(--passo-6); }
  h2 { font-size: var(--passo-5); }
  h3 { font-size: var(--passo-4); }

  p, li { text-wrap: pretty; }

  /* Justified body copy — ledger/print register. Hyphenation avoids the ragged
     rivers justify produces on narrow measures; the html lang="pt-PT" attribute
     is what lets the browser hyphenate Portuguese correctly. */
  .prosa p, .prosa li,
  .faq__resposta p, .faq__resposta li,
  .antes p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Body-copy links were invisible: the global `a` reset (color:inherit,
     no text-decoration) makes an inline link indistinguishable from plain
     text. Give body-text links their own signature — underlined, in the
     AA-safe accent — while leaving nav/footer/button/card links untouched
     (they carry their own distinct treatment already). */
  .prosa a, .faq__resposta a, .antes a, .talao a {
    color: var(--manganes-texto);
    text-decoration: underline;
    text-decoration-color: rgb(154 123 176 / .55);
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
  }
  .prosa a:hover, .faq__resposta a:hover, .antes a:hover, .talao a:hover,
  .prosa a:focus-visible, .faq__resposta a:focus-visible {
    text-decoration-color: currentColor;
  }
  p + p { margin-top: 1.05em; }

  a { color: inherit; text-decoration: none; }

  /* uppercase micro-label — the ledger voice, used sitewide */
  .rotulo {
    font-family: var(--fonte-numero);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgb(154 123 176 / 0.82);
  }

  .numero { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .caixa { max-width: var(--caixa); margin-inline: auto; padding-inline: var(--gutter); }
  .secao { padding-block: clamp(2.75rem, 7vw, 5.5rem); }
  .secao--baixa { background: var(--tinta); }
  .secao + .secao { border-top: 1px solid rgb(122 90 140 / 0.12); }

  .prosa { max-width: var(--medida); }
  .prosa h2 { margin-top: 2.4em; margin-bottom: 0.7em; }
  .prosa h3 { margin-top: 1.9em; margin-bottom: 0.55em; }
  .prosa > :first-child { margin-top: 0; }

  .duplo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
  @media (min-width: 62rem) { .duplo { grid-template-columns: 1fr 1fr; } }
}

/* ------------------------------------------------------------- components */
@layer components {
  /* --- header ------------------------------------------------------ */
  .cabecalho {
    position: sticky; top: 0; z-index: 50;
    background: var(--tinta);
    border-bottom: 1px solid var(--regua-forte);
  }
  .cabecalho__linha {
    max-width: var(--caixa); margin-inline: auto; padding-inline: var(--gutter);
    min-height: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  }
  .marca { display: inline-flex; align-items: center; gap: 0.7rem; }
  .marca__nome {
    font-family: var(--fonte-titulo); font-size: 1.06rem; letter-spacing: 0.02em;
  }

  .nav { display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 2vw, 2rem); }
  .nav__link {
    position: relative;
    font-family: var(--fonte-numero);
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.15em;
    padding-block: 0.35rem;
  }
  .nav__link[aria-current="page"] { color: var(--manganes-texto); }

  .selo18 {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding-inline: 0.4rem;
    border: 1px solid var(--manganes-texto);
    font-family: var(--fonte-numero); font-size: 0.62rem; font-weight: 500;
    color: var(--manganes-texto);
  }

  /* mobile menu — no JS dependency, <details> based */
  .menu-movel { display: none; }
  @media (max-width: 61.9375rem) {
    .nav { display: none; }
    .menu-movel { display: block; }
    .menu-movel[open] .nav {
      display: flex; flex-direction: column; gap: 0;
      position: absolute; inset-inline: 0; top: 100%;
      background: var(--tinta); border-bottom: 1px solid var(--regua-forte);
      padding: var(--gutter);
    }
    .menu-movel[open] .nav__link {
      padding-block: 0.85rem; border-bottom: 1px solid var(--regua);
      font-size: 0.74rem;
    }
    .menu-movel__botao {
      background: none; border: 1px solid var(--regua-forte);
      padding: 0.5rem 0.7rem; cursor: pointer; color: var(--manganes-texto);
    }
  }

  /* --- ledger panel ------------------------------------------------ */
  .painel {
    background: var(--tinta);
    border: 1px solid var(--regua);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5);
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
  }
  .painel--fundo { background: var(--tinta-funda); }

  /* --- ledger table (house edge, strategy, data) ------------------- */
  .talao { width: 100%; border: 1px solid var(--regua); font-size: var(--passo-2); }
  .talao caption {
    text-align: left; padding-block-end: 0.8rem;
    font-family: var(--fonte-numero); font-size: 0.62rem;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--manganes-texto);
  }
  .talao thead th {
    background: var(--tinta-funda);
    border-bottom: 1px solid var(--regua);
    padding: 0.8rem 1rem; text-align: left;
    font-family: var(--fonte-numero); font-weight: 400;
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--manganes-texto);
  }
  .talao td { padding: 0.8rem 1rem; border-bottom: 1px solid rgb(122 90 140 / 0.12); }
  .talao tbody tr:last-child td { border-bottom: 0; }
  .talao .val { text-align: right; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
  .rolagem { overflow-x: auto; }
  /* The three strategy matrices are a fixed ~433px (10 data columns x 2.1rem +
     6rem row header) — wider than a phone screen. overflow-x:auto alone gives no
     visual cue that columns are cut off, so a narrow viewport gets an aviso. */
  .rolagem__aviso { display: none; }
  @media (max-width: 30rem) {
    .rolagem__aviso {
      display: block; font-family: var(--fonte-numero); font-size: 0.62rem;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: rgb(154 123 176 / 0.82); margin: 0 0 0.4rem;
    }
  }

  /* --- bar chart (house-edge impact) ------------------------------- */
  .barra__topo { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
  .barra__cal { height: 3px; background: #1c1c1c; }
  .barra__val { height: 100%; background: var(--manganes); }
  .barra + .barra { margin-top: 1.5rem; }

  /* --- pillar strip ------------------------------------------------ */
  .pilares { display: grid; gap: 1px; background: var(--regua); border: 1px solid var(--regua); }
  @media (min-width: 48rem)  { .pilares { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 75rem)  { .pilares { grid-template-columns: repeat(5, 1fr); } }
  .pilar { display: block; background: var(--tinta-funda); padding: clamp(1.25rem, 2.5vw, 2rem); }
  .pilar h3 { font-size: var(--passo-3); margin-bottom: 0.6rem; }
  .pilar p { font-size: var(--passo-1); line-height: 1.6; color: rgb(226 226 226 / 0.62); }

  /* --- FAQ --------------------------------------------------------- */
  .faq { max-width: var(--medida); }
  .faq__item { border-bottom: 1px solid var(--regua); }
  .faq__item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    cursor: pointer; padding-block: 1.15rem; list-style: none;
  }
  .faq__item > summary h3 { font-size: var(--passo-3); margin: 0; }
  .faq__sinal { flex: none; width: 0.85rem; height: 0.85rem; color: var(--manganes-texto); }
  .faq__item[open] .faq__sinal { transform: rotate(180deg); }
  .faq__resposta { padding-block-end: 1.35rem; color: rgb(226 226 226 / 0.72); }
  .faq__resposta > :first-child { margin-top: 0; }

  /* --- buttons ----------------------------------------------------- */
  .botao {
    display: inline-flex; align-items: center; gap: 0.7rem;
    background: var(--manganes-claro); color: #0a0a0a;
    border: 1px solid var(--manganes-claro);
    padding: 0.85rem 2rem; cursor: pointer;
    font-family: var(--fonte-numero); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.16em;
  }
  .botao:hover { background: var(--osso); border-color: var(--osso); }
  .botao--vazio {
    background: none; color: var(--manganes-texto);
    font-family: var(--fonte-titulo); font-size: var(--passo-3);
    text-transform: none; letter-spacing: 0;
  }
  .botao--vazio:hover { background: var(--manganes-claro); color: #0a0a0a; }
  .botao[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* --- breadcrumbs ------------------------------------------------- */
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
  .crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--regua-forte); }
  .crumbs { margin-bottom: 1.75rem; font-family: var(--fonte-numero);
            font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em;
            color: rgb(226 226 226 / 0.5); }

  /* --- footer ------------------------------------------------------ */
  .rodape { background: var(--tinta); border-top: 1px solid var(--regua-forte); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
  .rodape__topo { display: grid; gap: clamp(2rem, 5vw, 4rem); }
  @media (min-width: 55rem) { .rodape__topo { grid-template-columns: 1fr auto; } }
  .rodape__ligacoes { display: grid; grid-template-columns: repeat(2, auto); gap: 0.75rem 3rem; }
  .foot__link { position: relative; font-family: var(--fonte-numero); font-size: 0.66rem;
                text-transform: uppercase; letter-spacing: 0.14em; color: rgb(226 226 226 / 0.66); }
  .rodape__fundo {
    margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.5rem;
    border-top: 1px solid rgb(122 90 140 / 0.12);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    font-family: var(--fonte-numero); font-size: 0.58rem;
    text-transform: uppercase; letter-spacing: 0.16em; color: rgb(154 123 176 / 0.72);
  }
  .aviso { max-width: 34ch; font-size: var(--passo-1); color: rgb(226 226 226 / 0.5); }
}

/* ------------------------------------------------------- jogo (game area) */
@layer jogo {
  .mesa { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
  @media (min-width: 68rem) { .mesa { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }

  .mostrador {
    aspect-ratio: 1; display: grid; place-content: center; text-align: center;
    border: 1px solid var(--regua); background: var(--tinta-funda);
  }
  /* with the wheel present the panel becomes a compact result strip */
  .mostrador--fino { aspect-ratio: auto; padding-block: .9rem; margin-top: 1rem; }
  .mostrador--fino .mostrador__num { font-size: clamp(2rem, 6vw, 2.75rem); }
  .mostrador__num { font-family: var(--fonte-titulo); font-size: clamp(3rem, 9vw, 4.5rem); line-height: 1; }

  .historico { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 1rem; }
  .historico span {
    min-height: 2.4rem; display: grid; place-content: center;
    border: 1px solid rgb(122 90 140 / 0.18); background: var(--tinta-funda);
    font-family: var(--fonte-numero); font-size: 0.72rem;
  }

  /* European single-zero table: zero column + 12x3 number grid */
  .tabuleiro { display: grid; grid-template-columns: 2.2rem repeat(12, minmax(0, 1fr)); gap: 1px;
               background: var(--regua); border: 1px solid var(--regua-forte); }
  .aposta {
    display: grid; place-content: center; min-height: 2.6rem;
    background: var(--tinta-funda); border: 1px solid transparent; cursor: pointer;
    font-family: var(--fonte-numero); font-size: 0.76rem; font-variant-numeric: tabular-nums;
  }
  .aposta:hover:not([disabled]) { background: var(--manganes-claro); color: #0a0a0a; }
  .aposta--zero { grid-row: span 3; color: var(--manganes-texto); }
  .aposta--vermelho { color: var(--vermelho); }
  .aposta--preto { color: var(--preto-mesa); }
  .aposta[aria-pressed="true"] { background: var(--manganes-claro); color: #0a0a0a; }

  .externas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 1px;
              background: var(--regua); border: 1px solid var(--regua-forte); border-top: 0; }
  @media (min-width: 48rem) { .externas { grid-template-columns: repeat(6, 1fr); } }
  .aposta--fora { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; }

  .controlo {
    display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: end; justify-content: space-between;
    margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--regua);
  }
  .saldo { font-family: var(--fonte-numero); font-size: clamp(1.35rem, 3vw, 1.8rem);
           font-variant-numeric: tabular-nums; color: var(--manganes-texto); }

  /* pre-game 18+ confirmation — inline, never an interstitial overlay */
  .porta { display: flex; align-items: center; gap: 0.75rem; margin-block: 1.5rem; }
  .porta input { width: 1rem; height: 1rem; accent-color: var(--manganes); }

  /* --- blackjack --------------------------------------------------- */
  .bj { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .bj__mao { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 5.5rem; align-items: center; }
  .bj__linha + .bj__linha { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--regua); }

  .carta { display: block; width: 3.6rem; height: 5.25rem; }
  .carta__svg { width: 100%; height: 100%; display: block; }
  .carta__fundo { fill: #ece9e2; stroke: rgb(0 0 0 / .35); stroke-width: 1; }
  .carta__idx, .carta__mono { fill: #17171a; }
  .carta path { fill: #17171a; }
  .carta--vermelha .carta__idx,
  .carta--vermelha .carta__mono { fill: #a8322c; }
  .carta--vermelha path { fill: #a8322c; }
  .carta--oculta {
    border-radius: 5px;
    background:
      repeating-linear-gradient(45deg, rgb(12 13 14 / .55) 0 5px, transparent 5px 10px),
      var(--manganes);
    box-shadow: inset 0 0 0 1px rgb(226 226 226 / .18);
  }
  @media (min-width: 40rem) { .carta { width: 4.2rem; height: 6.1rem; } }

  .bj__acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
  .bj__acoes .botao { padding-inline: 1.15rem; }

  /* training feedback — deliberately NOT a tinted border-l-4 callout with a
     stock bold label (Gate 14); it is a ruled ledger annotation. */
  .treino { min-height: 2.6rem; margin-top: 1.25rem; padding: 0.7rem 0 0.7rem 1rem;
            border-left: 1px solid var(--regua); font-size: var(--passo-2); }
  .treino--ok    { border-left-color: var(--manganes-texto); color: var(--osso); }
  .treino--leve  { border-left-color: var(--manganes-texto); color: rgb(226 226 226 / 0.8); }
  .treino--medio { border-left-color: var(--vermelho); color: var(--osso); }
  .treino--grave { border-left-color: var(--vermelho); color: var(--osso);
                   box-shadow: inset 3px 0 0 -1px var(--vermelho); }

  /* --- strategy matrix (generated from estrategia.json) ------------- */
  /* width:auto so the row-header column doesn't stretch and shove the grid right */
  .talao--matriz { width: auto; font-family: var(--fonte-numero); font-size: 0.74rem; }
  .talao--matriz thead th:first-child, .talao--matriz th[scope="row"] { width: 6rem; }
  .talao--matriz th[scope="row"] { text-align: left; padding: 0.4rem 0.7rem;
    font-family: var(--fonte-numero); font-weight: 400; color: var(--manganes-texto); }
  .talao--matriz thead th { padding: 0.45rem 0.4rem; text-align: center; }
  .talao--matriz td { padding: 0; text-align: center; }
  .talao--matriz .cel { width: 2.1rem; height: 2.1rem; }
  .talao--matriz abbr { text-decoration: none; border: 0; }
  .cel--p  { background: rgb(180 69 63 / 0.16); }
  .cel--f  { background: rgb(122 90 140 / 0.30); }
  .cel--d  { background: rgb(154 123 176 / 0.55); color: #101010; }
  .cel--df { background: rgb(154 123 176 / 0.38); }
  .cel--s  { background: rgb(226 226 226 / 0.22); }
  .cel--n  { background: transparent; color: rgb(226 226 226 / 0.45); }
  .talao--matriz + .talao--matriz { margin-top: 2rem; }

  .legenda { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem;
             margin-top: 1.5rem; font-size: var(--passo-1); }
  .legenda dt { font-family: var(--fonte-numero); color: var(--manganes-texto); }
  .legenda dd { margin: 0; color: rgb(226 226 226 / 0.72); }

  /* --- SlotsLaunch demo facades (additive layer) --------------------- */
  .grelha-demos { display: grid; gap: 1px; background: var(--regua);
                  border: 1px solid var(--regua); list-style: none; padding: 0; margin: 0; }
  @media (min-width: 34rem) { .grelha-demos { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 52rem) { .grelha-demos { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 76rem) { .grelha-demos { grid-template-columns: repeat(5, 1fr); } }
  .demo { background: var(--tinta-funda); display: flex; flex-direction: column; }
  /* Third-party artwork is deliberately garish; damp it enough to sit inside the
     ink-manganese page without making the game unrecognisable. Full colour on
     hover/focus so the visitor can still see what they are choosing. */
  .demo__arte { width: 100%; aspect-ratio: 1; object-fit: cover;
                filter: saturate(.42) contrast(.92) brightness(.78);
                transition: filter var(--duracao) var(--curva); }
  .demo:hover .demo__arte,
  .demo:focus-within .demo__arte { filter: saturate(.9) contrast(1) brightness(1); }
  .demo__corpo { padding: .8rem .85rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
  .demo__nome { font-size: var(--passo-2); margin: 0; line-height: 1.25; }
  .demo__meta { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
                margin: 0; font-family: var(--fonte-numero); font-size: .6rem;
                text-transform: uppercase; letter-spacing: .1em;
                color: rgb(226 226 226 / .5); }
  .demo__rtp { color: var(--manganes-texto); }
  .demo__jogar { margin-top: auto; background: none; cursor: pointer;
                 border: 1px solid var(--manganes-texto); color: var(--manganes-texto);
                 font-family: var(--fonte-numero); font-size: .62rem;
                 text-transform: uppercase; letter-spacing: .14em; padding: .5rem .7rem; }
  .demo__jogar:hover { background: var(--manganes-claro); color: #0a0a0a;
                       border-color: var(--manganes-claro); }

  .modal { position: fixed; inset: 0; z-index: 200; background: rgb(4 4 4 / .88);
           display: grid; place-items: center; padding: var(--gutter); }
  .modal[hidden] { display: none; }
  .modal__caixa { width: min(100%, 62rem); background: var(--tinta);
                  border: 1px solid var(--regua-forte); }
  .modal__topo { display: flex; align-items: center; justify-content: space-between;
                 gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--regua); }
  .modal__titulo { font-size: var(--passo-3); margin: 0; }
  .modal__fechar { background: none; border: 1px solid var(--regua-forte); cursor: pointer;
                   color: var(--manganes-texto); font-family: var(--fonte-numero);
                   font-size: .62rem; text-transform: uppercase; letter-spacing: .14em;
                   padding: .45rem .8rem; }
  .modal__frame { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--tinta-funda); }
  .demo-frame { width: 100%; height: 100%; border: 0; }
  .demo-nota { max-width: 46ch; padding: 2rem; text-align: center;
               font-size: var(--passo-2); color: rgb(226 226 226 / .72); }

  /* "Antes de jogar" — help at the point of need, above the grid */
  .antes { border: 1px solid var(--regua); padding: clamp(1rem, 3vw, 1.6rem);
           margin-bottom: 1.5rem; background: var(--tinta); }
  .antes__lista { display: grid; gap: .35rem .9rem; margin: .9rem 0 0;
                  grid-template-columns: auto 1fr; font-size: var(--passo-1); }
  .antes__lista dt { font-family: var(--fonte-numero); color: var(--manganes-texto); }
  .antes__lista dd { margin: 0; color: rgb(226 226 226 / .74); }

  /* --- related pages ------------------------------------------------- */
  .relacionadas { max-width: var(--caixa); margin: 0 auto;
                  padding: clamp(2rem, 5vw, 3.25rem) var(--gutter);
                  border-top: 1px solid var(--regua); background: var(--tinta); }
  .relacionadas__titulo { font-size: var(--passo-4); margin: 0 0 1.1rem; }
  .relacionadas ul { display: grid; gap: 1px; background: var(--regua);
                     border: 1px solid var(--regua); list-style: none; padding: 0; margin: 0; }
  @media (min-width: 48rem) { .relacionadas ul { grid-template-columns: repeat(3, 1fr); } }
  .relacionadas li { background: var(--tinta-funda); }
  .relacionadas a { display: block; padding: 1rem 1.1rem; font-size: var(--passo-2);
                    color: var(--osso); }
  .relacionadas a:hover { background: var(--tinta); color: var(--manganes-texto); }


  /* --- roda de roleta (SVG gerada por roda.js) ----------------------- */
  .roda-caixa { position: relative; }
  .roda { width: 100%; max-width: 20rem; margin-inline: auto; display: block; }
  .roda__disco, .roda__orbita { transform-origin: 50% 50%; will-change: transform; }
  .roda__bola { filter: drop-shadow(0 0 3px rgb(0 0 0 / .8)); }
  /* marcador fixo às 12h — é sob ele que a casa vencedora para */
  .roda-caixa::before {
    content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; z-index: 2;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 11px solid var(--manganes-texto);
  }
  @media (prefers-reduced-motion: reduce) {
    .roda__disco, .roda__orbita { transition: none !important; }
  }



  /* --- cornerstone figure ------------------------------------------- */
  .figura { margin: 2rem 0; }
  .figura img { width: 100%; height: auto; border: 1px solid var(--regua); background: var(--tinta); }
  /* Cornerstone image sits directly under the H1, full page width (no game to
     protect on these pages — the 3 game hubs dropped the photo entirely). */
  .figura--intro { width: 100%; }
  .figura figcaption { margin-top: .6rem; font-family: var(--fonte-numero); font-size: .62rem;
                       text-transform: uppercase; letter-spacing: .16em; color: rgb(154 123 176 / .72); }
}

/* ------------------------------- sinal (interaction signature: ledger-rule) */
/* Budget: this layer stays under 4KB. No libraries. Reduced-motion safe.
   Class names are site-specific — `grep -r "sig-" dist/` must be empty. */
@layer sinal {
  /* link treatment: manganese hairline extends from the left, thickens on hover */
  .nav__link::after, .foot__link::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: var(--manganes);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--duracao) var(--curva), height var(--duracao) var(--curva);
  }
  .nav__link:hover::after, .foot__link:hover::after,
  .nav__link:focus-visible::after, .foot__link:focus-visible::after { transform: scaleX(1); height: 2px; }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  /* reveal: inset shadow deepens on entry — no fade, no translate */
  .painel, .pilar {
    transition: box-shadow 320ms var(--curva), background-color var(--duracao) var(--curva);
  }
  .pilar:hover { background: var(--tinta); }
  .pilar:hover h3 { color: var(--manganes-texto); }

  /* motion personality `ledger-rule`: rules draw in horizontally */
  .regua-anim {
    height: 1px; background: var(--manganes);
    transform: scaleX(0); transform-origin: left;
    transition: transform 420ms var(--curva);
  }
  .regua-anim[data-vista="1"] { transform: scaleX(1); }

  /* SIGNATURE MOMENT — the winning number is ruled off like a ledger entry.
     A manganese hairline box draws around it on two axes, then holds. */
  .mostrador { position: relative; }
  .mostrador::before, .mostrador::after {
    content: ""; position: absolute; background: var(--manganes); opacity: 0;
  }
  .mostrador::before { inset-inline: 12%; height: 1px; top: 14%; transform: scaleX(0); transform-origin: left; }
  .mostrador::after  { inset-block: 14%; width: 1px; left: 12%; transform: scaleY(0); transform-origin: top; }
  .mostrador[data-lancado="1"]::before {
    opacity: 1; transform: scaleX(1); transition: transform 260ms var(--curva);
  }
  .mostrador[data-lancado="1"]::after {
    opacity: 1; transform: scaleY(1); transition: transform 260ms var(--curva) 120ms;
  }

  .faq__sinal { transition: transform var(--duracao) var(--curva); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    .nav__link::after, .foot__link::after { transform: scaleX(1); }
    .mostrador::before { transform: scaleX(1); opacity: 1; }
    .mostrador::after  { transform: scaleY(1); opacity: 1; }
  }
}