@charset "UTF-8";
/* ======================================================================
   RESULTADOS — SISTEMA DE DESIGN
   -----------------------------------------------------------------------------
   Ficheiro unico, escrito a mao, sem build step. Sem dependencias externas.
   ====================================================================== */


/* ======================================================================
   01. RESET E BASE
   ====================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ancoras nao ficam escondidas debaixo do cabecalho fixo. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  min-height: 100svh;
  background-color: var(--paper-0);
  color: var(--ink-0);
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
  overflow-wrap: break-word;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* Foco: sempre visivel, sempre com a mesma linguagem. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

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

::-webkit-scrollbar { height: 8px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-full); }
::-webkit-scrollbar-track { background: transparent; }


/* ======================================================================
   02. TOKENS — ESCURO (default)
   -----------------------------------------------------------------------------
   Papel/tinta: `paper-*` sobe em elevacao, `ink-*` desce em enfase.
   ====================================================================== */

:root {
  /* Um tema so. `color-scheme: light` nao e decorativo: sem ele, um sistema em modo. */
  color-scheme: light;

  /* Papel e tinta ----------------------------------------------------- Papel quente. */
  --paper-0: #faf8f4;   /* pagina */
  --paper-1: #ffffff;   /* superficie / cartao */
  --paper-2: #f3efe8;   /* encaixe / inset */

  --ink-0: #17130e;     /* texto primario */
  --ink-1: #453e35;     /* texto secundario */
  --ink-2: #6b6255;     /* texto terciario (AA em corpo) */
  --ink-3: #8d8375;     /* decorativo */

  --line-0: rgba(23, 19, 14, 0.09);
  --line-1: rgba(23, 19, 14, 0.15);
  --line-2: rgba(23, 19, 14, 0.26);

  /* Bolas: o inverso do papel ---------------------------------------- A regra. */
  --ball-face-a: #4c525f;   /* lado iluminado */
  --ball-face-b: #2a2f39;   /* corpo */
  --ball-face-c: #14171d;   /* bordo em sombra */
  --ball-ink: #ffffff;
  --ball-shadow: 0 10px 26px -14px rgba(23, 19, 14, 0.45), 0 2px 5px -2px rgba(23, 19, 14, 0.24);
  --ball-inner: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -8px 14px -8px rgba(0, 0, 0, 0.35);

  /* Acento por omissao (sem jogo activo): jade */
  --accent: #0b7d59;
  --accent-ink: #0a7a57;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(11, 125, 89, 0.10);

  /* Semantica */
  --state-live: #0b7d59;
  --state-live-ink: #0a6b4c;
  --state-pending: #b57708;
  --state-pending-ink: #7d5005;

  --focus: #1a63d8;

  /* Elevacao */
  --shadow-1: 0 1px 2px rgba(23, 19, 14, 0.06), 0 8px 24px -16px rgba(23, 19, 14, 0.24);
  --shadow-2: 0 2px 4px rgba(23, 19, 14, 0.06), 0 24px 50px -28px rgba(23, 19, 14, 0.3);
  --header-bg: rgba(250, 248, 244, 0.82);

  /* Tipografia */
  /* Serif do sistema para titulos: New York (Apple), Georgia (universal). Da carater. */
  --font-display: ui-serif, "New York", Georgia, Cambria, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             "Noto Sans", Arial, sans-serif;
  /* Digitos: sans com tabular-nums. Georgia tem algarismos de texto (altura variavel) —. */
  --font-num: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Roboto Mono", "Liberation Mono", monospace;

  /* Escala fluida — terca menor (1.2) no telemovel, 1.25 no desktop. */
  --fs--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-0:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --fs-1:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --fs-2:  clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --fs-3:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --fs-4:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --fs-5:  clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);

  /* Espaco */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-section: clamp(2.75rem, 7vw, 5.5rem);

  /* Forma */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* Layout */
  --gutter: clamp(1.125rem, 5vw, 2.5rem);
  --measure: 68rem;
  --header-h: 4.5rem;

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
}


/* ======================================================================
   03. TOKENS — CLARO
   -----------------------------------------------------------------------------
   Papel ligeiramente quente (#fbfbf9) com cartoes brancos: a elevacao sobe para
   ====================================================================== */



/* Tema claro forcado explicitamente. Duplicado de proposito: um bloco `@media` nao. */



/* ======================================================================
   04. ACENTOS POR JOGO
   -----------------------------------------------------------------------------
   O acento resolve-se em QUALQUER elemento com `data-game`, nao so no <html>.
   ====================================================================== */

/* O Euromilhoes e azul, nao dourado: e a cor da marca. O dourado anterior era
   invencao nossa e nao correspondia a nada.
   Duas cores com funcoes distintas, e por isso separadas:
     --g-accent/ink  azul da marca, para tinta, contornos e a banda tingida
     --g-star        amarelo, a cor do objecto - as estrelas sorteadas sao
                     amarelas em qualquer boletim, e e assim que se reconhecem */
[data-game="euromilhoes"] {
  --g-accent: #1b3fa0; --g-ink: #17368a; --g-soft: rgba(27, 63, 160, 0.10);
  --g-star: #f3c02b;
}
[data-game="totoloto"] {
  --g-accent: #0b7d59; --g-ink: #0a7a57; --g-soft: rgba(11, 125, 89, 0.10);
}
[data-game="milhao"] {
  --g-accent: #5b4bd6; --g-ink: #4b3dbb; --g-soft: rgba(91, 75, 214, 0.10);
}
[data-game="lotaria-classica"] {
  --g-accent: #c0304a; --g-ink: #a5223b; --g-soft: rgba(192, 48, 74, 0.09);
}
[data-game="lotaria-popular"] {
  --g-accent: #b45a17; --g-ink: #964a11; --g-soft: rgba(180, 90, 23, 0.10);
}

/* Resolucao — escuro (default). O fallback e o jade da marca: `data-game=""` (o. */
[data-game] {
  --accent: var(--g-accent, #0b7d59);
  --accent-ink: var(--g-ink, #0a7a57);
  --accent-soft: var(--g-soft, rgba(11, 125, 89, 0.10));
}

/* Resolucao — claro. Duas formas por regra: o proprio <html> (paginas de jogo) e. */





/* ======================================================================
   05. TIPOGRAFIA
   ====================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.017em;
  text-wrap: balance;
  color: var(--ink-0);
}

h1 { font-size: var(--fs-5); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-3); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }

p { text-wrap: pretty; }

/* Sobrelinha editorial: caixa alta, tracking aberto, peso medio. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}
.eyebrow--accent { color: var(--accent-ink); }

.lead {
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--ink-1);
  max-width: 46ch;
}

.muted { color: var(--ink-1); }
.dim { color: var(--ink-2); }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; }

/* Cabecalho de seccao: titulo + regra fina que preenche o resto da linha. */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.section-head > h2,
.section-head > h3 { flex: 0 0 auto; }
.section-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-0);
  align-self: center;
}
.section-head .section-link {
  flex: 0 0 auto;
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color var(--dur-1) var(--ease);
}
.section-head .section-link:hover { color: var(--accent-ink); }
.section-head .section-link::after { content: " \2192"; }


/* ======================================================================
   06. GRELHA E SHELL
   -----------------------------------------------------------------------------
   Grelha de tres calhas: `content` (medida de leitura), `wide` (respiro para
   ====================================================================== */

.shell {
  display: grid;
  grid-template-columns:
    [full-start] var(--gutter)
    [wide-start] minmax(0, 1fr)
    [content-start] minmax(0, var(--measure))
    [content-end] minmax(0, 1fr)
    [wide-end] var(--gutter)
    [full-end];
}
.shell > * { grid-column: content; }
.bleed-wide { grid-column: wide; }
.bleed-full { grid-column: full; }

main { display: block; padding-bottom: var(--sp-8); }

.section { margin-block: var(--sp-section); }
.section--tight { margin-block: var(--sp-6); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 100;
  transform: translateY(-200%);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--paper-1);
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-2);
  color: var(--ink-0);
  font-size: var(--fs--1);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }


/* ======================================================================
   07. CABECALHO E NAVEGACAO
   ====================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line-1);
  /* O cabecalho tem de acabar visivelmente. Uma linha sozinha lia-se como mais
     um separador entre iguais; a sombra curta poe-no num plano acima. */
  box-shadow: 0 6px 16px -12px rgba(23, 19, 14, 0.45);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* Marca */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink-0);
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.brand__mark { width: 28px; height: 28px; flex: 0 0 auto; color: var(--accent); }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Navegacao de jogos */
.site-nav { min-width: 0; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  /* Espaco para o anel de foco nao ser cortado pelo overflow. */
  padding-block: 6px;
}
.site-nav__item { scroll-snap-align: end; flex: 0 0 auto; }
.site-nav__link {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-full);
  font-size: var(--fs--1);
  font-weight: 550;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-1);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.site-nav__link:hover { color: var(--ink-0); background: var(--paper-2); }
.site-nav__link[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

/* Em telemovel a nav e uma fila de alvos com forma propria. Tres coisas tem de ser. */
@media (max-width: 47.999em) {
  /* Duas camadas, nao uma barra amontoada: a marca fica no papel do cabecalho,
     com ar em cima e em baixo, e o menu assenta numa faixa de tom diferente,
     separada por um fio. Ao olhar percebe-se onde acaba uma e comeca a outra. */
  .site-header__bar { flex-wrap: wrap; row-gap: 0; min-height: 0; }
  .brand { padding-block: 0.85rem; gap: 0.7rem; }
  .site-nav {
    position: relative;
    order: 3;
    flex: 1 0 100%;
    margin-inline: calc(var(--gutter) * -1);
    border-top: 1px solid var(--line-1);
    background: var(--paper-2);
  }
  /* O desvanecimento e a afordancia que substitui a barra de deslocamento. */
  .site-nav::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 2.75rem;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--paper-2) 78%);
  }
  .site-nav__list {
    /* As pastilhas flutuam na faixa, nao ficam entaladas nela.
       A folga sozinha nao chegou: com alvos de 44px, a faixa crescia mas as
       pastilhas continuavam a tocar os bordos. Baixar a pastilha para 38px e
       subir a folga para 15/17px resolve os dois lados - e 38px continua bem
       acima do minimo de 24px exigido para um alvo de toque. */
    padding: 0.9375rem var(--gutter) 1.0625rem;
    /* Folga no fim + scroll-padding: o item que recebe foco por teclado nunca encosta ao. */
    padding-inline-end: 3.25rem;
    scroll-padding-inline: var(--gutter) 3.25rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
  }
  .site-nav__list::-webkit-scrollbar { display: none; }
  .site-nav__item { scroll-snap-align: start; }
  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.375rem;
    padding: 0 0.9rem;
    border: 1px solid var(--line-1);
    border-radius: var(--r-full);
    background: var(--paper-1);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-0);
    font-weight: 600;
    color: var(--ink-1);
  }
  /* O item activo distingue-se, nao domina. Preenchido a cor cheia, a pastilha
     saltava mais do que o proprio resultado - que e a razao de ser da pagina.
     Fundo tenue, contorno e tinta na cor do jogo chegam para o identificar. */
  .site-nav__link[aria-current="page"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }
  .site-nav__link:hover { background: var(--paper-2); color: var(--ink-0); }
  .site-nav__link[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent-ink); }
}

