/* Rust Portugalia (rustportugalia.pt), site de 2026. Base: amostra ui-ux-pro-max da ronda 5 (paleta «Neon purple + rose action», Russo One + Chakra Petch).
   Sistema de design da skill: categoria Gaming, estilo 3D & Hyperrealism,
   paleta «Neon purple + rose action», letras Gaming Bold (Russo One + Chakra Petch),
   padrão de página Feature-Rich Showcase. */

/* ---------- Letras (OFL, locais) ---------- */
@font-face { font-family: "Mona Sans"; src: url("../fontes/mona-sans-latin-wdth-normal.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Russo One"; src: url("../fontes/russo-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Paleta da skill (colors.csv, linha Gaming), sem alterações */
  --color-primary: #7C3AED;
  --color-on-primary: #FFFFFF;
  --color-secondary: #A78BFA;
  --color-on-secondary: #0F172A;
  --color-accent: #F43F5E;
  --color-on-accent: #000000;
  --color-background: #0F0F23;
  --color-foreground: #E2E8F0;
  --color-card: #1E1C35;
  --color-card-foreground: #E2E8F0;
  --color-muted: #27273B;
  --color-muted-foreground: #A6A3CC;
  --color-border: #4C1D95;
  --color-destructive: #EF4444;
  --color-on-destructive: #000000;
  /* O anel #7C3AED fica abaixo de 3:1 sobre os cartões; uso o secundário, como a skill faz no modo escuro */
  --color-ring: #A78BFA;

  /* Tons derivados da mesma paleta (luz e sombra do 3D) */
  --accent-luz: #FB7185;
  --accent-lado: #BE123C;
  --primary-fundo: #6D28D9;
  --lilas-claro: #C4B5FD;
  --lilas-texto: #DDD6FE;
  --texto-2: #D6D3F0;
  --branco: #F5F3FF;
  --noite-funda: #0A0A1A;
  --cartao-alto: #2A2552;
  --cartao-baixo: #15132A;
  --poco: #0C0B1D;

  --font-display: "Russo One", "Arial Black", "Segoe UI", sans-serif;
  --font-body: "Mona Sans", "Segoe UI", Roboto, system-ui, sans-serif;

  /* Espaçamento da skill (densidade normal) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Variáveis do estilo 3D & Hyperrealism */
  --perspective: 1000px;
  --sombra-cartao:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1px 2px rgba(0, 0, 0, .40),
    0 8px 16px -4px rgba(0, 0, 0, .40),
    0 24px 48px -16px rgba(3, 2, 14, .70);
  --sombra-cartao-alta:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 2px 4px rgba(0, 0, 0, .40),
    0 18px 30px -8px rgba(0, 0, 0, .50),
    0 40px 70px -24px rgba(76, 29, 149, .70);

  /* Movimento: tempos partilhados */
  --dur-rapida: 160ms;
  --dur-base: 240ms;
  --dur-3d: 360ms;
  --dur-entrada: 1700ms;
  --ease-chegar: cubic-bezier(.16, 1, .3, 1);
  --ease-mola: cubic-bezier(.16, 1, .3, 1);

  --z-ilha: 1;
  --z-nomes: 2;
  --z-texto: 3;
  --z-consola: 4;
  --z-topo: 30;
  --z-menu: 40;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-mola: linear(0, .05, .2 8%, .45 16%, .7 26%, .87 36%, .96 47%, 1.012 58%, 1.016 68%, 1.006 82%, 1); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-background);
  background-image:
    radial-gradient(55% 900px at 96% 1700px, rgba(124, 58, 237, .13) 0%, rgba(124, 58, 237, 0) 70%),
    radial-gradient(50% 800px at 0% 2700px, rgba(244, 63, 94, .07) 0%, rgba(244, 63, 94, 0) 70%),
    radial-gradient(60% 900px at 90% 3700px, rgba(124, 58, 237, .11) 0%, rgba(124, 58, 237, 0) 70%);
  background-repeat: no-repeat;
  color: var(--color-foreground);
  font: 400 1.0625rem/1.6 var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

/* Noite por trás de tudo: luz violeta onde está a ilha, um pouco de rosa junto à consola */
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 1250px;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 71% 34%, rgba(124, 58, 237, .18) 0%, rgba(124, 58, 237, .07) 40%, rgba(124, 58, 237, 0) 70%),
    radial-gradient(30% 22% at 84% 70%, rgba(244, 63, 94, .10) 0%, rgba(244, 63, 94, 0) 70%),
    radial-gradient(60% 40% at 8% 0%, rgba(76, 29, 149, .32) 0%, rgba(76, 29, 149, 0) 70%),
    linear-gradient(180deg, #12112B 0%, #0F0F23 52%, #0D0D1F 82%, var(--color-background) 100%);
}

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; }
h2, h3 { text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { fill: currentColor; flex: none; }

.saltar {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: 12px;
  background: var(--branco); color: var(--color-background);
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: relative; z-index: var(--z-topo);
  display: flex; align-items: center; gap: var(--space-lg);
  max-width: 1280px; height: 76px; margin: 0 auto; padding: 0 40px;
}
.marca {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--branco); text-decoration: none;
  font: 400 1.25rem/1 var(--font-display); letter-spacing: .01em;
}
.marca__castelo { width: 34px; height: 34px; flex: none; }
.castelo__muralha { fill: #F0EEE9; }
.castelo__porta { fill: var(--color-accent); }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a, .menu__painel a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 10px; color: var(--texto-2); text-decoration: none;
  font-weight: 600; font-size: 1rem;
  transition: color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.nav a:hover, .menu__painel a:hover { color: #FFFFFF; background: rgba(167, 139, 250, .12); }

/* Tabs: uma página por secção; a tab da página em que estás fica acesa */
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; flex: none;
  border-radius: 10px; color: var(--texto-2); text-decoration: none; white-space: nowrap;
  font-weight: 600; font-size: 1rem;
  transition: color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.tabs a:hover { color: #FFFFFF; background: rgba(167, 139, 250, .12); }
.tabs a[aria-current="page"] {
  color: #FFFFFF; background: rgba(124, 58, 237, .26);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .45), inset 0 -3px 0 var(--color-accent);
}

.topo__discord {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px;
  border-radius: 12px; border: 1px solid rgba(167, 139, 250, .40);
  background: rgba(124, 58, 237, .18); color: var(--branco);
  text-decoration: none; font-weight: 700; font-size: 1rem;
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease;
}
.topo__discord:hover { background: rgba(124, 58, 237, .34); border-color: var(--color-secondary); }
.topo__discord-n { font-weight: 500; color: var(--lilas-texto); }
.topo__discord-n:empty { display: none; }

.menu { display: none; position: relative; }
.menu__botao {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(167, 139, 250, .28);
  color: var(--branco); font-weight: 700; cursor: pointer; list-style: none;
}
.menu__botao::-webkit-details-marker { display: none; }
.menu__riscas, .menu__riscas::before, .menu__riscas::after {
  display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
}
.menu__riscas { position: relative; }
.menu__riscas::before, .menu__riscas::after { content: ""; position: absolute; left: 0; }
.menu__riscas::before { top: -5px; }
.menu__riscas::after { top: 5px; }
.menu__painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-menu);
  display: grid; min-width: 220px; padding: 8px;
  border-radius: 16px; border: 1px solid rgba(167, 139, 250, .25);
  background: linear-gradient(180deg, var(--cartao-alto), var(--color-card));
  box-shadow: var(--sombra-cartao-alta);
}


/* ---------- Primeiro ecrã ---------- */
/* O mapa passa da borda do ecrã: é recortado aqui, com a largura do ecrã, para a página nunca ficar mais larga */
.heroi-faixa { position: relative; }
/* Fundo do Início (imagem do Higgsfield, 5/11): por trás do cabeçalho e do primeiro ecrã, escurecido onde há texto
   e a desvanecer para a cor da página em baixo. */
.tab-inicio .heroi-faixa::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -90px; height: 900px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .90) 0%, rgba(15, 15, 35, .62) 28%, rgba(15, 15, 35, .12) 58%, rgba(15, 15, 35, .05) 100%),
    linear-gradient(180deg, rgba(15, 15, 35, .78) 0%, rgba(15, 15, 35, .05) 18%, rgba(15, 15, 35, 0) 55%, rgba(15, 15, 35, .7) 82%, var(--color-background) 100%),
    url("../fundos/inicio-1600.webp") center 62% / cover no-repeat;
}
@media (min-width: 1700px) { .tab-inicio .heroi-faixa::before { background-image:
    linear-gradient(90deg, rgba(15, 15, 35, .90) 0%, rgba(15, 15, 35, .62) 28%, rgba(15, 15, 35, .12) 58%, rgba(15, 15, 35, .05) 100%),
    linear-gradient(180deg, rgba(15, 15, 35, .78) 0%, rgba(15, 15, 35, .05) 18%, rgba(15, 15, 35, 0) 55%, rgba(15, 15, 35, .7) 82%, var(--color-background) 100%),
    url("../fundos/inicio-2400.webp"); } }
@media (max-width: 760px) { .tab-inicio .heroi-faixa::before { top: -120px; height: 700px; opacity: .9; background-image:
    linear-gradient(180deg, rgba(15, 15, 35, .55) 0%, rgba(15, 15, 35, .15) 25%, rgba(15, 15, 35, .55) 60%, var(--color-background) 100%),
    url("../fundos/inicio-900.webp"); background-position: 62% 40%; } }
.tab-inicio .heroi-faixa::after {
  content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; top: 160px; height: 420px; pointer-events: none;
  background:
    radial-gradient(40% 30% at 30% 60%, rgba(196, 181, 253, .07) 0%, rgba(196, 181, 253, 0) 70%),
    radial-gradient(35% 25% at 70% 45%, rgba(196, 181, 253, .06) 0%, rgba(196, 181, 253, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .tab-inicio .heroi-faixa::before { animation: aparece 900ms ease-out both, ambiente-zoom 38s ease-in-out 1s infinite alternate; transform-origin: 70% 55%; }
  .tab-inicio .heroi-faixa::after { animation: nevoeiro 46s linear infinite alternate; }
  .atrasa .tab-inicio .heroi-faixa::before { animation-delay: 950ms; }
}
@supports (overflow: clip) { .heroi-faixa { overflow-x: clip; } }
.heroi {
  position: relative;
  max-width: 1280px; margin: 0 auto; padding: 28px 40px 0;
}
.heroi__texto { position: relative; z-index: var(--z-texto); max-width: 640px; min-height: 400px; }

.heroi h1 {
  margin: 0;
  font: 400 clamp(3.5rem, 7vw, 6.25rem)/.94 var(--font-display);
  letter-spacing: -.005em;
  color: var(--branco);
  /* Letras com espessura: cinco camadas do mesmo violeta, cada uma mais escura, e a sombra no chão */
  text-shadow: 0 2px 0 #4C1D95, 0 14px 34px rgba(4, 3, 16, .6);
}
.heroi h1 span { display: block; }
.h1__a { color: var(--lilas-claro); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; margin: 26px 0 0; padding: 0; list-style: none; }
/* informação, não botões: texto simples separado por pontos */
.etiquetas { align-items: center; column-gap: 0; row-gap: 4px; }
.etiquetas li {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--lilas-texto);
}
.etiquetas li + li::before {
  content: ""; width: 5px; height: 5px; margin: 0 12px; border-radius: 50%; flex: none;
  background: var(--color-accent); box-shadow: 0 0 8px rgba(244, 63, 94, .6);
}
.heroi__lead { max-width: 33ch; margin-top: 20px; font-size: 1.25rem; line-height: 1.45; color: var(--texto-2); }

/* ---------- O mapa deste wipe, inclinado como um render de produto ----------
   Modo «plano»: o mapa de cima, inclinado em CSS, com as bordas a desvanecer na noite.
   Modo «render»: uma imagem já em perspetiva (render 3D do motor), sem inclinação. */
.ilha {
  position: absolute; z-index: var(--z-ilha);
  top: -70px; right: -60px; width: 760px; height: 700px;
  margin: 0;
  perspective: 1500px; perspective-origin: 50% 40%;
  pointer-events: none;
}
.ilha__palco {
  position: absolute; left: 50%; top: 50%;
  width: 640px; height: 640px; margin: -320px 0 0 -320px;
  transform: rotateX(54deg) rotateZ(-32deg);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    radial-gradient(circle, #000 70%, transparent 99%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    radial-gradient(circle, #000 70%, transparent 99%);
  mask-composite: intersect;
}
.ilha__palco img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.05); }
.ilha__marcas { position: absolute; inset: 0; }
.ilha__marcas i { position: absolute; width: 0; height: 0; }

.ilha[data-modo="render"] .ilha__palco {
  left: 0; top: 0; width: 100%; height: 100%; margin: 0;
  transform: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}
.ilha[data-modo="render"] .ilha__palco img { object-fit: contain; }

.ilha__legenda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Nomes dos monumentos: camada plana por cima do mapa (a posição de cada nome vem do mapa inclinado) */
.ilha__nomes { position: absolute; inset: 0; z-index: var(--z-nomes); pointer-events: none; }
.nome-mapa {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  font: 600 .8125rem/1 var(--font-body); color: var(--branco);
  opacity: 0; transition: opacity var(--dur-base) ease;
}
.nome-mapa.visivel { opacity: 1; }
.nome-mapa__ponto {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(15, 15, 35, .85), 0 0 10px rgba(244, 63, 94, .55);
}
.nome-mapa__t {
  padding: 4px 8px 5px; border-radius: 8px;
  background: rgba(15, 15, 35, .78);
  border: 1px solid rgba(167, 139, 250, .30);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}

