/* =========================================================
   ItsBeefee — estilos
   Mudem as cores e tamanhos aqui em cima e o resto acompanha.
   ========================================================= */
:root {
  --roxo: #58215c;        /* texto, ícones */
  --rosa: #f3dbe3;        /* círculos dos ícones e botões */
  --rosa-hover: #e9c3d2;  /* botões ao passar o rato */
  --papel: #fff9f6;       /* fundo da janela */
  --lilas: #c49fb9;       /* faixa da barra de endereço */
  --magenta: #ab02b5;     /* texto do endereço */
  --letra: Verdana, sans-serif;
  --largura-janela: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* telemóvel: sem o retângulo azul ao tocar em botões, links e no jogo */
* { -webkit-tap-highlight-color: transparent; }
/* no telemóvel: tocar várias vezes seguidas (cartas, cauda, botões) não seleciona nada a azul */
button, a, .carta, .baralho, .cauda, .logo, .espreitar, .paginas, .zoom, .info-botao {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
img { -webkit-user-drag: none; }
.jogo-canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  font-family: var(--letra);
  color: var(--roxo);
  background: #2a1a33;
  min-height: 100vh;
}

/* fundo: quarto, linhas tracejadas e etiqueta "ITS BEEFEE" já vêm na imagem.
   A etiqueta está no canto inferior esquerdo da imagem, por isso o fundo fica
   "agarrado" a esse canto (left bottom): o corte faz-se sempre em cima/à direita
   e a etiqueta aparece inteira em qualquer ecrã.
   Usa-se uma camada fixa em vez de "background-attachment: fixed" porque
   o Safari do iPhone ignora esse modo e estica o fundo pela página toda. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("images/fundo-loop.jpg") left bottom / cover no-repeat;
}
/* o vídeo em loop por cima da imagem (mesmo enquadramento: canto inferior esquerdo) */
.fundo-video {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: left bottom;
  pointer-events: none;
}

/* ---------- secções (só uma visível de cada vez) ---------- */
.pagina {
  display: none;
  min-height: 100vh;
  padding: 24px;
  align-items: center;
  justify-content: center;
}
.pagina.ativa { display: flex; animation: aparecer .5s ease; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- a "janela" (imita uma página de browser) ----------
   Desenhada em CSS (antes era uma imagem esticada), por isso fica
   nítida e com as proporções certas em qualquer tamanho de ecrã.
   Para mudar o endereço, edita o texto em .endereco no index.html. */
.janela {
  --altura-barra: 88px;   /* barra roxa + faixa do endereço */
  position: relative;
  width: var(--largura-janela);
  max-width: 100%;
  border-radius: 22px;
  overflow: hidden;
  /* por baixo da barra roxa a janela também é roxa (senão os cantos
     redondos ficavam com uma linha clara); depois fundo creme + calha
     da "barra de scroll" à direita */
  background:
    linear-gradient(var(--roxo) 45px, var(--lilas) 45px var(--altura-barra), transparent var(--altura-barra)),
    linear-gradient(to left, var(--rosa) 16px, var(--papel) 16px);
  box-shadow: 0 18px 50px rgba(30, 10, 40, .45);
}
.janela-home     { min-height: 576px; padding-bottom: 40px; }
.janela-mediakit { min-height: 648px; }

.barra {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--altura-barra);
  /* 45px de roxo em cima, o resto é a faixa lilás */
  background: linear-gradient(var(--roxo) 45px, var(--lilas) 45px);
  display: flex; align-items: flex-end;
  padding: 0 0 9px 10px;
}
/* os três botões redondos da janela (fechar, minimizar, maximizar) */
.barra::before {
  content: "";
  position: absolute; top: 16px; right: 22px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--rosa);
  box-shadow: -21px 0 0 var(--rosa-hover), -42px 0 0 var(--lilas);
}
.endereco {
  width: max-content; min-width: 50%; max-width: calc(100% - 26px);
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--papel);
  color: var(--magenta);
  font-size: 16px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "pega" da barra de scroll (só decorativa) */
.janela::after {
  content: "";
  position: absolute; right: 3px; top: calc(var(--altura-barra) + 22px);
  width: 10px; height: 92px; border-radius: 5px;
  background: var(--rosa-hover);
}

/* ---------- HOME ---------- */
.logo {
  display: block;
  width: 426px; max-width: 89%;
  height: auto;
  margin: 0 auto;
  padding-top: 100px;
  box-sizing: content-box;
  /* entra com um "pop" e depois flutua devagarinho */
  animation: logo-pop .9s .15s cubic-bezier(.34, 1.56, .64, 1) both,
             logo-flutuar 4s 1.2s ease-in-out infinite;
}
@keyframes logo-pop { from { scale: 0; } to { scale: 1; } }
@keyframes logo-flutuar { 50% { translate: 0 -6px; } }

/* ---------- HOME: a Beefee a espreitar + a cauda ----------
   O "palco" junta a janela e as duas personagens. A janela fica por cima
   (z-index), por isso o que estiver atrás dela fica escondido. */
.palco {
  position: relative;
  width: var(--largura-janela);
  max-width: 100%;
}
.palco .janela { z-index: 1; }