/* Em ecra largo cabem todos: nada de fila rolavel desnecessaria. */
/* Em ecra largo cabem todos na mesma fila: nada de empilhar nem de rolar. */
@media (min-width: 48em) {
  .site-nav__list { overflow: visible; flex-wrap: wrap; }
  .site-header__bar { min-height: 4.5rem; gap: var(--sp-6); }
}


/* ======================================================================
   08. MIGALHAS (BREADCRUMBS)
   ====================================================================== */

.crumbs { margin-top: var(--sp-5); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs--1);
  color: var(--ink-2);
}
.crumbs__item { display: flex; align-items: center; gap: 0.5rem; }
.crumbs__item + .crumbs__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--ink-3);
  border-right: 1px solid var(--ink-3);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.crumbs__link {
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--dur-1) var(--ease);
}
.crumbs__link:hover { color: var(--ink-0); text-decoration: underline; }


/* ======================================================================
   09. CABECALHO DE SORTEIO (HERO)
   -----------------------------------------------------------------------------
   O bloco mais importante do site. Fundo com um halo de acento muito ténue
   ====================================================================== */

/* Blocos que sangram para os bordos mas cujo CONTEUDO tem de alinhar com o
   resto da pagina.
   A banda de cor vai a toda a largura; o texto la dentro tem de cair na mesma
   coluna que tudo o resto. Com um recuo fixo de --gutter, o titulo encostava ao
   bordo do ecra enquanto o conteudo abaixo ficava centrado numa coluna de
   68rem: em ecra largo nada alinhava com nada.
   A conta: a coluna central comeca a (100% - --measure) / 2 do bordo. Em ecra
   estreito esse valor fica abaixo do --gutter, e o max() garante a margem
   minima. Um so valor serve as duas situacoes, sem media query. */
.shell > .crumbs,
.draw-hero {
  --band-inset: max(var(--gutter), calc((100% - var(--measure)) / 2));
  background: color-mix(in srgb, var(--accent) 13%, var(--paper-0));
}

.shell > .crumbs {
  grid-column: full;
  margin-top: 0;
  padding: var(--sp-5) var(--band-inset) 0;
  border-top: 3px solid var(--accent);
}

.draw-hero {
  position: relative;
  grid-column: full;
  padding: var(--sp-5) var(--band-inset) clamp(1.25rem, 3vw, 2rem);
}
/* Sem migalhas (home, hub sem percurso) a banda comeca no proprio hero. */
.shell > .crumbs + .draw-hero { padding-top: var(--sp-4); }

/* A chave fecha a banda, e desvanece para o papel em vez de cortar a direito. */
.draw-hero + .numbers,
.draw-hero + .code-block {
  grid-column: full;
  margin-top: 0;
  /* Mesmo recuo da banda acima: a chave tem de arrancar alinhada com o titulo. */
  padding: clamp(1.25rem, 3vw, 2rem) max(var(--gutter), calc((100% - var(--measure)) / 2)) clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 13%, var(--paper-0)) 58%,
      var(--paper-0) 100%);
}

.draw-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(80% 120% at 15% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 68%);
}

.draw-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: var(--sp-3);
}

.draw-hero__title {
  font-size: var(--fs-4);
  letter-spacing: -0.024em;
}
/* O nome do jogo leva a cor do jogo. Em cinzento quente sobre a banda tingida
   lia-se acastanhado e chocava com o azul do Euromilhoes - parecia o dourado
   antigo por engano. Com o acento, a cor passa a ser intencional. */
.draw-hero__title .draw-hero__game { display: block; color: var(--accent-ink); font-size: 0.62em; letter-spacing: -0.01em; }

.draw-hero__sub {
  margin-top: var(--sp-3);
  color: var(--ink-1);
  font-size: var(--fs-0);
}

/* Etiquetas de estado */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line-1);
  background: var(--paper-1);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-1);
  white-space: nowrap;
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge--live { color: var(--state-live-ink); border-color: color-mix(in srgb, var(--state-live) 35%, transparent); }
.badge--pending { color: var(--state-pending-ink); border-color: color-mix(in srgb, var(--state-pending) 35%, transparent); }
.badge--pending .badge__dot { animation: pulse 2.4s var(--ease) infinite; }

.badge--contest {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0.02em;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}


/* ======================================================================
   10. NUMEROS (BOLAS) — O HEROI
   -----------------------------------------------------------------------------
   Decisao de sistema: a bola e sempre o INVERSO do papel. Papel escuro -> bola
   ====================================================================== */

/* Uma so linha: chave e especiais lado a lado, separados por espaco em vez de por. */
.numbers {
  --ball-size: clamp(3.5rem, 8vw, 6rem);
  --ball-gap: clamp(0.5rem, 2.2vw, 0.875rem);
  --group-gap: clamp(1.5rem, 6vw, 3rem);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--sp-4) var(--group-gap);
  margin-block: var(--sp-6);
}

/* A estrela e 1.2x mais larga que uma bola; com o tamanho anterior, uma chave de 5+2. */
.numbers--compact {
  --ball-size: clamp(1.875rem, 6.4vw, 2.125rem);
  --ball-gap: 0.375rem;
  --group-gap: 0.875rem;
  gap: 0.375rem var(--group-gap);
  margin-block: 0;
}

.numbers__group { display: flex; align-items: center; }

.numbers__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.numbers__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-0);
}
/* As etiquetas de grupo ("Numeros", "Estrelas", "Numero da Sorte") sao sempre. */

.numbers__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ball-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ball {
  width: var(--ball-size);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  /* Esfera, nao circulo: especular em cima-a-esquerda, corpo a escurecer para o bordo. */
  background-image:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 36% 30%,
      var(--ball-face-a) 0%, var(--ball-face-b) 46%, var(--ball-face-c) 100%);
  color: var(--ball-ink);
  box-shadow:
    inset 0 0 0 0.02em rgba(255, 255, 255, 0.16),
    inset -0.07em -0.09em 0.16em -0.06em rgba(255, 255, 255, 0.2),
    0 0.05em 0.09em -0.02em rgba(23, 19, 14, 0.38),
    0 0.3em 0.5em -0.18em rgba(23, 19, 14, 0.34);

  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: calc(var(--ball-size) * 0.4);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  /* Trava o baseline: dois digitos e um digito ficam opticamente iguais. */
  font-feature-settings: "tnum" 1;
}

/* ESPECIAIS: A FORMA E QUE DISTINGUE ------------------------------------ Ate aqui so. */
.ball--special {
  --ball-accent: var(--accent);
  border-radius: 30%;
  background-image:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 36% 30%,
      color-mix(in srgb, var(--ball-accent) 100%, #fff 20%) 0%,
      var(--ball-accent) 50%,
      color-mix(in srgb, var(--ball-accent) 100%, #000 24%) 100%);
  background-color: var(--ball-accent);
  color: var(--accent-contrast);
  box-shadow:
    inset 0 0 0 0.02em rgba(255, 255, 255, 0.3),
    0 0.05em 0.09em -0.02em rgba(23, 19, 14, 0.32),
    0 0.3em 0.5em -0.18em color-mix(in srgb, var(--ball-accent) 45%, transparent);
}

/* Estrela amarela. O numero passa a tinta escura: branco sobre amarelo nao se le. */
[data-game="euromilhoes"] .ball--special {
  --ball-accent: var(--g-star, #f3c02b);
  color: #1c1503;
}

/* Estrela — so onde ha mesmo estrelas. */
[data-game="euromilhoes"] .ball--special {
  position: relative;
  isolation: isolate;
  /* O preenchimento sai do elemento e passa para uma camada propria: um clip-path. */
  background: none;
  box-shadow: none;
  border-radius: 0;
  /* Uma estrela ocupa menos area util que um circulo do mesmo lado; sem esta. */
  width: calc(var(--ball-size) * 1.2);
}

[data-game="euromilhoes"] .ball--special::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Atras do numero, a frente do fundo do proprio <li>. O `isolation: isolate` acima. */
  z-index: -1;
  background-color: var(--ball-accent);
  background-image:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 36% 30%,
      color-mix(in srgb, var(--ball-accent) 100%, #fff 18%) 0%,
      var(--ball-accent) 52%,
      color-mix(in srgb, var(--ball-accent) 100%, #000 22%) 100%);
  /* Estrela de cinco pontas com raio interior generoso (0.58 do exterior): le-se como. */
  clip-path: polygon(
    50% 0%, 67.05% 26.54%, 97.55% 34.55%, 77.58% 58.96%, 79.39% 90.45%,
    50% 79%, 20.61% 90.45%, 22.42% 58.96%, 2.45% 34.55%, 32.95% 26.54%
  );
  /* O drop-shadow vai aqui, e nao no <li>: um filtro no <li> aplicar-se-ia tambem ao. */
  filter: drop-shadow(0 0.08em 0.16em rgba(23, 19, 14, 0.28));
}

/* A massa da estrela esta acima do centro geometrico da caixa; o numero centrado a. */
[data-game="euromilhoes"] .ball--special { padding-bottom: 1.5%; }

/* Sem clip-path, o ::before seria um quadrado opaco por cima de tudo. Nesse caso nao. */
@supports not (clip-path: polygon(0 0, 1px 0, 0 1px)) {
  [data-game="euromilhoes"] .ball--special::before { display: none; }
  [data-game="euromilhoes"] .ball--special {
    border-radius: 30%;
    width: var(--ball-size);
    padding-bottom: 0;
    background-color: var(--ball-accent);
  }
}

/* Ordem de extraccao. Bloco proprio, empilhado: e a unica etiqueta que continua. */
.draw-order-block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: var(--sp-5);
}

/* Numeros pequenos, sem peso visual, em linha. */
.draw-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.draw-order__item {
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-1);
  background: var(--paper-1);
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs--1);
  color: var(--ink-1);
}


/* ======================================================================
   11. CODIGO (M1LHAO / LOTARIAS)
   -----------------------------------------------------------------------------
   Sem bolas, sem problema: o codigo passa a ser um bilhete. Painel invertido
   ====================================================================== */

.code-block {
  margin-block: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.code-block__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.code-block__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-0); }

.ticket {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 6vw, 2.5rem) clamp(1.25rem, 5vw, 2.75rem);
  border-radius: var(--r-lg);
  background-image: linear-gradient(165deg, var(--ball-face-a) 0%, var(--ball-face-b) 100%);
  color: var(--ball-ink);
  box-shadow: var(--ball-inner), var(--ball-shadow);
  text-align: center;
  overflow: hidden;
}

/* Picotado: dois semicirculos cor de papel nos bordos laterais. */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--paper-0);
  transform: translateY(-50%);
  z-index: 1;
}
.ticket::before { left: -0.625rem; }
.ticket::after { right: -0.625rem; }
/* Dentro da banda tingida, o picotado tem de ser da cor da banda: com a cor do
   papel liso lia-se como dois pontos brancos em vez de dois furos. */