@keyframes ilha-entra {
  from { transform: rotateX(62deg) rotateZ(-42deg) scale(.92); opacity: 0; }
  to { transform: rotateX(54deg) rotateZ(-32deg) scale(1); opacity: 1; }
}
@keyframes ilha-render-entra {
  from { transform: scale(.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .ilha[data-modo="plano"] .ilha__palco { animation: ilha-entra 1.6s var(--ease-chegar) both; }
  .ilha[data-modo="render"] .ilha__palco { animation: ilha-render-entra 1.2s var(--ease-chegar) both; }
}

/* ---------- Consola: wipe, ligar e jogadores ---------- */
.consola {
  position: relative; z-index: var(--z-consola);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .75fr);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(167, 139, 250, .24);
  background: linear-gradient(180deg, #2A2550 0%, #221F42 16%, var(--color-card) 46%, #1A182F 78%, #17152B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 2px 0 rgba(0, 0, 0, .45),
    0 22px 44px -14px rgba(0, 0, 0, .72),
    0 40px 90px -50px rgba(124, 58, 237, .45);
}
.consola__zona { min-width: 0; padding: 24px 26px 26px; }
.consola__zona + .consola__zona { border-left: 1px solid rgba(167, 139, 250, .14); }

/* Wipe: números grandes com a unidade pequena ao lado */
.estado__rotulo { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--texto-2); }
.estado__data { color: #FFFFFF; font-weight: 700; }
.contagem {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin-top: 12px; min-height: 2.75rem;
}
.contagem[hidden] { display: none; }
.contagem__u { display: inline-flex; align-items: baseline; gap: 6px; }
.contagem__u b, .estado__numero b {
  font: 400 clamp(2rem, 1.1rem + 1.5vw, 2.75rem)/1 var(--font-display);
  color: #FFFFFF; font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 16px rgba(4, 3, 16, .45);
}
.contagem__u small { font-size: .875rem; font-weight: 600; color: var(--color-muted-foreground); }
.wipe__agora { margin-top: 12px; font: 400 1.5rem/1.15 var(--font-display); color: #FFFFFF; }

/* Raid: o ícone do jogo diz o estado (armário = bases protegidas, C4 = raid aberto) */
.raid { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(167, 139, 250, .14); }
.raid__icone { width: 48px; height: 48px; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.raid__titulo { font: 400 1.125rem/1.2 var(--font-display); color: #FFFFFF; }
.raid__texto { margin-top: 3px; font-size: .9375rem; line-height: 1.4; color: var(--texto-2); min-height: 1.4em; }
.raid[data-estado="aberto"] .raid__titulo { color: var(--accent-luz); }

/* Ligar e Copiar lado a lado, endereço por baixo (no telemóvel, Copiar passa para junto do endereço) */
.consola__entrar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  grid-template-areas: "ligar copiar" "endereco endereco" "nota nota";
  align-content: start;
}
.consola__entrar .btn-ligar { grid-area: ligar; }
.consola__entrar .btn-copiar { grid-area: copiar; }
.consola__entrar .endereco { grid-area: endereco; }
.consola__entrar .nota { grid-area: nota; }

/* Botão principal com volume: face rosa, lado mais escuro por baixo, desce quando se carrega */
.btn-ligar {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 0 22px;
  border-radius: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--color-on-accent);
  font: 400 1.25rem/1 var(--font-display);
  background: linear-gradient(180deg, var(--accent-luz) 0%, #F75873 38%, var(--color-accent) 70%, #EC3456 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .50),
    inset 0 -2px 0 rgba(0, 0, 0, .10),
    0 6px 0 var(--accent-lado),
    0 9px 14px rgba(0, 0, 0, .45),
    0 20px 40px -12px rgba(244, 63, 94, .55);
  transform: translateY(0);
  transition: transform var(--dur-rapida) var(--ease-chegar), box-shadow var(--dur-rapida) var(--ease-chegar), filter var(--dur-rapida) ease;
}
.btn-ligar:hover { filter: brightness(1.06) saturate(1.05); }
.btn-ligar:active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 2px 0 var(--accent-lado), 0 3px 8px rgba(0, 0, 0, .45);
}
.btn-ligar:focus-visible { outline-offset: 5px; }

.btn-copiar {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 64px; padding: 0 18px;
  border-radius: 14px; border: 1px solid rgba(167, 139, 250, .42);
  background: linear-gradient(180deg, rgba(124, 58, 237, .30), rgba(124, 58, 237, .16));
  color: var(--branco); font: 700 1rem/1 var(--font-body); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 4px 0 rgba(15, 12, 40, .9), 0 8px 14px rgba(0, 0, 0, .35);
  transition: background-color var(--dur-rapida) ease, transform var(--dur-rapida) var(--ease-chegar), box-shadow var(--dur-rapida) var(--ease-chegar);
}
.btn-copiar:hover { background: linear-gradient(180deg, rgba(124, 58, 237, .46), rgba(124, 58, 237, .26)); }
.btn-copiar:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(15, 12, 40, .9), 0 3px 6px rgba(0, 0, 0, .35); }
.btn-copiar[data-estado="ok"] { border-color: var(--color-secondary); background: rgba(167, 139, 250, .34); }

.endereco {
  display: block; margin-top: 18px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid rgba(167, 139, 250, .22);
  background: var(--poco);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
  font: 500 .96875rem/1.35 var(--font-body); color: var(--lilas-texto);
  min-height: calc(1.35em + 26px);
  overflow-wrap: anywhere;
  user-select: all;
}
.nota { margin-top: 10px; font-size: .9375rem; color: var(--color-muted-foreground); }

/* Jogadores no servidor: o número grande, o máximo pequeno */
.estado__numero { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.estado__max { font: 400 1.375rem/1 var(--font-display); color: var(--color-muted-foreground); }
.estado__texto { margin-top: 8px; font-weight: 600; color: var(--texto-2); }
.estado__ligado { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .9375rem; color: var(--color-muted-foreground); }
.estado__ligado .ponto { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 4px rgba(167, 139, 250, .18); }
.estado__ligado[data-estado="desligado"] .ponto { background: var(--color-muted-foreground); box-shadow: none; }
.estado__hora { margin-top: 4px; font-size: .8125rem; color: var(--color-muted-foreground); }
.estado__hora[hidden] { display: none; }

.btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; margin-top: 18px; padding: 0 18px;
  border-radius: 12px; text-decoration: none; white-space: nowrap;
  color: var(--branco); font-weight: 700; font-size: 1.0625rem;
  background: rgba(124, 58, 237, .16); border: 1px solid rgba(167, 139, 250, .45);
  box-shadow: none;
  transition: transform var(--dur-rapida) var(--ease-chegar), box-shadow var(--dur-rapida) var(--ease-chegar), filter var(--dur-rapida) ease;
}
.btn-discord:hover { background: rgba(124, 58, 237, .30); border-color: var(--color-secondary); }
.btn-discord:active { transform: translateY(1px); }

/* ---------- Secções seguintes ---------- */
.mudancas, .videos, .ranks, .guias, .outros, .final { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 72px 40px 0; }
.sec__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.sec__cabeca h2, .sec__cabeca h1 {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 45%, var(--lilas-claro) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sec__cabeca h2, .sec__cabeca h1, .final h2 {
  margin: 0; max-width: 20ch;
  font: 400 clamp(1.875rem, 3.1vw, 2.75rem)/1.08 var(--font-display); color: var(--branco);
}
.sec__cabeca p { max-width: 36ch; color: var(--texto-2); }

/* O que muda */
.mudancas__lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin: 64px 0 0; padding: 0; list-style: none;
  perspective: var(--perspective);
}
.cartao {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0 22px 22px;
  border-radius: 18px; border: 1px solid rgba(167, 139, 250, .18);
  background: linear-gradient(165deg, var(--cartao-alto) 0%, #221F44 22%, var(--color-card) 48%, #191730 76%, var(--cartao-baixo) 100%);
  box-shadow: var(--sombra-cartao);
  transform-style: preserve-3d;
  transition: transform var(--dur-3d) var(--ease-chegar), box-shadow var(--dur-3d) var(--ease-chegar), border-color var(--dur-base) ease;
}
/* O ícone oficial sai do cartão, com sombra em duas camadas */
.cartao__icone {
  width: 124px; height: 124px; margin: -46px 0 4px -10px;
  transform: translateZ(34px);
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .55)) drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
  transition: transform var(--dur-3d) var(--ease-chegar);
}
.cartao h3 { margin: 0; font: 400 1.375rem/1.15 var(--font-display); color: #FFFFFF; }
.cartao h3 a { text-decoration: none; }
.cartao h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.cartao h3 a:focus-visible { outline: none; }
.cartao h3 a:focus-visible::after { outline: 2px solid var(--color-ring); outline-offset: 4px; }
.cartao p, .cartao__horas { margin-top: 10px; color: var(--texto-2); font-size: 1rem; line-height: 1.5; }
.cartao__horas { padding: 0; list-style: none; }
.cartao__horas li + li { margin-top: 6px; }
.cartao__horas b { display: block; font-weight: 700; color: #FFFFFF; }
.cartao__mais {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 18px;
  font-weight: 700; font-size: .9375rem; color: var(--lilas-texto);
}
.cartao__mais .ic { transition: transform var(--dur-base) var(--ease-chegar); }
@media (hover: hover) and (pointer: fine) {
  .cartao:hover {
    transform: rotateX(5deg) rotateY(-6deg) translateY(-6px);
    border-color: rgba(167, 139, 250, .46);
    box-shadow: var(--sombra-cartao-alta);
  }
  .cartao:hover .cartao__icone { transform: translateZ(64px) translateY(-6px) rotate(-4deg); }
  .cartao:hover .cartao__mais .ic { transform: translateX(4px); }
}

/* Vídeos: os shorts ao alto, como no telemóvel */
.videos__lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  margin: 36px 0 0; padding: 0; list-style: none;
}
.video { position: relative; }
.video a {
  display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, .20);
  background: var(--color-card);
  box-shadow: var(--sombra-cartao);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-3d) var(--ease-chegar), border-color var(--dur-base) ease, box-shadow var(--dur-3d) var(--ease-chegar);
}
.video__capa { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--poco); }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__info { display: block; padding: 12px 14px 14px; flex: 1; }
.video__t { font-weight: 700; font-size: 1rem; line-height: 1.3; color: #FFFFFF; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.video__d { margin-top: 6px; font-size: .8125rem; color: var(--texto-2); }
.video__play {
  position: absolute; z-index: 1; top: 12px; right: 12px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(15, 15, 35, .72); border: 1px solid rgba(167, 139, 250, .35); color: #FFFFFF;
}
@media (hover: hover) and (pointer: fine) {
  .video a:hover { transform: translateY(-6px); border-color: rgba(167, 139, 250, .5); box-shadow: var(--sombra-cartao-alta); }
}
.videos[hidden] { display: none; }

/* Ranks */
.ranks__grelha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-top: 36px; align-items: start; }
.ranks__tabela-caixa, .escaloes {
  border-radius: 18px; border: 1px solid rgba(167, 139, 250, .18);
  background: linear-gradient(165deg, var(--cartao-alto) 0%, var(--color-card) 40%, var(--cartao-baixo) 100%);
  box-shadow: var(--sombra-cartao);
}
.ranks__tabela-caixa { padding: 8px 8px 10px; overflow: hidden; }
.ranks__tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ranks__tabela th { padding: 12px 14px 10px; text-align: left; font-size: .8125rem; font-weight: 600; color: var(--color-muted-foreground); }
.ranks__tabela td { padding: 10px 14px; border-top: 1px solid rgba(167, 139, 250, .12); color: var(--texto-2); }
.ranks__tabela .num { text-align: right; }
.ranks__tabela td.num { font-weight: 700; color: #FFFFFF; }
.rank__pos { width: 2.5em; font: 400 1.125rem/1 var(--font-display); color: var(--lilas-claro) !important; }
.rank__jogador { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 700; color: #FFFFFF; }
.rank__jogador img, .rank__sem-foto { width: 36px; height: 36px; flex: none; border-radius: 10px; object-fit: cover; background: var(--color-muted); }
.rank__sem-foto { display: grid; place-items: center; font: 400 1rem/1 var(--font-display); color: var(--lilas-texto); }
.rank__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranks__tabela tbody tr:nth-child(-n+3) .rank__pos { color: var(--accent-luz) !important; }
.ranks__vazio { padding: 28px 22px; color: var(--texto-2); font-weight: 600; }
.ranks__vazio[hidden] { display: none; }

.escaloes { padding: 22px; }
.escaloes h3 { margin: 0; font: 400 1.375rem/1.15 var(--font-display); color: #FFFFFF; }
.escaloes p { margin-top: 10px; color: var(--texto-2); }
.escaloes code { padding: 2px 6px; border-radius: 6px; background: var(--poco); color: var(--lilas-texto); font: 600 .9375rem/1.4 var(--font-body); }
.escaloes__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.escaloes__lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(124, 58, 237, .12); border: 1px solid rgba(167, 139, 250, .22);
  font-weight: 700; color: #FFFFFF;
}
.escaloes__lista small { font-weight: 600; color: var(--color-muted-foreground); }

/* Guias */
.guias__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.guia a {
  display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px 16px 12px 12px;
  border-radius: 16px; border: 1px solid rgba(167, 139, 250, .18);
  background: linear-gradient(165deg, var(--cartao-alto) 0%, var(--color-card) 50%, var(--cartao-baixo) 100%);
  box-shadow: var(--sombra-cartao);
  text-decoration: none; font-weight: 700; color: #FFFFFF;
  transition: transform var(--dur-3d) var(--ease-chegar), border-color var(--dur-base) ease;
}
.guia img { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.guia span { flex: 1; min-width: 0; display: grid; gap: 3px; }
.guia small { font-weight: 500; font-size: .875rem; line-height: 1.4; color: var(--texto-2); }
.guia .ic { color: var(--lilas-texto); transition: transform var(--dur-base) var(--ease-chegar); }
@media (hover: hover) and (pointer: fine) {
  .guia a:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, .46); }
  .guia a:hover .ic { transform: translateX(4px); }
}

/* Outro servidor português */
.outro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info acoes" "endereco acoes" "factos factos";
  column-gap: 24px; row-gap: 12px; align-items: center;
  margin-top: 28px; padding: 22px 24px;
  border-radius: 18px; border: 1px solid rgba(167, 139, 250, .18);
  background: linear-gradient(165deg, var(--cartao-alto) 0%, var(--color-card) 50%, var(--cartao-baixo) 100%);
  box-shadow: var(--sombra-cartao);
}
.outro__info { grid-area: info; }
.outro h3 { margin: 0; font: 400 1.375rem/1.15 var(--font-display); color: #FFFFFF; }
.outro__info p { margin-top: 6px; color: var(--texto-2); }
.outro__jog { display: flex; align-items: baseline; gap: 6px; }
.outro__jog b { font: 400 1.25rem/1 var(--font-display); color: #FFFFFF; }
.outro__endereco {
  grid-area: endereco; justify-self: start;
  padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(167, 139, 250, .22);
  background: var(--poco); color: var(--lilas-texto); font: 500 .9375rem/1.35 var(--font-body);
  overflow-wrap: anywhere; user-select: all;
}
.outro__acoes { grid-area: acoes; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px; border-radius: 12px; white-space: nowrap;
  text-decoration: none; font-weight: 700; color: var(--branco);
  border: 1px solid rgba(167, 139, 250, .42);
  background: linear-gradient(180deg, rgba(124, 58, 237, .30), rgba(124, 58, 237, .16));
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease;
}
.btn-sec:hover { border-color: var(--color-secondary); background: linear-gradient(180deg, rgba(124, 58, 237, .46), rgba(124, 58, 237, .26)); }
.btn-sec--linha { background: transparent; }

/* Página Servidores */
.outro + .outro { margin-top: 16px; }
.outro h2 { margin: 0; font: 400 1.5rem/1.15 var(--font-display); color: #FFFFFF; }
.outro--nosso { border-color: rgba(167, 139, 250, .38); }
.factos { grid-area: factos; display: grid; gap: 10px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(167, 139, 250, .14); }
.factos div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; }
.factos dt { font-weight: 600; color: var(--color-muted-foreground); }
.factos dd { margin: 0; color: #FFFFFF; font-weight: 600; }
.factos__raid { margin: 0; padding: 0; list-style: none; }
.factos__raid b { color: var(--texto-2); font-weight: 600; }

/* Fim da página: outra vez o Ligar */
.final { padding-bottom: 72px; }
.final__caixa {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: 26px 28px;
  border-radius: var(--radius-lg); border: 1px solid rgba(167, 139, 250, .2);
  background: linear-gradient(180deg, rgba(42, 37, 80, .6), rgba(30, 28, 53, .6));
}
.final h2 { max-width: none; font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
.final h2 time { color: var(--lilas-claro); }
.final__botoes { display: flex; gap: 14px; align-items: center; flex: none; }
.btn-ligar--compacto { flex: none; min-height: 56px; font-size: 1.125rem; padding: 0 22px; }
.btn-discord--linha { flex: none; width: auto; margin-top: 0; min-height: 56px; }

.rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 8px 40px 48px;
  color: var(--color-muted-foreground); font-size: .9375rem;
}
.rodape__links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--texto-2); text-decoration: none; border-radius: 10px; }
.rodape__links a:hover { color: #FFFFFF; background: rgba(167, 139, 250, .12); }
.rodape__redes { display: flex; gap: 6px; }
.rodape__marca { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.assinatura {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; margin-left: -12px;
  border-radius: 12px; color: var(--texto-2); text-decoration: none;
  transition: color var(--dur-base) ease, background-color var(--dur-base) ease;
}
.assinatura__t { font-size: .8125rem; }
.assinatura__marca { display: block; width: 78px; height: auto; overflow: visible; opacity: .85; }
.hs-ponto { transform-box: fill-box; transform-origin: 50% 100%; transition: fill var(--dur-base) ease, filter var(--dur-base) ease; }
.assinatura:hover, .assinatura:focus-visible { color: #FFFFFF; background: rgba(167, 139, 250, .10); }
.assinatura:hover .hs-ponto, .assinatura:focus-visible .hs-ponto { fill: var(--color-accent); filter: drop-shadow(0 0 6px rgba(244, 63, 94, .8)); }
@media (prefers-reduced-motion: no-preference) {
  .assinatura:hover .hs-ponto { animation: hs-salto 600ms var(--ease-mola); }
  /* quando o rodapé aparece no ecrã, as letras desenham-se da esquerda e o ponto cai no sítio */
  .assinatura.js-espera .hs-letras { clip-path: inset(0 100% 0 0); }
  .assinatura.js-espera .hs-ponto { opacity: 0; transform: translateY(-14px); }
  .assinatura.visto .hs-letras { animation: hs-letras 900ms var(--ease-chegar) both; }
  .assinatura.visto .hs-ponto { animation: hs-ponto 700ms var(--ease-mola) 650ms both; }
}
@keyframes hs-letras { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-ponto { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hs-salto { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

/* Entrada do castelo e do nome: só na página Início, menos de 1 segundo, nunca tapa nada */
@media (prefers-reduced-motion: no-preference) {
  .tab-inicio .marca__castelo { animation: castelo-sobe 650ms var(--ease-chegar) both; }
  .tab-inicio .castelo__porta { animation: porta-acende 500ms ease-out 450ms both; }
  .tab-inicio .heroi h1 .h1__a { animation: nome-entra 700ms var(--ease-chegar) 120ms both; }
  .tab-inicio .heroi h1 .h1__b { animation: nome-entra 700ms var(--ease-chegar) 220ms both; }
  .tab-inicio .etiquetas { animation: aparece 500ms ease-out 450ms both; }
  .tab-inicio .consola { animation: consola-sobe 700ms var(--ease-chegar) 300ms both; }
}
@keyframes castelo-sobe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes porta-acende { 0% { fill: #3B1676; } 60% { fill: var(--accent-luz); filter: drop-shadow(0 0 6px rgba(244, 63, 94, .9)); } 100% { fill: var(--color-accent); } }
@keyframes nome-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes consola-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rodape__redes a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--texto-2); border: 1px solid rgba(167, 139, 250, .22); }
.rodape__redes a:hover { color: #FFFFFF; border-color: var(--color-secondary); background: rgba(167, 139, 250, .12); }

/* ---------- Ecrãs médios ---------- */
@media (max-width: 1180px) {
  .nav a { padding: 0 10px; }
  .ilha { right: -170px; }
  .consola { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .estado__jogadores { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "numero texto botao" "numero ligado botao"; align-items: center; column-gap: 20px; border-left: 0 !important; border-top: 1px solid rgba(167, 139, 250, .14); }
  .estado__jogadores .estado__numero { grid-area: numero; }
  .estado__jogadores .estado__texto { grid-area: texto; margin-top: 0; align-self: end; }
  .estado__jogadores .estado__ligado { grid-area: ligado; margin-top: 2px; align-self: start; }
  .estado__jogadores .btn-discord { grid-area: botao; width: auto; margin-top: 0; }
  .mudancas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 64px; }
  .videos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .guias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .topo { flex-wrap: wrap; height: auto; row-gap: 4px; padding-top: 10px; }
  .topo__discord { margin-left: auto; }
  .tabs {
    order: 3; width: calc(100% + 80px); margin: 0 -40px; padding: 0 40px 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .ilha { right: -260px; opacity: .92; }
  .consola { grid-template-columns: minmax(0, 1fr); }
  .consola__entrar { order: 1; }
  .estado__jogadores { order: 2; }
  .estado__wipe { order: 3; }
  .consola__zona:first-child { border-top: 0 !important; }
  .consola__zona + .consola__zona { border-left: 0; border-top: 1px solid rgba(167, 139, 250, .14); }
  .ranks__grelha { grid-template-columns: minmax(0, 1fr); }
  .videos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final__caixa { display: block; }
  .outro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "acoes" "endereco" "factos"; }
  .outro__acoes { justify-content: flex-start; }
  .final__botoes { margin-top: 16px; flex-wrap: wrap; }
}

/* ---------- Telemóvel ---------- */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .topo { padding: 8px 16px 0; gap: 10px; }
  .tabs { width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 8px; }
  .tabs { gap: 2px; }
  .tabs a { padding: 0 10px; font-size: .9375rem; }
  .marca { font-size: 1.0625rem; gap: 10px; }
  .marca__castelo { width: 30px; height: 30px; }
  .menu__botao { padding: 0 12px; }
  .menu__botao span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topo__discord { padding: 0 12px; }

  .heroi { padding: 0 16px; }
  .heroi__texto { min-height: 0; padding-top: 96px; }
  .heroi h1 { font-size: clamp(3rem, 15.4vw, 3.75rem); line-height: .96; }
  .etiquetas { margin-top: 16px; min-height: 24px; }
  .etiquetas li { font-size: .9375rem; }
  .etiquetas li + li::before { margin: 0 9px; }
  .heroi__lead { display: none; }

  /* No telemóvel o mapa fica por cima do nome, mais pequeno e sem animação */
  .ilha { top: -40px; right: auto; left: 50%; width: 420px; height: 340px; margin-left: -190px; perspective: 1000px; opacity: 1; }
  .ilha__palco { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
  .ilha[data-modo="plano"] .ilha__palco, .ilha[data-modo="render"] .ilha__palco { animation: none; }
  .nome-mapa { font-size: .6875rem; gap: 4px; }
  .nome-mapa__ponto { width: 7px; height: 7px; }
  .nome-mapa__t { padding: 3px 6px 4px; border-radius: 6px; }

  .consola { grid-template-columns: 1fr; margin-top: 20px; border-radius: 18px; }
  .consola__zona + .consola__zona { border-top: 1px solid rgba(167, 139, 250, .14); }
  .consola__zona { padding: 18px 18px 20px; }
  .estado__rotulo { font-size: .9375rem; }
  .estado__data { display: block; min-height: 1.45em; margin-top: 2px; font-size: 1.125rem; }
  .contagem { gap: 2px 12px; margin-top: 8px; min-height: 2.25rem; }
  .contagem__u { gap: 4px; }
  .contagem__u b, .estado__numero b { font-size: min(1.875rem, 7.6vw); }
  .contagem__u small { font-size: .8125rem; }
  .raid { margin-top: 14px; padding-top: 14px; }
  .raid__icone { width: 40px; height: 40px; }
  .raid__titulo { font-size: 1rem; }
  .raid__texto { font-size: .875rem; }

  .consola__entrar { grid-template-areas: "ligar ligar" "endereco copiar" "nota nota"; column-gap: 8px; }
  .btn-ligar { min-height: 58px; padding: 0 16px; font-size: 1.1875rem; gap: 10px; }
  .btn-copiar {
    width: 52px; min-height: 48px; margin-top: 14px; padding: 0; justify-content: center;
    border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  }
  .btn-copiar:active { transform: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
  .btn-copiar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .endereco { margin-top: 14px; min-height: calc(2.7em + 26px); font-size: .875rem; }
  .nota { font-size: .875rem; }

  .estado__jogadores { display: block; }
  .estado__max { font-size: 1.125rem; }
  .estado__jogadores .estado__texto { margin-top: 6px; }
  .estado__jogadores .estado__ligado { margin-top: 6px; }
  .estado__jogadores .btn-discord { width: 100%; margin-top: 14px; }

  .mudancas, .videos, .ranks, .guias, .outros, .final { padding: 56px 16px 0; }
  .outro { padding: 18px; margin-top: 22px; }
  .outro__acoes { flex-direction: column; align-items: stretch; }
  .factos div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rodape__redes { margin-top: 12px; }
  .sec__cabeca { display: block; }
  .sec__cabeca p { margin-top: 10px; }
  .mudancas__lista { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; perspective: none; }
  .cartao { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; padding: 16px 16px 18px; }
  .cartao__icone { grid-row: 1 / span 4; width: 76px; height: 76px; margin: 0; transform: none; }
  .cartao > :not(.cartao__icone) { grid-column: 2; }
  .cartao p, .cartao__horas { margin-top: 6px; font-size: .9375rem; }
  .cartao__mais { padding-top: 10px; }

  .videos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .video a { border-radius: 14px; }
  .video__info { padding: 10px 10px 12px; }
  .video__t { font-size: .875rem; }
  .video__play { width: 34px; height: 34px; top: 8px; right: 8px; }

  .ranks__grelha { margin-top: 22px; gap: 14px; }
  .ranks__tabela-caixa { padding: 4px 4px 6px; }
  .ranks__tabela th, .ranks__tabela td { padding-left: 8px; padding-right: 8px; }
  .ranks__tabela .col-kd { display: none; }
  .rank__jogador { gap: 8px; }
  .rank__jogador img, .rank__sem-foto { width: 30px; height: 30px; border-radius: 8px; }
  .rank__nome { max-width: 38vw; }
  .escaloes { padding: 18px; }

  .guias__lista { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .guia a { min-height: 72px; }
  .guia img { width: 48px; height: 48px; }

  .final { padding-bottom: 48px; }
  .final__caixa { padding: 18px; }
  .final__botoes { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-discord--linha { width: 100%; }
  .rodape { display: block; padding: 0 16px 40px; }
  .rodape__links { margin-top: 8px; margin-left: -10px; }
}

/* Telemóveis muito estreitos: o botão do Discord no cabeçalho fica só com o logótipo (o nome continua lá para leitores de ecrã) */
@media (max-width: 380px) {
  .topo__discord-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .contagem { gap: 2px 9px; }
  .contagem__u small { font-size: .75rem; }
  .escaloes__lista { grid-template-columns: 1fr; }
}


/* ---------- Entrada (o «loading»): só na 1.ª página de cada visita, cerca de 1,3 s, salta-se com clique ou tecla.
   Sai SEMPRE sozinha pelo CSS (mesmo que um script falhe); sem movimento reduzido nunca aparece. ---------- */
.entrada { display: none; }
.com-entrada .entrada {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background:
    radial-gradient(50% 45% at 50% 45%, rgba(124, 58, 237, .35) 0%, rgba(124, 58, 237, .10) 45%, rgba(124, 58, 237, 0) 70%),
    linear-gradient(180deg, #13122E 0%, #0F0F23 60%, #0B0B1C 100%);
  animation: entrada-sai 480ms cubic-bezier(.7, 0, .84, 0) 1000ms forwards;
}
.com-entrada.entrada-saltada .entrada { animation: entrada-sai 300ms ease-in 0ms forwards; }
.entrada__centro { display: grid; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.entrada__castelo { width: 96px; height: 96px; overflow: visible; }
.entrada__muralha {
  fill: #F0EEE9; fill-opacity: 0; stroke: #F0EEE9; stroke-width: 1.4; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: entrada-traco 700ms cubic-bezier(.65, 0, .35, 1) 60ms forwards, entrada-enche 380ms ease-out 650ms forwards;
}
.entrada__porta { fill: #3B1676; animation: porta-acende 520ms ease-out 820ms forwards; }
.entrada__nome { display: flex; font: 400 clamp(1.75rem, 6vw, 3rem)/1 var(--font-display); color: var(--branco); letter-spacing: .02em; }
.entrada__nome span { display: inline-block; opacity: 0; transform: translateY(14px); animation: entrada-letra 420ms var(--ease-chegar) forwards; }
.entrada__nome span:nth-child(-n+4) { color: var(--lilas-claro); }
.com-entrada .entrada__nome span:nth-child(1) { animation-delay: 260ms; }
.com-entrada .entrada__nome span:nth-child(2) { animation-delay: 284ms; }
.com-entrada .entrada__nome span:nth-child(3) { animation-delay: 308ms; }
.com-entrada .entrada__nome span:nth-child(4) { animation-delay: 332ms; }
.com-entrada .entrada__nome span:nth-child(5) { animation-delay: 356ms; }
.com-entrada .entrada__nome span:nth-child(6) { animation-delay: 380ms; }
.com-entrada .entrada__nome span:nth-child(7) { animation-delay: 404ms; }
.com-entrada .entrada__nome span:nth-child(8) { animation-delay: 428ms; }
.com-entrada .entrada__nome span:nth-child(9) { animation-delay: 452ms; }
.com-entrada .entrada__nome span:nth-child(10) { animation-delay: 476ms; }
.com-entrada .entrada__nome span:nth-child(11) { animation-delay: 500ms; }
.com-entrada .entrada__nome span:nth-child(12) { animation-delay: 524ms; }
.com-entrada .entrada__nome span:nth-child(13) { animation-delay: 548ms; }
.com-entrada .entrada__nome span:nth-child(14) { animation-delay: 572ms; }
.com-entrada .entrada__nome span:nth-child(15) { animation-delay: 596ms; }
.entrada__barra { width: min(260px, 60vw); height: 3px; border-radius: 3px; overflow: hidden; background: rgba(167, 139, 250, .18); }
.entrada__barra i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  animation: entrada-barra 880ms cubic-bezier(.3, .1, .2, 1) 80ms forwards; }
.entrada__por { display: flex; align-items: center; gap: 8px; color: var(--color-muted-foreground); font-size: .875rem; opacity: 0; animation: aparece 400ms ease-out 900ms forwards; }
.entrada__hardside { display: block; width: 92px; height: auto; color: var(--texto-2); }
.entrada__por .hs-ponto { fill: var(--color-accent); }
@keyframes entrada-traco { to { stroke-dashoffset: 0; } }
@keyframes entrada-enche { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes entrada-letra { to { opacity: 1; transform: none; } }
@keyframes entrada-barra { to { transform: scaleX(1); } }
@keyframes entrada-sai { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-3%); visibility: hidden; } }
/* com a entrada, a animação do Início começa quando ela sai */
.atrasa .tab-inicio .marca__castelo { animation-delay: 1150ms; }
.atrasa .tab-inicio .castelo__porta { animation-delay: 1550ms; }
.atrasa .tab-inicio .heroi h1 .h1__a { animation-delay: 1200ms; }
.atrasa .tab-inicio .heroi h1 .h1__b { animation-delay: 1280ms; }
.atrasa .tab-inicio .etiquetas { animation-delay: 1450ms; }
.atrasa .tab-inicio .consola { animation-delay: 1300ms; }
.atrasa .tab-inicio .ilha[data-modo] .ilha__palco { animation-delay: 1150ms; }

/* ---------- Movimento fluido: transição entre tabs, secções a aparecer, zoom nas imagens ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* entre páginas do site (Chrome, Edge, Safari recentes): o cabeçalho fica, o conteúdo desliza e esbate */
  @view-transition { navigation: auto; }
  .topo { view-transition-name: topo; }
  .rodape { view-transition-name: rodape; }
  ::view-transition-old(root) { animation: vt-sai 220ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-entra 420ms var(--ease-chegar) both; }

  /* o que aparece ao descer: só depois de o JS marcar (sem JS fica tudo visível) */
  .revela { opacity: 0; transform: translateY(22px); }
  .revela.visto {
    opacity: 1; transform: none;
    transition: opacity 700ms var(--ease-chegar), transform 800ms var(--ease-chegar);
    transition-delay: var(--atraso-revela, 0ms);
  }
  .cartao.revela.visto { transition-property: opacity, transform, box-shadow, border-color; }

  .video img { transition: transform 900ms var(--ease-chegar), filter 600ms ease; }
  .video a:hover img { transform: scale(1.06); filter: saturate(1.1) brightness(1.05); }
  .guia img { transition: transform var(--dur-3d) var(--ease-mola); }
  .guia a:hover img { transform: rotate(-6deg) scale(1.08); }
  .btn-ligar .ic { transition: transform var(--dur-base) var(--ease-mola); }
  .btn-ligar:hover .ic { transform: rotate(-12deg) scale(1.1); }
}
@keyframes vt-sai { to { opacity: 0; transform: translateY(-10px); } }
@keyframes ambiente-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes nevoeiro { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Movimento reduzido: estado final, sem entrada nem inclinações ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cartao:hover { transform: none; }
  .cartao:hover .cartao__icone { transform: translateZ(34px); }
  .cartao:hover .cartao__mais .ic { transform: none; }
  .video a:hover, .guia a:hover { transform: none; }
}

/* =====================================================================================
   v4 (5/11): o salto «menos básico»: faixa ao vivo, semana de raid, próximos wipes, pódio,
   destaques, cabeçalhos com imagem nas tabs, percurso dos guias, cartões dos servidores.
   ===================================================================================== */
:root {
  --borda-grad: linear-gradient(140deg, rgba(196, 181, 253, .55) 0%, rgba(124, 58, 237, .16) 38%, rgba(124, 58, 237, .10) 62%, rgba(244, 63, 94, .34) 100%);
  --borda-grad-forte: linear-gradient(140deg, rgba(221, 214, 254, .85) 0%, rgba(167, 139, 250, .35) 40%, rgba(244, 63, 94, .65) 100%);
  --painel: linear-gradient(165deg, var(--cartao-alto) 0%, #221F44 22%, var(--color-card) 48%, #191730 76%, var(--cartao-baixo) 100%);
  --ouro: #F5D565;
  --prata: #D7DEEA;
  --rosa-3: #FB7185;
}
/* grão fino por cima da noite: dá matéria aos painéis sem pesar (SVG no próprio CSS) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.topo, .pagina, .rodape { position: relative; z-index: 2; }
.topo { z-index: var(--z-topo); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* contorno em degradé nos painéis */
.cartao, .ranks__tabela-caixa, .escaloes, .guia a, .aovivo__lista, .horario__painel, .ciclo, .wipe, .destaque, .passo a, .srv, .destaque-video, .final__caixa {
  border: 1px solid transparent;
  background: var(--painel) padding-box, var(--borda-grad) border-box;
}
.consola { border: 1px solid transparent; background: linear-gradient(180deg, #2A2550 0%, #221F42 16%, var(--color-card) 46%, #1A182F 78%, #17152B 100%) padding-box, var(--borda-grad-forte) border-box; }

/* Codex: um link focado nunca fica transparente à espera da animação */
.revela:focus-within { opacity: 1 !important; transform: none !important; }

/* ---------- Primeiro ecrã: frase do telemóvel, seta para descer, profundidade ao descer ---------- */
.lead--tel { display: none; }
.tab-inicio .heroi-faixa { padding-bottom: 8px; }
.descer {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 26px auto 0; border-radius: 50%;
  color: var(--lilas-texto); text-decoration: none;
}
.descer span { width: 22px; height: 34px; border-radius: 12px; border: 2px solid rgba(196, 181, 253, .55); position: relative; }
.descer span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--lilas-claro); }
@media (prefers-reduced-motion: no-preference) {
  .descer span::after { animation: descer 1.8s var(--ease-chegar) infinite; }
  @supports (animation-timeline: scroll()) {
    .tab-inicio .heroi-faixa::before {
      animation: aparece 900ms ease-out both, ambiente-zoom 38s ease-in-out 1s infinite alternate, paralaxe linear both;
      animation-timeline: auto, auto, scroll(root);
      animation-range: normal, normal, 0 900px;
    }
  }
}
@keyframes descer { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes paralaxe { to { translate: 0 40px; } }

/* ---------- Faixa ao vivo ---------- */
.aovivo { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 40px 40px 0; }
.aovivo__lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; border-radius: var(--radius-lg); box-shadow: var(--sombra-cartao); overflow: hidden;
}
.aovivo__item { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 22px 24px; }
.aovivo__item + .aovivo__item { border-left: 1px solid rgba(167, 139, 250, .14); }
.aovivo__item img { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.aovivo__ic { width: 40px; height: 40px; flex: none; color: var(--lilas-claro); filter: drop-shadow(0 0 14px rgba(167, 139, 250, .45)); }
.aovivo__item p { display: grid; gap: 4px; min-width: 0; }
.aovivo__item b { font: 400 clamp(1.75rem, 1.2rem + 1.1vw, 2.375rem)/1 var(--font-display); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.aovivo__item span { font-size: .9375rem; font-weight: 600; color: var(--texto-2); }
.aovivo__pulso { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.aovivo__pulso::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 16px rgba(167, 139, 250, .9); }
.aovivo__pulso::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, .6); }
@media (prefers-reduced-motion: no-preference) { .aovivo__pulso::after { animation: pulso 2.2s ease-out infinite; } }
@keyframes pulso { from { transform: scale(.45); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.aovivo__item--ciclo { display: grid; align-content: center; gap: 12px; }

/* barra do ciclo do wipe */
.ciclo__barra { position: relative; height: 10px; border-radius: 10px; overflow: hidden; background: rgba(12, 11, 29, .9); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.ciclo__barra i {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: 10px;
  background: linear-gradient(90deg, var(--color-primary), #A855F7 55%, var(--color-accent));
  box-shadow: 0 0 14px rgba(244, 63, 94, .45);
  transition: width 1.2s var(--ease-chegar);
}
.ciclo__barra i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) { .ciclo__barra i::after { animation: brilho 3.2s ease-in-out 1s infinite; } }
@keyframes brilho { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.ciclo__barra--grande { height: 14px; }

/* ---------- Secções novas: medidas comuns ---------- */
.horario, .wipes, .topo3, .novos { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 72px 40px 0; }
.sec__ligacao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; flex: none;
  border-radius: 12px; border: 1px solid rgba(167, 139, 250, .35); color: var(--lilas-texto);
  font-weight: 700; text-decoration: none; transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease;
}
.sec__ligacao:hover { background: rgba(124, 58, 237, .2); border-color: var(--color-secondary); color: #FFFFFF; }
.sec__ligacao .ic { transition: transform var(--dur-base) var(--ease-chegar); }
.sec__ligacao:hover .ic { transform: translateX(4px); }
.sub { margin: 48px 0 20px; font: 400 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1.15 var(--font-display); color: #FFFFFF; }

/* ---------- Semana de raid ---------- */
.horario__painel {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); grid-template-areas: "estado semana" "estado legenda";
  column-gap: 32px; row-gap: 12px; margin-top: 36px; padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--sombra-cartao);
}
.horario__estado { grid-area: estado; display: grid; align-content: center; justify-items: start; gap: 16px; padding-right: 28px; border-right: 1px solid rgba(167, 139, 250, .14); }
.horario__icone { width: 112px; height: 112px; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .55)); }
.horario__titulo { font: 400 1.625rem/1.1 var(--font-display); color: #FFFFFF; }
.horario__estado[data-estado="aberto"] .horario__titulo { color: var(--accent-luz); text-shadow: 0 0 22px rgba(244, 63, 94, .45); }
.horario__falta { margin-top: 8px; color: var(--texto-2); }
@media (prefers-reduced-motion: no-preference) { .horario__estado[data-estado="aberto"] .horario__icone { animation: abana 2.6s ease-in-out infinite; } }
@keyframes abana { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-6deg); } 88% { transform: rotate(5deg); } 92% { transform: rotate(-3deg); } }

.semana { grid-area: semana; display: grid; gap: 8px; align-content: center; }
.semana__escala, .semana__linha { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; }
.semana__regua { position: relative; height: 18px; }
.semana__regua span { position: absolute; top: 0; transform: translateX(-50%); font-size: .75rem; font-weight: 600; color: var(--color-muted-foreground); }
.semana__regua span:first-child { transform: none; }
.semana__regua span:last-child { transform: translateX(-100%); }
.semana__dia { font-weight: 700; font-size: .9375rem; color: var(--texto-2); }
.semana__pista { position: relative; height: 26px; border-radius: 8px; background: rgba(12, 11, 29, .85); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.semana__guia { position: absolute; top: 4px; bottom: 4px; width: 1px; background: rgba(167, 139, 250, .14); }
.semana__raid {
  position: absolute; top: 3px; bottom: 3px; border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-luz), var(--color-accent) 60%, #D92E50);
  box-shadow: 0 0 12px rgba(244, 63, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.semana__linha.hoje .semana__dia { color: #FFFFFF; }
.semana__linha.hoje .semana__pista { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 1px rgba(196, 181, 253, .55); }
.semana__agora { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 22px rgba(167, 139, 250, .8); z-index: 1; }
.semana__agora::before { content: ""; position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) { .semana__agora { animation: respira 2.4s ease-in-out infinite; } }
@keyframes respira { 50% { box-shadow: 0 0 4px rgba(255, 255, 255, .6), 0 0 12px rgba(167, 139, 250, .5); } }
.semana__legenda { grid-area: legenda; display: flex; align-items: center; gap: 8px; padding-left: 56px; font-size: .875rem; color: var(--color-muted-foreground); }
.semana__chave { display: inline-block; width: 22px; height: 10px; border-radius: 4px; }
.semana__chave--raid { background: var(--color-accent); }
.semana__chave--agora { width: 3px; height: 14px; margin-left: 14px; background: #FFFFFF; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }

/* ---------- Próximos wipes ---------- */
.ciclo { margin-top: 36px; padding: 22px 24px; border-radius: var(--radius-lg); box-shadow: var(--sombra-cartao); }
.ciclo__t { margin-bottom: 14px; color: var(--texto-2); }
.ciclo__t b { font: 400 1.375rem/1 var(--font-display); color: #FFFFFF; margin-right: 6px; }
.ciclo__pontas { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: .875rem; color: var(--color-muted-foreground); }
.wipes__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.wipe { position: relative; display: grid; justify-items: start; gap: 6px; padding: 20px 22px 22px; border-radius: 18px; box-shadow: var(--sombra-cartao); overflow: hidden; }
.wipe time { display: grid; gap: 2px; }
.wipe__dia-semana { font-weight: 700; color: var(--texto-2); text-transform: capitalize; }
.wipe__dia { font: 400 3.5rem/1 var(--font-display); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.wipe__mes { font-weight: 700; color: var(--lilas-claro); }
.wipe__hora { font: 400 1.125rem/1 var(--font-display); color: var(--texto-2); }
.wipe__falta { margin-top: 8px; padding: 6px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--lilas-texto); background: rgba(124, 58, 237, .2); }
.wipe--proximo { background: linear-gradient(165deg, #3A2A6E 0%, #2A2156 40%, #1E1A3F 100%) padding-box, var(--borda-grad-forte) border-box; box-shadow: var(--sombra-cartao-alta); }
.wipe--proximo::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(244, 63, 94, .35), rgba(244, 63, 94, 0) 70%);
}
.wipe--proximo .wipe__falta { color: var(--color-on-accent); background: var(--accent-luz); }

/* ---------- Pódio (Ranks e Início) ---------- */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 18px; margin: 40px auto 0; padding: 0; max-width: 920px; list-style: none; }
.podio__lugar { --cor: var(--prata); position: relative; display: grid; justify-items: center; text-align: center; min-width: 0; }
.podio__lugar--1 { --cor: var(--ouro); order: 2; }
.podio__lugar--2 { order: 1; }
.podio__lugar--3 { --cor: var(--rosa-3); order: 3; }
.podio__foto { position: relative; display: block; width: 112px; height: 112px; margin-bottom: 14px; }
.podio__lugar--1 .podio__foto { width: 140px; height: 140px; }
.podio__foto img, .podio__foto .rank__sem-foto {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px var(--cor), 0 0 0 9px rgba(15, 15, 35, .9), 0 0 36px color-mix(in srgb, var(--cor) 55%, transparent), 0 18px 30px rgba(0, 0, 0, .55);
  font-size: 2.5rem;
}
.podio__medalha {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 400 1.25rem/1 var(--font-display); color: #15132A; background: var(--cor); box-shadow: 0 0 0 4px #15132A, 0 6px 14px rgba(0, 0, 0, .5);
}
.podio__nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.25rem/1.2 var(--font-display); color: #FFFFFF; }
.podio__kills { margin-top: 6px; color: var(--texto-2); font-weight: 600; }
.podio__kills b { font: 400 2rem/1 var(--font-display); color: var(--cor); }
.podio__resto { margin-top: 4px; font-size: .875rem; color: var(--color-muted-foreground); }
.podio__base {
  display: block; width: 100%; height: 70px; margin-top: 16px; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 32%, #2A2552) 0%, #1E1C35 60%, #15132A 100%);
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 -10px 40px -18px var(--cor);
}
.podio__lugar--1 .podio__base { height: 120px; }
.podio__lugar--2 .podio__base { height: 86px; }
.podio--mini { margin-top: 32px; }
.podio--mini .podio__foto { width: 84px; height: 84px; }
.podio--mini .podio__lugar--1 .podio__foto { width: 104px; height: 104px; }
.podio--mini .podio__base { height: 40px; }
.podio--mini .podio__lugar--1 .podio__base { height: 72px; }
.podio--mini .podio__lugar--2 .podio__base { height: 54px; }
.podio--mini .podio__kills b { font-size: 1.625rem; }
@media (prefers-reduced-motion: no-preference) {
  .podio__lugar.revela .podio__base { transform-origin: 50% 100%; transform: scaleY(.2); }
  .podio__lugar.revela.visto .podio__base { transform: none; transition: transform 900ms var(--ease-mola) calc(var(--atraso-revela, 0ms) + 150ms); }
  .podio__lugar--1.visto .podio__foto { animation: coroa 3.6s ease-in-out 1.2s infinite; }
}
@keyframes coroa { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ranks .ranks__vazio { margin-top: 32px; border-radius: 18px; background: var(--painel); text-align: center; }

/* destaques do wipe */
.destaques__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.destaque { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border-radius: 16px; box-shadow: var(--sombra-cartao); transition: transform var(--dur-3d) var(--ease-chegar); }
.destaque > img { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); transition: transform var(--dur-3d) var(--ease-mola); }
.destaque div { min-width: 0; }
.destaque__t { font-size: .8125rem; font-weight: 600; color: var(--color-muted-foreground); }
.destaque__v { margin-top: 2px; font: 400 1.5rem/1.1 var(--font-display); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.destaque__quem { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; font-weight: 700; font-size: .9375rem; color: var(--lilas-texto); }
.destaque__quem img, .destaque__quem .rank__sem-foto { width: 24px; height: 24px; border-radius: 6px; flex: none; font-size: .75rem; object-fit: cover; }
.destaque__quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .destaque:hover { transform: translateY(-4px); }
  .destaque:hover > img { transform: rotate(-8deg) scale(1.1); }
}
.ranks__grelha { margin-top: 48px; }

/* cargos: uma escada que sobe com as horas */
.escada { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.degrau { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.degrau__barra {
  display: block; width: 100%; height: calc(110px * var(--h)); border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) calc(var(--n) * 16%), var(--color-secondary)) 0%, rgba(124, 58, 237, .25) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.degrau__nome { font-size: .8125rem; color: #FFFFFF; overflow-wrap: anywhere; line-height: 1.15; }
.degrau__horas { font-size: .75rem; font-weight: 600; color: var(--color-muted-foreground); }
@media (prefers-reduced-motion: no-preference) {
  .escaloes.revela .degrau__barra { transform-origin: 50% 100%; transform: scaleY(0); }
  .escaloes.revela.visto .degrau__barra { transform: none; transition: transform 800ms var(--ease-mola); transition-delay: calc(300ms + var(--n) * 90ms); }
}

/* ---------- Cabeçalhos das tabs com imagem ---------- */
.banner { position: relative; z-index: 2; margin-top: -76px; padding-top: 76px; overflow: hidden; }
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .92) 0%, rgba(15, 15, 35, .55) 45%, rgba(15, 15, 35, .15) 100%),
    linear-gradient(180deg, rgba(15, 15, 35, .7) 0%, rgba(15, 15, 35, 0) 30%, rgba(15, 15, 35, .35) 70%, var(--color-background) 100%),
    url("../fundos/inicio-1600.webp") var(--pos, center) / cover no-repeat;
}
.banner--videos { --pos: 18% 64%; }
.banner--ranks { --pos: 80% 40%; }
.banner--guias { --pos: 45% 75%; }
.banner--servidores { --pos: 70% 52%; }
.banner__dentro { max-width: 1280px; margin: 0 auto; padding: 56px 40px 64px; }
.banner h1 {
  margin: 0; max-width: 18ch; font: 400 clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem)/1 var(--font-display); color: var(--branco);
  text-shadow: 0 2px 0 #4C1D95, 0 14px 34px rgba(4, 3, 16, .6);
}
.banner p { max-width: 46ch; margin-top: 16px; font-size: 1.1875rem; line-height: 1.5; color: var(--texto-2); }
.banner__nota:empty { display: none; }
.banner .banner__nota { margin-top: 10px; font-size: .9375rem; font-weight: 600; color: var(--lilas-texto); }
@media (prefers-reduced-motion: no-preference) {
  .banner::before { animation: aparece 700ms ease-out both, ambiente-zoom 40s ease-in-out 1s infinite alternate; }
  .banner h1 { animation: nome-entra 700ms var(--ease-chegar) 80ms both; }
  .banner p { animation: nome-entra 700ms var(--ease-chegar) 200ms both; }
}
.banner + .videos, .banner + .ranks, .banner + .guias, .banner + .outros { padding-top: 8px; }
.banner + .guias .sub:first-child { margin-top: 8px; }

/* ---------- Vídeos: destaque + mais vistos ---------- */
.destaque-video {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 32px; align-items: center;
  padding: 24px; border-radius: 24px; box-shadow: var(--sombra-cartao-alta);
}
.destaque-video__capa { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--poco); box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .7); }
.destaque-video__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-chegar); }
.destaque-video__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  color: #FFFFFF; background: rgba(244, 63, 94, .88); box-shadow: 0 0 0 10px rgba(244, 63, 94, .25), 0 16px 30px rgba(0, 0, 0, .5);
  transition: transform var(--dur-3d) var(--ease-mola);
}
.destaque-video__play .ic { margin-left: 5px; }
.destaque-video__capa:hover img { transform: scale(1.05); }
.destaque-video__capa:hover .destaque-video__play { transform: scale(1.1); }
@media (prefers-reduced-motion: no-preference) { .destaque-video__play { animation: chama 2.4s ease-out infinite; } }
@keyframes chama { 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .45), 0 16px 30px rgba(0, 0, 0, .5); } 100% { box-shadow: 0 0 0 22px rgba(244, 63, 94, 0), 0 16px 30px rgba(0, 0, 0, .5); } }
.destaque-video__t { margin: 0; font: 400 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem)/1.1 var(--font-display); color: #FFFFFF; }
.destaque-video__meta { margin-top: 14px; font-weight: 600; color: var(--lilas-texto); }
.destaque-video__txt { margin: 14px 0 24px; color: var(--texto-2); max-width: 40ch; }
.mais-vistos { align-self: stretch; display: grid; align-content: start; gap: 12px; padding-left: 28px; border-left: 1px solid rgba(167, 139, 250, .14); }
.mais-vistos__t { margin: 0; font: 400 1.25rem/1.2 var(--font-display); color: #FFFFFF; }
.mais-vistos__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mais-visto a { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color var(--dur-rapida) ease; }
.mais-visto a:hover { background: rgba(124, 58, 237, .18); }
.mais-visto .video__capa { aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; position: relative; display: block; background: var(--poco); }
.mais-visto .video__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mais-visto .video__play { display: none; }
.mais-visto .video__info { padding: 0; }
.mais-visto .video__t { font-size: .9375rem; -webkit-line-clamp: 2; }
.mais-visto .video__d { display: block; }
.videos__mais { margin-top: 28px; display: flex; justify-content: center; }
.btn-sec .ic { flex: none; }

/* ---------- Guias: percurso ---------- */
.percurso { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 20px 0 0; list-style: none; }
.percurso::before { content: ""; position: absolute; left: 6%; right: 6%; top: 40px; height: 2px; background: linear-gradient(90deg, rgba(167, 139, 250, .1), rgba(167, 139, 250, .6), rgba(244, 63, 94, .6), rgba(244, 63, 94, .1)); }
.passo { position: relative; }
.passo a {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 64px 22px 22px;
  border-radius: 18px; box-shadow: var(--sombra-cartao); text-decoration: none; color: inherit;
  transition: transform var(--dur-3d) var(--ease-chegar), box-shadow var(--dur-3d) var(--ease-chegar);
}
.passo__n {
  position: absolute; left: 22px; top: -20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 400 1.25rem/1 var(--font-display); color: #FFFFFF; background: linear-gradient(180deg, #8B5CF6, var(--color-primary));
  box-shadow: 0 0 0 5px var(--color-background), 0 0 22px rgba(124, 58, 237, .7);
}
.passo a > img { position: absolute; right: 12px; top: -30px; width: 96px; height: 96px; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .55)); transition: transform var(--dur-3d) var(--ease-mola); }
.passo__t { font: 400 1.375rem/1.15 var(--font-display); color: #FFFFFF; }
.passo__d { color: var(--texto-2); font-size: .9375rem; line-height: 1.5; }
.passo__mais { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .9375rem; color: var(--lilas-texto); }
.passo__mais .ic { transition: transform var(--dur-base) var(--ease-chegar); }
@media (hover: hover) and (pointer: fine) {
  .passo a:hover { transform: translateY(-6px); box-shadow: var(--sombra-cartao-alta); }
  .passo a:hover > img { transform: rotate(-8deg) scale(1.08) translateY(-6px); }
  .passo a:hover .passo__mais .ic { transform: translateX(4px); }
}
.guias__lista { margin-top: 0; }

/* ---------- Servidores ---------- */
.srv { position: relative; margin-top: 28px; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra-cartao); }
.srv + .srv { margin-top: 20px; }
.srv--nosso { background: var(--painel) padding-box, var(--borda-grad-forte) border-box; box-shadow: var(--sombra-cartao-alta); }
.srv__capa {
  height: 180px;
  background:
    linear-gradient(180deg, rgba(15, 15, 35, 0) 30%, rgba(30, 28, 53, .95) 100%),
    url("../fundos/inicio-1600.webp") 70% 48% / cover no-repeat;
}
.srv__corpo { display: grid; gap: 18px; padding: 24px 28px 28px; }
.srv--nosso .srv__corpo { margin-top: -54px; position: relative; }
.srv__cima { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.srv h2 { margin: 0; font: 400 clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--font-display); color: #FFFFFF; }
.srv__desc { color: var(--texto-2); max-width: 60ch; }
.srv__estado {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  font-weight: 700; font-size: .875rem; color: var(--lilas-texto); background: rgba(12, 11, 29, .75); border: 1px solid rgba(167, 139, 250, .3);
}
.srv__estado .ponto { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--color-muted-foreground); }
.srv__estado[data-estado="ligado"] .ponto { background: #A3F7BF; box-shadow: 0 0 10px rgba(163, 247, 191, .8); }
.srv__estado[data-estado="ligado"] { color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) { .srv__estado[data-estado="ligado"] .ponto { animation: respira-ponto 2s ease-in-out infinite; } }
@keyframes respira-ponto { 50% { box-shadow: 0 0 2px rgba(163, 247, 191, .4); } }
.estado__ligado[data-estado="antigo"] .ponto { background: var(--color-muted-foreground); box-shadow: none; }
.srv__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#serradinha .srv__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66%; }
.srv__numeros p { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; padding: 14px 16px; border-radius: 14px; background: rgba(12, 11, 29, .55); border: 1px solid rgba(167, 139, 250, .14); }
.srv__numeros b { font: 400 2rem/1 var(--font-display); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.srv__numeros span { font: 400 1.125rem/1 var(--font-display); color: var(--color-muted-foreground); }
.srv__numeros small { grid-column: 1 / -1; margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--texto-2); }
.ciclo--srv { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ciclo--srv .ciclo__t { margin-bottom: 10px; }
.ciclo--srv .ciclo__t b { font-size: 1.125rem; }
.srv__ligar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.srv .factos { margin: 0; }

/* ---------- Ecrãs médios ---------- */
@media (max-width: 1180px) {
  .aovivo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aovivo__item:nth-child(3) { border-left: 0; }
  .aovivo__item:nth-child(n+3) { border-top: 1px solid rgba(167, 139, 250, .14); }
  .destaques__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destaque-video { grid-template-columns: 260px minmax(0, 1fr); }
  .mais-vistos { grid-column: 1 / -1; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(167, 139, 250, .14); }
  .mais-vistos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .percurso { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .percurso::before { display: none; }
}
@media (max-width: 980px) {
  .horario__painel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "estado" "semana" "legenda"; }
  .horario__estado { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(167, 139, 250, .14); }
  .horario__icone { width: 80px; height: 80px; }
  .wipes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telemóvel ---------- */
@media (max-width: 760px) {
  /* Codex, ponto 4: menos espaço em cima e uma frase a dizer porquê este servidor */
  .heroi__texto { padding-top: 36px; }
  .heroi__lead { display: block; margin-top: 12px; font-size: 1.0625rem; }
  .lead--pc { display: none; }
  .lead--tel { display: inline; }
  .descer { display: none; }

  .aovivo { padding: 28px 16px 0; }
  .aovivo__item { padding: 16px 14px; gap: 10px; }
  .aovivo__item img { width: 38px; height: 38px; }
  .aovivo__ic { width: 30px; height: 30px; }
  .aovivo__pulso { width: 30px; height: 30px; }
  .aovivo__item span { font-size: .8125rem; }

  .horario, .wipes, .topo3, .novos { padding: 56px 16px 0; }
  .sec__cabeca .sec__ligacao { margin-top: 14px; }
  .horario__painel { margin-top: 24px; padding: 18px 16px; }
  .horario__icone { width: 64px; height: 64px; }
  .horario__titulo { font-size: 1.25rem; }
  .semana__escala, .semana__linha { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
  .semana__pista { height: 22px; }
  .semana__dia { font-size: .8125rem; }
  .semana__legenda { padding-left: 0; flex-wrap: wrap; }

  .ciclo { margin-top: 24px; padding: 18px 16px; }
  .ciclo__pontas { flex-direction: column; gap: 2px; }
  .wipes__lista { gap: 10px; }
  .wipe { padding: 16px; }
  .wipe__dia { font-size: 2.75rem; }

  .podio { gap: 8px; margin-top: 28px; }
  .podio__foto, .podio--mini .podio__foto { width: 72px; height: 72px; }
  .podio__lugar--1 .podio__foto, .podio--mini .podio__lugar--1 .podio__foto { width: 92px; height: 92px; }
  .podio__foto img, .podio__foto .rank__sem-foto { box-shadow: 0 0 0 3px var(--cor), 0 0 0 6px rgba(15, 15, 35, .9), 0 10px 20px rgba(0, 0, 0, .5); font-size: 1.75rem; }
  .podio__medalha { width: 30px; height: 30px; font-size: 1rem; box-shadow: 0 0 0 3px #15132A; }
  .podio__nome { font-size: 1rem; }
  .podio__kills b, .podio--mini .podio__kills b { font-size: 1.375rem; }
  .podio__kills span { font-size: .875rem; }
  .podio__resto { font-size: .75rem; }
  .podio__base, .podio--mini .podio__base { height: 34px; }
  .podio__lugar--1 .podio__base, .podio--mini .podio__lugar--1 .podio__base { height: 70px; }
  .podio__lugar--2 .podio__base, .podio--mini .podio__lugar--2 .podio__base { height: 50px; }

  .destaques__lista { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sub { margin: 36px 0 16px; }
  .escada { gap: 4px; }
  .degrau__nome { font-size: .6875rem; }

  .banner { margin-top: -110px; padding-top: 110px; }
  .banner::before { background:
    linear-gradient(180deg, rgba(15, 15, 35, .75) 0%, rgba(15, 15, 35, .35) 35%, rgba(15, 15, 35, .6) 70%, var(--color-background) 100%),
    url("../fundos/inicio-900.webp") var(--pos, center) / cover no-repeat; }
  .banner__dentro { padding: 32px 16px 40px; }
  .banner p { font-size: 1rem; }

  .destaque-video { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 18px; }
  .destaque-video__capa { width: min(100%, 260px); justify-self: center; }
  .destaque-video__info .btn-ligar { width: 100%; }
  .mais-vistos__lista { grid-template-columns: minmax(0, 1fr); }

  .videos__lista--faixa { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .videos__lista--faixa::-webkit-scrollbar { display: none; }
  .videos__lista--faixa .video { flex: 0 0 62%; scroll-snap-align: start; }

  .percurso { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .passo a > img { width: 76px; height: 76px; top: -22px; }

  .srv__capa { height: 120px; }
  .srv__corpo { padding: 18px; gap: 14px; }
  .srv--nosso .srv__corpo { margin-top: -40px; }
  .srv__numeros, #serradinha .srv__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .srv__numeros p:nth-child(3) { grid-column: 1 / -1; }
  .srv__numeros b { font-size: 1.625rem; }
  .srv__ligar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 380px) {
  .aovivo__item { flex-direction: column; align-items: flex-start; }
  .podio__nome { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .podio__base, .degrau__barra { transform: none !important; }
}

/* ---------- v4, retoques depois de ver as capturas ---------- */
/* Servidores: os blocos herdavam as áreas da grelha antiga; aqui ficam por ordem, numa coluna */
.srv .factos, .srv .outro__endereco { grid-area: auto; }
.srv__corpo > * { min-width: 0; }
.srv--nosso .srv__corpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.srv--nosso .srv__cima, .srv--nosso .srv__desc { grid-column: 1 / -1; }
.srv--nosso .srv__numeros, .srv--nosso .ciclo--srv, .srv--nosso .srv__ligar { grid-column: 1; }
.srv--nosso .factos { grid-column: 2; grid-row: 3 / span 3; padding: 18px 20px; border: 1px solid rgba(167, 139, 250, .14); border-radius: 16px; background: rgba(12, 11, 29, .45); }
#serradinha .srv__numeros { max-width: 640px; }
/* cabeçalhos das tabs: a imagem desvanece em vez de acabar numa linha */
.banner::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* cargos: uma linha por cargo, com a barra a crescer com as horas */
.escada { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.degrau { grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem; justify-items: start; align-items: center; gap: 12px; text-align: left; }
.degrau__barra { order: 2; height: 12px; width: calc(100% * var(--h)); border-radius: 6px; background: linear-gradient(90deg, rgba(124, 58, 237, .5), color-mix(in srgb, var(--color-accent) calc(var(--n) * 18%), var(--color-secondary))); }
.degrau__nome { order: 1; font-size: .9375rem; overflow-wrap: normal; }
.degrau__horas { order: 3; justify-self: end; font-size: .875rem; }
@media (prefers-reduced-motion: no-preference) {
  .escaloes.revela .degrau__barra { transform-origin: 0 50%; transform: scaleX(0); }
}
/* pódio: o lugar escrito no pedestal */
.podio__base { display: grid; place-items: center; font: 400 3rem/1 var(--font-display); color: color-mix(in srgb, var(--cor) 30%, transparent); }
.podio__lugar--1 .podio__base { font-size: 4.5rem; }
@media (max-width: 980px) {
  .srv--nosso .srv__corpo { grid-template-columns: minmax(0, 1fr); }
  .srv--nosso .factos { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .podio__base { font-size: 1.75rem; }
  .podio__lugar--1 .podio__base { font-size: 2.5rem; }
  .degrau { grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; gap: 8px; }
  .degrau__nome { font-size: .875rem; }
  .srv--nosso .factos { padding: 14px; }
}
.escaloes .sub { margin-top: 0; }
@media (max-width: 760px) {
  .destaques__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .destaque { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .destaque > img { width: 44px; height: 44px; }
  .destaque__v { font-size: 1.25rem; }
  .destaque__quem { font-size: .8125rem; }
}

/* ---------- v4, depois da 3.ª ronda do Codex: menos painéis iguais, brilho só no que importa ---------- */
.destaque, .guia a, .ranks__tabela-caixa, .escaloes, .aovivo__lista, .wipe:not(.wipe--proximo), .ciclo:not(.ciclo--srv) {
  background: #17152C; border: 1px solid rgba(167, 139, 250, .14); box-shadow: none;
}
.wipe:not(.wipe--proximo) .wipe__dia { font-size: 2.75rem; color: var(--texto-2); }
.ranks__legenda { caption-side: top; padding: 14px 14px 4px; text-align: left; font: 400 1.25rem/1.2 var(--font-display); color: #FFFFFF; }
/* Ranks: pódio um terço mais baixo, a classificação chega mais cedo */
.podio { margin-top: 24px; }
.podio__foto { width: 92px; height: 92px; }
.podio__lugar--1 .podio__foto { width: 116px; height: 116px; }
.podio__base { height: 46px; font-size: 2rem; }
.podio__lugar--1 .podio__base { height: 80px; font-size: 3rem; }
.podio__lugar--2 .podio__base { height: 58px; }
.ranks__grelha { margin-top: 36px; }
@media (max-width: 760px) {
  /* Vídeos no telemóvel: miniatura ao lado do título, sem um ecrã inteiro de capa */
  .destaque-video { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 14px; }
  .destaque-video__capa { width: 112px; justify-self: start; }
  .destaque-video__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .destaque-video__play .ic { width: 18px; height: 18px; margin-left: 3px; }
  .destaque-video__t { font-size: 1.25rem; }
  .destaque-video__txt { display: none; }
  .destaque-video__info .btn-ligar { width: auto; min-height: 48px; margin-top: 12px; font-size: 1rem; }
  .mais-vistos { grid-column: 1 / -1; }
  .podio__foto { width: 64px; height: 64px; }
  .podio__lugar--1 .podio__foto { width: 80px; height: 80px; }
}

/* ---------- Imagens próprias do Higgsfield por tab (5/11, Nano Banana Pro, 0 créditos) ---------- */
.banner::before {
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .92) 0%, rgba(15, 15, 35, .6) 40%, rgba(15, 15, 35, .1) 75%, rgba(15, 15, 35, 0) 100%),
    linear-gradient(180deg, rgba(15, 15, 35, .7) 0%, rgba(15, 15, 35, 0) 30%, rgba(15, 15, 35, .25) 75%, rgba(15, 15, 35, .6) 100%),
    var(--img) var(--pos, 70% 50%) / cover no-repeat;
}
.banner--videos { --img: url("../fundos/videos-oilrig-1600.webp"); --img-tel: url("../fundos/videos-oilrig-900.webp"); --pos: 80% 45%; }
.banner--ranks { --img: url("../fundos/ranks-dome-1600.webp"); --img-tel: url("../fundos/ranks-dome-900.webp"); --pos: 75% 35%; }
.banner--guias { --img: url("../fundos/guias-interior-1600.webp"); --img-tel: url("../fundos/guias-interior-900.webp"); --pos: 70% 55%; }
.banner--servidores { --img: url("../fundos/servidores-satelite-1600.webp"); --img-tel: url("../fundos/servidores-satelite-900.webp"); --pos: 75% 40%; }
@media (min-width: 1700px) {
  .banner--videos { --img: url("../fundos/videos-oilrig-2400.webp"); }
  .banner--ranks { --img: url("../fundos/ranks-dome-2400.webp"); }
  .banner--guias { --img: url("../fundos/guias-interior-2400.webp"); }
  .banner--servidores { --img: url("../fundos/servidores-satelite-2400.webp"); }
}
.banner__dentro { padding-top: 72px; padding-bottom: 96px; }
.srv__capa {
  height: 200px;
  background:
    linear-gradient(180deg, rgba(15, 15, 35, 0) 35%, rgba(30, 28, 53, .95) 100%),
    url("../fundos/srv-harbor-1600.webp") 65% 55% / cover no-repeat;
}
/* bloco do raid: a base fortificada por trás do título e do painel, a desvanecer nas pontas */
.horario { isolation: isolate; }
.horario::before {
  content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); top: 0; width: 100vw; height: 640px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .95) 0%, rgba(15, 15, 35, .55) 45%, rgba(15, 15, 35, .15) 100%),
    url("../fundos/raid-base-1600.webp") 70% 45% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
  opacity: .85;
}
@media (min-width: 1700px) { .horario::before { background-image: linear-gradient(90deg, rgba(15, 15, 35, .95) 0%, rgba(15, 15, 35, .55) 45%, rgba(15, 15, 35, .15) 100%), url("../fundos/raid-base-2400.webp"); } }
.horario__painel { background: rgba(23, 21, 44, .82) padding-box, var(--borda-grad) border-box; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 760px) {
  .banner::before { background:
    linear-gradient(180deg, rgba(15, 15, 35, .7) 0%, rgba(15, 15, 35, .25) 35%, rgba(15, 15, 35, .55) 75%, rgba(15, 15, 35, .8) 100%),
    var(--img-tel, var(--img)) var(--pos, 70% 50%) / cover no-repeat; }
  .banner__dentro { padding-bottom: 56px; }
  .srv__capa { height: 130px; background-image: linear-gradient(180deg, rgba(15, 15, 35, 0) 35%, rgba(30, 28, 53, .95) 100%), url("../fundos/srv-harbor-900.webp"); }
  .horario::before { height: 520px; background:
    linear-gradient(180deg, rgba(15, 15, 35, .55), rgba(15, 15, 35, .35)),
    url("../fundos/raid-base-900.webp") 72% 40% / cover no-repeat; }
  /* Início no telemóvel: a versão vertical da baía (Launch Site à direita, céu livre para o título) */
  .tab-inicio .heroi-faixa::before { top: -120px; height: 760px; background-image:
    linear-gradient(180deg, rgba(15, 15, 35, .35) 0%, rgba(15, 15, 35, .1) 30%, rgba(15, 15, 35, .55) 62%, var(--color-background) 100%),
    url("../fundos/inicio-vertical-900.webp"); background-size: cover; background-position: 50% 30%; }
}
/* cabeçalhos mais altos e mais claros: a imagem tem de se ver */
.banner { display: flex; align-items: flex-end; min-height: clamp(420px, 36vw, 600px); }
.banner__dentro { width: 100%; padding-top: 40px; padding-bottom: 72px; }
.banner::before {
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .88) 0%, rgba(15, 15, 35, .5) 32%, rgba(15, 15, 35, 0) 62%),
    linear-gradient(180deg, rgba(15, 15, 35, .55) 0%, rgba(15, 15, 35, 0) 22%, rgba(15, 15, 35, 0) 70%, rgba(15, 15, 35, .5) 100%),
    var(--img) var(--pos, 70% 50%) / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.banner--videos { --pos: 80% 30%; }
.banner--ranks { --pos: 75% 30%; }
.banner--guias { --pos: 70% 50%; }
.banner--servidores { --pos: 75% 35%; }
.srv__capa { height: 240px; background: linear-gradient(180deg, rgba(15, 15, 35, 0) 45%, rgba(30, 28, 53, .95) 100%), url("../fundos/srv-harbor-1600.webp") 70% 50% / cover no-repeat; }
@media (max-width: 760px) {
  .banner { min-height: 360px; }
  .banner::before { background:
    linear-gradient(180deg, rgba(15, 15, 35, .55) 0%, rgba(15, 15, 35, .1) 30%, rgba(15, 15, 35, .35) 70%, rgba(15, 15, 35, .7) 100%),
    var(--img-tel, var(--img)) var(--pos, 70% 50%) / cover no-repeat; }
  .banner__dentro { padding-bottom: 40px; }
  .srv__capa { height: 150px; background-image: linear-gradient(180deg, rgba(15, 15, 35, 0) 40%, rgba(30, 28, 53, .95) 100%), url("../fundos/srv-harbor-900.webp"); }
}
/* a base do raid tem de se ver por trás do título (o painel fica por cima, com vidro) */
.horario::before {
  height: 720px; opacity: 1;
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .9) 0%, rgba(15, 15, 35, .35) 40%, rgba(15, 15, 35, 0) 75%),
    url("../fundos/raid-base-1600.webp") 72% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.horario__painel { background: rgba(20, 18, 40, .72) padding-box, var(--borda-grad) border-box; }
@media (max-width: 760px) {
  .horario::before { height: 560px; background: linear-gradient(180deg, rgba(15, 15, 35, .5), rgba(15, 15, 35, .2)), url("../fundos/raid-base-900.webp") 72% 40% / cover no-repeat; }
}

/* =====================================================================================
   v5 (5/11, depois da 4.ª ronda do Codex e dos pedidos do dono): botões novos, consola em duas
   zonas, Início com as imagens do Higgs coladas como fundo de cada secção, sem repetir o wipe.
   ===================================================================================== */

/* ---------- Botões: limpos, sem relevo; o principal brilha ---------- */
.btn-ligar {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 28px 0 14px; border-radius: 14px; border: 0;
  color: #FFFFFF; font: 400 1.25rem/1 var(--font-display); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #FB7185 0%, #F43F5E 45%, #E11D48 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -10px rgba(244, 63, 94, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  text-shadow: 0 1px 2px rgba(120, 10, 40, .45);
  transform: none; filter: none;
  transition: transform var(--dur-base) var(--ease-chegar), box-shadow var(--dur-base) var(--ease-chegar);
}
.btn-ligar__ic {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.btn-ligar__ic .ic { margin-left: 2px; }
.btn-ligar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn-ligar:hover { filter: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 18px 40px -10px rgba(244, 63, 94, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
.btn-ligar:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(120, 10, 40, .45), 0 6px 16px -8px rgba(244, 63, 94, .7); }
@media (prefers-reduced-motion: no-preference) {
  .btn-ligar:hover::after { transform: translateX(120%); transition: transform 800ms var(--ease-chegar); }
  .btn-ligar:hover .ic { transform: none; }
}
.btn-ligar--compacto { min-height: 54px; padding: 0 22px 0 10px; font-size: 1.0625rem; }
.btn-ligar--compacto .btn-ligar__ic { width: 34px; height: 34px; }

.btn-copiar, .btn-sec, .btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border-radius: 12px;
  font: 700 1rem/1 var(--font-body); color: var(--branco); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: rgba(124, 58, 237, .14); border: 1px solid rgba(167, 139, 250, .38);
  box-shadow: none; transform: none;
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, transform var(--dur-rapida) ease;
}
.btn-copiar:hover, .btn-sec:hover, .btn-discord:hover { background: rgba(124, 58, 237, .28); border-color: var(--color-secondary); transform: translateY(-1px); }
.btn-copiar:active, .btn-sec:active, .btn-discord:active { transform: none; box-shadow: none; }
.btn-sec--linha, .btn-discord--linha { background: transparent; }
.btn-discord { width: auto; margin-top: 0; }
.btn-discord .ic { color: #A5B4FC; }
.topo__discord { border-radius: 12px; }

/* ---------- Consola: wipe à esquerda, jogar à direita ---------- */
.consola { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.consola__entrar { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.consola__entrar .btn-ligar { width: 100%; min-height: 68px; font-size: 1.375rem; }
.consola__entrar .btn-ligar .btn-ligar__ic { width: 44px; height: 44px; }
.estado__linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: .9375rem; color: var(--texto-2); }
.estado__linha b { font: 400 1.25rem/1 var(--font-display); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.estado__linha .estado__max { font: 400 .9375rem/1 var(--font-display); color: var(--color-muted-foreground); margin: 0 4px 0 2px; }
.estado__linha[data-estado="ligado"] .ponto { background: #A3F7BF; box-shadow: 0 0 10px rgba(163, 247, 191, .8); }
.estado__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(167, 139, 250, .5); }
.consola .estado__hora { margin-top: -8px; }
.manual { border-top: 1px solid rgba(167, 139, 250, .14); padding-top: 10px; }
.manual summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: .9375rem; color: var(--lilas-texto);
}
.manual summary::-webkit-details-marker { display: none; }
.manual summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-base) var(--ease-chegar); margin-right: 2px; }
.manual[open] summary::before { transform: rotate(45deg); }
.manual summary:hover { color: #FFFFFF; }
.manual__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 8px; }
.manual__corpo .endereco { margin: 0; min-height: 0; }
.manual__corpo .nota { grid-column: 1 / -1; margin: 0; }
.manual__corpo .btn-copiar { width: auto; min-height: 46px; margin: 0; padding: 0 14px; }
.manual__corpo .btn-copiar span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
a.raid { text-decoration: none; color: inherit; border-radius: 12px; margin-left: -8px; margin-right: -8px; padding: 14px 8px 4px; transition: background-color var(--dur-rapida) ease; }
a.raid:hover { background: rgba(124, 58, 237, .14); }
.raid__txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.raid__titulo, .raid__texto { display: block; }
.raid__seta { color: var(--lilas-texto); transition: transform var(--dur-base) var(--ease-chegar); }
a.raid:hover .raid__seta { transform: translateX(4px); }

/* ---------- Início: as imagens coladas, uma por secção, a fundirem-se umas nas outras ---------- */
#regras { --fundo: url("../fundos/videos-oilrig-1600.webp"); --fundo-tel: url("../fundos/videos-oilrig-900.webp"); --fundo-pos: 80% 40%; }
#horario { --fundo: url("../fundos/raid-base-1600.webp"); --fundo-tel: url("../fundos/raid-base-900.webp"); --fundo-pos: 72% 45%; }
#wipes { --fundo: url("../fundos/servidores-satelite-1600.webp"); --fundo-tel: url("../fundos/servidores-satelite-900.webp"); --fundo-pos: 75% 30%; }
#topo3 { --fundo: url("../fundos/ranks-dome-1600.webp"); --fundo-tel: url("../fundos/ranks-dome-900.webp"); --fundo-pos: 75% 30%; }
#novos { --fundo: url("../fundos/srv-harbor-1600.webp"); --fundo-tel: url("../fundos/srv-harbor-900.webp"); --fundo-pos: 65% 50%; }
/* sem contexto de empilhamento por secção: todas as imagens ficam por baixo de todo o conteúdo */
.tab-inicio .com-fundo, .tab-inicio .heroi-faixa { z-index: auto; isolation: auto; }
.tab-inicio .com-fundo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); width: 100vw; top: -180px; bottom: -180px; height: auto; opacity: 1;
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .88) 0%, rgba(15, 15, 35, .5) 40%, rgba(15, 15, 35, .12) 80%),
    linear-gradient(180deg, rgba(15, 15, 35, .25), rgba(15, 15, 35, .25)),
    var(--fundo) var(--fundo-pos, 70% 50%) / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
  animation: none; transform: none;
}
.tab-inicio .com-fundo[hidden] { display: none; }
/* o primeiro ecrã (baía) desce até ao fim da faixa ao vivo e funde-se na secção seguinte */
.tab-inicio .heroi-faixa { padding-bottom: 80px; }
.tab-inicio .heroi-faixa::before {
  top: -90px; bottom: -180px; height: auto;
  background:
    linear-gradient(90deg, rgba(15, 15, 35, .85) 0%, rgba(15, 15, 35, .5) 30%, rgba(15, 15, 35, .08) 60%, rgba(15, 15, 35, 0) 100%),
    linear-gradient(180deg, rgba(15, 15, 35, .7) 0%, rgba(15, 15, 35, 0) 15%, rgba(15, 15, 35, 0) 60%, rgba(15, 15, 35, .45) 85%),
    url("../fundos/inicio-1600.webp") center 60% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 260px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 260px), transparent 100%);
}
@media (min-width: 1700px) {
  .tab-inicio .heroi-faixa::before { background-image:
    linear-gradient(90deg, rgba(15, 15, 35, .85) 0%, rgba(15, 15, 35, .5) 30%, rgba(15, 15, 35, .08) 60%, rgba(15, 15, 35, 0) 100%),
    linear-gradient(180deg, rgba(15, 15, 35, .7) 0%, rgba(15, 15, 35, 0) 15%, rgba(15, 15, 35, 0) 60%, rgba(15, 15, 35, .45) 85%),
    url("../fundos/inicio-2400.webp"); }
  #regras { --fundo: url("../fundos/videos-oilrig-2400.webp"); }
  #horario { --fundo: url("../fundos/raid-base-2400.webp"); }
  #wipes { --fundo: url("../fundos/servidores-satelite-2400.webp"); }
  #topo3 { --fundo: url("../fundos/ranks-dome-2400.webp"); }
}
.tab-inicio .aovivo { padding-top: 36px; }
.tab-inicio .aovivo__lista { background: rgba(23, 21, 44, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tab-inicio .mudancas, .tab-inicio .horario, .tab-inicio .wipes, .tab-inicio .topo3, .tab-inicio .novos { padding-top: 120px; }
.tab-inicio .final { padding-top: 120px; }

/* mudanças: 3 cartões, o das blueprints grande com o interior da base por trás */
.mudancas__lista--3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 56px; }
.cartao--grande { grid-row: span 2; justify-content: flex-end; min-height: 380px; overflow: visible;
  background:
    linear-gradient(180deg, rgba(23, 21, 44, .1) 0%, rgba(23, 21, 44, .65) 45%, rgba(23, 21, 44, .97) 80%) padding-box,
    url("../fundos/guias-interior-900.webp") 60% 30% / cover no-repeat padding-box,
    var(--borda-grad-forte) border-box; }
.cartao--grande .cartao__icone { width: 150px; height: 150px; margin: -60px 0 auto -10px; }
.cartao--grande h3 { font-size: 1.75rem; }
.cartao--grande p { font-size: 1.0625rem; max-width: 38ch; }

/* raid: o painel ocupa 60% e deixa a base à vista */
.horario__painel { max-width: 62%; grid-template-columns: minmax(0, 1fr); grid-template-areas: "estado" "semana" "legenda"; row-gap: 18px; }
.horario__estado { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid rgba(167, 139, 250, .14); }
.horario__icone { width: 76px; height: 76px; }
.semana__legenda { padding-left: 56px; }

/* wipes a seguir: uma linha compacta */
.wipes__linha { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 32px; align-items: center; }
.wipes__linha h2 { margin: 0; font: 400 clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--font-display); color: #FFFFFF; }
.wipes__linha p { margin-top: 10px; color: var(--texto-2); }
.wipes .wipes__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.wipes .wipe { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 16px; background: rgba(23, 21, 44, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wipes .wipe time { grid-row: span 3; justify-items: center; min-width: 56px; }
.wipes .wipe .wipe__dia { font-size: 2.25rem; color: #FFFFFF; }
.wipes .wipe .wipe__dia-semana { font-size: .75rem; }
.wipes .wipe .wipe__mes { font-size: .8125rem; }
.wipes .wipe__falta { margin-top: 0; justify-self: start; }

/* fim da página: chamada curta; no Início o wipe já está lá em cima */
.final__texto { display: grid; gap: 6px; }
.final__wipe { color: var(--texto-2); font-weight: 600; }
.final__wipe time { color: var(--lilas-claro); }
.tab-inicio .final__wipe { display: none; }
.final h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* ---------- Ecrãs médios e telemóvel ---------- */
@media (max-width: 1180px) {
  .horario__painel { max-width: 78%; }
  .wipes__linha { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 980px) {
  .consola { grid-template-columns: minmax(0, 1fr); }
  .horario__painel { max-width: none; }
}
@media (max-width: 760px) {
  .tab-inicio .com-fundo::before {
    top: -120px; bottom: -120px;
    background:
      linear-gradient(180deg, rgba(15, 15, 35, .55), rgba(15, 15, 35, .45)),
      var(--fundo-tel, var(--fundo)) var(--fundo-pos, 70% 50%) / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  }
  .tab-inicio .heroi-faixa { padding-bottom: 40px; }
  .tab-inicio .heroi-faixa::before {
    top: -120px; bottom: -140px; height: auto; opacity: 1;
    background:
      linear-gradient(180deg, rgba(15, 15, 35, .35) 0%, rgba(15, 15, 35, .1) 25%, rgba(15, 15, 35, .55) 55%, rgba(15, 15, 35, .7) 100%),
      url("../fundos/inicio-vertical-900.webp") 50% 0 / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 180px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 180px), transparent 100%);
  }
  .tab-inicio .mudancas, .tab-inicio .horario, .tab-inicio .wipes, .tab-inicio .topo3, .tab-inicio .novos, .tab-inicio .final { padding-top: 80px; }
  .consola__entrar .btn-ligar { min-height: 62px; font-size: 1.25rem; }
  .mudancas__lista--3 { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .cartao--grande { grid-row: auto; min-height: 260px; display: flex; }
  .cartao--grande .cartao__icone { width: 76px; height: 76px; margin: 0 0 auto; }
  .cartao--grande h3 { font-size: 1.375rem; }
  .wipes .wipes__lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .manual__corpo .endereco { font-size: .8125rem; }
  .btn-ligar { padding-right: 20px; }
}

/* ---------- Cartões das mudanças com conteúdo (o dono: «os cards estão bastante vazios») ---------- */
.fluxo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: fluxo; }
.fluxo li {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px 12px; text-align: center;
  border-radius: 14px; background: rgba(12, 11, 29, .62); border: 1px solid rgba(167, 139, 250, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--texto-2);
}
.fluxo li + li::before {
  content: ""; position: absolute; left: -10px; top: 38px; width: 10px; height: 2px;
  background: linear-gradient(90deg, rgba(167, 139, 250, .2), rgba(244, 63, 94, .8));
}
.fluxo img { width: 52px; height: 52px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5)); }
.fluxo__equipa { display: flex; height: 52px; align-items: center; justify-content: center; gap: 0; color: var(--lilas-claro); }
.fluxo__equipa .ic { width: 22px; height: 22px; margin: 0 -2px; filter: drop-shadow(0 0 8px rgba(167, 139, 250, .5)); }
.fluxo__equipa .ic:nth-child(1) { color: var(--accent-luz); }
.cartao--grande .cartao__mais { padding-top: 22px; }

.cartao--numero { overflow: hidden; padding-top: 22px; }
.cartao--numero .cartao__icone { width: 84px; height: 84px; margin: 0 0 10px -6px; transform: none; }
.cartao__grande {
  position: absolute; right: 18px; top: -6px; margin: 0; pointer-events: none;
  font: 400 7.5rem/1 var(--font-display); letter-spacing: -.04em;
  background: linear-gradient(180deg, rgba(196, 181, 253, .5) 0%, rgba(124, 58, 237, .12) 75%, rgba(124, 58, 237, 0) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cartao__equipa { display: flex; gap: 6px; margin: 4px 0 14px; }
.cartao__equipa .ic {
  width: 40px; height: 40px; padding: 9px; border-radius: 50%; flex: none;
  color: var(--lilas-texto); background: rgba(124, 58, 237, .2); border: 1px solid rgba(167, 139, 250, .35);
}
.cartao__equipa .ic:nth-child(1) { color: #FFFFFF; background: rgba(244, 63, 94, .32); border-color: rgba(251, 113, 133, .6); }
@media (prefers-reduced-motion: no-preference) {
  .cartao.revela .cartao__equipa .ic, .cartao.revela .fluxo li { opacity: 0; transform: translateY(8px); }
  .cartao.revela.visto .cartao__equipa .ic, .cartao.revela.visto .fluxo li { opacity: 1; transform: none; transition: opacity 500ms ease, transform 600ms var(--ease-mola); }
  .cartao.visto .cartao__equipa .ic:nth-child(2), .cartao.visto .fluxo li:nth-child(2) { transition-delay: 350ms; }
  .cartao.visto .cartao__equipa .ic:nth-child(3), .cartao.visto .fluxo li:nth-child(3) { transition-delay: 500ms; }
  .cartao.visto .cartao__equipa .ic:nth-child(4) { transition-delay: 650ms; }
  .cartao.visto .cartao__equipa .ic:nth-child(1), .cartao.visto .fluxo li:nth-child(1) { transition-delay: 200ms; }
}
@media (max-width: 760px) {
  .fluxo { gap: 8px; }
  .fluxo li { padding: 10px 6px; font-size: .75rem; }
  .fluxo img { width: 40px; height: 40px; }
  .fluxo li + li::before { display: none; }
  .cartao--numero { display: block; padding: 18px; }
  .cartao--numero .cartao__icone { width: 64px; height: 64px; }
  .cartao__grande { font-size: 5.5rem; right: 12px; }
  .cartao__equipa .ic { width: 34px; height: 34px; padding: 7px; }
}
.cartao .cartao__grande { margin: 0; font-size: 8.5rem; line-height: 1; color: transparent; top: -4px; right: 20px; }
.cartao--grande { justify-content: flex-end; }
.cartao--grande .cartao__mais { margin-top: 0; }
@media (max-width: 760px) { .cartao .cartao__grande { font-size: 6rem; } }
@media (max-width: 760px) {
  .cartao--grande { min-height: 0; padding-top: 150px; background:
    linear-gradient(180deg, rgba(23, 21, 44, 0) 0%, rgba(23, 21, 44, .55) 30%, rgba(23, 21, 44, .97) 52%) padding-box,
    url("../fundos/guias-interior-900.webp") 60% 0 / 100% auto no-repeat padding-box,
    var(--borda-grad-forte) border-box; }
  .cartao--grande .cartao__icone { position: absolute; left: 14px; top: -14px; margin: 0; }
  .wipes .wipes__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wipes .wipe { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 12px 6px; }
  .wipes .wipe time { grid-row: auto; }
  .wipes .wipe .wipe__dia { font-size: 2rem; }
  .wipes .wipe__falta { justify-self: center; font-size: .6875rem; padding: 5px 8px; }
  .estado__linha { font-size: .875rem; }
}

/* =====================================================================================
   Páginas interiores (guias, calculadora, contacto, privacidade, termos, 404) no molde novo
   ===================================================================================== */
.banner--f-baia { --img: url("../fundos/inicio-1600.webp"); --img-tel: url("../fundos/inicio-900.webp"); --pos: 60% 55%; }
.banner--f-base { --img: url("../fundos/raid-base-1600.webp"); --img-tel: url("../fundos/raid-base-900.webp"); --pos: 72% 40%; }
.banner--f-interior { --img: url("../fundos/guias-interior-1600.webp"); --img-tel: url("../fundos/guias-interior-900.webp"); --pos: 70% 50%; }
.banner--f-oilrig { --img: url("../fundos/videos-oilrig-1600.webp"); --img-tel: url("../fundos/videos-oilrig-900.webp"); --pos: 80% 30%; }
.banner--f-satelite { --img: url("../fundos/servidores-satelite-1600.webp"); --img-tel: url("../fundos/servidores-satelite-900.webp"); --pos: 75% 35%; }
.banner--f-harbor { --img: url("../fundos/srv-harbor-1600.webp"); --img-tel: url("../fundos/srv-harbor-900.webp"); --pos: 65% 50%; }
.banner--f-dome { --img: url("../fundos/ranks-dome-1600.webp"); --img-tel: url("../fundos/ranks-dome-900.webp"); --pos: 75% 30%; }
.banner--artigo { min-height: clamp(380px, 32vw, 520px); }
.banner--artigo h1 { max-width: 22ch; font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); }
.banner__lead { max-width: 58ch !important; font-size: 1.1875rem; }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px !important; font-size: .9375rem !important; font-weight: 600; color: var(--lilas-texto) !important; }
.migalhas a { color: var(--texto-2); text-decoration: none; }
.migalhas a:hover { color: #FFFFFF; text-decoration: underline; }
.migalhas span[aria-hidden] { color: var(--color-muted-foreground); }

.artigo-pagina { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 8px 40px 0; }
.artigo-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }

/* o texto do guia */
.prosa { max-width: 72ch; font-size: 1.0625rem; line-height: 1.7; color: var(--texto-2); }
.prosa > :first-child { margin-top: 0; }
.prosa h2 {
  scroll-margin-top: 24px; margin: 56px 0 16px; padding-top: 22px; border-top: 1px solid rgba(167, 139, 250, .16);
  font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font-display); color: #FFFFFF;
}
.prosa h2:first-child { border-top: 0; padding-top: 0; }
.prosa h3 { margin: 32px 0 10px; font: 400 1.25rem/1.2 var(--font-display); color: #FFFFFF; }
.prosa p { margin: 0 0 16px; }
.prosa b, .prosa strong { color: #FFFFFF; font-weight: 700; }
.prosa a { color: var(--lilas-claro); text-decoration: underline; text-decoration-color: rgba(196, 181, 253, .45); text-underline-offset: .2em; }
.prosa a:hover { color: #FFFFFF; text-decoration-color: var(--accent-luz); }
.prosa ul, .prosa ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.prosa li { position: relative; margin: 0 0 10px; padding-left: 28px; }
.prosa ul > li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--color-accent); box-shadow: 0 0 10px rgba(244, 63, 94, .5); }
.prosa ol { counter-reset: passo; }
.prosa ol > li { counter-increment: passo; padding-left: 40px; }
.prosa ol > li::before {
  content: counter(passo); position: absolute; left: 0; top: .05em; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 400 .875rem/1 var(--font-display); color: #FFFFFF; background: linear-gradient(180deg, #8B5CF6, var(--color-primary));
}
.prosa code {
  padding: 2px 7px; border-radius: 7px; background: var(--poco); border: 1px solid rgba(167, 139, 250, .22);
  font: 600 .9375rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--lilas-texto); white-space: nowrap;
}
/* receitas: cartão com o ícone do item e os ingredientes em fichas */
.prosa .receita {
  display: flex; align-items: center; gap: 16px; margin: 14px 0 18px; padding: 14px 18px;
  border-radius: 16px; border: 1px solid transparent;
  background: linear-gradient(165deg, #241F4A 0%, #1B1836 60%, #15132A 100%) padding-box, var(--borda-grad) border-box;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
}
.prosa li .receita { margin-top: 10px; }
.prosa .receita > img { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5)); }
.prosa .receita > div { min-width: 0; }
.prosa .receita-nome { margin: 0 0 6px; font: 400 1.0625rem/1.2 var(--font-display); color: #FFFFFF; }
.prosa .receita ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.prosa .receita li {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px 4px 4px;
  border-radius: 999px; background: rgba(12, 11, 29, .7); border: 1px solid rgba(167, 139, 250, .2);
  font-size: .875rem; line-height: 1.2; color: var(--texto-2);
}
.prosa .receita li::before { display: none; }
.prosa .receita li img { width: 26px; height: 26px; border-radius: 50%; background: rgba(124, 58, 237, .18); }
.prosa .receita li b { font-variant-numeric: tabular-nums; }
.prosa .receita-extra { margin: 6px 0 0; font-size: .8125rem; font-weight: 600; color: var(--color-muted-foreground); }
/* tabelas de comandos */
.prosa table { width: 100%; margin: 8px 0 22px; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(167, 139, 250, .18); font-size: .9375rem; }
.prosa thead th { padding: 12px 16px; text-align: left; font-size: .8125rem; font-weight: 700; color: var(--color-muted-foreground); background: #1B1836; }
.prosa tbody th, .prosa tbody td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid rgba(167, 139, 250, .12); background: rgba(23, 21, 44, .7); }
.prosa tbody th { font-weight: 400; width: 44%; }

/* coluna do lado: índice fixo, jogar, calculadora */
.artigo-lado { position: sticky; top: 20px; display: grid; gap: 14px; }
.lado-caixa { padding: 18px 20px; border-radius: 18px; background: #17152C; border: 1px solid rgba(167, 139, 250, .16); }
.lado-caixa p { margin: 0 0 12px; font-size: .9375rem; color: var(--texto-2); }
.lado-caixa time { color: #FFFFFF; font-weight: 700; }
.lado-t { margin: 0 0 10px !important; font: 400 1.125rem/1.2 var(--font-display) !important; color: #FFFFFF !important; }
.indice ol { margin: 0; padding: 0; list-style: none; counter-reset: ind; }
.indice li { counter-increment: ind; }
.indice a {
  display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px;
  color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.35;
}
.indice a::before { content: counter(ind, decimal-leading-zero); font: 400 .8125rem/1 var(--font-display); color: var(--color-muted-foreground); }
.indice a:hover, .indice a.aqui { color: #FFFFFF; background: rgba(124, 58, 237, .16); }
.indice a.aqui::before { color: var(--accent-luz); }
.lado-jogar { background: linear-gradient(165deg, #2B2152 0%, #1D1A3C 100%) padding-box, var(--borda-grad-forte) border-box; border: 1px solid transparent; }
.lado-jogar .btn-ligar { width: 100%; }

/* guia anterior / seguinte */
.artigo-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.seguinte {
  position: relative; display: grid; gap: 4px; padding: 18px 22px; border-radius: 16px; text-decoration: none;
  background: #17152C; border: 1px solid rgba(167, 139, 250, .18); transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-chegar);
}
.seguinte small { font-size: .8125rem; font-weight: 700; color: var(--color-muted-foreground); }
.seguinte b { font: 400 1.25rem/1.2 var(--font-display); color: #FFFFFF; }
.seguinte .ic { position: absolute; right: 20px; top: 50%; margin-top: -8px; color: var(--lilas-texto); }
.seguinte--ant { padding-left: 52px; }
.seguinte--ant .ic { right: auto; left: 20px; transform: rotate(180deg); }
.seguinte--seg { text-align: right; padding-right: 52px; grid-column: 2; }
.seguinte:hover { border-color: var(--color-secondary); transform: translateY(-2px); }

.pagina404 { max-width: 900px; }
.pagina404 > p { margin-bottom: 18px; color: var(--texto-2); font-size: 1.125rem; }
.pagina404 .guias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .artigo-grelha { grid-template-columns: minmax(0, 1fr); }
  .artigo-lado { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indice { grid-row: span 2; }
}
@media (max-width: 760px) {
  .artigo-pagina { padding: 0 16px; }
  .banner--artigo { min-height: 340px; }
  .banner__lead { font-size: 1rem; }
  .prosa { font-size: 1rem; }
  .prosa .receita { padding: 12px; gap: 12px; }
  .prosa .receita > img { width: 48px; height: 48px; }
  .prosa code { white-space: normal; overflow-wrap: anywhere; }
  .prosa tbody th { width: auto; }
  .artigo-lado { grid-template-columns: minmax(0, 1fr); }
  .artigo-nav { grid-template-columns: minmax(0, 1fr); }
  .seguinte--seg { grid-column: auto; }
  .pagina404 .guias__lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Calculadora de raid (motor.js do site antigo, com o desenho novo) ---------- */
.calc .seccao { margin: 0 0 72px; scroll-margin-top: 24px; }
.calc .faixa { margin: 0; font: 400 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.1 var(--font-display); color: #FFFFFF; }
.calc .deck { max-width: 62ch; margin-top: 10px; color: var(--texto-2); font-size: 1.0625rem; }
.calc .ficha, .calc .info {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; margin-top: 26px;
  padding: 26px; border-radius: 22px; border: 1px solid transparent;
  background: var(--painel) padding-box, var(--borda-grad) border-box; box-shadow: var(--sombra-cartao);
}
.calc .grupos { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: var(--poco); border: 1px solid rgba(167, 139, 250, .16); }
.calc .grupos button {
  min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: none; color: var(--texto-2); font: 700 .9375rem/1 var(--font-body);
  transition: background-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.calc .grupos button:hover { color: #FFFFFF; background: rgba(124, 58, 237, .16); }
.calc .grupos button[aria-selected="true"] { color: #FFFFFF; background: rgba(124, 58, 237, .4); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .5), inset 0 -2px 0 var(--color-accent); }
.calc .alvos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.calc .alvo {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(167, 139, 250, .16); background: rgba(12, 11, 29, .55);
  color: var(--texto-2); font: 600 .9375rem/1.25 var(--font-body);
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease, transform var(--dur-rapida) ease;
}
.calc .alvo img { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.calc .alvo:hover { border-color: rgba(167, 139, 250, .45); color: #FFFFFF; transform: translateY(-1px); }
.calc .alvo[aria-pressed="true"] { color: #FFFFFF; border-color: var(--accent-luz); background: rgba(244, 63, 94, .14); box-shadow: 0 0 0 1px rgba(244, 63, 94, .35); }
.calc .qtd { display: inline-flex; align-items: center; margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(167, 139, 250, .3); background: var(--poco); }
.calc .qtd span { padding: 0 14px; font-weight: 600; color: var(--texto-2); }
.calc .qtd button { width: 48px; height: 48px; border: 0; border-left: 1px solid rgba(167, 139, 250, .2); background: rgba(124, 58, 237, .16); color: #FFFFFF; font: 700 1.375rem/1 var(--font-body); cursor: pointer; }
.calc .qtd button:hover { background: rgba(124, 58, 237, .4); }
.calc .qtd b { min-width: 56px; text-align: center; font: 400 1.75rem/48px var(--font-display); color: var(--accent-luz); border-left: 1px solid rgba(167, 139, 250, .2); }

.calc .resultado-cab { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(167, 139, 250, .14); }
.calc .resultado-cab img { width: 72px; height: 72px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
.calc .resultado-cab h3 { margin: 0; font: 400 1.625rem/1.1 var(--font-display); color: #FFFFFF; }
.calc .resultado-cab p { margin-top: 4px; color: var(--color-muted-foreground); font-weight: 600; }
.calc .opcoes { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.calc .opcao {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic txt enx" "ic txt tempo" "mat mat mat";
  column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: rgba(12, 11, 29, .55); border: 1px solid rgba(167, 139, 250, .14);
}
.calc .opcao.melhor { border-color: rgba(244, 63, 94, .55); background: linear-gradient(135deg, rgba(244, 63, 94, .14), rgba(124, 58, 237, .1)); }
.calc .opcao-icones { grid-area: ic; display: flex; gap: 6px; }
.calc .opcao-item { position: relative; display: block; }
.calc .opcao-item img { width: 40px; height: 40px; }
.calc .opcao-item b { position: absolute; right: -6px; bottom: -4px; min-width: 22px; padding: 2px 5px; border-radius: 999px; background: var(--color-accent); color: #FFFFFF; font: 400 .75rem/1.2 var(--font-display); text-align: center; }
.calc .opcao-txt { grid-area: txt; font-weight: 700; color: #FFFFFF; }
.calc .opcao-txt em { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: .75rem; font-weight: 700; color: #FFFFFF; background: var(--color-accent); vertical-align: 2px; }
.calc .opcao-enx { grid-area: enx; text-align: right; color: var(--texto-2); font-size: .875rem; }
.calc .opcao-enx b { font: 400 1.25rem/1 var(--font-display); color: var(--ouro); }
.calc .opcao-tempo { grid-area: tempo; text-align: right; font-size: .8125rem; color: var(--color-muted-foreground); }
.calc .opcao-mat { grid-area: mat; margin-top: 8px; }
.calc .opcao-mat summary, .calc .faq summary { cursor: pointer; list-style: none; }
.calc .opcao-mat summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 700; font-size: .875rem; color: var(--lilas-texto); }
.calc .opcao-mat summary::-webkit-details-marker, .calc .faq summary::-webkit-details-marker { display: none; }
.calc .opcao-mat summary::before { content: "+"; font: 400 1rem/1 var(--font-display); color: var(--accent-luz); }
.calc .opcao-mat[open] summary::before { content: "−"; }
.calc .opcao-mat ul, .calc .sim-mat ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.calc .opcao-mat li, .calc .sim-mat li, .calc .sim-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(12, 11, 29, .7); border: 1px solid rgba(167, 139, 250, .2); font-size: .8125rem; color: var(--texto-2);
}
.calc .opcao-mat li img, .calc .sim-mat li img, .calc .sim-item img { width: 26px; height: 26px; border-radius: 50%; background: rgba(124, 58, 237, .18); }
.calc .opcao-mat b, .calc .sim-mat b, .calc .sim-item b { color: #FFFFFF; }
.calc .opcoes-nota { margin-top: 10px; color: var(--color-muted-foreground); font-size: .875rem; }
.calc .partilhar { margin-top: 16px; }
.calc .fonte { margin-top: 12px; font-size: .8125rem; color: var(--color-muted-foreground); }
.calc .fonte a, .calc .deck a, .calc .faq a { color: var(--lilas-claro); }
.calc .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  background: rgba(124, 58, 237, .14); border: 1px solid rgba(167, 139, 250, .38); color: var(--branco); font: 700 .9375rem/1 var(--font-body);
}
.calc .btn:hover { background: rgba(124, 58, 237, .28); border-color: var(--color-secondary); }

/* simulador: os anéis */
.calc .anel-box { position: relative; max-width: 420px; margin: 0 auto; width: 100%; }
.calc .anel-box svg { display: block; width: 100%; height: auto; }
.calc .anel { stroke: rgba(167, 139, 250, .25); }
.calc .anel-forte { stroke: rgba(167, 139, 250, .55); }
.calc .anel-ultimo { stroke: var(--color-accent); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(244, 63, 94, .6)); }
.calc .anel-fundo { fill: #15132A; stroke: rgba(167, 139, 250, .35); rx: 8; }
.calc .anel-n { font: 400 20px var(--font-display); fill: var(--accent-luz); paint-order: stroke; stroke: #15132A; stroke-width: 6px; }
.calc .anel-tc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .45), rgba(124, 58, 237, 0) 70%); }
.calc .anel-legenda { margin-top: 10px; text-align: center; font-size: .875rem; color: var(--color-muted-foreground); }
.calc .sim-lista { margin: 0; padding: 0; list-style: none; }
.calc .camada {
  display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; grid-template-areas: "n ic nome x" "n ic com x";
  gap: 0 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(167, 139, 250, .14);
}
.calc .camada-n { grid-area: n; font: 400 1.625rem/1 var(--font-display); color: var(--accent-luz); }
.calc .camada img { grid-area: ic; width: 40px; height: 40px; }
.calc .camada-nome { grid-area: nome; font-weight: 700; color: #FFFFFF; }
.calc .camada-com { grid-area: com; font-size: .875rem; color: var(--texto-2); }
.calc .camada-tirar { grid-area: x; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(167, 139, 250, .3); background: none; color: var(--texto-2); font-size: 1.25rem; cursor: pointer; }
.calc .camada-tirar:hover { color: #FFFFFF; border-color: var(--accent-luz); }
.calc .camada-vazia { padding: 16px 0; color: var(--texto-2); }
.calc .sim-ctl { display: flex; gap: 8px; margin-top: 14px; }
.calc .sim-ctl select {
  flex: 1; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(167, 139, 250, .38);
  background: var(--poco); color: #FFFFFF; font: 600 .9375rem/1 var(--font-body);
}
.calc .sim-total { margin-top: 18px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(244, 63, 94, .14), rgba(124, 58, 237, .14)); border: 1px solid rgba(244, 63, 94, .4); }
.calc .sim-total > p { margin: 0; font-weight: 700; color: var(--texto-2); }
.calc .sim-total .grande { display: block; margin: 6px 0 12px; font: 400 3rem/1 var(--font-display); color: var(--ouro); }
.calc .sim-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.calc .sim-mat { margin-top: 12px; }
.calc .sim-mat > p { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--color-muted-foreground); }

/* tabela completa e perguntas */
.calc .tabela-scroll { overflow-x: auto; margin-top: 22px; border-radius: 18px; border: 1px solid rgba(167, 139, 250, .18); }
.calc .tabela-raid { width: 100%; border-collapse: collapse; min-width: 640px; background: rgba(23, 21, 44, .75); }
.calc .tabela-raid th, .calc .tabela-raid td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(167, 139, 250, .1); font-size: .9375rem; vertical-align: middle; color: var(--texto-2); }
.calc .tabela-raid thead th { position: sticky; top: 0; background: #1B1836; font-size: .8125rem; font-weight: 700; color: var(--color-muted-foreground); }
.calc .tabela-raid td.n { font: 400 1.125rem/1 var(--font-display); color: #FFFFFF; text-align: right; white-space: nowrap; }
.calc .tabela-raid .alvo-c { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #FFFFFF; text-decoration: none; }
.calc .tabela-raid .alvo-c:hover { color: var(--lilas-claro); }
.calc .tabela-raid img { width: 32px; height: 32px; }
.calc .tabela-raid tbody tr:hover td { background: rgba(124, 58, 237, .1); }
.calc .faq { margin-top: 22px; display: grid; gap: 10px; }
.calc .faq details { border-radius: 14px; background: #17152C; border: 1px solid rgba(167, 139, 250, .16); }
.calc .faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; font: 400 1.125rem/1.25 var(--font-display); color: #FFFFFF; }
.calc .faq summary::after { content: "+"; font: 400 1.5rem/1 var(--font-display); color: var(--accent-luz); transition: transform var(--dur-base) var(--ease-chegar); }
.calc .faq details[open] summary::after { transform: rotate(45deg); }
.calc .faq details p { padding: 0 18px 16px; color: var(--texto-2); }
@media (max-width: 900px) {
  .calc .ficha, .calc .info { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}
@media (max-width: 520px) {
  .calc .alvos { grid-template-columns: minmax(0, 1fr); }
  .calc .opcao { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic txt" "ic enx" "tempo tempo" "mat mat"; }
  .calc .opcao-enx, .calc .opcao-tempo { text-align: left; }
}

/* a «nota» de baixo do botão Jogar */
.jogar-nota { margin: 0; font-size: .8125rem; color: var(--color-muted-foreground); text-align: center; }
/* cabeçalho sempre legível por cima das imagens (Codex: no telemóvel as tabs cruzavam zonas claras) */
.topo::before {
  content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: 0; height: calc(100% + 30px); pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 26, .82) 0%, rgba(10, 10, 26, .45) 65%, rgba(10, 10, 26, 0) 100%);
}
.calc .opcao-mat summary { min-height: 40px; }

/* Início: um pequeno distanciamento entre as imagens (o dono, 5/11): menos sobreposição, uma faixa curta de noite entre cada uma */
.tab-inicio .com-fundo::before {
  top: -40px; bottom: -40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.tab-inicio .heroi-faixa::before {
  bottom: -40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
}
@media (max-width: 760px) {
  .tab-inicio .com-fundo::before {
    top: -30px; bottom: -30px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  }
  .tab-inicio .heroi-faixa::before {
    bottom: -30px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 110px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 110px), transparent 100%);
  }
}

/* Início: uma pausa real de noite entre cenários (Codex, 5/11 17:17): os fundos não invadem as secções vizinhas */
.tab-inicio .com-fundo::before { top: 0; bottom: 0; }
.tab-inicio .heroi-faixa::before { bottom: 0; }
.tab-inicio :is(#regras, #horario, #wipes, #topo3, #novos) { margin-top: 96px; }
.tab-inicio :is(#regras, #horario, #wipes, #topo3, #novos) { padding-top: 96px; padding-bottom: 72px; }
.tab-inicio .final { padding-top: 96px; }
@media (max-width: 760px) {
  .tab-inicio .com-fundo::before { top: 0; bottom: 0; }
  .tab-inicio .heroi-faixa::before { bottom: 0; }
  .tab-inicio :is(#regras, #horario, #wipes, #topo3, #novos) { margin-top: 64px; padding-top: 64px; padding-bottom: 48px; }
  .tab-inicio .final { padding-top: 64px; }
}
.tab-inicio .heroi-faixa { padding-bottom: 32px; }
.tab-inicio #regras { margin-top: 72px; }
@media (max-width: 760px) { .tab-inicio .heroi-faixa { padding-bottom: 24px; } .tab-inicio #regras { margin-top: 48px; } }
/* cabeçalhos das tabs ~20% mais baixos (o conteúdo chega mais cedo) e cartões de consulta com a mesma altura */
.banner { min-height: clamp(340px, 29vw, 480px); }
.banner--artigo { min-height: clamp(320px, 26vw, 430px); }
.banner__dentro { padding-bottom: 56px; }
.guias__lista { align-items: stretch; }
.guia, .guia a { height: 100%; }
@media (max-width: 760px) { .banner { min-height: 300px; } .banner--artigo { min-height: 290px; } }