.espreitar {
  /* estas variáveis mudam no telemóvel (ver fundo do ficheiro) */
  --esconder: translateX(14px);    /* para onde vai quando se esconde */
  --inclinar: -35deg;              /* inclinação quando está a espreitar */
  position: absolute; z-index: 0;
  /* A imagem acaba na cintura. Essa parte fica sempre escondida atrás da
     janela, e ela inclina-se para fora a partir daí, como quem espreita
     por trás de uma porta. */
  width: 300px; left: -38px; top: 40px;
  transform-origin: 12% 100%;
  animation: espreitar 10s .6s ease-in-out infinite both;
}
/* ciclo: esconde → espreita → balança um bocadinho → esconde-se outra vez */
@keyframes espreitar {
  0%        { transform: var(--esconder) rotate(0deg); }
  7%        { transform: rotate(calc(var(--inclinar) * 1.15)); }
  11%, 30%  { transform: rotate(var(--inclinar)); }
  45%       { transform: rotate(calc(var(--inclinar) * .85)); }
  60%, 80%  { transform: rotate(var(--inclinar)); }
  88%, 100% { transform: var(--esconder) rotate(0deg); }
}
/* passar o rato por cima: fica quietinha a espreitar */
.espreitar:hover { animation-play-state: paused; }

.cauda {
  position: absolute; z-index: 0;
  width: 150px; height: 240px;
  right: -128px; bottom: 190px;
  overflow: visible;
  transform-origin: 0% 84%;   /* a base da cauda, escondida atrás da janela */
}
.cauda use { fill: none; stroke-linecap: round; }
/* easter egg: só a cauda desenhada é clicável (não o quadrado à volta) */
.cauda { pointer-events: none; }
.cauda use { pointer-events: stroke; cursor: pointer; }
.cauda.tremer { animation: tremer .45s ease-in-out; }
@keyframes tremer {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(3.5deg); }
  60% { transform: rotate(-2.5deg); }
  80% { transform: rotate(1.5deg); }
}
.cauda-contorno { stroke: #4a2d4f; stroke-width: 30; }
.cauda-pelo     { stroke: var(--papel); stroke-width: 22; }
.cauda-ponta    { stroke: #f4c9d8; stroke-width: 22; stroke-dasharray: 0 80 100; }

/* ---------- HOME: monte de cartas (leva à galeria) ---------- */
.baralho {
  position: absolute; z-index: 2;
  right: -40px; bottom: -30px;
  width: 110px; height: 130px;
  text-decoration: none;
}
.baralho img {
  position: absolute; bottom: 0; left: 18px;
  width: 74px; aspect-ratio: 1186 / 1761;
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(30, 10, 40, .4);
  transform-origin: 50% 110%;
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.baralho img:nth-child(1) { transform: rotate(-14deg); }
.baralho img:nth-child(2) { transform: rotate(-2deg); }
.baralho img:nth-child(3) { transform: rotate(11deg); }
/* ao passar o rato as cartas abrem-se em leque */
.baralho:hover img:nth-child(1), .baralho:focus-visible img:nth-child(1) { transform: rotate(-26deg) translateY(-10px); }
.baralho:hover img:nth-child(2), .baralho:focus-visible img:nth-child(2) { transform: rotate(-4deg) translateY(-18px); }
.baralho:hover img:nth-child(3), .baralho:focus-visible img:nth-child(3) { transform: rotate(20deg) translateY(-10px); }
.baralho-etiqueta {
  position: absolute; top: -8px; left: -6px;
  padding: 3px 10px; border-radius: 12px;
  background: var(--roxo); color: var(--papel);
  font-size: 13px; font-weight: bold;
  rotate: -10deg;
  box-shadow: 0 3px 8px rgba(30, 10, 40, .35);
  animation: etiqueta-saltar 2.4s ease-in-out infinite;
}
@keyframes etiqueta-saltar { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -6px; } 90% { translate: 0 0; } }

.icones {
  list-style: none;
  display: flex; justify-content: center; gap: 24px;
  margin-top: 0;
}
.icones a {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--rosa);
  display: grid; place-items: center;
  transition: transform .25s, background-color .25s;
}
.icones a:hover { transform: scale(1.08); background: var(--rosa-hover); }
.icones svg { width: 36px; height: 36px; fill: var(--roxo); }

.botoes {
  list-style: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 24px;
}
.botoes a {
  display: flex; align-items: center; justify-content: center;
  width: 246px; height: 42px; border-radius: 24px;
  background: var(--rosa); color: var(--roxo);
  font-size: 15px; text-transform: uppercase; text-decoration: none;
  transition: color .25s, background-color .25s;
}
.botoes a:hover { background: var(--rosa-hover); }
.privacidade {
  position: absolute; left: 0; right: 16px; bottom: 12px; text-align: center;
  font-size: 11px; color: var(--roxo); opacity: .6; text-decoration: none;
}
.privacidade:hover { opacity: 1; text-decoration: underline; }

/* ---------- MEDIA KIT ---------- */
.janela-mediakit {
  display: grid;
  grid-template-columns: 164px 268px;
  padding: 152px 24px 20px;
  align-items: start;
}
.coluna-esquerda { display: flex; flex-direction: column; }
.avatar {
  width: 132px; height: 132px; margin: 0 auto;
  border: 4px solid var(--roxo); border-radius: 50%;
  box-shadow: 0 0 42px rgba(88, 33, 92, .68);
  object-fit: cover;
}
.factos { list-style: none; font-size: 14px; line-height: 1.75; margin-top: 72px; }
.factos li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.emote { width: 22px; height: 22px; flex: none; }
.parceiros { font-size: 15px; line-height: 1.75; margin-top: 48px; }
.parceiro { width: 164px; height: 50px; object-fit: cover; margin-top: 13px; }

.titulo { font-size: 21px; font-weight: 400; line-height: 1.125; }
.bio { font-size: 18px; line-height: 1.125; margin-top: 0; }
.personagem { display: block; width: 268px; height: 327px; object-fit: cover; margin-top: 36px; }

/* ---------- CREDITS ---------- */
.creditos { padding: 122px 40px 0; font-size: 15px; line-height: 1.75; }
.creditos .titulo { margin-bottom: 12px; }

/* botões das outras páginas (ficam na barra roxa, à esquerda) */
.paginas {
  position: absolute; z-index: 2; top: 9px; left: 12px; right: 92px;
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.paginas::-webkit-scrollbar { display: none; }
.paginas a {
  flex: none; display: flex; align-items: center;
  height: 27px; padding: 0 12px; border-radius: 14px;
  background: var(--rosa); color: var(--roxo);
  font-size: 12px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .25s;
}
.paginas a:first-child { background: var(--papel); }
.paginas a:hover { background: var(--rosa-hover); }

/* ---------- CARTAS COLECIONÁVEIS ---------- */
.janela-cartas {
  width: 920px;
  padding: 116px 34px 34px 28px;
}
.cartas-topo { text-align: center; }
.cartas-texto { font-size: 14px; margin-top: 6px; }
.revelar {
  margin-top: 12px; padding: 8px 20px; border: 0; border-radius: 20px;
  background: var(--rosa); color: var(--roxo);
  font: 13px var(--letra); text-transform: uppercase; cursor: pointer;
  transition: background-color .25s;
}
.revelar:hover { background: var(--rosa-hover); }
.cartas-topo [hidden] { display: none; }

/* "Find my collection" */
.colecao-form { margin: 18px auto 0; max-width: 420px; }
.colecao-form label { display: block; font-size: 13px; font-weight: bold; color: var(--roxo); margin-bottom: 6px; }
.colecao-linha { display: flex; gap: 6px; }
.colecao-linha input {
  flex: 1; min-width: 0; padding: 8px 14px; border: 2px solid var(--rosa); border-radius: 20px;
  font: 14px var(--letra); color: var(--roxo); background: #fff;
}
.colecao-linha input:focus { outline: none; border-color: var(--magenta); }
.colecao-linha button, .colecao-sair {
  padding: 8px 16px; border: 0; border-radius: 20px; background: var(--roxo); color: #fff;
  font: 13px var(--letra); cursor: pointer; white-space: nowrap;
}
.colecao-linha button:disabled { opacity: .6; cursor: wait; }
.colecao-resumo { margin: 16px auto 0; max-width: 460px; }
.colecao-titulo { font-size: 15px; }
.colecao-barra { height: 10px; margin: 10px 0 12px; border-radius: 10px; background: var(--rosa); overflow: hidden; }
.colecao-barra span { display: block; height: 100%; width: 0; border-radius: 10px;
  background: linear-gradient(90deg, #ff7ab8, var(--magenta)); transition: width 1s .3s cubic-bezier(.3, 1, .5, 1); }
.colecao-sair { background: var(--rosa); color: var(--roxo); }
.colecao-erro { font-size: 13px; color: #b0245a; margin-top: 8px; min-height: 1em; }
/* (i) no canto, com as probabilidades de cada raridade */
.cartas-topo { position: relative; }
.cartas-info { position: absolute; top: 0; right: 0; z-index: 3; }
.cartas-info-botao {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: var(--rosa); color: var(--roxo); font: bold italic 14px Georgia, serif; cursor: help;
}
.cartas-info-caixa {
  position: absolute; top: 34px; right: 0; width: 210px; padding: 12px 14px; border-radius: 14px;
  background: var(--papel); box-shadow: 0 10px 28px rgba(30, 10, 40, .25); text-align: left; font-size: 12px;
  opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity .2s, translate .2s, visibility .2s;
}
.cartas-info:hover .cartas-info-caixa, .cartas-info:focus-within .cartas-info-caixa, .cartas-info.aberto .cartas-info-caixa {
  opacity: 1; visibility: visible; translate: 0 0;
}
.cartas-info-caixa strong { display: block; margin-bottom: 6px; color: var(--roxo); }
.cartas-info-caixa ul { list-style: none; margin: 0; padding: 0; }
.cartas-info-caixa li { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; text-transform: capitalize; color: var(--roxo); }
.cartas-info-caixa li b { width: 62px; font-size: 10px; letter-spacing: .05em; }
.cartas-info-caixa li span { margin-left: auto; font-weight: bold; }
.cartas-info-caixa .legendary b { color: #c98a00; } .cartas-info-caixa .epic b { color: #9b3fd6; }
.cartas-info-caixa .rare b { color: #2f7fd8; } .cartas-info-caixa .mythic b { color: #d6337f; }
.cartas-info-caixa .common b { color: #8a7a86; }
/* com uma coleção aberta: as cartas em falta ficam apagadas (e a cinzento se forem viradas) */
.carta.falta .carta-interior { opacity: .45; filter: grayscale(.5); }
.carta.falta.virada .frente img { filter: grayscale(1); }
.carta.falta .frente::after { display: none; }
.carta.falta.virada .frente { box-shadow: 0 5px 14px rgba(30, 10, 40, .28); }
.carta-nome i { display: block; font-size: 10px; color: #8a7a86; }
.carta:has(.carta-copias) { position: relative; }
.carta-copias {
  position: absolute; right: -6px; top: -6px; z-index: 2;
  min-width: 26px; padding: 2px 6px; border-radius: 12px;
  background: var(--magenta); color: #fff; font-size: 12px; font-weight: bold; text-align: center;
  box-shadow: 0 2px 6px rgba(30, 10, 40, .3);
  opacity: 0; transition: opacity .3s .5s;
}
.carta.virada .carta-copias { opacity: 1; }

.mesa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px 16px;
  margin-top: 24px;
}
.carta {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  perspective: 900px;
  /* as cartas "caem" na mesa uma a uma */
  animation: distribuir .5s calc(var(--i) * 40ms) cubic-bezier(.3, 1.3, .5, 1) both;
}
@keyframes distribuir {
  from { opacity: 0; transform: translateY(-50px) rotate(-10deg) scale(.8); }
}
.carta-interior {
  position: relative; display: block;
  aspect-ratio: 1186 / 1761;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, 1.35, .5, 1), translate .25s;
}
.carta:hover .carta-interior { translate: 0 -5px; }
.carta.virada .carta-interior { transform: rotateY(180deg); }
.verso, .frente {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 9px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 14px rgba(30, 10, 40, .28);
}
.verso { object-fit: cover; }
.frente { transform: rotateY(180deg); }
.frente img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* nome e raridade, que só aparecem depois de virar */
.carta-nome {
  font-size: 12px; text-align: center; line-height: 1.3;
  opacity: 0; transition: opacity .4s .3s;
}
.carta.virada .carta-nome { opacity: 1; }
.carta-nome b {
  display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.legendary .carta-nome b { color: #c98a00; }
.epic      .carta-nome b { color: #9b3fd6; }
.rare      .carta-nome b { color: #2f7fd8; }
.mythic    .carta-nome b { color: #d6337f; }
.common    .carta-nome b { color: #8a7a86; }

/* as lendárias e épicas brilham */
.mythic.virada .frente    { box-shadow: 0 0 0 2px #ff7ab8, 0 0 26px rgba(255, 90, 170, .75), 0 0 44px rgba(170, 90, 230, .45); }
.legendary.virada .frente { box-shadow: 0 0 0 2px #f1c24a, 0 0 22px rgba(255, 196, 60, .75); }
.epic.virada .frente      { box-shadow: 0 0 0 2px #b77be6, 0 0 18px rgba(170, 90, 230, .6); }
.mythic .frente::after, .legendary .frente::after, .epic .frente::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%)
              -150% 0 / 250% 100% no-repeat;
  animation: brilho 3.2s ease-in-out infinite;
}
@keyframes brilho { 0%, 40% { background-position: 150% 0; } 100% { background-position: -150% 0; } }

/* carta em grande */
.zoom {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: 24px;
  background: rgba(30, 10, 40, .78);
  cursor: zoom-out;
}
.zoom[hidden] { display: none; }
.zoom img {
  max-width: 100%; max-height: 88vh; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: zoom-entrar .3s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes zoom-entrar { from { scale: .6; opacity: 0; } }

/* ---------- ABOUT ME (desenhada pelo sobre.js) ---------- */
.janela-sobre { width: 920px; padding: 112px 34px 34px 30px; }
/* a fotografia fica centrada na vertical em relação ao título + texto */
.sobre-topo {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px;
  padding: 26px 28px; border-radius: 20px;
  background: linear-gradient(120deg, #fbeef3, var(--rosa));
}
.sobre-avatar {
  width: 168px; height: 168px; border-radius: 50%; object-fit: cover;
  border: 5px solid var(--roxo); box-shadow: 0 0 40px rgba(88, 33, 92, .45);
}
.sobre-texto .titulo { font-size: 28px; }
.sobre-bio { font-size: 17px; line-height: 1.55; margin-top: 8px; max-width: 52ch; }
.sobre-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sobre-acoes .info-botao { margin-top: 0; }
.sobre-seccao { margin-top: 30px; }

.sobre-factos-zona { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: center; }
.sobre-factos-zona > .sobre-modelo {
  background: radial-gradient(ellipse 60% 42% at 50% 62%, var(--rosa), transparent 70%);
}
.sobre-modelo {
  display: block; width: 100%; max-height: 460px; object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(88, 33, 92, .3));
}
.sobre-factos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sobre-factos li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 16px; background: #fbeef3;
}
.sobre-factos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sobre-factos img { width: 60px; height: 60px; flex: none; }
.sobre-factos span { display: flex; flex-direction: column; font-size: 16px; font-weight: bold; line-height: 1.3; }
.sobre-factos small { font-size: 10px; font-weight: normal; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }

.sobre-apoio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.sobre-apoio-cartao {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: 16px; background: #fbeef3;
  color: var(--roxo); text-decoration: none; font-size: 13px; line-height: 1.5;
  transition: transform .25s, box-shadow .25s;
}
.sobre-apoio-cartao:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(88, 33, 92, .18); }
.sobre-apoio-cartao strong { font-size: 16px; }
.sobre-apoio-icone {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--roxo);
}
.sobre-apoio-icone svg { width: 24px; height: 24px; fill: var(--papel); }
.sobre-apoio-botao { margin-top: auto; padding-top: 6px; font-weight: bold; color: var(--magenta); }

.sobre-parceiros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.sobre-parceiros .sobre-convite { grid-column: 1 / -1; }
.sobre-parceiro {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center;
  padding: 20px; border-radius: 16px; background: #fbeef3; color: var(--roxo); text-decoration: none; font-size: 13px;
  transition: transform .25s;
}
.sobre-parceiro .sobre-apoio-botao { margin-top: 0; padding-top: 0; }
.sobre-codigo {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px;
  border: 2px dashed var(--roxo); border-radius: 12px; background: var(--papel); color: var(--roxo);
  font: bold 16px var(--letra); letter-spacing: .12em; cursor: pointer;
}
.sobre-codigo small {
  font-size: 10px; font-weight: normal; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 8px; background: var(--rosa);
}
.sobre-codigo:hover small { background: var(--rosa-hover); }
.sobre-parceiro img { width: 170px; height: 52px; object-fit: contain; }
.sobre-parceiro img.grande { width: 150px; height: 106px; }
.sobre-convite {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  padding: 20px 22px; border-radius: 16px; background: var(--roxo); color: var(--papel); font-size: 13px;
}
.sobre-convite strong { font-size: 17px; }
.sobre-convite .info-botao { background: var(--rosa); color: var(--roxo); }
.sobre-convite .info-botao.secundario { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 2px var(--rosa); }

/* ---------- INFO & CREDITS (desenhada pelo info.js) ---------- */
.janela-info { width: 920px; padding: 112px 34px 34px 30px; }
.info-intro {
  max-width: 620px; margin: 6px auto 0; text-align: center;
  font-size: 17px; line-height: 1.6; text-wrap: balance;
}
.info-texto { font-size: 13px; margin-top: 10px; }
.info-seccao { margin-top: 30px; }
.info-titulo { font-size: 18px; padding-bottom: 6px; border-bottom: 2px solid var(--rosa); }
.info-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.info-galeria.pequenas { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
/* modelo: corpo inteiro grande à esquerda, 3×3 close-ups à direita */
.info-modelo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 12px; }
.info-modelo-corpo { position: relative; min-height: 300px; }
.info-modelo-corpo .info-imagem { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; padding: 14px; }
.info-modelo-corpo .info-imagem img { object-fit: contain; }
.info-modelo-caras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.info-modelo-caras .info-imagem { padding: 0; }
.info-modelo-caras .info-imagem img { object-fit: cover; }

/* emotes por nível */
.info-niveis { display: flex; flex-direction: column; gap: 10px; }
.info-nivel { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: #fbeef3; }
.info-nivel-nome { font-weight: bold; font-size: 14px; padding-top: 6px; }
.info-nivel-nome span { display: block; font-weight: normal; font-size: 11px; opacity: .7; }
.info-nivel ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 8px; }
.info-nivel li { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-size: 11px; line-height: 1.25; }
.info-nivel .info-imagem { width: 64px; height: 64px; padding: 4px; background: var(--papel); }
.info-nivel li b { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--magenta); }
.info-galeria.larga { grid-template-columns: 1fr; }
.info-galeria.larga .info-imagem { aspect-ratio: 16 / 9; padding: 0; overflow: hidden; }
.info-galeria.larga .info-imagem img { width: 100%; height: 100%; object-fit: cover; }
.info-imagem {
  display: grid; place-items: center; aspect-ratio: 1;
  padding: 10px; border: 0; border-radius: 14px; background: #fbeef3;
  cursor: zoom-in; transition: transform .25s;
}
.info-imagem:hover { transform: translateY(-3px); }
.info-imagem { overflow: hidden; }
.info-imagem img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.info-creditos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.info-cartao { padding: 14px 16px; border-radius: 14px; background: #fbeef3; }
.info-cartao h3 { font-size: 14px; margin-bottom: 8px; }
.info-cartao dl > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-top: 1px solid var(--rosa-hover); font-size: 13px;
}
.info-cartao dl > div:first-child { border-top: 0; }
.info-cartao dl > div.so-nome dd { text-align: left; font-weight: normal; }
.info-cartao dt { opacity: .8; }
.info-cartao dd { text-align: right; font-weight: bold; }
.info-cartao a { color: var(--magenta); }
.info-embreve { font-weight: normal; font-style: italic; opacity: .55; }
.info-autocolantes {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px;
}
.info-autocolantes li {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 14px 10px; border-radius: 14px; background: #fbeef3;
}
.info-autocolantes img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 4px; transition: transform .25s; }
.info-autocolantes li:hover img { transform: rotate(-6deg) scale(1.06); }
.info-autocolante-subs { font-size: 12px; }
.info-autocolante-subs b { font-size: 18px; }
.info-autocolante-nome { font-size: 12px; font-weight: bold; }
.info-botao.secundario { background: transparent; color: var(--roxo); box-shadow: inset 0 0 0 2px var(--roxo); }
.info-botao.secundario:hover { background: var(--roxo); color: var(--papel); }
.info-drive p { font-size: 13px; margin-top: 10px; }
.info-botao {
  display: inline-block; margin-top: 12px; padding: 10px 22px; border-radius: 20px;
  background: var(--roxo); color: var(--papel);
  font-size: 13px; text-transform: uppercase; text-decoration: none;
  transition: background-color .25s;
}
.info-botao:hover { background: var(--magenta); }
.info-botao.desligado { background: var(--rosa); color: var(--roxo); opacity: .8; cursor: default; }
.info-aviso { padding: 10px 14px; border-radius: 10px; background: #fff1c9; color: #5f4200; line-height: 1.55; }

.cartas-como { margin-top: 34px; padding: 20px; border-radius: 16px; background: #fbeef3; text-align: center; }
.cartas-como p { font-size: 14px; line-height: 1.6; margin-top: 10px; }
.cartas-como a:not(.info-botao) { color: var(--magenta); font-weight: bold; }
.cartas-como .info-titulo { border: 0; padding: 0; }

/* janela secreta */
.segredo {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 16px;
  background: rgba(30, 10, 40, .72);
  animation: aparecer .3s ease;
}
.janela-segredo {
  width: min(440px, calc(100vw - 32px)); padding: 98px 22px 18px 18px;
  animation: segredo-entrar .5s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes segredo-entrar { from { scale: .4; rotate: -8deg; } }
.segredo-fechar {
  position: absolute; z-index: 2; top: 9px; left: 12px;
  width: 27px; height: 27px; border: 0; border-radius: 50%;
  background: var(--rosa); color: var(--roxo); font-size: 13px; cursor: pointer;
}
.segredo-fechar:hover { background: var(--rosa-hover); }
.segredo-conteudo { text-align: center; }
.segredo { overflow-y: auto; }

/* ---------- FLAPPY BEEFEE ---------- */
.jogo-sub { font-size: 12px; margin: 6px 0 14px; }
.jogo-top3 {
  list-style: none; display: grid; gap: 4px; margin: 10px auto; max-width: 300px; font-size: 12px;
}
.jogo-top3 li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 10px; background: #fbeef3; text-align: left;
}
.jogo-top3 li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogo-top3 li > span:last-child { font-weight: bold; font-variant-numeric: tabular-nums; }
.jogo-top3 .jogo-vazio { display: block; text-align: center; opacity: .75; }
.jogo-top3 li { grid-template-columns: 22px 22px 1fr auto; }
.jogo-top3 li > img { width: 22px; height: 22px; object-fit: contain; }

/* escolher personagem + álbum */
.jogo-barra { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.jogo-personagens { display: flex; gap: 6px; }
.jogo-personagem {
  position: relative; width: 44px; height: 44px; padding: 3px; border: 2px solid transparent; border-radius: 50%;
  background: #fbeef3; cursor: pointer; transition: transform .2s;
}
.jogo-personagem:hover { transform: scale(1.08); }
.jogo-personagem img { width: 100%; height: 100%; object-fit: contain; }
.jogo-personagem.escolhida { border-color: #f5d76e; background: var(--papel); box-shadow: 0 0 10px rgba(245, 215, 110, .7); }
.jogo-personagem.bloqueada img { filter: brightness(0); opacity: .45; }
.jogo-personagem span { position: absolute; right: -4px; bottom: -4px; font-size: 13px; }
.jogo-album-botao {
  padding: 7px 12px; border: 0; border-radius: 16px; background: var(--roxo); color: var(--papel);
  font: 12px var(--letra); cursor: pointer;
}
.jogo-album-botao span { font-weight: bold; }
.jogo-aviso { min-height: 1.3em; font-size: 11px; margin: 0; color: var(--papel); text-shadow: 0 1px 3px rgba(20, 5, 25, .9); }

/* o ecrã inicial fica por cima do jogo; só os painéis recebem cliques
   (um clique no resto do ecrã começa o jogo) */
.jogo-inicio {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 12px 0; pointer-events: none;
}
.jogo-inicio > * { pointer-events: auto; }
.jogo-inicio .jogo-top3 { width: 100%; margin: 0; }
.jogo-inicio .jogo-top3 li {
  background: rgba(40, 12, 44, .72); color: var(--papel);
  box-shadow: inset 0 0 0 1px rgba(243, 219, 227, .25);
  backdrop-filter: blur(3px);
}
.jogo-inicio .jogo-top3 .jogo-ok { color: #cbb6ff; }
.jogo-inicio .jogo-aviso { pointer-events: none; }
.jogo-album {
  position: absolute; inset: 0; z-index: 3; overflow-y: auto; border-radius: 14px;
  padding: 12px; background: rgba(255, 249, 246, .97); text-align: left;
}
.jogo-album-topo { display: flex; justify-content: space-between; align-items: center; }
.jogo-album-fechar { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--rosa); color: var(--roxo); cursor: pointer; }
.jogo-album > p { font-size: 11px; margin: 4px 0 10px; }
.jogo-album-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px 6px; }
.jogo-album-lista li { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 10px; line-height: 1.2; }
.jogo-album-lista img { width: 100%; aspect-ratio: 1186 / 1761; object-fit: cover; border-radius: 6px; box-shadow: 0 3px 8px rgba(30, 10, 40, .25); }
.jogo-album-lista .falta img { filter: brightness(.25) saturate(0); }
.jogo-album-lista small { text-transform: uppercase; letter-spacing: .04em; font-size: 8px; opacity: .8; }
.jogo-album-lista .rare small { color: #2f7fd8; opacity: 1; }
.jogo-album-lista .epic small { color: #9b3fd6; opacity: 1; }
.jogo-album-lista .legendary small { color: #c98a00; opacity: 1; }
.jogo-desbloqueio { font-size: 12px; font-weight: bold; color: var(--magenta); }
.jogo-ok { color: #6a3fd6; font-weight: bold; }

.jogo-palco { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.jogo-canvas {
  display: block; aspect-ratio: 2 / 3;
  height: min(560px, calc(100vh - 240px), calc((100vw - 72px) * 1.5));
  min-height: 300px; max-width: 100%;
  border-radius: 14px; touch-action: none; cursor: pointer; outline: none;
  box-shadow: inset 0 0 0 2px var(--roxo);
}
.jogo-dica { font-size: 11px; margin-top: 8px; opacity: .75; }
.jogo-dica kbd { font: inherit; padding: 0 5px; border-radius: 4px; background: var(--rosa); }

.jogo-fim {
  position: absolute; inset: 0; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px; background: rgba(255, 249, 246, .94); color: var(--roxo);
  animation: aparecer .3s ease;
}
.jogo-fim img { margin: 0; }
.jogo-fim-pontos { font-size: 22px; }
.jogo-fim-melhor { font-size: 12px; margin-bottom: 6px; }
.jogo-form { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 260px; }
.jogo-form label { font-size: 12px; font-weight: bold; }
.jogo-linha { display: flex; gap: 6px; width: 100%; }
.jogo-linha input {
  flex: 1; min-width: 0; padding: 7px 10px; border: 2px solid var(--rosa-hover); border-radius: 10px;
  font: 14px var(--letra); color: var(--roxo); background: #fff;
}
.jogo-linha input:disabled { background: #fbeef3; }
.jogo-form button, .jogo-denovo {
  padding: 7px 14px; border: 0; border-radius: 16px; cursor: pointer;
  font: 12px var(--letra); text-transform: uppercase;
}
.jogo-linha button { background: var(--roxo); color: var(--papel); }
.jogo-linha button:disabled { opacity: .5; cursor: default; }
.jogo-twitch { background: #ece3fb; color: #4b2a8c; text-transform: none !important; }
.jogo-msg { min-height: 1.4em; font-size: 12px; line-height: 1.4; }
.jogo-denovo { margin-top: 4px; background: var(--rosa); color: var(--roxo); font-size: 13px; padding: 9px 22px; }
.jogo-denovo:hover, .jogo-twitch:hover { filter: brightness(.95); }

/* ---------- MEDIA KIT (estatísticas) ----------
   O conteúdo é desenhado pelo mediakit.js */
.janela-mk { width: 920px; padding: 112px 34px 34px 30px; }

.mk-topo { display: flex; align-items: center; gap: 20px; }
.mk-avatar {
  width: 96px; height: 96px; flex: none; border-radius: 50%;
  border: 4px solid var(--roxo); object-fit: cover;
  box-shadow: 0 0 30px rgba(88, 33, 92, .45);
}
.mk-identidade { flex: 1; min-width: 0; }
.mk-lema { font-size: 14px; margin-top: 4px; }
.mk-categorias { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mk-local { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 12px; }
.mk-local li { display: inline-flex; align-items: center; gap: 5px; }
.mk-local svg { width: 14px; height: 14px; fill: var(--roxo); flex: none; }

.mk-marcas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 8px; }
.mk-sobre-texto { font-size: 13px; line-height: 1.65; }
.mk-servicos ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mk-servicos li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 10px; background: #fbeef3; font-size: 13px;
}
.mk-servicos svg { width: 14px; height: 14px; fill: var(--magenta); flex: none; }
.mk-titulo-numeros { margin-top: 28px; }
.mk-categorias li {
  padding: 3px 10px; border-radius: 12px; background: var(--rosa);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.mk-total {
  text-align: center; padding: 12px 20px; border-radius: 16px;
  background: var(--roxo); color: var(--papel);
}
.mk-total-numero { display: block; font-size: 30px; font-weight: bold; line-height: 1.1; }
.mk-total-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

.mk-aviso {
  margin-top: 18px; padding: 8px 14px; border-radius: 10px;
  background: #fff1c9; color: #6b4a00; font-size: 12px; text-align: center;
}

/* separadores: um botão por rede, com o nº de seguidores */
.mk-separadores {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 22px;
}
.mk-separadores button {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 2px solid transparent; border-radius: 14px;
  background: var(--rosa); color: var(--roxo);
  font: 13px var(--letra); cursor: pointer; text-align: left;
  min-width: 0;
  transition: background-color .25s, border-color .25s;
}
.mk-separadores button:hover { background: var(--rosa-hover); }
.mk-separadores button[aria-selected="true"] { background: var(--papel); border-color: var(--roxo); }
.mk-separadores svg { width: 22px; height: 22px; flex: none; fill: var(--roxo); }
.mk-sep-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-sep-numero { font-weight: bold; }

.mk-painel { margin-top: 20px; }
.mk-painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-perfil {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--roxo); font-weight: bold; text-decoration: none;
}
.mk-perfil:hover { text-decoration: underline; }
.mk-perfil svg { width: 18px; height: 18px; fill: currentColor; }
.mk-atualizado { font-size: 12px; opacity: .7; }
.mk-exemplo {
  margin-top: 10px; padding: 6px 12px; border-radius: 8px;
  background: #fff1c9; color: #6b4a00; font-size: 12px;
}
.mk-subtitulo {
  margin: 22px 0 10px; font-size: 13px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .06em;
}

/* cartões com um número cada */
.mk-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mk-cartao {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 14px;
  background: #fbeef3;
}
.mk-cartao-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.mk-cartao-valor { font-size: 24px; font-weight: bold; font-variant-numeric: tabular-nums; }
.mk-cartao-nota { font-size: 11px; opacity: .7; }
.mk-variacao { font-size: 11px; font-weight: bold; }
.mk-variacao span { font-weight: normal; opacity: .8; }
.mk-variacao.sobe  { color: #1f7a4d; }
.mk-variacao.desce { color: #b3261e; }

/* audiência: barras simples (percentagem de 0 a 100) */
.mk-audiencia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mk-barras { padding: 14px; border-radius: 14px; background: #fbeef3; }
.mk-barras h4 { font-size: 12px; margin-bottom: 8px; }
.mk-barras ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.mk-barras li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 46px;
  align-items: center; gap: 8px; font-size: 12px;
}
.mk-barra-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-barra-trilho { height: 8px; border-radius: 4px; background: var(--rosa-hover); overflow: hidden; }
.mk-barra {
  display: block; height: 100%; width: var(--v); border-radius: 4px;
  background: var(--roxo);
  animation: barra-crescer .8s cubic-bezier(.3, 1, .5, 1) both;
}
@keyframes barra-crescer { from { width: 0; } }
.mk-barra-valor { text-align: right; font-variant-numeric: tabular-nums; }
.mk-nota-vazia { font-size: 13px; opacity: .75; }

/* publicações recentes */
.mk-recentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mk-post { display: flex; flex-direction: column; gap: 6px; color: var(--roxo); text-decoration: none; }
.mk-post-imagem {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, var(--rosa), var(--lilas));
  transition: transform .25s;
}
.mk-post:hover .mk-post-imagem { transform: translateY(-3px); }
.mk-post-imagem img { width: 100%; height: 100%; object-fit: cover; }
.mk-post-imagem > svg { width: 34px; height: 34px; fill: var(--papel); }
.mk-post-etiqueta {
  position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 8px;
  background: rgba(40, 12, 44, .75); color: var(--papel); font-size: 10px;
}
.mk-post-titulo {
  font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-post-metricas { display: flex; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.mk-post-metricas span { display: inline-flex; align-items: center; gap: 4px; }
.mk-post-metricas svg { width: 14px; height: 14px; fill: var(--roxo); opacity: .75; }

.mk-vazio { text-align: center; padding: 40px 0; }
.mk-vazio-icone { width: 44px; height: 44px; fill: var(--lilas); }
.mk-vazio p { margin-top: 10px; }

/* caixa de contacto */
.mk-contacto {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding: 18px 20px; border-radius: 16px;
  background: var(--roxo); color: var(--papel);
}
.mk-contacto[hidden] { display: none; }
.mk-contacto h3 { font-size: 16px; }
.mk-contacto-aviso {
  display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 10px;
  background: var(--papel); color: var(--roxo);
  font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .08em;
}
.mk-contacto-email { font-weight: bold; user-select: all; }
.mk-contacto-botoes { display: flex; flex-direction: column; gap: 8px; flex: none; }
.mk-contacto-botao.secundario {
  border: 2px solid var(--rosa); background: transparent; color: var(--papel);
  font: 13px var(--letra); text-transform: uppercase; cursor: pointer;
}
.mk-contacto p { font-size: 13px; margin-top: 4px; opacity: .9; }
.mk-contacto-botao {
  flex: none; padding: 10px 20px; border-radius: 20px; text-align: center;
  background: var(--rosa); color: var(--roxo);
  font-size: 13px; text-transform: uppercase; text-decoration: none;
}
.mk-contacto-botao:hover { background: var(--rosa-hover); }

/* ---------- ecrãs sem espaço dos lados (tablet / telemóvel) ----------
   A Beefee passa a espreitar por cima da janela e a cauda sai do topo. */
@media (max-width: 900px) {
  .mk-audiencia { grid-template-columns: 1fr; }
  #home { padding-top: 150px; }
  .espreitar {
    --esconder: translateY(120px);
    --inclinar: 8deg;
    width: 160px; left: auto; right: 26px; top: -122px;
    transform-origin: 50% 100%;
  }
  .cauda {
    width: 100px; height: 160px;
    right: auto; left: 44px; bottom: auto; top: -128px;
    rotate: -95deg;
    transform-origin: 50% 50%;   /* (no telemóvel a cauda roda à volta do centro) */
  }
}
/* telemóvel: janela encostada mais acima, para não tapar a etiqueta
   "ITS BEEFEE" do fundo; a Beefee e a cauda ficam um pouco mais pequenas */
@media (max-width: 520px) {
  #home { padding-top: 112px; align-items: flex-start; }
  #home { padding-bottom: 44px; }
  .espreitar { width: 140px; right: 22px; top: -104px; }
  .cauda { width: 86px; height: 138px; left: 40px; top: -104px; }
  .baralho { right: -8px; bottom: -34px; width: 90px; height: 108px; }
  .baralho img { width: 58px; }
}

/* quem pediu ao sistema para reduzir animações não as vê */
@media (prefers-reduced-motion: reduce) {
  .logo, .espreitar, .pagina.ativa, .carta, .baralho-etiqueta, .mk-barra,
  .cauda.tremer, .segredo, .janela-segredo,
  .mythic .frente::after, .legendary .frente::after, .epic .frente::after { animation: none; }
  /* sem animação, a Beefee fica parada na pose de espreitar (senão ficava escondida) */
  .espreitar { transform: rotate(var(--inclinar)); }
}

/* ---------- telemóvel ---------- */
@media (max-width: 520px) {
  .pagina { padding: 16px; }
  .janela-home { min-height: 0; padding-bottom: 60px; }
  .logo { padding-top: 96px; }

  .janela-mediakit {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 110px 20px 50px;
    text-align: center;
  }
  .coluna-direita { order: -1; }
  .factos, .parceiros { margin-top: 20px; }
  .factos li { justify-content: center; }
  .parceiro { margin: 8px auto 0; }
  .personagem { width: 100%; height: auto; max-width: 268px; margin: 20px auto 0; }
  .janela-cartas { padding: 106px 22px 24px 14px; }
  .janela-mk, .janela-info, .janela-sobre { padding: 104px 24px 24px 16px; }
  .icones { gap: 8px; flex-wrap: nowrap; }
  .icones a { width: 50px; height: 50px; }
  .icones svg { width: 28px; height: 28px; }
  .sobre-topo { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 16px; gap: 14px; }
  .sobre-avatar { width: 130px; height: 130px; }
  .sobre-texto .titulo { font-size: 23px; }
  .sobre-bio { font-size: 15px; }
  .sobre-acoes { justify-content: center; }
  .sobre-factos-zona { grid-template-columns: 1fr; }
  .sobre-modelo { max-height: 320px; }
  .sobre-factos { grid-template-columns: 1fr; }
  .sobre-apoio, .sobre-parceiros { grid-template-columns: 1fr; }
  .info-intro { font-size: 15px; }
  .paginas { right: 12px; }
  .barra::before { display: none; }   /* sem as bolinhas, para caberem os botões */
  .mk-marcas { grid-template-columns: 1fr; }
  .mk-local { justify-content: center; }
  .info-galeria { grid-template-columns: 1fr 1fr; }
  .info-galeria.pequenas { grid-template-columns: repeat(4, 1fr); }
  .info-modelo { grid-template-columns: 1fr; }
  .info-modelo-corpo { min-height: 440px; }
  .info-nivel { grid-template-columns: 1fr; gap: 6px; }
  .info-nivel-nome { padding-top: 0; }
  .info-nivel-nome span { display: inline; }
  .info-nivel ul { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
  .info-nivel .info-imagem { width: 58px; height: 58px; }
  .janela-segredo { padding: 100px 20px 28px; }
  .jogo-personagem { width: 38px; height: 38px; }
  .jogo-album-botao { padding: 6px 10px; font-size: 11px; }
  .jogo-barra { gap: 8px; flex-wrap: nowrap; }
  .mk-topo { flex-wrap: wrap; justify-content: center; text-align: center; }
  .mk-categorias { justify-content: center; }
  .mk-total { width: 100%; }
  .mk-separadores { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mk-separadores button { padding: 8px 10px; gap: 6px; font-size: 12px; }
  .mk-separadores svg { width: 18px; height: 18px; }
  .mk-cartoes { grid-template-columns: 1fr 1fr; }
  .mk-cartao-valor { font-size: 20px; }
  .mk-recentes { grid-template-columns: 1fr 1fr; }
  .mk-contacto { flex-direction: column; text-align: center; }
  .mesa { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 10px; }
}