.draw-hero + .code-block .ticket::before,
.draw-hero + .code-block .ticket::after {
  background: color-mix(in srgb, var(--accent) 13%, var(--paper-0));
}

.ticket__code {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.875rem, 10.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: clamp(0.04em, 1.2vw, 0.14em);
  line-height: 1.05;
  /* O ultimo caractere nao arrasta o tracking para fora do centro optico. */
  margin-inline-end: calc(clamp(0.04em, 1.2vw, 0.14em) * -1);
  overflow-wrap: anywhere;
}

.code-block--compact { margin-block: 0; gap: 0; }

.ticket__foot {
  display: block;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed color-mix(in srgb, var(--ball-ink) 24%, transparent);
  font-family: var(--font-ui);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}


/* ======================================================================
   12. TABELA DE PREMIOS
   -----------------------------------------------------------------------------
   As colunas mudam de jogo para jogo (Euromilhoes: Portugal/Total/Premio;
   ====================================================================== */

.prize-table__wrap {
  margin-top: var(--sp-5);
  border: 1px solid var(--line-0);
  border-radius: var(--r-lg);
  background: var(--paper-1);
  overflow: hidden;
}

.prize-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}

.prize-table caption {
  padding: var(--sp-4) var(--sp-5) 0;
  text-align: start;
  font-size: var(--fs--1);
  color: var(--ink-2);
}

.prize-table th,
.prize-table td { text-align: start; }

.prize-table thead th {
  font-family: var(--font-ui);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.prize-table tbody th {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink-0);
}

/* Telemovel: cartoes */
@media (max-width: 47.999em) {
  .prize-table,
  .prize-table tbody,
  .prize-table tr,
  .prize-table td { display: block; }

  /* Uma <caption> dentro de uma tabela em display:block gera uma caixa anonima que. */
  .prize-table caption { display: block; padding: var(--sp-4) var(--sp-5) 0; }

  .prize-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .prize-table tbody tr {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--line-0);
  }
  .prize-table tbody tr:first-child { border-top: 0; }

  .prize-table tbody th {
    display: block;
    font-size: var(--fs-1);
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-3);
  }

  .prize-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: 0.3rem;
    color: var(--ink-0);
  }
  /* A etiqueta visual vem do cabecalho real da fonte, guardado no atributo. */
  .prize-table td::before {
    content: attr(data-header);
    flex: 0 1 auto;
    font-size: var(--fs--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .prize-table td > span { text-align: end; font-weight: 550; }

  /* O premio e o valor que interessa: fica com peso proprio. Alvo semantico, nao. */
  .prize-table td[data-header^="Valor"] > span { font-size: var(--fs-1); color: var(--accent-ink); font-weight: 600; }
}

/* Desktop: tabela a serio */
@media (min-width: 48em) {
  .prize-table__wrap { overflow-x: auto; }

  .prize-table th,
  .prize-table td {
    padding: 0.85rem var(--sp-4);
    white-space: nowrap;
  }
  .prize-table th:first-child,
  .prize-table td:first-child { padding-inline-start: var(--sp-5); white-space: normal; min-width: 9.5rem; }

  /* Os valores nunca partem; os cabecalhos podem. Em caixa alta com tracking aberto sao. */
  .prize-table thead th { white-space: normal; vertical-align: bottom; text-wrap: balance; }
  .prize-table th:last-child,
  .prize-table td:last-child { padding-inline-end: var(--sp-5); }

  /* Tudo o que nao e a etiqueta do escalao e numerico: alinha a direita. */
  .prize-table th:not(:first-child),
  .prize-table td:not(:first-child) { text-align: end; }

  .prize-table thead th {
    padding-block: var(--sp-4) 0.7rem;
    border-bottom: 1px solid var(--line-1);
  }

  .prize-table tbody tr { border-top: 1px solid var(--line-0); }
  .prize-table tbody tr:first-child { border-top: 0; }
  .prize-table tbody tr:hover { background: var(--paper-2); }

  .prize-table tbody td { color: var(--ink-1); }
  .prize-table tbody td[data-header^="Valor"] { color: var(--ink-0); font-weight: 600; }

  .prize-table td::before { content: none; }
}


/* ======================================================================
   12b. PREMIOS POR SEQUENCIA (LOTARIAS)
   -----------------------------------------------------------------------------
   Nao e uma lista para ler, e uma tabela para varrer: a pessoa tem o bilhete na
   ====================================================================== */

.sequences__hint {
  margin-bottom: var(--sp-5);
  max-width: 52ch;
  color: var(--ink-2);
  font-size: var(--fs--1);
}

.sequences {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-4);
}
@media (min-width: 52em) {
  .sequences { gap: var(--sp-5); }
}

.sequences__group {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line-0);
  border-radius: var(--r-lg);
  background: var(--paper-1);
  overflow: hidden;
}

.sequences__label {
  font-family: var(--font-ui);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line-0);
}

/* Pastilhas separadas, e nao uma malha de fios: com uma malha, a ultima fila quase. */
.sequences__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: var(--sp-4);
  list-style: none;
}

.sequences__value {
  min-width: 3.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  border: 1px solid #d7e2ee;
  background: #f7faff;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-1);
  font-weight: 600;
  /* Espaco entre algarismos: sao lidos um a um contra o bilhete, nao como um numero. */
  letter-spacing: 0.08em;
  color: var(--ink-0);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
/* Passar o rato marca a celula: ajuda a nao perder o sitio a meio do varrimento. */
.sequences__value:hover { background: var(--accent-soft); color: var(--accent-ink); }


/* ======================================================================
   13. CARTOES E GRELHAS DE LISTAGEM
   ====================================================================== */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--line-0);
  border-radius: var(--r-lg);
  background: var(--paper-1);
  transition: border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--line-1); background: var(--paper-2); transform: translateY(-2px); }
.card:focus-within { border-color: var(--accent); }

.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }

.card__date {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}
/* O link cobre o cartao inteiro — um unico alvo, um unico tab-stop. */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* O anel de foco muda-se do link para o cartao inteiro — mas so onde `:has()` existe.. */
@supports selector(:has(*)) {
  .card__link:focus-visible { outline: none; }
  .card:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
}

.card__contest {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs--1);
  color: var(--ink-2);
  flex: 0 0 auto;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-0);
  font-size: var(--fs--1);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Home: masthead -------------------------------------------------------- Curto de. */

.home-masthead { padding-top: var(--sp-6); }
.home-masthead h1 {
  font-size: var(--fs-3);
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.home-masthead .lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-0);
  color: var(--ink-2);
  max-width: 54ch;
}

.home-upcoming { border-top: 1px solid var(--line-0); }
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.upcoming-card {
  display: flex;
  min-height: 10.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--accent-soft), transparent 58%), var(--paper-1);
  color: var(--ink-0);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.upcoming-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.upcoming-card strong { margin-top: auto; font-family: var(--font-display); font-size: var(--fs-1); }
.upcoming-card small { color: var(--accent-ink); font-weight: 650; }

/* Home: resultado em destaque ------------------------------------------ A home. */

.featured {
  position: relative;
  isolation: isolate;
  margin-top: var(--sp-5);
  padding: clamp(1.25rem, 4.5vw, 2.25rem);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 85% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--paper-1);
  overflow: hidden;
}

.featured::before { content: none; }

.featured__game {
  font-size: var(--fs-4);
  letter-spacing: -0.026em;
  margin-top: var(--sp-2);
}
.featured__game a {
  color: var(--accent-ink);
  text-decoration: none;
}
.featured__game a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.featured__meta {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  color: var(--ink-1);
  font-size: var(--fs-0);
}
/* O separador pertence ao item seguinte, nao ao anterior: assim quebra COM ele e. */
.featured__meta > * + *::before {
  content: "\00B7";
  color: var(--ink-3);
  margin-inline-end: 0.5rem;
}
/* O concurso vai sempre para linha propria, sem separador: "data · dia" nunca cabe. */
.featured__contest {
  flex-basis: 100%;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.featured__meta > .featured__contest::before { content: none; }

/* Ligeiramente menor que o heroi da pagina de sorteio: ali e o assunto, aqui e a. */
.featured__numbers {
  --ball-size: clamp(2.875rem, 11.5vw, 4rem);
  --ball-gap: clamp(0.4375rem, 1.8vw, 0.75rem);
  /* Mesma linguagem da pagina de sorteio: o espaco entre grupos e ~3x o espaco entre. */
  --group-gap: clamp(1.375rem, 5.5vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--group-gap);
  margin-top: var(--sp-5);
}
.featured__numbers .numbers__list { display: flex; flex-wrap: wrap; gap: var(--ball-gap); margin: 0; padding: 0; list-style: none; }

.featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-5);
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-0);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.featured__cta:hover { color: var(--accent-ink); border-color: var(--accent); }
.featured__cta::after { content: "\2192"; }

/* Em ecra largo o painel parte-se em dois: identidade a esquerda, chave a direita. O. */
@media (min-width: 68em) {
  .featured {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .featured > .eyebrow { grid-column: 1; grid-row: 1; }
  .featured__game      { grid-column: 1; grid-row: 2; }
  .featured__meta      { grid-column: 1; grid-row: 3; }
  /* Um item de grelha e blockified: sem isto o inline-flex esticava e o sublinhado do. */
  .featured__cta       { grid-column: 1; grid-row: 4; justify-self: start; }
  .featured__numbers   { grid-column: 2; grid-row: 1 / 5; align-self: center; margin-top: 0; }
}

/* Home: grelha dos restantes resultados -------------------------------- Duas. */

.result-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Numero impar de jogos: o ultimo ocupa a linha toda em vez de deixar um buraco.. */
  .result-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--line-0);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 90% at 100% 0%, var(--accent-soft), transparent 62%),
    var(--paper-1);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.result-card:hover { border-color: var(--line-1); transform: translateY(-2px); }

.result-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--sp-4);
}
/* O nome do jogo a cor do jogo: e o que faltava. Dois sorteios com a mesma data. */
.result-card__game {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--accent-ink);
}
.result-card__date {
  font-size: var(--fs--1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-card__value {
  --ball-size: clamp(2.125rem, 7.5vw, 2.5rem);
  --ball-gap: 0.4375rem;
  --group-gap: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--group-gap);
  margin-top: auto;
}
.result-card__value .numbers__list { display: flex; flex-wrap: wrap; gap: var(--ball-gap); margin: 0; padding: 0; list-style: none; }

.result-card__link { text-decoration: none; color: inherit; }
.result-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@supports selector(:has(*)) {
  .result-card__link:focus-visible { outline: none; }
  .result-card:has(.result-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
}

/* Codigo em formato reduzido ------------------------------------------- O bilhete. */
.code-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-md);
  background-image: linear-gradient(165deg, var(--ball-face-a) 0%, var(--ball-face-b) 100%);
  color: var(--ball-ink);
  box-shadow: var(--ball-inner), var(--ball-shadow);
  font-family: var(--font-mono);
  font-size: clamp(1.0625rem, 4.2vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.code-chip--lg {
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-lg);
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  letter-spacing: 0.12em;
}


/* Prosa editorial ------------------------------------------------------ Texto. */

.prose {
  max-width: 66ch;
  color: var(--ink-1);
  font-size: var(--fs-1);
  line-height: 1.65;
}
.prose > * + * { margin-top: var(--sp-4); }
.prose strong { color: var(--ink-0); font-weight: 600; }
.prose a { color: var(--accent-ink); text-underline-offset: 0.2em; }


/* Perguntas frequentes ------------------------------------------------- `<details>`. */

.faq { border-top: 1px solid var(--line-0); }

.faq__item { border-bottom: 1px solid var(--line-0); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-1);
  font-weight: 550;
  color: var(--ink-0);
  /* O marcador nativo sai nos dois motores. */
  list-style: none;
  transition: color var(--dur-1) var(--ease);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--accent-ink); }
.faq__question:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.faq__chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ink-2);
  transition: transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__question:hover .faq__chevron { color: var(--accent-ink); }

.faq__answer {
  padding: 0 var(--sp-2) var(--sp-5);
  max-width: 66ch;
  color: var(--ink-1);
  line-height: 1.65;
}
.faq__answer > * + * { margin-top: var(--sp-3); }
.faq__answer a { color: var(--accent-ink); }


/* ======================================================================
   14. LEDGER (ARQUIVO)
   -----------------------------------------------------------------------------
   Lista densa e editorial: linha por sorteio, hairlines, sem caixas. Le-se como
   ====================================================================== */

.ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-0); }

.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line-0);
  transition: background-color var(--dur-1) var(--ease);
}
.ledger__row:hover { background: var(--paper-1); }

.ledger__link { text-decoration: none; color: inherit; }
.ledger__link::after { content: ""; position: absolute; inset: 0; }

@supports selector(:has(*)) {
  .ledger__link:focus-visible { outline: none; }
  .ledger__row:has(.ledger__link:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: var(--r-sm);
  }
}

.ledger__date {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}
.ledger__contest {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs--1);
  color: var(--ink-2);
  margin-inline-start: 0.6rem;
}
/* A seta e decorativa: em telemovel ocuparia uma linha inteira por sorteio. */
.ledger__cue { display: none; }

.ledger__code {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

@media (min-width: 48em) {
  .ledger__row {
    grid-template-columns: minmax(11rem, 18rem) 1fr auto;
    gap: var(--sp-5);
    padding-inline: var(--sp-4);
  }
  .ledger__cue { display: block; color: var(--ink-3); transition: color var(--dur-1) var(--ease); }
  .ledger__row:hover .ledger__cue { color: var(--accent-ink); }
}


/* ======================================================================
   15. ESTADO AGENDADO / PENDENTE
   -----------------------------------------------------------------------------
   Uma pagina de sorteio futuro nao pode ser uma pagina vazia. Explica o estado,
   ====================================================================== */

.pending {
  position: relative;
  margin-block: var(--sp-6);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background:
    radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--state-pending) 8%, transparent), transparent 62%),
    var(--paper-1);
  overflow: hidden;
}

.pending::after { content: none; }

.pending__title {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: var(--sp-3);
}
.pending__text { margin-top: var(--sp-3); color: var(--ink-1); max-width: 48ch; }

.pending__facts {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-0);
}
.pending__fact dt {
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pending__fact dd {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}
.pending__source {
  margin-top: var(--sp-5);
  color: var(--ink-2);
  font-size: var(--fs--1);
  max-width: 68ch;
}
.pending__context { margin-top: var(--sp-4); color: var(--ink-1); max-width: 68ch; }

.archive-period-note {
  margin-top: calc(var(--sp-4) * -1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-1);
}


/* ======================================================================
   16. NAVEGACAO ENTRE SORTEIOS
   ====================================================================== */

.adjacent {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
}
@media (min-width: 40em) { .adjacent { grid-template-columns: 1fr 1fr; } }

.adjacent__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-0);
  border-radius: var(--r-lg);
  background: var(--paper-1);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.adjacent__link:hover { border-color: var(--line-1); background: var(--paper-2); }
.adjacent__dir {
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.adjacent__date {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.adjacent__link--next { text-align: end; }


/* ======================================================================
   17. RODAPE
   ====================================================================== */

.site-footer {
  margin-top: var(--sp-section);
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--line-0);
  background: var(--paper-1);
  font-size: var(--fs--1);
  color: var(--ink-2);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-0);
}
.site-footer__note { margin-top: var(--sp-3); max-width: 52ch; line-height: 1.6; }

.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { color: var(--ink-1); text-decoration: none; }
.site-footer__links a:hover { color: var(--ink-0); text-decoration: underline; }

.site-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-0);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-2);
}

.age-mark {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-family: var(--font-num);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-1);
}


/* ======================================================================
   18. UTILITARIOS
   ====================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.panel {
  padding: var(--sp-5);
  border: 1px solid var(--line-0);
  border-radius: var(--r-lg);
  background: var(--paper-1);
}

.rule { height: 1px; background: var(--line-0); border: 0; margin-block: var(--sp-6); }

.empty {
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--line-1);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-2);
}


/* ======================================================================
   17b. CONSENTIMENTO
   `position: fixed` de proposito: sobrepoe, nao empurra, logo nao desloca nada.
   OS DOIS BOTOES SAO DELIBERADAMENTE IDENTICOS. Um "Recusar" mais discreto que
   ====================================================================== */

.consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  padding: var(--sp-4) var(--gutter) max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  background: var(--paper-1);
  border-top: 1px solid var(--line-1);
  box-shadow: var(--shadow-2);
}
.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
@media (min-width: 48em) {
  .consent__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-6); }
  .consent__actions { flex: 0 0 auto; }
}

.consent__title { font-size: var(--fs-0); font-weight: 600; color: var(--ink-0); }
.consent__body {
  margin-top: 0.35rem;
  max-width: 64ch;
  font-size: var(--fs--1);
  line-height: 1.55;
  color: var(--ink-1);
}
.consent__body a { color: var(--accent-ink); }

.consent__actions { display: flex; gap: var(--sp-3); }
.consent__button {
  /* `1 1 0` e nao `1 1 auto`: com base automatica os botoes ficavam com larguras
     diferentes por causa do texto, e "mesmo peso visual" tem de ser mesmo. */
  flex: 1 1 0;
  min-width: 8.5rem;
  min-height: 2.75rem;
  padding: 0 1.35rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper-0);
  color: var(--ink-0);
  font-size: var(--fs-0);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.consent__button:hover { background: var(--paper-2); border-color: var(--ink-3); }


/* ======================================================================
   19. MOVIMENTO, IMPRESSAO, FORCED-COLORS
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .game-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .ball,
  .ticket {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }
  .ball--special { border-width: 3px; }
  /* Em forced-colors o preenchimento e imposto pelo sistema, logo uma estrela recortada. */
  [data-game="euromilhoes"] .ball--special {
    border-radius: 30%;
    width: var(--ball-size);
    padding-bottom: 0;
  }
  [data-game="euromilhoes"] .ball--special::before { display: none; }
  .card, .panel, .prize-table__wrap { border-color: CanvasText; }
  .badge { border-color: CanvasText; }
}

@media print {
  .site-header,
  .site-footer,
  .adjacent,
  .skip-link,
  .draw-hero__glow,
  .crumbs { display: none !important; }

  html, body { background: #fff; color: #000; }
  :root {
    --ball-face-a: #fff; --ball-face-b: #fff; --ball-ink: #000;
    --ball-shadow: none; --ball-inner: none;
    --line-0: #ccc; --line-1: #999; --line-2: #666;
    --paper-0: #fff; --paper-1: #fff; --paper-2: #fff;
    --ink-0: #000; --ink-1: #222; --ink-2: #444;
  }
  .ball { border: 1.5px solid #000; }
  .ball--special { border-width: 3px; }
  /* No papel a cor desaparece, e e exactamente por isso que a forma existe. A estrela. */
  [data-game="euromilhoes"] .ball--special { border: 0; color: #fff; }
  [data-game="euromilhoes"] .ball--special::before {
    display: block;
    background: #000;
    filter: none;
  }
  .ticket { border: 1.5px solid #000; }
  .prize-table__wrap { border: 1px solid #000; }
  .section { margin-block: 1.25rem; break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* =============================================================================
   20. VERIFICADOR DE CHAVES
   -----------------------------------------------------------------------------
   Campos grandes e separados: quem usa isto tem um boletim numa mao e o
   telemovel na outra. Alvos pequenos obrigam a parar e apontar.
   ========================================================================== */

.checker {
  padding: var(--sp-5);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: var(--paper-1);
  box-shadow: var(--shadow-1);
}
.checker__intro { max-width: 46ch; margin-bottom: var(--sp-5); color: var(--ink-1); font-size: var(--fs--1); }
.checker__field { margin-bottom: var(--sp-5); }
.checker__label {
  margin-bottom: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.checker__select {
  width: 100%;
  max-width: 22rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper-0);
  font-size: var(--fs-0);
}
.checker__group { margin-bottom: var(--sp-5); }
.checker__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Quadrados e nao rectangulos: espelham a forma das bolas e deixam claro que
   cada campo leva um numero, nao uma sequencia. */
.checker__input {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper-0);
  font-family: var(--font-num);
  font-size: var(--fs-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.checker__input:focus-visible { border-color: var(--accent); }
.checker__input--special { border-color: color-mix(in srgb, var(--g-star, var(--accent)) 60%, var(--line-2)); }
.checker__group:has(.checker__input[maxlength="12"]) .checker__input { width: 100%; max-width: 14rem; letter-spacing: 0.1em; }

.checker__submit {
  min-height: 2.75rem;
  padding: 0 var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--paper-1);
  font-size: var(--fs-0);
  font-weight: 650;
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease);
}
.checker__submit:hover { opacity: 0.9; }

.checker__result {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.checker__result--premio .checker__result-title { color: var(--state-live); }
.checker__result--aviso .checker__result-title { color: var(--state-pending); }
.checker__result-title { font-size: var(--fs-1); font-weight: 650; }
.checker__result-body { margin-top: var(--sp-2); color: var(--ink-1); }
/* A remissao para a fonte oficial acompanha sempre o resultado. Discreta, mas
   nunca ausente: e o que impede a resposta de ser tomada por definitiva. */
.checker__note { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--fs--1); }

/* ======================================================================
   20. REDESIGN 2026 — PAINEL DE RESULTADOS
   ----------------------------------------------------------------------
   Direção: uma mesa de controlo de sorteios, não uma página editorial.
   Azul nocturno transmite confirmação; azul eléctrico sinaliza ação; o
   amarelo é reservado aos números especiais e estados em espera.
   ====================================================================== */
:root {
  --paper-0: #edf3f9;
  --paper-1: #ffffff;
  --paper-2: #e5edf6;
  --ink-0: #071a35;
  --ink-1: #36506f;
  --ink-2: #607a98;
  --ink-3: #8da3bc;
  --line-0: #dbe6f1;
  --line-1: #c8d8e8;
  --line-2: #a9c0d7;
  --accent: #176cf5;
  --accent-ink: #0753cd;
  --accent-contrast: #fff;
  --accent-soft: #e7f0ff;
  --state-live: #11a978;
  --state-live-ink: #087957;
  --state-pending: #b57400;
  --state-pending-ink: #7a4c00;
  --focus: #f2a900;
  --shadow-1: 0 2px 7px rgba(15, 49, 87, .08), 0 14px 30px rgba(15, 49, 87, .06);
  --shadow-2: 0 12px 40px rgba(8, 36, 71, .13);
  --header-bg: rgba(6, 25, 55, .96);
  --font-display: ui-sans-serif, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --header-h: 4.25rem;
  /* Uma só coluna de referência para navegação, rastos, títulos e cartões.
     Os hubs já usam 70rem; manter o resto em 74rem criava desalinhamentos
     visíveis entre o logótipo, o título e o resultado. */
  --measure: 70rem;
}

body { background: #edf3f9; letter-spacing: .003em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 750; letter-spacing: -.035em; }
h1 { font-size: clamp(2.15rem, 5vw, 4.75rem); line-height: .98; }
h2 { font-size: clamp(1.35rem, 2.8vw, 2rem); }
a { color: var(--accent-ink); }
/* A shell tem de ocupar a largura da janela. Limitar a própria shell a 78rem
   deixava a grelha ancorada à esquerda em ecrãs largos; a coluna de conteúdo
   já é limitada por --measure e centra-se pelas duas calhas flexíveis. */
.shell { width: 100%; max-width: none; }
.section { margin-block: clamp(2.5rem, 6vw, 5.25rem); }
.section-head { align-items: end; border-bottom: 2px solid var(--line-1); padding-bottom: .8rem; }
.section-head::after { display: none; }
.section-head h2 { padding-left: 0; }
.section-head h2::before { content: none; }
.section-head .section-link {
  margin-left: auto;
  border: 0;
  padding: 0;
  color: var(--accent-ink);
  font-weight: 750;
  text-decoration: none;
}

/* Navegação: barra operacional escura e itens compactos. */
.site-header { background: #061937; border-bottom: 0; box-shadow: 0 3px 18px rgba(3, 17, 41, .24); }
.site-header__bar { min-height: var(--header-h); }
.brand { color: #fff; text-decoration: none; gap: .6rem; }
.brand__mark { color: #f4bd22; width: 25px; height: 25px; }
.brand__name { font-size: 1rem; font-weight: 800; letter-spacing: -.035em; }
.site-nav__list { gap: .25rem; }
.site-nav__link { color: #c5d7ee; border-radius: var(--r-sm); font-size: .79rem; font-weight: 700; letter-spacing: .015em; padding: .45rem .58rem; }
.site-nav__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.site-nav__link[aria-current="page"] { color: #061937; background: #f4bd22; }
.site-nav__link--home { width: 2.4rem; justify-content: center; padding: 0; }
.site-nav__link--home svg { width: 1rem; height: 1rem; fill: currentColor; }

.crumbs { margin-top: 1.75rem; }
.crumbs__list { font-size: .75rem; color: var(--ink-2); }
.draw-hero { margin-top: 1.5rem; padding: clamp(1.6rem, 4vw, 3.25rem); border: 1px solid #d5e1ec; border-radius: var(--r-xl); background: linear-gradient(125deg, #fff 0%, #f2f7fc 100%); box-shadow: var(--shadow-1); }
.draw-hero__glow { display: none; }
.draw-hero__meta { gap: .45rem; }
.draw-hero__title { margin-top: 1rem; }
.draw-hero__title .draw-hero__game { color: var(--accent-ink); font-size: .42em; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; margin-bottom: .45rem; }
.badge { border-radius: 4px; padding: .3rem .5rem; background: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.badge--contest { color: var(--ink-2); border-color: var(--line-1); }
.badge--live { background: #e4f7f0; border-color: #a4e2cd; }
.badge--pending { background: #fff5d9; border-color: #f0d486; }

/* Home: primeira dobra como um terminal de consulta, não hero editorial. */
/* A hero da home é uma faixa inteira. Só o texto respeita a grelha central. */
.home-masthead {
  position: relative;
  grid-column: full;
  width: 100%;
  margin: 0;
  padding-block: clamp(2.4rem, 6vw, 5rem);
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  overflow: hidden;
  color: #fff;
  background: #061937;
}
.home-masthead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 84% 20%, rgba(26,112,249,.55), transparent 25rem), linear-gradient(120deg, transparent 55%, rgba(244,189,34,.15)); pointer-events: none; }
.home-masthead > * { position: relative; z-index: 1; }
.home-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .72fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
}
.home-masthead__copy { min-width: 0; }
.home-masthead .eyebrow { color: #f4bd22; margin-top: .7rem; }
.home-masthead h1 { max-width: 10ch; color: #fff; margin-top: .6rem; font-size: clamp(3.2rem, 6.1vw, 5.8rem); line-height: .92; }
.home-masthead .lead { max-width: 54ch; margin-top: 1.25rem; color: #d4e3f4; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.home-masthead__subtitle { max-width: 47ch; margin: 1rem 0 0; color: #d4e3f4; font-size: clamp(.98rem, 1.45vw, 1.16rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.5; }
.home-masthead__signal { display: inline-flex; align-items: center; gap: .45rem; color: #bfd6ef; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.home-masthead__signal span { width: .55rem; height: .55rem; border-radius: 50%; background: #43e2a8; box-shadow: 0 0 0 5px rgba(67,226,168,.15); }
.home-masthead__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.home-masthead__games {
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  border: 1px solid rgba(174, 204, 238, .32);
  border-radius: 1rem;
  background: rgba(8, 37, 80, .52);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .16);
  backdrop-filter: blur(8px);
}
.home-masthead__games > p { margin: 0 0 .9rem; color: #f4bd22; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.home-masthead__games > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.home-masthead__games a {
  display: flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .72rem;
  border: 1px solid rgba(183, 211, 241, .22);
  border-radius: .55rem;
  color: #f3f7fd;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.15;
  text-decoration: none;
}
.home-masthead__games a:hover { border-color: #f4bd22; background: rgba(244, 189, 34, .13); }
.home-masthead__games a:focus-visible { outline: 3px solid #f4bd22; outline-offset: 3px; }
.home-masthead__games a span { color: #f4bd22; }
.home-primary-action, .home-secondary-action { min-height: 2.85rem; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 7px; font-size: .88rem; font-weight: 800; text-decoration: none; }
.home-primary-action { background: #f4bd22; color: #061937; }
.home-secondary-action { border: 1px solid rgba(255,255,255,.35); color: #fff; }

.home-featured-section { margin-top: clamp(1.5rem, 4vw, 2.75rem); }
.featured { margin-top: 0; border: 1px solid var(--line-1); border-radius: var(--r-xl); padding: clamp(1.4rem, 4vw, 2.75rem); background: #fff; box-shadow: var(--shadow-1); }
.featured::before { content: none; }
.featured .eyebrow { color: var(--accent-ink); }
.featured__game { margin-top: .45rem; font-size: clamp(1.7rem, 3.5vw, 3.15rem); }
.featured__game a { color: var(--ink-0); text-decoration: none; }
.featured__meta { margin-top: .85rem; color: var(--ink-2); font-weight: 650; }
.featured__context { max-width: 35rem; margin: .75rem 0 0; color: var(--ink-1); font-size: .83rem; line-height: 1.5; }
.featured__numbers { padding: 1.3rem 0; margin-top: 1.2rem; border-top: 1px solid var(--line-0); border-bottom: 1px solid var(--line-0); }
.featured__cta { display: inline-flex; align-items: center; min-height: 2.8rem; margin-top: 1.2rem; padding: 0 1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 800; text-decoration: none; }
.featured__cta:hover { background: var(--accent-ink); color: #fff; }

/* Objetos de sorteio: bolas limpas, sem efeito cromado. */
.numbers { gap: 1rem; }
.numbers__list { gap: .55rem; }
.ball { width: clamp(2.25rem, 5vw, 3.25rem); height: clamp(2.25rem, 5vw, 3.25rem); border: 2px solid #d6e1ed; border-radius: 10px; background: #f7faff; box-shadow: none; color: #102b50; font-family: var(--font-num); font-size: clamp(.86rem, 2.3vw, 1.12rem); font-weight: 800; }
.ball--special { border-color: #f3bd20; background: #fff4cf; color: #664600; border-radius: 10px; }
.code-block { margin-top: 1.5rem; }
.ticket { border: 1px dashed #94b0c9; border-radius: 8px; background: #f7faff; box-shadow: none; }
.ticket__code { color: var(--ink-0); }

.home-upcoming { padding: 1.5rem; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); }
.upcoming-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.upcoming-card { min-height: 11.25rem; border: 1px solid var(--line-1); border-radius: 8px; background: #fff; box-shadow: none; }
.upcoming-card:hover { border-color: #8eafd0; box-shadow: var(--shadow-1); }
.upcoming-card .badge--pending { align-self: flex-start; }

.result-grid { gap: 1rem; }
.result-card { border: 1px solid var(--line-1); border-radius: 10px; background: #fff; box-shadow: none; }
.result-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.result-card__game { font-size: 1.05rem; }
.result-card__date { font-family: var(--font-num); font-size: .72rem; }
.result-card__value { margin-top: 1.2rem; }

/* A consulta principal e uma grelha completa: um cartao por jogo, todos na
   mesma familia de superficie, banda de cor e objectos de resultado. A agenda
   que se segue fica assim inequivocamente reservada aos proximos sorteios. */
.home-results { margin-top: clamp(1.5rem, 4vw, 2.75rem); }
.home-other-results { margin-top: 1rem; }
.result-grid--home { grid-template-columns: 1fr; }
.result-grid--home > li { min-width: 0; }
.result-grid--home > li:last-child:nth-child(odd) { grid-column: auto; }
.result-grid--home .result-card {
  height: 100%;
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.2vw, 1.35rem);
}
.result-grid--home .result-card__head { gap: .35rem var(--sp-3); }
.result-grid--home .result-card__game { font-size: var(--fs-1); }
.result-grid--home .result-card__value { margin-top: 1rem; }
@media (min-width: 38rem) {
  .result-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  /* São quatro jogos sob o Euromilhões: duas colunas preservam cartões
     equivalentes, em vez de deixar a Lotaria Popular isolada numa terceira. */
  .result-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Na home, cinco cartões grandes criavam áreas vazias, sobretudo nos jogos
   de código. A lista passa a ser um painel de consulta: jogo, data e chave
   lidos na mesma linha. O azul é a única cor estrutural desta zona. */
.result-grid--home {
  grid-template-columns: 1fr;
  gap: .7rem;
}
.result-grid--home .result-card {
  display: grid;
  grid-template-columns: minmax(9.5rem, .7fr) minmax(0, 1fr);
  align-items: center;
  gap: .8rem 1.25rem;
  min-height: 0;
  padding: .95rem 1.15rem;
}
.result-grid--home .result-card__head {
  display: grid;
  gap: .25rem;
}
.result-grid--home .result-card__game { color: #123f9c; }
.result-grid--home .result-card__date { justify-self: start; }
.result-grid--home .result-card__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
  margin-top: 0;
}
.result-grid--home .result-card__value .numbers__list { flex-wrap: nowrap; }
.result-grid--home .result-card__value .ticket-card { margin: 0; }
@media (max-width: 42rem) {
  .home-masthead { display: block; }
  .home-masthead__games { margin-top: 1.5rem; }
  .home-masthead__games > div { grid-template-columns: 1fr; }
  .result-grid--home .result-card { grid-template-columns: 1fr; gap: .7rem; }
  .result-grid--home .result-card__head { grid-template-columns: 1fr auto; align-items: baseline; }
  .result-grid--home .result-card__date { justify-self: end; }
  .result-grid--home .result-card__value .numbers__list { flex-wrap: wrap; }
}

/* Nos cartões de arquivo, a chave principal fica numa linha contínua e o
   Número da Sorte fica sempre abaixo. Assim, nunca se mistura no meio dos
   cinco números do Totoloto. */
.card .numbers--compact {
  --ball-size: 2rem;
  --ball-gap: .4rem;
  --group-gap: .75rem;
  display: block;
}
.card .numbers--compact .numbers__group { display: flex; width: 100%; }
.card .numbers--compact .numbers__group + .numbers__group {
  margin-block-start: .55rem;
  margin-inline-start: 0;
}
.card .numbers--compact .numbers__list { flex-wrap: nowrap !important; }
[data-game="totoloto"] .card .numbers--totoloto {
  display: block;
  gap: 0;
}
[data-game="totoloto"] .card .numbers--totoloto .numbers__group + .numbers__group {
  padding-top: 0;
  border-top: 0;
  align-items: flex-start;
}
[data-game="totoloto"] .card .numbers--totoloto .numbers__group + .numbers__group::before {
  content: "N.º da Sorte";
  display: block;
  margin: .5rem .55rem 0 0;
  color: var(--ink-2);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}
@media (max-width: 24rem) {
  .card .numbers--compact { --ball-size: 1.8rem; --ball-gap: .3rem; --group-gap: .5rem; }
}

/* Home: resultados em pares. O quinto jogo fica na última linha ao lado de
   uma ação útil para verificar a chave, em vez de deixar um grande vazio. */
.result-grid--home { grid-template-columns: 1fr; gap: 1rem; }
.result-grid--home .result-card {
  display: flex;
  align-items: stretch;
  min-height: 10.75rem;
  padding: clamp(1.2rem, 2.25vw, 1.6rem);
}
.result-grid--home .result-card__head {
  display: flex;
  gap: .35rem var(--sp-3);
}
.result-grid--home .result-card__game { color: #123f9c; font-size: var(--fs-1); }
.result-grid--home .result-card__date { justify-self: auto; }
.result-grid--home .result-card__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem var(--group-gap);
  margin-top: 1rem;
}
.result-grid--home .result-card__value .numbers__list { flex-wrap: wrap; }
.result-grid--home .result-card__value .ticket-card { margin-top: .2rem; }
.home-checker-teaser { min-width: 0; }
.home-checker-teaser > a {
  display: flex;
  min-height: 10.75rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  padding: clamp(1.2rem, 2.25vw, 1.6rem);
  border: 1px solid #215bb2;
  border-radius: var(--r-lg);
  background: #0b2d60;
  color: #fff;
  box-shadow: none;
  text-decoration: none;
}
.home-checker-teaser > a:hover { background: #0e3978; }
.home-checker-teaser > a:focus-visible { outline: 3px solid #f4bd22; outline-offset: 3px; }
.home-checker-teaser__eyebrow { color: #f4bd22; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-checker-teaser strong { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.05; }
.home-checker-teaser > a > span:not(.home-checker-teaser__eyebrow) { max-width: 32ch; color: #d9e6f6; line-height: 1.45; }
.home-checker-teaser b { margin-top: .35rem; color: #f4bd22; font-size: .9rem; }
@media (min-width: 48rem) {
  .result-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
  .result-grid--home .result-card { min-height: 0; padding: 1.2rem var(--gutter) 1.4rem; }
  .result-grid--home .result-card__head { display: flex; }
  .result-grid--home .result-card__date { justify-self: auto; }
  .home-checker-teaser > a { min-height: 0; padding: 1.2rem var(--gutter) 1.4rem; }
}

/* Jogos de código não são matrículas: o objecto é um bilhete, com margem,
   corte picotado e tipografia de código. A mesma linguagem serve Milhão e as
   lotarias, sem fingir que todos têm uma chave de bolas. */
.ticket-card {
  position: relative;
  overflow: hidden;
  margin-top: .2rem;
  padding: .95rem 1rem;
  border: 1px dashed #7e9dbc;
  border-radius: .55rem;
  background: linear-gradient(110deg, #f8fbff, #eef5fc);
}
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}
.ticket-card::before { left: -.45rem; }
.ticket-card::after { right: -.45rem; }
.ticket-card__label { display: block; color: var(--ink-2); font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ticket-card__code { margin: .38rem 0 0; color: var(--ink-0); font-family: var(--font-num); font-size: clamp(1.12rem, 3.6vw, 1.7rem); font-weight: 850; letter-spacing: .12em; line-height: 1.1; overflow-wrap: anywhere; }
.ticket-card--featured { max-width: 38rem; padding: 1.35rem 1.5rem; }
.ticket-card--featured .ticket-card__code { font-size: clamp(1.45rem, 5vw, 2.75rem); }
.ticket-card--compact { margin: 0; padding: .85rem 1rem; }
.ticket-card--compact .ticket-card__code { font-size: clamp(1.05rem, 2.4vw, 1.45rem); }

/* Páginas de cada jogo e de cada resultado. */
.card-grid { gap: 1rem; }
.card { border: 1px solid var(--line-1); border-radius: 10px; box-shadow: none; background: #fff; }
.card:hover { background: #fff; border-color: var(--accent); box-shadow: var(--shadow-1); }
.card__date { font-family: var(--font-display); }
.prize-table__wrap { border: 1px solid var(--line-1); border-radius: 10px; background: #fff; box-shadow: none; }
.prize-table caption { padding: 1rem 1.1rem; background: #061937; color: #fff; font-family: var(--font-display); font-weight: 750; text-align: left; }
.prize-table thead th { background: #e9f1fa; color: #486480; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.prize-table tbody tr:hover { background: #f5f9ff; }
.ledger { border-top: 2px solid #061937; }
.ledger__row { padding: .95rem .75rem; border-bottom: 1px solid var(--line-0); }
.ledger__row:hover { background: #fff; }
.ledger__date { font-family: var(--font-display); font-weight: 750; }

/* Estado pendente: painel de espera, não alerta genérico. */
.pending { border: 1px solid #f0cf73; border-radius: var(--r-lg); background: linear-gradient(135deg, #fffaf0 0%, #fff 68%); box-shadow: var(--shadow-1); }
.pending::after { height: 5px; background: #f3b91d; opacity: 1; animation: none; }
.pending__title { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.pending__facts { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); background: rgba(255,255,255,.65); }
.pending__fact dd { font-family: var(--font-num); color: var(--ink-0); }

.prose { color: var(--ink-1); }
.faq {
  display: grid;
  gap: .75rem;
  border: 0;
}
.faq__item {
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: none;
}
.faq__question { padding: 1.05rem; font-weight: 750; }
.faq__answer { padding: 0 1.05rem 1.05rem; color: var(--ink-1); }

.checker { border: 0; border-radius: var(--r-xl); background: #061937; box-shadow: var(--shadow-2); color: #e6f0fb; }
.checker-heading { max-width: 48rem; }
.checker-heading h2 { margin-top: .45rem; }
.checker-heading > p:last-child { margin-top: .8rem; color: var(--ink-1); }
.checker__steps { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 0 0 1.4rem; padding: 0; list-style: none; color: #dce9f8; font-size: .8rem; font-weight: 750; }
.checker__steps li { display: flex; align-items: center; gap: .42rem; }
.checker__steps span { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #f4bd22; color: #061937; font-size: .68rem; }
.checker .checker__intro, .checker .checker__label, .checker .checker__note { color: #bfd1e7; }
.checker__select, .checker__input { border-color: #6d8bab; background: #fff; color: #071a35; }
.checker__submit { border-radius: 6px; background: #f4bd22; border-color: #f4bd22; color: #061937; font-weight: 850; }
.checker__result { background: #fff; color: #071a35; }
/* A FAQ pertence ao mesmo módulo do verificador: usa toda a coluna de
   conteúdo e não uma medida editorial estreita, que a deixava encostada à
   esquerda em desktop. */
.checker-faq { width: 100%; max-width: none; }
.checker-faq .faq {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.checker-faq .faq__item:first-child,
.checker-faq .faq__item:last-child {
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
}
.checker__body { display: grid; grid-template-columns: minmax(0, .92fr) minmax(18rem, .68fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.checker__form { max-width: 38rem; }
.checker__help { padding: 1.25rem 1.35rem; border: 1px solid rgba(183, 211, 241, .25); border-radius: .8rem; background: rgba(4, 26, 59, .42); }
.checker__help-label { margin: 0; color: #f4bd22; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.checker__help h3 { margin: .45rem 0 1rem; color: #fff; font-size: 1.32rem; }
.checker__help ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.checker__help li { display: grid; gap: .18rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(183, 211, 241, .18); }
.checker__help li:last-child { padding-bottom: 0; border-bottom: 0; }
.checker__help strong { color: #fff; font-size: .9rem; }
.checker__help span { color: #bfd1e7; font-size: .83rem; line-height: 1.4; }

/* Verificador: formulário tratado como superfície própria, com controlos
   consistentes tanto em desktop como nos ecrãs de 320–390 px. */
.checker[hidden] { display: none; }
.checker:not([hidden]) {
  display: block;
  margin-top: 1.25rem;
  padding: clamp(1.15rem, 4vw, 2.4rem);
  border: 1px solid #2c5484;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, #0b2854 0%, #061937 100%);
  box-shadow: var(--shadow-2);
}
.checker__field, .checker__group { margin-bottom: 1.35rem; }
.checker__label { display: block; margin-bottom: .55rem; color: #dce9f8; font-size: .74rem; font-weight: 850; letter-spacing: .08em; }
.checker__select {
  display: block;
  width: min(100%, 28rem);
  min-height: 3.25rem;
  padding: .55rem 2.7rem .55rem .9rem;
  border: 1px solid #90b0d1;
  border-radius: .55rem;
  appearance: auto;
  background-color: #fff;
  color: #071a35;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
}
.checker__select:focus-visible, .checker__input:focus-visible, .checker__submit:focus-visible { outline: 3px solid #f4bd22; outline-offset: 3px; }
.checker__row { gap: .55rem; }
.checker__input { border-color: #90b0d1; background: #fff; color: #071a35; }
.checker__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 12rem);
  min-height: 3.25rem;
  padding-inline: 1.25rem;
  border-radius: .55rem;
  font-weight: 850;
}

.site-footer { margin-top: 5rem; background: #061937; color: #b9cce1; border: 0; }
.site-footer__brand { color: #fff; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.site-footer .eyebrow { color: #f4bd22; }
.site-footer__links a, .site-footer__legal a { color: #d8e7f7; }
.site-footer__legal { border-top-color: rgba(255,255,255,.16); }
.age-mark { border-color: #f4bd22; color: #f4bd22; }

@media (max-width: 42rem) {
  .site-header__bar { align-items: center; }
  .site-nav { width: auto; }
  .site-nav__list { padding-block: .2rem; }
  .site-nav__link { font-size: .72rem; padding: .38rem .48rem; }
  .home-masthead { margin-inline: 0; }
  .home-masthead__actions { display: grid; grid-template-columns: 1fr; }
  .home-primary-action, .home-secondary-action { justify-content: center; }
  .home-featured-section { margin-top: 1.25rem; }
  .featured { border-radius: 16px; }
  .draw-hero { padding: 1.3rem; }
  .upcoming-grid { grid-template-columns: 1fr; }
  .prize-table thead { clip: auto; height: auto; overflow: visible; position: static; width: auto; }
}

/* Navegação: correção de contraste e de alvo de toque no tema painel.
   Esta regra vem no fim para não herdar a antiga faixa clara no telemóvel. */
.site-nav__link:focus-visible {
  outline: 3px solid #f4bd22;
  outline-offset: 2px;
}
@media (max-width: 47.999em) {
  .site-header__bar { gap: 0; }
  .brand { padding-block: .82rem; }
  .site-nav {
    width: 100%;
    margin-inline: calc(var(--gutter) * -1);
    border-top: 1px solid rgba(255,255,255,.17);
    background: #0b2854;
  }
  .site-nav::after {
    background: linear-gradient(90deg, transparent, #0b2854 82%);
  }
  .site-nav__list {
    min-height: 2.8rem;
    align-items: center;
    gap: .2rem;
    padding: .22rem var(--gutter) .25rem;
    padding-inline-end: 3.4rem;
    scroll-padding-inline: var(--gutter);
  }
  .site-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0 .54rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #d8e6f6;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
  }
  .site-nav__link--home { width: 2.15rem; padding: 0; }
  .site-nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
  .site-nav__link[aria-current="page"],
  .site-nav__link[aria-current="page"]:hover {
    border-bottom: 3px solid #f4bd22;
    background: transparent;
    color: #f4bd22;
  }
}
@media (min-width: 48em) {
  .site-header__bar { min-height: 3.75rem; }
  .site-nav__list { gap: .32rem; padding-block: .25rem; }
  .site-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0 .7rem;
    border: 1px solid transparent;
    color: #f0f6ff;
    font-size: .84rem;
    font-weight: 800;
  }
  .site-nav__link--home { width: 2.4rem; padding: 0; }
  .site-nav__link:hover { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.12); }
.site-nav__link[aria-current="page"] { border-color: #f4bd22; background: #f4bd22; color: #061937; }
}

/* QA móvel 320–430 px --------------------------------------------------- */
@media (max-width: 30rem) {
  :root { --gutter: 1rem; }
  .brand__name { font-size: .96rem; }
  .brand__mark { width: 23px; height: 23px; }
  /* A faixa de navegação é uma única linha compacta: os rótulos ficam no
     centro geométrico do alvo e não há espaço vazio por baixo. */
  .site-nav__list { min-height: 2.75rem; padding-block: .2rem; }
  .site-nav__link { min-height: 2.1rem; padding-inline: .52rem; font-size: .74rem; }
  .home-masthead { padding-top: 2.15rem; padding-bottom: 2.3rem; }
  .home-masthead h1 { font-size: clamp(2rem, 11vw, 2.65rem); }
  .home-masthead .lead { font-size: .96rem; }
  .featured { padding: 1.2rem var(--gutter) 1.4rem; }
  .featured__game { font-size: 1.68rem; }
  .featured__meta { gap: .35rem; font-size: .77rem; }
  .featured__meta > * + *::before { margin-inline: .22rem; }
  .draw-hero { border-radius: 14px; }
  .draw-hero__title { font-size: clamp(1.8rem, 10vw, 2.45rem); }
  .home-upcoming { padding: 1rem; }
  .upcoming-card { min-height: 9.75rem; }
  .checker { padding: 1.1rem; }
  .checker:not([hidden]) { margin-inline: 0; padding: 1.1rem; border-radius: .95rem; }
  .checker-heading { padding-inline: .1rem; }
  .checker-heading h2 { font-size: clamp(1.55rem, 8.6vw, 2rem); line-height: 1.05; }
  .checker__intro { margin-bottom: 1.2rem; font-size: .86rem; line-height: 1.5; }
  .checker__field, .checker__group { margin-bottom: 1.15rem; }
  .checker__select { width: 100%; min-height: 3.2rem; font-size: .95rem; }
  .checker__steps { display: grid; grid-template-columns: 1fr; gap: .45rem; }
  .checker__body { grid-template-columns: 1fr; gap: 1.25rem; }
  .checker__form { max-width: none; }
  .checker__help { padding: 1rem; }
  .checker__row { gap: .42rem; }
  .checker__input { width: 2.7rem; height: 2.7rem; }
  .checker__group:has(.checker__input[maxlength="12"]) .checker__input { max-width: 100%; width: 100%; }
  .checker__submit { width: 100%; min-width: 0; }
  .checker__result { margin-top: 1.15rem; padding: .9rem; }
  .prize-table__wrap { overflow-x: auto; }
  .prize-table { min-width: 32rem; }
  .site-footer__grid { gap: 2rem; }
}
@media (min-width: 30.0625rem) and (max-width: 47.999em) {
  .checker__input { width: 3rem; height: 3rem; }
  .prize-table__wrap { overflow-x: auto; }
}

/* Estrelas Euromilhões: caixa quadrada em todos os tamanhos. A versão
   anterior alargava a largura e depois recortava a forma, ficando elíptica. */
[data-game="euromilhoes"] .ball--special {
  width: clamp(2.25rem, 5vw, 3.25rem);
  height: clamp(2.25rem, 5vw, 3.25rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  clip-path: none;
  background: none;
  color: #503900;
  padding: 0;
}
[data-game="euromilhoes"] .ball--special::before {
  inset: 0;
  clip-path: polygon(50% 1%, 61.5% 34%, 96% 35%, 68% 55%, 78.5% 90%, 50% 70%, 21.5% 90%, 32% 55%, 4% 35%, 38.5% 34%);
}
.numbers--compact .ball--special { width: clamp(1.875rem, 6.4vw, 2.125rem); height: clamp(1.875rem, 6.4vw, 2.125rem); }
.result-card .ball--special { width: clamp(2.125rem, 7.5vw, 2.5rem); height: clamp(2.125rem, 7.5vw, 2.5rem); }

/* Um único token visual por contexto: número e estrela têm exatamente a mesma
   caixa quadrada. Assim, páginas, destaque e cartões nunca divergirem. */
:root { --result-token-size: clamp(2.35rem, 6vw, 3.2rem); }
.ball,
[data-game="euromilhoes"] .ball--special,
.numbers--compact .ball--special,
.result-card .ball--special {
  width: var(--result-token-size);
  height: var(--result-token-size);
  aspect-ratio: 1 / 1;
  min-width: var(--result-token-size);
  min-height: var(--result-token-size);
  flex: 0 0 var(--result-token-size);
  line-height: 1;
  padding: 0;
}

/* Migalhas: continuação da barra azul, com altura e alinhamento próprios. */
/* Rasto fora da navegação azul: faixa cinzenta alinhada ao conteúdo. */
.shell > .crumbs {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  margin-top: 0;
  padding: .65rem var(--band-inset);
  border-top: 0;
  border-bottom: 1px solid var(--line-1);
  background: #e8eef5;
}
.crumbs__list { align-items: center; min-height: 1.8rem; gap: .4rem .55rem; color: var(--ink-2); font-weight: 700; }
.crumbs__item { min-height: 1.8rem; align-items: center; }
.crumbs__link { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 .2rem; color: var(--accent-ink); font-weight: 750; }
.crumbs__link:hover { color: var(--ink-0); }
.crumbs__item + .crumbs__item::before { border-color: var(--line-2); }
.crumbs__item:last-child { color: var(--ink-1); }
@media (max-width: 47.999em) {
  .shell > .crumbs { min-height: 3rem; padding-block: .48rem; }
  .crumbs__list { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-right: .45rem; white-space: nowrap; scrollbar-width: none; }
  .crumbs__list::-webkit-scrollbar { display: none; }
  .crumbs__item { flex: 0 0 auto; }
}

/* Resultado como objecto principal. No Euromilhões, a etiqueta editorial fica
   intencionalmente discreta e a chave recebe a superfície e o espaço visual. */
.result-key {
  margin: 1.1rem 0 1.6rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.result-key__label {
  margin: 0 0 .8rem;
  color: var(--ink-2);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.result-key .numbers { margin: 0; }
/* Mesmo objecto de resultado nos hubs: estado, data e chave vivem numa só
   superfície, em vez de uma etiqueta acima e a chave solta no fundo. */
.current-result {
  padding: clamp(1.1rem, 3.5vw, 2.25rem);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, #fff 0%, #f5f9fe 100%);
  box-shadow: var(--shadow-1);
}
.current-result__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-0); }
.current-result__eyebrow { margin: 0 0 .35rem; color: var(--state-live-ink); font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.current-result__head h2 { margin: 0; color: var(--ink-0); }
.current-result__meta { margin-top: 1rem; }
.current-result__key { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.7rem); border: 1px solid #d6e4f1; border-radius: .8rem; background: #fff; }
.current-result__label { margin: 0 0 .75rem; color: var(--ink-2); font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.current-result .numbers { margin: 0; }

/* M1lhao: o codigo e o premio sao a resposta completa. Juntos formam um so
   modulo no topo, sem repetir a mesma informacao numa tabela separada. */
.milhao-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(15rem, .72fr);
  gap: clamp(.85rem, 2vw, 1.25rem);
  margin: 1.1rem 0 1.6rem;
}
.current-result .milhao-summary { margin-bottom: 0; }
.milhao-summary__item {
  min-width: 0;
  padding: clamp(1rem, 2.6vw, 1.5rem);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.current-result .milhao-summary__item { box-shadow: none; }
.milhao-summary__label {
  margin: 0 0 .8rem;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ticket--milhao-summary { padding: clamp(1.25rem, 4vw, 2rem); box-shadow: none; }
.ticket--milhao-summary .ticket__code { font-size: clamp(2rem, 5vw, 3.35rem); }
.ticket--milhao-summary .ticket__foot { margin-top: 1rem; padding-top: 1rem; }
.milhao-summary__item--prize {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, #fff 0%, #f3f8fe 100%);
}
.milhao-summary__value {
  margin: 0;
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.35vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  white-space: nowrap;
}
.milhao-summary__meta { margin: .65rem 0 0; color: var(--ink-2); font-size: .82rem; font-weight: 700; }
.milhao-summary__context {
  margin: .9rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--line-1);
  color: var(--ink-2);
  font-size: .72rem;
  line-height: 1.45;
}
.game-summary { max-width: 52rem; margin-top: 0; color: var(--ink-1); }
.game-summary h2 { margin: 0 0 .45rem; font-size: 1rem; letter-spacing: -.015em; }
.game-summary p { margin: 0; font-size: .91rem; line-height: 1.6; }
.game-header .eyebrow { margin: 0 0 .7rem; color: var(--accent-ink); font-size: .82rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; opacity: 1; }
.game-header h1 { color: var(--ink-0); font-size: clamp(2.1rem, 5vw, 4rem); }
/* Todos os hubs usam a mesma coluna: elimina diferenças ocasionais de largura
   entre Totoloto e os restantes jogos, no desktop e no telemóvel. */
.game-hub-width { width: min(100%, 70rem); margin-inline: auto; }

/* Na ordem de extração do Euromilhões só os próprios números importam. Não há
   caixas azuis, filetes ou contentores suplementares a competir com a chave. */
.draw-order-block {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.draw-order__item {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-1);
  /* A ordem deve ser tão legível quanto os restantes números da chave. */
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 750;
}

/* Cabeçalhos são contexto textual limpo; os cartões começam no resultado. */
.shell > .draw-hero--legal {
  grid-column: content;
  width: 100%;
}
.shell > .legal-header {
  grid-column: full;
  width: 100%;
  margin-top: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) max(var(--gutter), calc((100% - var(--measure)) / 2));
  background: #e8eef5;
}
.legal-header h1 {
  margin: 0;
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  line-height: 1.02;
}
.legal-header__updated {
  margin: .7rem 0 0;
  color: var(--ink-2);
  font-size: .88rem;
}
.prose--legal {
  margin-block: clamp(2.5rem, 6vw, 5.25rem);
  padding-left: 0;
  border-left: 0;
}
.prose--legal table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.draw-hero:not(.draw-hero--legal) {
  /* A faixa pode atravessar a página, mas o texto nunca encosta ao ecrã. */
  padding-block: clamp(1.25rem, 3vw, 2rem);
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.draw-hero:not(.draw-hero--legal) .draw-hero__title { max-width: none; }

/* A apresentação é a única zona que pode atravessar a página inteira.
   Resultado, prémios e arquivo continuam centrados na mesma grelha. */
.shell > .game-header {
  grid-column: full;
  width: 100%;
  margin-top: 0;
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  background: #e8eef5;
}
.adjacent__cutoff { display: block; margin-top: .35rem; color: var(--state-pending-ink); font-size: .78rem; font-weight: 800; }
/* A mesma regra de hierarquia aplica-se a todos os jogos: a marca/origem é
   contexto, não o título que compete com a data e com a chave. */
.draw-hero .eyebrow,
.draw-hero__game {
  color: var(--ink-2);
  font-size: .38em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.draw-hero__title { max-width: 15ch; }
.draw-hero__date { color: var(--ink-0); font-weight: 850; }
.pending__title { color: var(--ink-0); }
.pending .eyebrow { color: var(--state-pending-ink); font-size: .7rem; font-weight: 850; letter-spacing: .1em; }
[data-game="euromilhoes"] .draw-hero__game,
[data-game="euromilhoes"] .eyebrow { opacity: .72; }
[data-game="euromilhoes"] .draw-hero__game {
  font-size: .31em;
  letter-spacing: .14em;
}
[data-game="euromilhoes"] .draw-hero__date {
  display: block;
  color: var(--ink-0);
  font-size: 1em;
  letter-spacing: -.045em;
}
[data-game="euromilhoes"] .result-key--euromilhoes {
  padding-block: clamp(1.45rem, 4vw, 2.5rem);
}
[data-game="euromilhoes"] .result-key--euromilhoes .numbers {
  justify-content: center;
}
[data-game="euromilhoes"] .result-key--euromilhoes .numbers__list { gap: clamp(.5rem, 1.4vw, .9rem); }
[data-game="euromilhoes"] .featured__numbers {
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line-0);
  border-radius: .7rem;
  background: #fbfdff;
}

/* Estrelas Euromilhões: a caixa serve só para alinhamento/tamanho. Não tem
   fundo, borda ou sombra; a única forma visível é a estrela recortada. */
[data-game="euromilhoes"] .ball--special {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
[data-game="euromilhoes"] .ball--special::before {
  inset: 6%;
  background: #f4bd22;
  box-shadow: 0 2px 0 rgba(91, 61, 0, .18);
}

/* Totoloto pede leitura por grupos, não uma tabela genérica a dominar a
   página. Os números e o número da sorte recebem títulos claros e o quadro de
   prémios passa a ser uma continuação do resultado. */
[data-game="totoloto"] .result-key--totoloto {
  background: linear-gradient(135deg, #fff 0%, #f0f8ff 100%);
}
[data-game="totoloto"] .numbers--totoloto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, .42fr);
  align-items: end;
  gap: 1rem 2rem;
}
[data-game="totoloto"] .numbers--totoloto .numbers__group { min-width: 0; }
[data-game="totoloto"] .numbers--totoloto .numbers__label {
  margin: 0 0 .55rem;
  color: var(--ink-2);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
[data-game="totoloto"] .numbers--totoloto .numbers__list { justify-content: flex-start; }
[data-game="totoloto"] .section--totoloto-prizes .section-head { border-bottom-color: #93c8ed; }
[data-game="totoloto"] .prize-table caption { background: #0b2854; }

/* Arquivo: um calendário por jogo. Só os dias publicados são botões/links;
   os restantes dias são texto neutro, logo não há promessa de sorteios. */
.archive-search .section-head { margin-bottom: 1.1rem; }
#procurar { scroll-margin-top: 8rem; }
.finder {
  display: grid;
  grid-template-columns: minmax(12rem, .38fr) minmax(18rem, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.finder[hidden] { display: none; }
.finder__field { min-width: 0; }
.finder__label { display: block; margin-bottom: .5rem; color: var(--ink-1); font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.finder__select { width: 100%; min-height: 3rem; padding: 0 .8rem; border: 1px solid var(--line-2); border-radius: .5rem; background: #fff; color: var(--ink-0); font: inherit; font-weight: 700; }
.finder__select:focus-visible, .finder__month-button:focus-visible, .finder__day--available:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.finder__calendar { padding: 1rem; border: 1px solid var(--line-0); border-radius: .75rem; background: #f8fbff; }
.finder__calendar-head { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: .5rem; }
.finder__calendar-head h3 { margin: 0; color: var(--ink-0); font-size: 1rem; text-align: center; text-transform: capitalize; }
.finder__month-button { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-1); border-radius: .45rem; background: #fff; color: var(--accent-ink); font-size: 1.45rem; font-weight: 750; line-height: 1; cursor: pointer; }
.finder__month-button:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
.finder__month-button:disabled { opacity: .42; cursor: not-allowed; }
.finder__weekdays, .finder__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.finder__weekdays { margin-top: 1.1rem; color: var(--ink-2); font-size: .65rem; font-weight: 850; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.finder__days { margin-top: .45rem; }
.finder__day { display: grid; place-items: center; aspect-ratio: 1 / 1; min-width: 0; border-radius: .45rem; color: #8ea4ba; font-family: var(--font-num); font-size: .78rem; text-decoration: none; }
.finder__day--available { border: 1px solid #77a9f8; background: #e8f1ff; color: #084da9; font-weight: 850; box-shadow: inset 0 -2px 0 rgba(23,108,245,.12); }
.finder__day--available:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.finder__day--empty { visibility: hidden; }
.finder__status { margin: .85rem 0 0; color: var(--ink-2); font-size: .78rem; }

/* A continuação do histórico é uma ação clara e igual em todos os hubs. */
.archive-search-action {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}
.archive-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: .65rem;
  background: var(--accent);
  color: #fff;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.archive-search-button::after { content: "\2192"; margin-left: .5rem; }
.archive-search-button:hover { border-color: var(--accent-ink); background: var(--accent-ink); transform: translateY(-1px); }
.archive-search-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Índice do arquivo: jogos e anos são ações reais, por isso usam a mesma
   linguagem de cartões do resto do site em vez de links de texto soltos. */
.archive-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-block: clamp(2.5rem, 6vw, 5.25rem);
}
.archive-game {
  min-width: 0;
  padding: 1.2rem;
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: none;
}
.archive-game__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line-0);
}
.archive-game__head h2 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.archive-game__head a { color: var(--ink-0); text-decoration: none; }
.archive-game__head a:hover { color: var(--accent-ink); }
.year-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.year-list__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  min-height: 3.5rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line-1);
  border-radius: .7rem;
  background: #f7faff;
  color: var(--ink-0);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.year-list__link::after { content: "\2192"; color: var(--ink-2); font-weight: 800; }
.year-list__link:hover { border-color: var(--accent); background: #eef5fc; }
.year-list__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.year-list__year { font-family: var(--font-num); font-size: 1rem; font-weight: 850; }
.year-list__count { color: var(--ink-2); font-size: .78rem; font-weight: 700; }

/* Nos ecrãs grandes, o nome do jogo orienta sem competir com o resultado.
   A origem mantém-se visível como contexto editorial, mas ganha tamanho
   suficiente para não parecer uma nota técnica. */
@media (min-width: 48rem) {
  .game-header h1 {
    font-size: clamp(2.35rem, 3.25vw, 3.35rem);
    line-height: 1.02;
  }

  .game-header .eyebrow,
  .draw-hero.game-header .eyebrow {
    margin-bottom: .65rem;
    color: var(--accent-ink);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .13em;
    opacity: 1;
  }

  /* Páginas de um sorteio usam a mesma escala contida dos hubs. */
  .draw-hero__title {
    font-size: clamp(2rem, 2.7vw, 2.8rem);
  }
}

/* No telemóvel cada linha da tabela é um cartão legível. Esta regra vem no
   fim para anular uma antiga excepção que voltava a expor o cabeçalho. */
@media (max-width: 47.999em) {
  .prize-table__wrap { overflow: visible; }
  .prize-table { min-width: 0; }
  .prize-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .prize-table tbody tr { margin: .65rem; padding: 1rem; border: 1px solid var(--line-0); border-radius: .65rem; background: #fff; box-shadow: 0 1px 3px rgba(12, 41, 77, .04); }
  .prize-table tbody tr:first-child { border-top: 1px solid var(--line-0); }
  .prize-table tbody th { color: var(--ink-0); }
  .prize-table td { gap: .75rem; }
  .prize-table td::before { max-width: 58%; text-align: left; }
  [data-game="totoloto"] .numbers--totoloto { grid-template-columns: 1fr; gap: 1.15rem; }
  [data-game="totoloto"] .numbers--totoloto .numbers__group + .numbers__group { padding-top: 1rem; border-top: 1px solid var(--line-0); }
  .finder { grid-template-columns: 1fr; }
  .current-result__head { align-items: start; flex-direction: column; }
  .current-result__head .section-link { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .milhao-summary { grid-template-columns: 1fr; }
  .milhao-summary__item--code { order: 1; }
  .milhao-summary__item--prize { order: 2; }
  .milhao-summary__value { font-size: clamp(1.5rem, 7.5vw, 1.85rem); }
  .ticket--milhao-summary .ticket__code { font-size: clamp(1.75rem, 10vw, 2.65rem); }
  .finder__calendar { padding: .8rem; }
  .finder__weekdays, .finder__days { gap: .25rem; }
  .finder__day { font-size: .72rem; }
}