:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #fbf3fa;
  --surface: #fff;
  --surface2: #f6e6f3;
  --text: #2a1730;
  --muted: #7a6283;
  --accent: #d6469f;
  --accent-ink: #fff;
  --line: #ecd3e6;
  --glow: rgba(214, 70, 159, .25);
  --error: #c2264b;
  /* escala de elevação + vidro fosco (UI moderna) */
  --shadow-1: 0 1px 2px rgba(42,23,48,.05), 0 3px 10px rgba(42,23,48,.06);
  --shadow-2: 0 2px 6px rgba(42,23,48,.06), 0 14px 32px rgba(42,23,48,.09);
  --shadow-3: 0 10px 28px rgba(42,23,48,.12), 0 26px 60px rgba(42,23,48,.14);
  --glass: color-mix(in srgb, var(--surface) 70%, transparent);
  /* fundo ambiente (claro: ténue) */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath transform='translate(24 24)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23d6469f' fill-opacity='0.13'/%3E%3C/svg%3E");
  --bg-glow1: rgba(214, 70, 159, .10);
  --bg-glow2: rgba(123, 63, 168, .08);
  /* gradiente do banner do subathon (por omissão: rosa -> roxo da marca) */
  --sub-grad: linear-gradient(120deg, #e0479f 0%, #b94bbf 48%, #8f4fd6 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #150f1d;
    --surface: #211632;
    --surface2: #2c1d42;
    --text: #f6e9f6;
    --muted: #b49cc0;
    --accent: #f0a7d8;
    --accent-ink: #2a1236;
    --line: #3a2754;
    --glow: rgba(240, 167, 216, .3);
    --error: #ff8fa8;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 3px 12px rgba(0,0,0,.35);
    --shadow-2: 0 4px 12px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.45);
    --shadow-3: 0 12px 32px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.55);
    --glass: color-mix(in srgb, var(--surface) 62%, transparent);
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath transform='translate(24 24)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23f0a7d8' fill-opacity='0.08'/%3E%3C/svg%3E");
    --bg-glow1: rgba(240, 120, 175, .16);
    --bg-glow2: rgba(123, 63, 168, .20);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #150f1d;
  --surface: #211632;
  --surface2: #2c1d42;
  --text: #f6e9f6;
  --muted: #b49cc0;
  --accent: #f0a7d8;
  --accent-ink: #2a1236;
  --line: #3a2754;
  --glow: rgba(240, 167, 216, .3);
  --error: #ff8fa8;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 3px 12px rgba(0,0,0,.35);
  --shadow-2: 0 4px 12px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.55);
  --glass: color-mix(in srgb, var(--surface) 62%, transparent);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath transform='translate(24 24)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23f0a7d8' fill-opacity='0.08'/%3E%3C/svg%3E");
  --bg-glow1: rgba(240, 120, 175, .16);
  --bg-glow2: rgba(123, 63, 168, .20);
}

/* ---- Temas sazonais (evento): recolorem acentos + fundo do site ----
   Colocados DEPOIS dos blocos light/dark para vencerem em ambos os modos.
   Só mexem em acentos/brilhos/padrão — o fundo/texto continua a seguir o dark/light. */
:root[data-season="natal"] {
  --accent: #e23b4e; --accent-ink: #fff; --glow: rgba(226, 59, 78, .26);
  --bg-glow1: rgba(226, 59, 78, .12); --bg-glow2: rgba(46, 139, 87, .16);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke='%239ec5e8' stroke-width='1.4' stroke-linecap='round' opacity='0.5'%3E%3Cpath d='M32 20 L32 44 M22 26 L42 38 M42 26 L22 38'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-season="halloween"] {
  --accent: #ff7a18; --accent-ink: #20121a; --glow: rgba(255, 122, 24, .30);
  --bg-glow1: rgba(255, 122, 24, .12); --bg-glow2: rgba(123, 63, 168, .22);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath transform='translate(26 26)' d='M6 0 L7.5 4.5 L12 6 L7.5 7.5 L6 12 L4.5 7.5 L0 6 L4.5 4.5 Z' fill='%23ff7a18' fill-opacity='0.16'/%3E%3C/svg%3E");
}
:root[data-season="anonovo"] {
  --accent: #e6b422; --accent-ink: #20121a; --glow: rgba(230, 180, 34, .30);
  --bg-glow1: rgba(230, 180, 34, .12); --bg-glow2: rgba(123, 63, 168, .20);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath transform='translate(26 26)' d='M6 0 L7.5 4.5 L12 6 L7.5 7.5 L6 12 L4.5 7.5 L0 6 L4.5 4.5 Z' fill='%23e6b422' fill-opacity='0.18'/%3E%3C/svg%3E");
}
/* Durante uma season, o banner do subathon segue o acento sazonal
   (gradiente tonal escuro->acento) para condizer com o tema. */
:root[data-season="natal"],
:root[data-season="halloween"],
:root[data-season="anonovo"] {
  --sub-grad: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 78%, #000) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 80%, #fff) 100%);
}

/* Camada de decorações sazonais (neve, morcegos, confetti) */
.season-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.season-fx span { position: absolute; line-height: 1; will-change: transform;
  animation-duration: var(--dur, 8s); animation-delay: var(--delay, 0s); animation-iteration-count: infinite; }
.season-fx[data-kind="fall"] span { top: -8%; animation-name: seasonFall; animation-timing-function: linear; }
.season-fx[data-kind="float"] span { top: var(--top, 50%); animation-name: seasonFloat; animation-timing-function: ease-in-out; }
.season-fx[data-kind="rise"] span { bottom: -8%; animation-name: seasonRise; animation-timing-function: linear; }
@keyframes seasonFall { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--sway, 0px), 112vh) rotate(300deg); } }
@keyframes seasonFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--sway, 20px), -26px); } }
@keyframes seasonRise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--sway, 0px), -114vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }

/* Ano Novo: fogo de artifício (bursts com partículas via box-shadow) */
.season-fireworks { position: fixed; inset: 0; z-index: 59; pointer-events: none; overflow: hidden; }
.season-fireworks .fw { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  transform: scale(0); opacity: 0;
  animation: fwBurst var(--dur, 1.8s) ease-out var(--delay, 0s) infinite; }
@keyframes fwBurst {
  0%   { transform: scale(0); opacity: 0; }
  8%   { transform: scale(.2); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .season-fireworks { display: none; } }

/* Ano Novo: número do ano a entrar, inclinado nos cantos */
.season-year { position: fixed; z-index: 58; pointer-events: none; user-select: none;
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: .9; letter-spacing: .01em;
  color: #ffd861; background: none;
  text-shadow: 0 1px 0 #b8860b, 0 0 14px rgba(230,180,34,.55);
  opacity: .9; animation: yearGlow 3.2s ease-in-out infinite; }
.season-year--tl { top: 84px; left: 18px; transform: rotate(-12deg); }
.season-year--br { bottom: 26px; right: 20px; transform: rotate(10deg); }
@keyframes yearGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(230,180,34,.35)); }
  50%      { filter: drop-shadow(0 0 22px rgba(230,180,34,.7)); }
}
@media (prefers-reduced-motion: reduce) { .season-year { animation: none; } }
@media (max-width: 640px) { .season-year--br { display: none; } }

/* Halloween: teias de aranha realistas penduradas nos cantos do header */
:root[data-season="halloween"] header.app-bar::before,
:root[data-season="halloween"] header.app-bar::after {
  content: ""; position: absolute; top: 0; width: 120px; height: 120px; z-index: 5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d7cfe0' stroke-linecap='round'%3E%3Cpath stroke-width='1' d='M0 0 L102 7 M0 0 L92 43 M0 0 L72 72 M0 0 L43 92 M0 0 L7 102'/%3E%3Cpath stroke-width='0.7' opacity='0.8' d='M23.9 1.7 Q16.4 4.3 21.7 10.1 Q13.9 9.8 17 17 Q9.8 13.9 10.1 21.7 Q4.3 16.4 1.7 23.9 M45.9 3.2 Q31.5 8.1 41.7 19.4 Q26.7 18.7 32.5 32.5 Q18.7 26.7 19.4 41.7 Q8.1 31.5 3.2 45.9 M69.8 4.9 Q47.9 12.4 63.4 29.6 Q40.6 28.5 49.5 49.5 Q28.5 40.6 29.6 63.4 Q12.4 47.9 4.9 69.8 M91.8 6.4 Q63.1 16.3 83.4 38.9 Q53.4 37.4 65 65 Q37.4 53.4 38.9 83.4 Q16.3 63.1 6.4 91.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat top left / contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
:root[data-season="halloween"] header.app-bar::before { left: 0; }
:root[data-season="halloween"] header.app-bar::after { right: 0; transform: scaleX(-1); }
/* Aranha a descer pelo fio da teia da esquerda (desce no load + leve sobe-e-desce) */
.season-spider { position: fixed; top: -46px; left: 66px; z-index: 61; width: 26px; height: 26px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cg stroke='%234a4458' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 13 L4 8 M12 14 L3 13 M12 15 L4 19 M12 16 L8 22 M12 13 L20 8 M12 14 L21 13 M12 15 L20 19 M12 16 L16 22'/%3E%3C/g%3E%3Cellipse cx='12' cy='15' rx='3.4' ry='4.4' fill='%234a4458'/%3E%3Ccircle cx='12' cy='10.6' r='2.3' fill='%234a4458'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  animation: spiderDrop 2s cubic-bezier(.33,.85,.4,1) both, spiderBob 3.8s ease-in-out 2.1s infinite; }
/* fio por cima da aranha, sempre a chegar ao topo */
.season-spider::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 220px;
  background: linear-gradient(to bottom, transparent, rgba(215,207,224,.75)); }
@keyframes spiderDrop { from { top: -46px; } to { top: 148px; } }
@keyframes spiderBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .season-spider { display: none; } }
/* Botão de som sazonal (Halloween) */
.season-audio-btn { position: fixed; left: 16px; bottom: 16px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 1.15rem; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: border-color .15s ease, transform .15s ease; }
.season-audio-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.season-audio-btn.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow), 0 6px 18px rgba(0,0,0,.3); }
/* Botão da música do tema Streamer — à esquerda (nunca coexiste com o som sazonal) */
.streamer-audio-btn { left: 16px; right: auto; }

/* Interruptor de notificações no perfil */
.notif-toggle { align-items: center; gap: 10px; }
.notif-toggle span { font-weight: 600; }

/* Halloween: marcas de garra no fundo (todas as páginas) */
:root[data-season="halloween"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  filter: drop-shadow(0 0 7px rgba(190,25,25,.4));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='180' viewBox='0 0 160 180'%3E%3Cg fill='%238a0000'%3E%3Cpath d='M10 4 C34 50 62 106 90 156 L84 160 C56 110 28 54 6 8 Z'/%3E%3Cpath transform='translate(30 -6)' d='M10 4 C34 50 62 106 90 156 L84 160 C56 110 28 54 6 8 Z'/%3E%3Cpath transform='translate(58 4)' d='M10 4 C30 44 54 96 78 140 L72 144 C50 100 26 50 6 8 Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='180' viewBox='0 0 160 180'%3E%3Cg fill='%238a0000'%3E%3Cpath d='M10 4 C34 50 62 106 90 156 L84 160 C56 110 28 54 6 8 Z'/%3E%3Cpath transform='translate(30 -6)' d='M10 4 C34 50 62 106 90 156 L84 160 C56 110 28 54 6 8 Z'/%3E%3Cpath transform='translate(58 4)' d='M10 4 C30 44 54 96 78 140 L72 144 C50 100 26 50 6 8 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right -14px top 70px, left -24px bottom 80px;
  background-size: 165px auto, 140px auto;
  animation: clawReveal .7s ease-out both; }
@keyframes clawReveal {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  55% { opacity: .55; }
  100% { opacity: .5; clip-path: inset(0 0 0 0); }
}

/* Flicker: a página pisca como luz a falhar (todas as páginas) */
:root[data-season="halloween"]::after {
  content: ""; position: fixed; inset: 0; z-index: 75; pointer-events: none;
  background: #000; opacity: 0; animation: hFlicker 11s linear infinite; }
@keyframes hFlicker {
  0%, 7%, 100% { opacity: 0; }
  7.4% { opacity: .5; } 7.8% { opacity: .08; } 8.2% { opacity: .42; } 8.6% { opacity: 0; }
  46% { opacity: 0; } 46.3% { opacity: .5; } 46.7% { opacity: .12; } 47.1% { opacity: .4; } 47.5% { opacity: 0; }
  80% { opacity: 0; } 80.3% { opacity: .45; } 80.7% { opacity: 0; }
}

/* Olhos a espreitar de um canto escuro (todas as páginas) */
:root[data-season="halloween"]::before {
  content: ""; position: fixed; right: 20px; bottom: 128px; z-index: 70;
  width: 56px; height: 18px; pointer-events: none; transform-origin: 50% 50%;
  background:
    radial-gradient(11px 8px at 13px 9px, #ffe14d, #e59400 55%, transparent 72%),
    radial-gradient(11px 8px at 43px 9px, #ffe14d, #e59400 55%, transparent 72%);
  filter: drop-shadow(0 0 7px rgba(255,170,30,.55)); opacity: 0;
  animation: eyeAppear 16s ease-in-out infinite, eyeBlink 7s ease-in-out infinite; }
/* aparecem, ficam, desaparecem, somem por uns segundos e voltam */
@keyframes eyeAppear {
  0% { opacity: 0; }
  7% { opacity: 1; }
  55% { opacity: 1; }
  66% { opacity: 0; }
  100% { opacity: 0; }
}
/* piscar lento (fecham e abrem devagar) */
@keyframes eyeBlink {
  0%, 82%, 100% { transform: scaleY(1); }
  89% { transform: scaleY(.08); }
  96% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-season="halloween"]::after { animation: none; opacity: 0; }
  :root[data-season="halloween"]::before { animation: none; }
  :root[data-season="halloween"] body::after { animation: none; }
}

/* ============ NATAL ============ */
/* "XANDI" (Sobre) em vermelho festivo com neve pousada nas letras */
:root[data-season="natal"] .ax-letter,
:root[data-season="natal"] .ax-letter:nth-child(even) {
  position: relative;
  background: linear-gradient(180deg, #ff4d5e, #d61e3c 60%, #a8102a);
  -webkit-background-clip: text; background-clip: text; }
:root[data-season="natal"] .ax-letter::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: -0.12em; height: 0.4em; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='34' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 30 C6 30 6 16 14 16 C22 16 22 6 32 6 C42 6 42 18 52 16 C62 14 62 4 72 4 C82 4 82 16 90 16 C96 16 96 24 100 26 L100 34 L0 34 Z'/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }

/* o "I" (5ª letra) vira candy cane: riscas diagonais vermelho/branco */
:root[data-season="natal"] .ax-letter:nth-child(5) {
  background: repeating-linear-gradient(48deg, #e23b4e 0 0.14em, #fff 0.14em 0.28em);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

/* Fundo natalício: trenó com renas a voar + monte de neve (todas as páginas) */
:root[data-season="natal"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .92;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='84' viewBox='0 0 54 84'%3E%3Cpath d='M27 30 C14 30 8 52 12 70 C16 82 38 82 42 70 C46 52 40 30 27 30 Z' fill='%23f2f2f2'/%3E%3Cpath d='M27 4 C40 10 48 28 50 40 C40 44 14 44 4 40 C6 28 14 10 27 4 Z' fill='%23e23b4e'/%3E%3Cellipse cx='27' cy='41' rx='24' ry='5' fill='%23ffffff'/%3E%3Ccircle cx='27' cy='50' r='6' fill='%23e8b48c'/%3E%3Ccircle cx='27' cy='5' r='4' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='84' viewBox='0 0 54 84'%3E%3Cpath d='M27 30 C14 30 8 52 12 70 C16 82 38 82 42 70 C46 52 40 30 27 30 Z' fill='%23f2f2f2'/%3E%3Cpath d='M27 4 C40 10 48 28 50 40 C40 44 14 44 4 40 C6 28 14 10 27 4 Z' fill='%232f7d44'/%3E%3Cellipse cx='27' cy='41' rx='24' ry='5' fill='%23ffffff'/%3E%3Ccircle cx='27' cy='50' r='6' fill='%23e8b48c'/%3E%3Ccircle cx='27' cy='5' r='4' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='64' viewBox='0 0 110 64'%3E%3Cg transform='rotate(-12 55 34)'%3E%3Cpath d='M30 44 L30 18 Q30 12 38 12 L80 12 Q92 12 90 24 Q86 44 68 44 Z' fill='%23d61e3c'/%3E%3Cpath d='M30 44 Q10 44 12 28 Q14 20 24 20 Q20 32 30 34 Z' fill='%23d61e3c'/%3E%3Cpath d='M30 16 L80 14' stroke='%23ffd84d' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8 54 Q6 44 18 48 L84 48 Q98 48 100 38' fill='none' stroke='%23a06a20' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='26' y1='44' x2='24' y2='50' stroke='%23a06a20' stroke-width='3'/%3E%3Cline x1='72' y1='44' x2='80' y2='50' stroke='%23a06a20' stroke-width='3'/%3E%3Crect x='46' y='4' width='12' height='10' fill='%232f7d44'/%3E%3Crect x='60' y='6' width='10' height='8' fill='%23e6b422'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat-x;
  background-position: left 20px top 92px, left bottom;
  background-size: 300px auto, 300px 64px; }

/* Imagens: trenó com renas a voar (sem monte de neve ao fundo) */
:root[data-season="natal"] body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='110' viewBox='0 0 300 110'%3E%3Cg transform='rotate(-7 150 55)'%3E%3Cpath d='M168 54 Q144 52 120 56 Q92 56 62 56' fill='none' stroke='%236b4423' stroke-width='1.6'/%3E%3Cg stroke='%236b4423' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M34 66 L30 80 M41 67 L39 80 M50 67 L54 80 M56 66 L60 79'/%3E%3C/g%3E%3Cellipse cx='45' cy='60' rx='15' ry='8' fill='%238a5a2a'/%3E%3Cpath d='M33 56 Q26 54 24 46' stroke='%238a5a2a' stroke-width='5' fill='none'/%3E%3Ccircle cx='23' cy='44' r='5' fill='%238a5a2a'/%3E%3Cg stroke='%235a3a1a' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M23 39 L19 32 M23 39 L27 32 M21 35 L17 34 M25 35 L29 34'/%3E%3C/g%3E%3Ccircle cx='19' cy='45' r='2.2' fill='%23e23b4e'/%3E%3Cline x1='60' y1='58' x2='65' y2='56' stroke='%236b4423' stroke-width='2'/%3E%3Cg stroke='%236b4423' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M94 68 L90 82 M101 69 L99 82 M110 69 L114 82 M116 68 L120 81'/%3E%3C/g%3E%3Cellipse cx='105' cy='62' rx='15' ry='8' fill='%238a5a2a'/%3E%3Cpath d='M93 58 Q86 56 84 48' stroke='%238a5a2a' stroke-width='5' fill='none'/%3E%3Ccircle cx='83' cy='46' r='5' fill='%238a5a2a'/%3E%3Cg stroke='%235a3a1a' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M83 41 L79 34 M83 41 L87 34 M81 37 L77 36 M85 37 L89 36'/%3E%3C/g%3E%3Ccircle cx='79' cy='47' r='2' fill='%234a3010'/%3E%3Cline x1='120' y1='60' x2='125' y2='58' stroke='%236b4423' stroke-width='2'/%3E%3Cpath d='M164 68 Q162 58 174 62 L238 62 Q252 62 254 52' fill='none' stroke='%23a06a20' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M185 58 L185 36 Q185 30 193 30 L232 30 Q244 30 242 42 Q238 58 222 58 Z' fill='%23d61e3c'/%3E%3Cpath d='M185 58 Q166 58 168 42 Q170 34 180 34 Q176 46 185 48 Z' fill='%23d61e3c'/%3E%3Cpath d='M186 34 L232 32' stroke='%23ffd84d' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='210' cy='22' r='8' fill='%23c41e3a'/%3E%3Ccircle cx='210' cy='15' r='4' fill='%23f0c9a0'/%3E%3Ccircle cx='210' cy='11' r='3' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 20px top 92px;
  background-size: 300px auto; }

/* Luzinhas de Natal a cintilar no topo (todas as páginas) */
:root[data-season="natal"]::before {
  content: ""; position: fixed; left: 0; right: 0; top: 52px; height: 34px; z-index: 6; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 6 Q60 24 120 6' fill='none' stroke='%232a5a2a' stroke-width='2'/%3E%3Cg stroke='%232a5a2a' stroke-width='1.5'%3E%3Cline x1='24' y1='12' x2='24' y2='15'/%3E%3Cline x1='60' y1='15' x2='60' y2='18'/%3E%3Cline x1='96' y1='12' x2='96' y2='15'/%3E%3C/g%3E%3Ccircle cx='24' cy='20' r='5' fill='%23e23b4e'/%3E%3Ccircle cx='60' cy='23' r='5' fill='%23e6b422'/%3E%3Ccircle cx='96' cy='20' r='5' fill='%232f7d44'/%3E%3C/svg%3E") repeat-x left top / 120px 34px;
  filter: drop-shadow(0 0 6px rgba(255,210,120,.6));
  animation: xmasTwinkle 2.6s ease-in-out infinite; }
@keyframes xmasTwinkle {
  0%, 100% { opacity: .9; filter: drop-shadow(0 0 5px rgba(255,210,120,.45)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,210,120,.85)); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-season="natal"]::before { animation: none; }
}

/* Natal: um candy cane em cada ponta do header (espelhados) */
:root[data-season="natal"] header.app-bar::after,
:root[data-season="natal"] header.app-bar::before {
  content: ""; position: absolute; top: -8px; width: 42px; height: 98px; z-index: 6; pointer-events: none;
  transform-origin: top center;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='100' viewBox='0 0 46 100'%3E%3Cdefs%3E%3Cpattern id='cc' width='10' height='10' patternTransform='rotate(45)' patternUnits='userSpaceOnUse'%3E%3Crect width='10' height='10' fill='%23ffffff'/%3E%3Crect width='5' height='10' fill='%23e23b4e'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M23 96 L23 26 Q23 10 13 10 Q6 10 6 18' fill='none' stroke='url(%23cc)' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top center / contain; }
:root[data-season="natal"] header.app-bar::after  { right: 30px; transform: rotate(16deg); }
:root[data-season="natal"] header.app-bar::before { left: 30px; transform: scaleX(-1) rotate(16deg); }

/* Halloween: "XANDI" cor de abóbora, o "I" vela, sangue nalgumas letras */
:root[data-season="halloween"] .ax-letter,
:root[data-season="halloween"] .ax-letter:nth-child(even) {
  position: relative;
  background: linear-gradient(180deg, #ffb24d, #ff7a18 55%, #e25a00);
  -webkit-background-clip: text; background-clip: text; }

/* o "I" (5ª letra) estilo vela: corpo de cera + chama a tremular */
:root[data-season="halloween"] .ax-letter:nth-child(5) {
  background: linear-gradient(180deg, #fff6e0, #ffe3ad 55%, #f2c777);
  -webkit-background-clip: text; background-clip: text; }
:root[data-season="halloween"] .ax-letter:nth-child(5)::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 0.34em; height: 0.34em;
  margin-bottom: -0.03em; pointer-events: none; transform-origin: 50% 85%;
  background: linear-gradient(to top, #ff2d00, #ff8a00 55%, #ffd861);
  border-radius: 0 50% 50% 50%; transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 14px 4px rgba(255,140,0,.65);
  animation: candleFlicker 1.1s ease-in-out infinite; }
@keyframes candleFlicker {
  0%, 100% { transform: translateX(-50%) rotate(45deg) scale(1); box-shadow: 0 0 14px 4px rgba(255,140,0,.6); }
  50% { transform: translateX(-53%) rotate(45deg) scale(1.08, .92); box-shadow: 0 0 22px 7px rgba(255,165,25,.85); }
}

/* X e N sangram: laranja em cima -> vermelho-sangue no fundo (letra+sangue = um só) */
:root[data-season="halloween"] .ax-letter:nth-child(1),
:root[data-season="halloween"] .ax-letter:nth-child(3) {
  background: linear-gradient(180deg, #ffb24d 0%, #ff6a00 48%, #b11010 82%, #8a0000 100%);
  -webkit-background-clip: text; background-clip: text; }
/* pingos uniformes (gota com bolbo), a sair da zona vermelha da letra */
:root[data-season="halloween"] .ax-letter:nth-child(1)::after,
:root[data-season="halloween"] .ax-letter:nth-child(3)::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 0.66em; height: 0.66em; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Cg fill='%238a0000'%3E%3Cpath d='M18 0 C17 15 16 24 16 26 A4 4 0 1 0 24 26 C24 24 23 15 22 0 Z'/%3E%3Cpath d='M48 0 C47 22 46 36 46 40 A4 4 0 1 0 54 40 C54 36 53 22 52 0 Z'/%3E%3Cpath d='M78 0 C77 17 76 28 76 30 A4 4 0 1 0 84 30 C84 28 83 17 82 0 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat top center / contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
/* gota a destacar-se do pingo do meio */
:root[data-season="halloween"] .ax-letter:nth-child(1)::before,
:root[data-season="halloween"] .ax-letter:nth-child(3)::before {
  content: ""; position: absolute; left: 50%; top: 1.4em; width: 0.1em; height: 0.14em; z-index: 2; pointer-events: none;
  transform: translateX(-50%);
  background: #9a0000; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0;
  animation: bloodFall 6s ease-in infinite; animation-delay: calc(var(--i, 0) * 1s); }
@keyframes bloodFall {
  0% { transform: translateX(-50%) translateY(0) scale(.7); opacity: 0; }
  15% { opacity: 1; } 70% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0.8em) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-season="halloween"] .ax-letter:nth-child(1)::before,
  :root[data-season="halloween"] .ax-letter:nth-child(3)::before { animation: none; display: none; }
  :root[data-season="halloween"] .ax-letter:nth-child(5)::before { animation: none; }
}

*, *::before, *::after { box-sizing: inherit; }
/* Cursor com coração ao passar por cima de coisas clicáveis */
a, button, .btn, select, summary, label[for], [role="button"], .tab, .cf, .pc-copy, .icon-btn, .badge, .ax-letter {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26' viewBox='0 0 30 26'%3E%3Cpath d='M3 2 L3 22 L8.5 16.5 L12 23 L15 21.5 L11.5 15.5 L19 15.5 Z' fill='%23d6469f' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath transform='translate(18 0) scale(0.45)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23ff6fb0' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, pointer !important;
}
/* Exceção: elementos desativados mantêm o cursor "não permitido" */
button:disabled, .btn:disabled, select:disabled, [disabled] { cursor: not-allowed !important; }
[hidden] { display: none !important; }
/* Scrollbar custom + coelhinho indicador (barra vertical como referência) */
::-webkit-scrollbar { width: 0; height: 0; }
html { scrollbar-width: none; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Calha vertical fixa à direita — top/height definidos por JS (entre header e footer) */
.scroll-rail { position: fixed; right: 14px; width: 3px; z-index: 90;
  pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.scroll-rail.on { opacity: 1; }
/* Linha de fundo (percurso por percorrer) */
.scroll-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 3px; transform: translateX(-50%); border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Linha preenchida (percurso já percorrido) do topo até ao coelhinho */
.scroll-fill { position: absolute; left: 50%; top: 0; width: 3px; transform: translateX(-50%);
  border-radius: 3px; background: linear-gradient(var(--accent), var(--accent2, var(--accent)));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); height: 0; }
/* Coelhinho sobre a linha */
.scroll-bunny { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  font-size: 22px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 1rem/1.6 Nunito, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2 L3 22 L8.5 16.5 L12 23 L15 21.5 L11.5 15.5 L19 15.5 Z' fill='%23d6469f' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto; }

/* Cursores sazonais — Natal: candy cane · Halloween: vassoura de bruxa (ponta = cabo) */
:root[data-season="natal"] body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cpattern id='c' width='6' height='6' patternTransform='rotate(45)' patternUnits='userSpaceOnUse'%3E%3Crect width='6' height='6' fill='%23ffffff'/%3E%3Crect width='3' height='6' fill='%23e23b4e'/%3E%3C/pattern%3E%3C/defs%3E%3Cg transform='rotate(-28 6 5)'%3E%3Cpath d='M6 5 L6 17 Q6 23 12 23 Q17 23 17 18' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M6 5 L6 17 Q6 23 12 23 Q17 23 17 18' fill='none' stroke='url(%23c)' stroke-width='6.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 6 5, auto; }
:root[data-season="natal"] :is(a,button,.btn,select,summary,label[for],[role="button"],.tab,.cf,.pc-copy,.icon-btn,.badge,.ax-letter) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cpattern id='c' width='6' height='6' patternTransform='rotate(45)' patternUnits='userSpaceOnUse'%3E%3Crect width='6' height='6' fill='%23ffffff'/%3E%3Crect width='3' height='6' fill='%23e23b4e'/%3E%3C/pattern%3E%3C/defs%3E%3Cg transform='rotate(-28 6 5)'%3E%3Cpath d='M6 5 L6 17 Q6 23 12 23 Q17 23 17 18' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M6 5 L6 17 Q6 23 12 23 Q17 23 17 18' fill='none' stroke='url(%23c)' stroke-width='6.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 6 5, pointer !important; }

:root[data-season="halloween"] body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 4 L15 15' stroke='%238a5a2a' stroke-width='2.8' stroke-linecap='round'/%3E%3Cg stroke='%23e3a63c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 16 L13 26 M16 16 L17 27 M16 16 L21 25 M16 16 L23 22 M16 16 L25 18'/%3E%3C/g%3E%3Crect x='13' y='13' width='5' height='3.4' rx='1.2' fill='%235a3a1a' transform='rotate(45 15.5 15)'/%3E%3C/svg%3E") 4 4, auto; }
:root[data-season="halloween"] :is(a,button,.btn,select,summary,label[for],[role="button"],.tab,.cf,.pc-copy,.icon-btn,.badge,.ax-letter) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 4 L15 15' stroke='%238a5a2a' stroke-width='2.8' stroke-linecap='round'/%3E%3Cg stroke='%23e3a63c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 16 L13 26 M16 16 L17 27 M16 16 L21 25 M16 16 L23 22 M16 16 L25 18'/%3E%3C/g%3E%3Crect x='13' y='13' width='5' height='3.4' rx='1.2' fill='%235a3a1a' transform='rotate(45 15.5 15)'/%3E%3C/svg%3E") 4 4, pointer !important; }
/* Fundo ambiente global: glow rosa/roxo + grelha de pontos (fixo, atrás de tudo) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(900px 560px at 50% -8%, var(--bg-glow1), transparent 62%),
    radial-gradient(760px 520px at 88% 4%, var(--bg-glow2), transparent 58%),
    radial-gradient(640px 520px at 8% 85%, var(--bg-glow1), transparent 60%),
    var(--pattern);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 38px 38px;
  background-position: center top, right top, left bottom, center;
  filter: blur(0.6px);
}
/* Páginas "Work in progress": fundo ambiente mais desfocado e esbatido */
body.wip-page::before { filter: blur(7px); opacity: .8; transition: filter .4s ease; }
h1, h2, h3 { font-family: "Baloo 2", Nunito, system-ui, sans-serif; line-height: 1.15; margin: 0; }
a { color: var(--accent); }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); }
/* O cabeçalho da app (injetado pelo app.js) é FIXO — o sticky não é fiável dentro
   do body flex. O app.js compensa com padding-top no body (= altura do header). */
/* Barra translúcida (deixa ver o conteúdo por baixo), mas SEM backdrop-filter:
   num elemento position:fixed, o backdrop-filter aciona um bug de compositing
   do Chrome em que o conteúdo em scroll é pintado POR CIMA do header. Sem ele,
   o empilhamento (z-index) volta a funcionar e o conteúdo fica por baixo. */
header.app-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1); }
header .wrap { display: flex; align-items: center; height: 60px; }
.logo { font: 800 1.3rem "Baloo 2", sans-serif; color: var(--accent); text-decoration: none; margin-right: auto; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem;
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.icon-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); transform: translateY(-1px); }

/* Isola o conteúdo num stacking context próprio (abaixo do header fixo):
   garante que elementos posicionados lá dentro — ex.: .post (position:relative)
   — nunca sejam pintados POR CIMA da barra, seja qual for o browser. */
main { flex: 1; display: grid; align-items: center; padding-block: 28px;
  position: relative; z-index: 0; }

.auth { display: grid; grid-template-columns: 1.05fr 1fr; max-width: 940px; margin: 28px auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-3); }

.hero { position: relative; overflow: hidden; padding: 52px 40px; color: #fff; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(circle at 20% 20%, #7b3fa8 0, transparent 45%), radial-gradient(circle at 85% 30%, #e0509f 0, transparent 40%), radial-gradient(circle at 50% 100%, #ff8fb5 0, transparent 50%), #241238;
  background-size: 160% 160%; animation: authShift 16s ease-in-out infinite; }
@keyframes authShift { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
.hero::before { content: ""; position: absolute; width: 260px; height: 260px; right: -70px; top: -70px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,143,181,.45), transparent 70%); filter: blur(8px); }
.hero > * { position: relative; z-index: 1; }
.bunny { width: 84px; height: auto; margin-bottom: 14px; filter: drop-shadow(0 0 12px #ffb7e6); animation: bunnyBob 5s ease-in-out infinite; }
@keyframes bunnyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hero p { margin: 14px 0 22px; opacity: .92; max-width: 40ch; line-height: 1.55; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.perks li { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 9px 17px; font-weight: 700; width: fit-content; backdrop-filter: blur(4px); }

.panel { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.tabs { display: flex; gap: 6px; background: var(--surface2); padding: 5px; border-radius: 999px; margin-bottom: 24px; }
.tab { flex: 1; border: 0; background: transparent; color: var(--muted); border-radius: 999px; padding: 10px 16px; font: 700 .95rem Nunito, sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px var(--glow); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font: 700 1rem Nunito, sans-serif; text-decoration: none; border: 1.5px solid var(--accent); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn:active { transform: translateY(1px); }
.btn.main { color: var(--accent-ink); border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 80%, #7b3fa8));
  box-shadow: 0 4px 14px var(--glow); }
.btn.main:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--glow); }
.btn.main:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:active, .btn.main:hover { transform: none; } }
.btn.full { width: 100%; }
.btn.twitch { width: 100%; background: #9146ff; border-color: #9146ff; color: #fff; }
.btn.twitch:hover { box-shadow: 0 0 0 4px rgba(145, 70, 255, .3); }

.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
input[type="email"], input[type="password"], input[type="text"] { width: 100%; border: 1.5px solid transparent; background: var(--surface2); color: var(--text); border-radius: 14px; padding: 13px 16px; font: 400 1rem Nunito, sans-serif; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
input::placeholder { color: var(--muted); }
input:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface2)); }
input:focus { outline: none; background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
input.bad { border-color: var(--error); }
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 1rem; padding: 6px 8px; border-radius: 10px; opacity: .6; }
.eye[aria-pressed="true"] { opacity: 1; }
.hint { color: var(--muted); font-weight: 400; font-size: .82rem; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.check input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; }
.line { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .9rem; }
.line a { font-weight: 700; text-decoration: none; }
.line a:hover { text-decoration: underline; }
.msg { margin: 0; min-height: 1.5em; font-weight: 700; color: var(--accent); }
.msg.err { color: var(--error); }

nav { display: flex; gap: 18px; font-weight: 700; font-size: .95rem; margin-right: 16px; }
nav a { position: relative; text-decoration: none; color: var(--muted); transition: color .15s ease; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
nav a:hover { color: var(--accent); }
nav a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { nav a::after { transition: none; } }

/* ---- Navegação de secções dentro do header (substitui o menu hambúrguer) ---- */
.top-nav { display: flex; align-items: center; gap: 2px; margin: 0 10px 0 14px; flex: 0 1 auto; }
.top-nav a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 12px; border-radius: 11px; color: var(--muted);
  font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: background .15s ease, color .15s ease; }
.top-nav a::after { display: none !important; } /* sem o sublinhado genérico do nav */
.top-nav .top-pri .mi { width: 17px; height: 17px; flex-shrink: 0; }
.top-nav .top-pri:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.top-nav .top-pri[aria-current="page"] { color: var(--accent-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }
.top-nav .top-pri[aria-current="page"] .mi { color: var(--accent-ink); }

/* Dropdown "Mais" (inclui as restantes secções) */
.nav-more { position: relative; }
.nav-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 11px; color: var(--muted); font-weight: 700; font-size: .92rem;
  white-space: nowrap; transition: background .15s ease, color .15s ease; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::marker { content: ""; }
.nav-more > summary:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-more.is-active > summary { color: var(--accent-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }
.nm-chev { font-size: .8em; transition: transform .2s ease; }
.nav-more[open] .nm-chev { transform: rotate(180deg); }
.nav-more-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 130;
  display: grid; gap: 2px; min-width: 210px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); }
.nav-more-panel a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--text); font-weight: 700; font-size: .93rem; text-decoration: none;
  transition: background .13s ease; }
.nav-more-panel a .mi { width: 18px; height: 18px; flex-shrink: 0; }
.nav-more-panel a:hover { background: var(--surface2); }
.nav-more-panel a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
/* As "principais" estão escondidas no dropdown quando aparecem em linha… */
.nav-more-panel .nm-pri { display: none; }
/* …mas num header estreito, escondemos as de linha e mostramos tudo no dropdown. */
@media (max-width: 1000px) {
  .top-nav .top-pri { display: none; }
  .nav-more-panel .nm-pri { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .nm-chev { transition: none; } }
.icon-btn { margin-right: 10px; }
.btn.small { padding: 7px 16px; font-size: .9rem; }

/* ---- Barra de topo + menu hambúrguer (app.js) ---- */
.app-bar .bar-inner { gap: 10px; }
.spacer { flex: 1; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-weight: 800; font-size: .74rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted);
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.live-badge .live-dot { width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 2px solid currentColor; box-sizing: border-box; transition: all .25s ease; }

.live-badge.on { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #ff2d6f, #e0509f);
  box-shadow: 0 4px 14px rgba(255,45,111,.45); }
.live-badge.on .live-dot { background: #fff; border-color: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: livePulse 1.6s infinite; }

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width: 560px) { .live-badge .live-txt { display: none; } .live-badge { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .live-badge.on .live-dot { animation: none; } }
.hello { color: var(--muted); font-weight: 600; font-size: .92rem; margin-right: 4px; }
.hello b { color: var(--text); }
#menuBtn { font-size: 1.15rem; transition: transform .25s ease; }
.menu-open #menuBtn { transform: rotate(90deg); }

.menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 110;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.menu-open .menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

.menu-panel { position: absolute; top: calc(60px + env(safe-area-inset-top, 0px)); left: 16px; z-index: 120;
  display: grid; gap: 2px; width: min(280px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 8px;
  box-shadow: var(--shadow-3);
  transform-origin: top left; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px) scale(.96);
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.3,1), visibility .24s ease; }
.menu-open .menu-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.menu-panel a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  text-decoration: none; color: var(--text); font-weight: 700; font-size: .95rem;
  opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease, background .15s ease; }
.menu-open .menu-panel a { opacity: 1; transform: none; }
.menu-panel a:nth-child(1) { transition-delay: .02s; }
.menu-panel a:nth-child(2) { transition-delay: .04s; }
.menu-panel a:nth-child(3) { transition-delay: .06s; }
.menu-panel a:nth-child(4) { transition-delay: .08s; }
.menu-panel a:nth-child(5) { transition-delay: .10s; }
.menu-panel a:nth-child(6) { transition-delay: .12s; }
.menu-panel a:nth-child(7) { transition-delay: .14s; }
.menu-panel a:nth-child(8) { transition-delay: .16s; }
.menu-panel a:nth-child(9) { transition-delay: .18s; }
.menu-panel a:nth-child(10) { transition-delay: .20s; }
.menu-panel a:nth-child(11) { transition-delay: .22s; }
.menu-panel a .mi { width: 20px; height: 20px; flex-shrink: 0; }
.menu-panel a:hover { background: var(--surface2); }
.menu-panel a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  #menuBtn, .menu-backdrop, .menu-panel, .menu-panel a { transition: none; }
  .menu-open #menuBtn { transform: none; }
}

/* ---- Calendário da Agenda ---- */
.cal { padding: 20px; }
.cal-top { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.cal-top h2 { font-size: 1.3rem; min-width: 190px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-weight: 700; font-size: .8rem; color: var(--muted); padding: 4px 0; }
.cal-cell { position: relative; min-height: 70px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; }
.cal-cell .num { font-weight: 700; font-size: .9rem; }
.cal-cell.out { opacity: .35; }
.cal-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-cell.live .live-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; }
/* Live POR ACONTECER: realce suave + barra na cor do tema (detalhes em destaque) */
.cal-cell.live--upcoming { background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); border-left: 3px solid var(--accent); }
.cal-cell.live--upcoming .live-dot { background: var(--accent); }
.cal-cell.live--upcoming .live-ev b { color: var(--accent); }
/* Live JÁ PASSADA: discreta, tracejada, esbatida */
.cal-cell.live--past { background: var(--surface2, color-mix(in srgb, var(--text) 5%, var(--surface)));
  border-style: dashed; border-left: 3px solid var(--muted); }
.cal-cell.live--past .num { color: var(--muted); }
.cal-cell.live--past .live-dot { background: var(--muted); }
.cal-cell.live--past .live-ev { color: var(--muted); }
.cal-cell.live--past .live-ev b { color: var(--text); opacity: .7; }
/* Coelhinho da home como marca-d'água no canto das células com live */
.cal-cell.live { overflow: hidden; }
.cal-bunny { position: absolute; right: 4px; bottom: 2px; width: 30px; height: 40px; pointer-events: none; z-index: 0; }
.cal-cell.live--upcoming .cal-bunny { color: var(--accent); opacity: .30; }
.cal-cell.live--past .cal-bunny { color: var(--muted); opacity: .20; }
.cal-cell .num, .cal-cell .live-evs { position: relative; z-index: 1; }
/* Marcador de estado: ✦ a caminho (cor do tema) · ✓ já aconteceu (verde) */
.live-mark { position: absolute; top: 5px; right: 7px; z-index: 1; font-weight: 800; font-size: .82rem; line-height: 1; }
.live-mark.soon { color: var(--accent); }
.live-mark.past { color: #2ea06a; }
/* Detalhes (hora + título) dentro da célula, nos dois casos */
.cal-cell .live-evs { margin-top: auto; display: grid; gap: 3px; min-width: 0; }
.cal-cell .live-ev { font-size: .68rem; font-weight: 700; line-height: 1.25; min-width: 0; }
.cal-cell .live-ev b { display: block; }
.cal-cell .live-ev .evt-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.cal .msg { text-align: center; }

.next-lives { margin-top: 16px; }
.next-lives summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; user-select: none; }
.next-lives summary::-webkit-details-marker { display: none; }
.next-lives summary h3 { font-size: 1.1rem; }
.next-lives .count { background: var(--surface2); color: var(--muted); font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 2px 10px; }
.next-lives .chev { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.next-lives[open] .chev { transform: rotate(180deg); }
.next-lives ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .next-lives .chev { transition: none; } }
.next-lives li { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.next-lives li b { color: var(--accent); }
.next-lives .muted { color: var(--muted); border-style: dashed; }

@media (max-width: 480px) {
  .cal-cell { padding: 4px; border-radius: 9px; }
  .cal-cell .num { font-size: .8rem; }
  .cal-cell .live-ev { font-size: .6rem; }
  .cal-weekdays span { font-size: .68rem; }
}

/* ---- Sobre a Xandi: wordmark gigante "XANDI" ---- */
.about-hero { text-align: center; padding: 40px 0 28px; }
.ax-wordmark { display: inline-flex; gap: clamp(2px, 1.2vw, 14px); justify-content: center;
  font-family: "Baloo 2", sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(4rem, 22vw, 13rem); line-height: .9; margin: 0; }
.ax-letter { display: inline-block; cursor: pointer; transform-origin: 50% 80%;
  background: linear-gradient(160deg, var(--accent), #7b3fa8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
  animation: axFloat 4s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
/* cor alternada rosa/roxo por letra */
.ax-letter:nth-child(even) { background: linear-gradient(160deg, #9a5bd0, var(--accent)); -webkit-background-clip: text; background-clip: text; }
/* animação ao passar o rato: salta, roda e ganha brilho */
.ax-letter:hover { animation: none; transform: translateY(-16px) scale(1.18) rotate(-5deg);
  filter: drop-shadow(0 12px 18px var(--glow)); }
.ax-letter:nth-child(even):hover { transform: translateY(-16px) scale(1.18) rotate(5deg); }
.ax-sub { color: var(--muted); font-weight: 600; margin-top: 6px; font-size: 1.02rem; }
@keyframes axFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .ax-letter { animation: none; }
  .ax-letter:hover, .ax-letter:nth-child(even):hover { transform: scale(1.1); }
}

/* ---- Sobre a Xandi ---- */
.about-xandi { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.ax-photo { position: relative; display: grid; place-items: center; }
.ax-photo::before { content: ""; position: absolute; inset: 8% 10% 2%; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 68%); filter: blur(10px); z-index: 0; }
.ax-photo img { position: relative; z-index: 1; width: 100%; display: block;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28)); }
.ax-text { display: grid; gap: 14px; }
.ax-text p { margin: 0; color: var(--muted); line-height: 1.7; }
.ax-text b { color: var(--text); }
.ax-lead { font-size: 1.12rem; color: var(--text) !important; }
.ax-end { color: var(--accent) !important; font-weight: 700; }
@media (max-width: 720px) {
  .about-xandi { grid-template-columns: 1fr; gap: 22px; }
  .ax-photo { max-width: 300px; margin: 0 auto; }
}

/* ---- O setup da Xandi (ilustração interativa) ---- */
.setup-sec { margin-top: 48px; }
.setup-head h2 { font: 800 1.6rem "Baloo 2", sans-serif; margin: 0; }
.setup-sub { margin: 4px 0 18px; color: var(--muted); }
.setup-wrap { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
.setup-scene { position: relative; overflow: hidden; min-height: 320px;
  background: #f1eaf8;
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-1); touch-action: pan-y; }
.setup-scene canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.setup-scene canvas:active { cursor: grabbing; }
.setup-loading { position: absolute; inset: 0; display: grid; place-items: center;
  color: #6a4a86; font-weight: 700; font-family: "Baloo 2", sans-serif; }

/* bolha de info + rastro até à peça ativa (sobre o canvas) */
.setup-bubble { position: absolute; left: 0; top: 0; z-index: 3; max-width: 260px; pointer-events: none;
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 12px 32px rgba(0,0,0,.4); backdrop-filter: blur(5px); animation: sbPop .16s ease; }
.setup-bubble[hidden] { display: none; }
@keyframes sbPop { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
.sb-icon { font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }
.sb-body { display: grid; gap: 2px; min-width: 0; }
.sb-name { font: 800 1rem "Baloo 2", sans-serif; }
.sb-model { font-weight: 700; color: var(--accent); font-size: .85rem; }
.sb-desc { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.setup-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.setup-trail { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 5; opacity: .9; }
.setup-dot { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .setup-bubble { animation: none; } }

/* ---- Avatar no header ---- */
.hdr-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }

/* ---- Badges / distintivos ---- */
.badge { position: relative; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .72rem;
  line-height: 1; padding: 4px 10px 4px 7px; border-radius: 999px;
  color: var(--bc, var(--accent)); background: color-mix(in srgb, var(--bc, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc, var(--accent)) 40%, transparent); }
.badge:focus-visible { outline: 2px solid var(--bc, var(--accent)); outline-offset: 2px; }
/* Tooltip com a descrição do badge */
.badge-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 220px; z-index: 40; pointer-events: none;
  background: var(--text); color: var(--bg); font-weight: 600; font-size: .76rem; line-height: 1.3;
  text-align: center; padding: 8px 11px; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease; white-space: normal; }
.badge-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--text); }
.badge:hover .badge-tip, .badge:focus-visible .badge-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.badge .badge-i { font-size: .85rem; }
.badge .badge-img { width: 1.2em; height: 1.2em; display: block; image-rendering: auto; }
@media (max-width: 680px) { .hello { display: none; } }
.badges-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#badgesList { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ---- Parcerias ---- */
.page-head--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head--row .btn { flex-shrink: 0; }

/* Janela "Pedir parceria" */
.modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.5); }
.modal-box { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 26px 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-3);
  display: grid; gap: 14px; }
.modal-box h3 { font-size: 1.3rem; }
.modal-box .sub { margin: 0; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; font-size: .9rem; }
.pc-email { font-family: Nunito, sans-serif; font-size: 1rem; }
.partners-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.partner-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.partner-banner { height: 170px; background: var(--surface2); overflow: hidden; }
.partner-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Logótipos: inteiros e centrados sobre fundo escuro */
.partner-banner--contain { background: #0b1020; display: grid; place-items: center; }
.partner-banner--contain img { object-fit: contain; object-position: center; padding: 14px; }
.partner-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.partner-body h3 { font-size: 1.25rem; }
.partner-desc { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; flex: 1; }
.partner-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg); border: 1px dashed var(--accent); border-radius: 14px; padding: 8px 12px; }
.pc-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pc-value { font: 800 1.05rem "Baloo 2", sans-serif; color: var(--accent); letter-spacing: .04em; }
.pc-copy { border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 999px; padding: 4px 12px; font: 700 .8rem Nunito, sans-serif; cursor: pointer; }
.pc-copy:hover { background: var(--accent); color: var(--accent-ink); }
.pc-copy.ok { background: #2fb577; border-color: #2fb577; color: #fff; }
.pc-note { font-size: .8rem; color: var(--muted); margin-left: auto; }
.partner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.partner-actions .btn { padding: 9px 18px; font-size: .92rem; }
.btn.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn.discord:hover { box-shadow: 0 0 0 4px rgba(88,101,242,.3); }
.partner-card { position: relative; }
.partner-del { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .85rem; }
.partner-del:hover { background: #c2264b; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Formulário de adicionar parceria */
.modal-box--wide { max-width: 520px; max-height: 85vh; overflow-y: auto; }
#addForm { display: grid; gap: 13px; }
#addForm label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
#addForm input[type="text"], #addForm input[type="url"], #addForm textarea, #addForm select {
  width: 100%; border: 1.5px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 12px; padding: 10px 14px; font: 400 1rem Nunito, sans-serif; }
#addForm textarea { resize: vertical; }
#addForm .check { display: flex; align-items: center; gap: 8px; grid-auto-flow: column; justify-content: start; }
#codeFields { display: grid; gap: 13px; }
.img-preview img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.links-builder { display: grid; gap: 10px; border: 1px dashed var(--line); border-radius: 14px; padding: 12px; }
.lb-title { font-weight: 800; font-size: .9rem; }
.link-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.link-row .lr-url { grid-column: 1 / -1; }
.lr-del { border: 0; background: var(--surface2); color: var(--muted); width: 34px; height: 34px;
  border-radius: 10px; cursor: pointer; }
.lr-del:hover { background: #c2264b; color: #fff; }

/* ---- Página de perfil (layout aberto, sem card) ---- */
.wrap.profile-page { max-width: 780px; --pa: #d6469f; --pa2: #7b3fa8;
  --pa-soft: color-mix(in srgb, var(--pa) 12%, transparent); }
/* Paletas dos temas de perfil, desbloqueadas por badge (só afetam esta página) */
.profile-page[data-ptheme="default"]  { --pa: #d6469f; --pa2: #7b3fa8; }
.profile-page[data-ptheme="pioneer"]  { --pa: #ffc23b; --pa2: #e0a73a; }
.profile-page[data-ptheme="mod"]      { --pa: #2fcf5a; --pa2: #0f8f3e; }
.profile-page[data-ptheme="vip"]      { --pa: #ff5bd0; --pa2: #8a1ea0; }
.profile-page[data-ptheme="streamer"] { --pa: #9146ff; --pa2: #5b2a9e; }

/* Tema STREAMER — fundo chamativo com "Xandi" a flutuar */
.streamer-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.streamer-fx span { position: absolute; font-family: "Baloo 2", sans-serif; font-weight: 700;
  font-style: italic; color: #9146ff; letter-spacing: -.01em; text-align: center;
  max-width: 240px; line-height: 1.25;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  text-shadow: 0 0 20px rgba(145, 70, 255, .5);
  animation-name: xandiFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes xandiFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
  50% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 0deg)); }
}
/* Banner do streamer: título estático "Dona do Cantinho" */
.profile-page[data-ptheme="streamer"] .profile-hero::after {
  content: "♛ Dona do Cantinho"; position: absolute; top: 40%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; color: #fff;
  font-family: "Baloo 2", sans-serif; font-weight: 800; letter-spacing: .01em;
  font-size: clamp(1.3rem, 5.5vw, 2.4rem);
  text-shadow: 0 0 10px #fff, 0 0 26px #b57bff, 0 0 46px #9146ff; }
/* No tema streamer, o NOME do perfil pisca com glow roxo */
.profile-page[data-ptheme="streamer"] .profile-name {
  animation: nameBlink 1.5s ease-in-out infinite; }
@keyframes nameBlink {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 14px #9146ff) drop-shadow(0 0 4px #b57bff); }
  50% { opacity: .5; filter: drop-shadow(0 0 4px rgba(145,70,255,.5)); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-page[data-ptheme="streamer"] .profile-name { animation: none;
    filter: drop-shadow(0 0 12px #9146ff); }
}
/* banner do streamer mais vivo e com mais brilho */
.profile-page[data-ptheme="streamer"] .profile-hero-bg { animation-duration: 7s; }
.profile-page[data-ptheme="streamer"] .profile-hero .avatar-wrap {
  box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 0 5px rgba(145,70,255,.45), 0 0 46px rgba(145,70,255,.6); }
@media (prefers-reduced-motion: reduce) {
  .streamer-fx span { animation: none; }
}
.profile-page { --pa-soft: color-mix(in srgb, var(--pa) 12%, transparent); }

/* O tema tinge o perfil inteiro (fundo suave + realces) */
.profile-page .profile-form,
.profile-page .profile-id { position: relative; }
.profile-id::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -60px;
  width: 460px; height: 280px; max-width: 120%; transform: translateX(-50%);
  background: radial-gradient(55% 60% at 50% 40%, color-mix(in srgb, var(--pa) 22%, transparent), transparent 72%);
  pointer-events: none; filter: blur(10px); }
.profile-name { background: linear-gradient(92deg, var(--pa), var(--pa2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--pa) 38%, transparent)); }
.block-title { border-bottom-color: color-mix(in srgb, var(--pa) 45%, var(--line)) !important; }
.block-title::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 9px; vertical-align: 1px; background: linear-gradient(140deg, var(--pa), var(--pa2)); }
.info-row { border-bottom-color: color-mix(in srgb, var(--pa) 22%, var(--line)); }
.role-chip:not(.is-admin) { background: var(--pa-soft);
  color: color-mix(in srgb, var(--pa) 70%, var(--text)); }
.link-btn:hover { color: var(--pa); }
/* Capa: banner divertido — gradiente animado + bolhas + brilhos
   (animações só via background-position para NÃO promover a camada
   composta, evitando o bug de clipping dos cantos arredondados) */
/* É um <header>, por isso herda a regra global do cabeçalho da app
   (background var(--bg) + border-bottom + sticky). Anular tudo isso. */
.profile-hero { position: relative; z-index: auto; width: 100%; height: 186px; margin-bottom: 70px;
  background: none; border: 0; box-shadow: none; }
/* Sem overflow:hidden — o border-radius já recorta o fundo, evitando
   o bug dos cantos pretos em camadas compostas. */
.profile-hero-bg { position: absolute; inset: 0; border-radius: 24px;
  background: linear-gradient(120deg, var(--pa), var(--pa2) 45%, var(--pa) 100%);
  background-size: 220% 220%; animation: heroShift 13s ease-in-out infinite; }
/* bolhas suaves a derivar (anima background-position, não transform) */
.profile-hero-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle 38px at 14% 62%, rgba(255,255,255,.20), transparent 62%),
    radial-gradient(circle 22px at 32% 28%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(circle 52px at 72% 54%, rgba(255,255,255,.13), transparent 62%),
    radial-gradient(circle 16px at 88% 26%, rgba(255,255,255,.20), transparent 62%),
    radial-gradient(circle 28px at 54% 80%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(circle 14px at 46% 44%, rgba(255,255,255,.18), transparent 62%);
  background-size: 100% 150%; animation: heroBubbles 11s ease-in-out infinite; }
/* brilhos/estrelinhas + luz no topo (estático, para não compor camada) */
.profile-hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(70% 150% at 18% -10%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 65% 20%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 80% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 92% 40%, #fff, transparent);
  background-repeat: no-repeat; opacity: .9; }
@keyframes heroShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes heroBubbles { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .profile-hero-bg, .profile-hero-bg::before { animation: none; }
}
/* Avatar sobreposto, centrado */
.profile-hero .avatar-wrap { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%);
  width: 128px; height: 128px; border-radius: 50%; overflow: visible; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--pa2), var(--pa));
  border: 5px solid var(--bg);
  box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 0 5px color-mix(in srgb, var(--pa) 24%, transparent),
    0 0 30px color-mix(in srgb, var(--pa) 30%, transparent); }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-initial { font: 800 3rem "Baloo 2", sans-serif; color: #fff; }
.avatar-cam { position: absolute; bottom: 2px; right: 2px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--pa); color: #fff; display: grid; place-items: center; cursor: pointer;
  border: 3px solid var(--bg); transition: transform .15s ease; }
.avatar-cam:hover { transform: scale(1.08); }
.avatar-cam svg { width: 18px; height: 18px; }

/* Identidade */
.profile-id { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 30px; }
.profile-name { font-size: clamp(1.6rem, 6vw, 2.1rem); }
.profile-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  color: var(--muted); font-weight: 600; font-size: .9rem; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 11px; border-radius: 999px;
  background: var(--surface2); color: var(--muted); }
.role-chip.is-admin { background: linear-gradient(120deg, var(--pa), var(--pa2)); color: #fff; }
.badges-row { justify-content: center; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer;
  font: 700 .85rem Nunito, sans-serif; padding: 0; }
.link-btn:hover { color: var(--accent); }

/* Blocos abertos (sem caixas) */
.profile-form { display: grid; gap: 30px; }
/* O atributo [hidden] tem de vencer sempre o display dos blocos
   (senão secções escondidas — ex.: admin — ficavam visíveis a todos). */
[hidden] { display: none !important; }
.profile-block { display: grid; gap: 12px; }
.block-title { font-size: 1.05rem; color: var(--text);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.profile-block .field { display: grid; gap: 8px; font: 700 .72rem Nunito, sans-serif;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.profile-block textarea { width: 100%; border: 1.5px solid transparent;
  background: color-mix(in srgb, var(--surface2) 55%, var(--surface)); color: var(--text);
  border-radius: 16px; padding: 13px 16px; font: 400 1rem Nunito, sans-serif; resize: vertical;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.profile-block textarea:focus { outline: none; background: var(--surface);
  border-color: var(--pa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa) 28%, transparent); }
.profile-block .hint { justify-self: end; text-transform: none; letter-spacing: 0; }

/* Seletor de temas do perfil */
.theme-picker { display: flex; flex-wrap: wrap; gap: 12px; }
.theme-dot { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; outline: 0;
  position: relative; transition: transform .15s ease, box-shadow .15s ease;
  background: linear-gradient(140deg, var(--d1), var(--d2)); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.theme-dot::-moz-focus-inner { border: 0; padding: 0; }
.theme-dot:hover { transform: translateY(-3px) scale(1.06); }
.theme-dot.on { box-shadow: 0 0 0 3px var(--text), 0 3px 10px rgba(0,0,0,.25); }
.theme-dot.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Tema bloqueado (sem o badge necessário) */
.theme-dot.locked { filter: grayscale(.55) brightness(.85); }
.theme-dot.locked:hover { transform: none; }
.theme-dot.locked::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.block-hint { color: var(--muted); font-size: .84rem; margin: -4px 0 4px; }

/* Badge em destaque — overlay no canto superior direito da foto */
.avatar-featured { position: absolute; top: -6px; right: -8px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--bc, var(--pa)) 65%, var(--surface));
  box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.avatar-featured img { width: 26px; height: 26px; object-fit: contain; display: block; }
.avatar-featured span { font-size: 21px; line-height: 1; }

/* Seletor do badge em destaque */
.featured-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.feat-opt { width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: 0;
  border: 2px solid var(--line); background: var(--surface2); display: grid; place-items: center;
  color: var(--muted); font-weight: 800; transition: transform .15s ease, border-color .15s ease; }
.feat-opt::-moz-focus-inner { border: 0; padding: 0; }
.feat-opt:hover { transform: translateY(-2px); }
.feat-opt img { width: 28px; height: 28px; object-fit: contain; }
.feat-opt span { font-size: 23px; line-height: 1; }
.feat-opt.on { border-color: var(--bc, var(--pa));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc, var(--pa)) 32%, transparent); }
/* Linhas de informação da conta */
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 2px; border-bottom: 1px dashed var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--muted); font-weight: 700; font-size: .9rem; }
.info-val { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 60%; text-align: right; }
.profile-save { display: grid; gap: 10px; }

/* ---- Filtros de clips ---- */
.clip-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.cf-label { font-weight: 700; font-size: .9rem; color: var(--muted); }
.cf-select { border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 8px 38px 8px 16px; font: 700 .9rem Nunito, sans-serif; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.cf-select:hover { border-color: var(--accent); }
.cf-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }

/* ---- Grelha de clips ---- */
.clip-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.clip-item { display: flex; flex-direction: column; gap: 8px; }
.clip-item .clip-card { flex: 1 1 auto; }
.clip-vote { margin-top: 2px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--accent); font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.clip-vote:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.clip-vote:disabled { cursor: default; color: var(--muted); }
.clip-vote.voted { color: #1c7a4e; border-color: #2ea06a; background: color-mix(in srgb, #2ea06a 12%, var(--surface)); }

/* ---- Votação do clip da semana (ranking) ---- */
.clipvote { margin: 0 0 20px; padding: 22px; border-radius: 22px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: var(--shadow-1); }
.cv-head { margin-bottom: 16px; }
.cv-head h2 { font: 800 1.35rem "Baloo 2", sans-serif; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-period { color: var(--muted); font-weight: 700; font-size: .9rem; }
.cv-sub { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.cv-rank { display: grid; gap: 10px; }
.cv-empty { color: var(--muted); font-weight: 600; margin: 0; padding: 18px; text-align: center;
  border: 1px dashed var(--line); border-radius: 16px; }
.cv-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px;
  text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.cv-row:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-1); }
.cv-pos { flex: 0 0 auto; width: 30px; text-align: center; font-weight: 800; font-size: 1.2rem; }
.cv-thumb { flex: 0 0 auto; width: 84px; height: 48px; object-fit: cover; border-radius: 12px; background: var(--surface2); }
.cv-info { flex: 1 1 auto; min-width: 0; display: grid; gap: 7px; }
.cv-title { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-bar { height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.cv-bar span { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8f4fd6)); }
.cv-votes { flex: 0 0 auto; font-weight: 800; color: var(--accent); min-width: 30px; text-align: right; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .cv-row:hover { transform: none; } }

/* Linha de candidato: link (thumb+info) + votos + botão de votar */
.cv-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; }
.cv-row .clip-vote { flex: 0 0 auto; margin-top: 0; border-radius: 999px; padding: 9px 16px; }

/* Bloco "adicionar o meu clip" (candidatura) */
.cv-nominate { margin: 0 0 20px; padding: 20px 22px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.cv-nominate h2 { font: 800 1.15rem "Baloo 2", sans-serif; margin: 0 0 4px; }
.cv-nominate-hint { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
.cv-nominate-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cv-nominate-row .cf-select { flex: 1 1 240px; min-width: 0; }

/* Banner da votação (topo) — clean, só um acento subtil */
.vote-hero { position: relative; margin: 0 0 22px; padding: 30px 28px; border-radius: 24px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.vote-hero-glow { display: none; }
.vote-badge { display: inline-block; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px; padding: 6px 15px; font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.vote-hero h1 { font: 800 clamp(1.8rem, 5vw, 2.5rem) "Baloo 2", sans-serif; margin: 14px 0 2px; letter-spacing: -.01em; color: var(--text); }
.vote-week { color: var(--muted); font-weight: 700; margin: 0 0 18px; font-size: .95rem; }
.vote-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vote-pill { background: var(--surface2); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; font-weight: 800; font-size: .88rem; color: var(--text); }

/* Pódio: destaque do top 3 nas linhas de ranking */
.cv-row.rank-1 { border-color: color-mix(in srgb, #ffcf33 55%, var(--line)); background: color-mix(in srgb, #ffcf33 12%, var(--surface)); }
.cv-row.rank-2 { border-color: color-mix(in srgb, #c3c7d4 55%, var(--line)); background: color-mix(in srgb, #c3c7d4 12%, var(--surface)); }
.cv-row.rank-3 { border-color: color-mix(in srgb, #e0a06a 55%, var(--line)); background: color-mix(in srgb, #e0a06a 12%, var(--surface)); }
.cv-row.rank-1 .cv-pos { font-size: 1.45rem; }

/* Atalho na página de clips para a votação */
.clips-vote-link { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: .95rem; color: var(--text); }
.clips-vote-link a { font-weight: 800; color: var(--accent); text-decoration: none; white-space: nowrap; }
.clips-vote-link a:hover { text-decoration: underline; }

/* Ranking da semana anterior — destaque dourado */
.cv-last { background: color-mix(in srgb, #ffcf33 8%, var(--surface)); border-color: color-mix(in srgb, #ffcf33 35%, var(--line)); }
.cv-last .cv-votes { color: #c99700; }

.clip-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.clip-thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--line); }
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.clip-card:hover .clip-thumb img { transform: scale(1.05); }
.clip-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(145,70,255,.9); color: #fff; font-size: 1.1rem;
  opacity: 0; transition: opacity .2s ease; }
.clip-card:hover .clip-play { opacity: 1; }
.clip-dur { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.8); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.clip-title { font-weight: 700; font-size: .95rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-author { color: var(--accent); font-size: .82rem; font-weight: 700; margin-top: -4px; }
.clip-meta { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ---- Paginação ---- */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.pager button { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); border-radius: 12px; font: 700 .95rem Nunito, sans-serif;
  cursor: pointer; transition: border-color .15s, background .15s; }
.pager button:hover:not(:disabled):not(.on) { border-color: var(--accent); }
.pager button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); cursor: default; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pg-gap { padding: 0 4px; color: var(--muted); }

/* ---- Páginas de secção (placeholders) ---- */
.page { padding-block: 8px 48px; }
.page-head { padding: 28px 0 10px; }
.page-head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.placeholder { background: var(--surface); border: 1px dashed var(--line); border-radius: 24px;
  padding: 56px 24px; text-align: center; color: var(--muted); }
.placeholder .big { font-size: 2.4rem; display: block; margin-bottom: 10px; }

/* ---- "Work in progress" — placeholder limpo, sem caixas ---- */
.wip { position: relative; min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 8px;
  padding: 40px 20px; overflow: hidden; }
.wip-emoji { position: relative; z-index: 1; font-size: clamp(3.4rem, 12vw, 6rem); line-height: 1;
  filter: drop-shadow(0 10px 26px var(--glow)); animation: wipFloat 4s ease-in-out infinite; }
.wip-emoji::after { content: ""; position: absolute; left: 50%; top: 58%; width: 150%; height: 150%;
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%); filter: blur(6px); }
.wip-title { position: relative; z-index: 1; font: 800 clamp(2.2rem, 8vw, 4.2rem) "Baloo 2", sans-serif;
  line-height: 1.05; letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--accent), #9a5bd0, var(--accent));
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: wipShimmer 5s linear infinite; }
.wip-sub { position: relative; z-index: 1; color: var(--muted); font-weight: 600;
  max-width: 40ch; margin-top: 2px; }
.wip-dots { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 14px; }
.wip-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  opacity: .5; animation: wipBounce 1.2s ease-in-out infinite; }
.wip-dots span:nth-child(2) { animation-delay: .18s; }
.wip-dots span:nth-child(3) { animation-delay: .36s; }
/* Decoração: corações/estrelas a flutuar atrás */
.wip-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wip-deco span { position: absolute; color: var(--accent); opacity: .16; line-height: 1;
  animation: wipDrift ease-in-out infinite; }
@keyframes wipFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes wipShimmer { to { background-position: 220% 0; } }
@keyframes wipBounce { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-9px); opacity: 1; } }
@keyframes wipDrift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) {
  .wip-emoji, .wip-title, .wip-dots span, .wip-deco span { animation: none; }
}

/* ---- Home: interatividade (corações, mascote) ---- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-heart { position: fixed; transform: translate(-50%, -50%); color: var(--accent);
  will-change: transform, opacity; animation: fxFloat 1s ease-out forwards;
  text-shadow: 0 0 8px var(--glow); }
@keyframes fxFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  15% { opacity: 1; transform: translate(-50%, -65%) scale(1) rotate(var(--rot, 0deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -200%) scale(.9) rotate(var(--rot, 0deg)); }
}
.bunny.pop { animation: bunnyPop .7s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 85%; }
@keyframes bunnyPop {
  0% { transform: scale(1, 1) translateY(0) rotate(0); }
  20% { transform: scale(1.15, .82) translateY(0) rotate(0); }
  45% { transform: scale(.9, 1.18) translateY(-18px) rotate(-8deg); }
  65% { transform: scale(1.04, .96) translateY(-6px) rotate(6deg); }
  80% { transform: scale(.98, 1.03) translateY(0) rotate(-3deg); }
  100% { transform: scale(1, 1) translateY(0) rotate(0); }
}
.fx-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); opacity: 0; pointer-events: none; z-index: 70;
  transition: opacity .3s ease, transform .3s ease; }
.fx-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Manchas suaves a derivar (ambiente), atrás do conteúdo */
.float-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floaty { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .22;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  animation: floatDrift 26s ease-in-out infinite; will-change: transform; }
.floaty.p { background: radial-gradient(circle, #7b3fa8, transparent 70%); }
@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--mx, 30px), var(--my, -20px)) scale(1.08); }
}

/* ---- Home: estatísticas ---- */
.stats { display: grid; gap: 10px 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); padding: 8px 0 4px; }
.stat { background: transparent; border: 0; padding: 12px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat-ic { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); margin-bottom: 2px; }
.stat-ic svg { width: 26px; height: 26px; }
.stat-ic--twitch { color: #9146ff; }
.stat-ic--youtube { color: #ff0000; }
.stat-ic--tiktok { color: var(--text); }
.stat-ic--instagram { color: #e1306c; }
.stat-ic--discord { color: #5865f2; }
.stat-val { font: 800 1.7rem "Baloo 2", sans-serif; color: var(--text); line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* ---- Home: cards de stats (número em destaque), dentro da faixa colorida ---- */
.stat-chart { display: grid; gap: 16px; margin-top: 4px; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat-card { display: grid; gap: 5px; padding: 18px 18px 16px; border-radius: 18px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 12px 30px rgba(0,0,0,.16); transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.sc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 12px rgba(0,0,0,.14); margin-bottom: 6px; }
.sc-ic svg { width: 23px; height: 23px; }
.sc-val { font: 800 2.1rem "Baloo 2", sans-serif; line-height: 1; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.22); }
.sc-label { color: rgba(255,255,255,.86); font-size: .86rem; font-weight: 600; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .stat-card { transition: none; } }

/* CTA final — painel com gradiente (único toque de cor forte) */
.cta-sec { margin-top: 34px; }
.cta-card { position: relative; overflow: hidden; border-radius: 28px; padding: 52px 28px; text-align: center;
  color: #fff; box-shadow: var(--shadow-3);
  background: linear-gradient(125deg, #e0479f 0%, #9a4fc0 55%, #6d3fb0 100%); }
.cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 120% at 14% -12%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(55% 120% at 90% 120%, rgba(0,0,0,.2), transparent 60%),
    radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.5px);
  background-size: auto, auto, 22px 22px; }
.cta-card > * { position: relative; z-index: 1; }
.cta-emoji { display: inline-block; font-size: 2.6rem; line-height: 1; margin-bottom: 8px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.3)); animation: ctaBob 4s ease-in-out infinite; }
@keyframes ctaBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.cta-card h2 { font-size: clamp(1.6rem, 5.5vw, 2.5rem); text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.cta-card p { color: rgba(255,255,255,.92); max-width: 46ch; margin: 10px auto 22px; }
@media (prefers-reduced-motion: reduce) { .cta-emoji { animation: none; } }

/* ---- Home: hero com estado dinâmico ---- */
.home-wrap { display: grid; gap: 8px; padding-block: 20px 40px; }
/* Hero da home com mais espaço para os lados */
.wrap.home-wrap { max-width: 1240px; }
/* Estado normal (offline): brilho orgânico rosa/roxo que se funde no fundo */
.hero.home { position: relative; margin: 0; box-shadow: none; color: var(--text); background: none;
  text-align: center; align-items: center; justify-content: center;
  min-height: min(84vh, 760px); display: flex; flex-direction: column;
  padding: 40px 20px 72px; border-radius: 0; }
.hero.home > * { position: relative; z-index: 1; }
/* Brilho de fundo só com radiais suaves (sem filter/transform → sem rebordo de
   camada). Os radiais desvanecem bem antes das bordas, por isso funde em todos os lados. */
.hero.home::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: radial-gradient(44% 42% at 36% 38%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 66%),
              radial-gradient(42% 44% at 74% 46%, color-mix(in srgb, #7b3fa8 40%, transparent), transparent 66%),
              radial-gradient(58% 48% at 54% 98%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  opacity: .5;
}
.hero.home h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 4px; }
.hero.home .bunny { stroke: var(--accent); filter: drop-shadow(0 0 10px var(--glow)); }
.hero.home.is-live .bunny { stroke: #ffd0f0; }

/* ---- Home: hero mais chamativo ---- */
.hero.home .bunny { width: 94px; }
/* Eyebrow em pílula com brilho */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font: 800 .78rem Nunito, sans-serif; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); padding: 7px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: 0 4px 16px var(--glow); animation: eyebrowGlow 3.2s ease-in-out infinite; }
@keyframes eyebrowGlow {
  0%, 100% { box-shadow: 0 4px 14px var(--glow); }
  50% { box-shadow: 0 7px 24px var(--glow); transform: translateY(-1px); }
}
.hero.home.is-live .hero-eyebrow { color: #fff; background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
/* Saudação com texto em gradiente animado */
.hero-greeting { font-size: clamp(2rem, 5.6vw, 3.1rem) !important; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--accent), #9a5bd0 46%, #ff8fb5 92%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: greetShimmer 6s linear infinite; }
@keyframes greetShimmer { to { background-position: 220% center; } }
.hg-heart { -webkit-text-fill-color: #ff5ba0; color: #ff5ba0; display: inline-block;
  animation: heartBeat 1.4s ease-in-out infinite; }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); } 22% { transform: scale(1.28); } 40% { transform: scale(1); }
}
.hero.home.is-live .hero-greeting { background: none; -webkit-text-fill-color: #fff; color: #fff;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.3)); animation: none; }
/* Tagline */
.hero-tagline { margin: 10px 0 2px; color: var(--muted); font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.18rem); }
.hero-tagline b { color: var(--accent); }
.hero.home.is-live .hero-tagline { color: rgba(255,255,255,.92); }
.hero.home.is-live .hero-tagline b { color: #fff; }
/* Brilhos a flutuar no fundo do hero */
.hero-sparkles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-sparkles span { position: absolute; font-size: clamp(1rem, 2.4vw, 1.7rem); opacity: .5;
  filter: drop-shadow(0 0 8px var(--glow)); animation: sparkleDrift ease-in-out infinite; }
.hero-sparkles span:nth-child(1) { left: 12%; top: 24%; animation-duration: 7s; }
.hero-sparkles span:nth-child(2) { left: 83%; top: 30%; animation-duration: 9s; animation-delay: .6s; }
.hero-sparkles span:nth-child(3) { left: 19%; top: 70%; animation-duration: 8s; animation-delay: 1.2s; }
.hero-sparkles span:nth-child(4) { left: 78%; top: 66%; animation-duration: 6.5s; animation-delay: .3s; }
.hero-sparkles span:nth-child(5) { left: 50%; top: 14%; animation-duration: 10s; animation-delay: .9s; }
@keyframes sparkleDrift {
  0%, 100% { transform: translateY(0) scale(1); opacity: .35; }
  50% { transform: translateY(-16px) scale(1.2); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-greeting, .hg-heart, .hero-sparkles span { animation: none; }
}
/* Acessos rápidos dentro do hero (preenche o espaço vazio) */
.hero-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 28px; max-width: 660px; }
.hero-quick a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .98rem;
  box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hero-quick a:hover { transform: translateY(-4px); box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.hero-quick .hq-ic { font-size: 1.35rem; line-height: 1; }
.hero.home.is-live .hero-quick a { background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.42); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
@media (prefers-reduced-motion: reduce) { .hero-quick a:hover { transform: none; } }

/* ---- Home: hero em 2 colunas + orbe da mascote (inspirado no mockup) ---- */
.hero-main { display: grid; grid-template-columns: 1fr; gap: 24px; justify-items: center;
  width: 100%; max-width: 1240px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-visual { display: grid; place-items: center; width: 100%; }
.hero-orb { position: relative; width: min(330px, 68vw); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 60%),
    radial-gradient(circle at 62% 62%, color-mix(in srgb, #7b3fa8 42%, transparent), transparent 62%);
  box-shadow: 0 0 90px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: orbPulse 5s ease-in-out infinite; }
@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 70px color-mix(in srgb, var(--accent) 34%, transparent); }
  50% { box-shadow: 0 0 115px color-mix(in srgb, var(--accent) 55%, transparent); }
}
.hero-orb::before { content: ""; position: absolute; inset: -6%; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 42%, transparent); opacity: .5;
  animation: orbSpin 26s linear infinite; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.hero.home .hero-orb .bunny { width: 52%; height: auto; filter: drop-shadow(0 0 16px var(--glow)); }
@media (prefers-reduced-motion: reduce) { .hero-orb, .hero-orb::before { animation: none; } }

/* Em direto: coelho + orbe ganham brilho VERMELHO (combina com o hero live) */
.hero.home.is-live .hero-orb .bunny {
  filter: drop-shadow(0 0 18px rgba(255,45,111,.9)) drop-shadow(0 0 6px rgba(255,80,140,.6)); }
.hero.home.is-live .hero-orb {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,45,111,.5), transparent 60%),
    radial-gradient(circle at 62% 62%, rgba(214,30,90,.42), transparent 62%);
  box-shadow: 0 0 90px rgba(255,45,111,.4);
  animation: orbPulseLive 5s ease-in-out infinite; }
.hero.home.is-live .hero-orb::before { border-color: rgba(255,90,140,.5); }
@keyframes orbPulseLive {
  0%, 100% { box-shadow: 0 0 70px rgba(255,45,111,.34); }
  50% { box-shadow: 0 0 115px rgba(255,45,111,.58); }
}
@media (prefers-reduced-motion: reduce) { .hero.home.is-live .hero-orb { animation: none; } }

@media (min-width: 900px) {
  .hero.home { text-align: left; }
  .hero-main { grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; justify-items: stretch; }
  .hero-visual { order: 2; }
  .hero-copy { order: 1; align-items: flex-start; text-align: left; }
  .hero-quick { justify-content: flex-start; }
  .status { align-items: flex-start; }
}
/* Bubble de fala do coelho (muda conforme offline/em direto) */
.hero-bubble { position: absolute; top: -8%; right: -12%; z-index: 4; max-width: 170px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 16px 16px 16px 5px; font-weight: 700; font-size: .9rem; line-height: 1.3;
  box-shadow: var(--shadow-2); animation: bubbleFloat 4.5s ease-in-out infinite; }
.hero-bubble::after { content: ""; position: absolute; left: 18px; bottom: -9px;
  border: 9px solid transparent; border-top-color: var(--surface); border-bottom: 0;
  filter: drop-shadow(0 1px 0 var(--line)); }
@keyframes bubbleFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .hero-bubble { animation: none; } }
/* Em direto, a bubble fica mais "quente" (vermelho da live) */
.hero.home.is-live .hero-bubble { border-color: #ff6a8e; color: #d6124b; }
.hero.home.is-live .hero-bubble::after { filter: drop-shadow(0 1px 0 #ff6a8e); }
/* Mensagens do easter egg do coelho: destaque e "pop" ao aparecer */
.hero-bubble.bubble-egg { border-color: var(--accent); color: var(--accent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 32%, transparent); animation: bubbleEggPop .32s ease; }
.hero-bubble.bubble-egg::after { filter: drop-shadow(0 1px 0 var(--accent)); }
@keyframes bubbleEggPop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-bubble.bubble-egg { animation: none; } }
@media (max-width: 560px) { .hero-bubble { right: -4%; max-width: 150px; font-size: .84rem; } }

/* ===== SUBATHON — banner de destaque no topo da home ===== */
.subathon { margin: 0 0 22px; }
.subathon-inner { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 22px; padding: 20px 22px; border-radius: 22px;
  background: var(--sub-grad);
  color: #fff; box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 36%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
/* legibilidade do texto branco sobre qualquer acento sazonal */
.subathon-inner .sub-title, .subathon-inner .sub-sub, .subathon-inner .sub-state { text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.subathon-inner::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120px 120px at 12% 0%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(160px 160px at 92% 110%, rgba(255,255,255,.18), transparent 70%); }
.subathon-inner > * { position: relative; z-index: 1; }
.sub-spark { position: absolute; inset: 0; z-index: 0; }
.sub-spark span { position: absolute; font-size: 15px; opacity: .55; animation: subDrift 6s ease-in-out infinite; }
.sub-spark span:nth-child(1) { left: 30%; top: 14%; animation-delay: -1s; }
.sub-spark span:nth-child(2) { left: 62%; top: 60%; animation-delay: -3s; font-size: 12px; }
.sub-spark span:nth-child(3) { left: 48%; top: 20%; animation-delay: -5s; font-size: 18px; }
@keyframes subDrift { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
.sub-lead { flex: 1 1 260px; min-width: 0; }
.sub-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); }
/* O efeito "a pulsar" só aparece quando a Xandi está mesmo em direto. */
.subathon.is-live .sub-badge { animation: subPulse 1.6s ease-in-out infinite; }
@keyframes subPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.sub-title { margin: 10px 0 4px; font: 800 1.7rem/1.1 "Baloo 2", system-ui, sans-serif; color: #fff; }
.sub-sub { margin: 0; font-size: .95rem; opacity: .95; }
.sub-state { margin: 6px 0 0; font-size: .85rem; font-weight: 700; opacity: .92; }
.sub-state:empty { display: none; }
.sub-count { display: flex; gap: 8px; flex: 0 0 auto; }
.sc-unit { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 10px 6px;
  border-radius: 14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); }
.sc-unit b { font: 800 1.5rem/1 "Baloo 2", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sc-unit span { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: 4px; }
.sub-now { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.05rem;
  padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); }
.sub-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: subPulse 1.4s ease-in-out infinite; }
.subathon .btn.sub-cta { flex: 0 0 auto; background: #fff; color: color-mix(in srgb, var(--accent) 78%, #000); font-weight: 800;
  border: 0; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.subathon .btn.sub-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); }
/* Timer embutido do StreamElements (overlay OBS). As overlays do SE só são
   transparentes DENTRO do OBS; num iframe de browser o documento é sempre branco
   (não há como forçar transparência cross-origin). Por isso assumimos o branco
   como design: uma "pílula" branca com o contador dentro.
   IMPORTANTE: no widget do SE, a cor dos dígitos tem de ser ESCURA (p.ex. o roxo
   do tema), senão dígitos brancos ficam invisíveis sobre o branco. */
/* Cartão do timer: o "ecrã" branco é o iframe do SE (não dá para pintar), mas
   emoldurado com rótulo para parecer um display de propósito. */
.sub-timer { flex: 0 1 260px; min-width: 190px; max-width: 280px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; }
.sub-timer-cap { font: 800 .72rem Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.sub-timer-screen { width: 100%; height: 64px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 8px 20px rgba(0,0,0,.22); }
.sub-timer-screen iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
@media (max-width: 560px) { .sub-timer { flex-basis: 100%; max-width: none; width: 100%; } }
@media (max-width: 560px) {
  .sub-title { font-size: 1.4rem; }
  .sub-count { width: 100%; justify-content: space-between; }
  .sc-unit { min-width: 0; flex: 1; }
  .subathon .btn.sub-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-spark span, .sub-badge, .sub-dot { animation: none; }
}
/* Botão de acesso ao painel de admin (topo do perfil, só admin) */
.admin-panel-btn { padding: 7px 14px; font-size: .85rem; border-radius: 999px; }

/* Cartão admin do subathon (no perfil) */
.admin-tag { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
#adminSubathon .field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-weight: 600; }
.sub-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.status { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; min-height: 92px; justify-content: center; }
.status-load { opacity: .7; font-weight: 600; }
.status .s-meta { margin: 0; opacity: .85; font-size: .9rem; }
.status .s-next { margin: 0; color: var(--muted); max-width: 44ch; }
.status .s-next b { color: var(--accent); }
.off-text { display: inline-flex; align-items: center; gap: 9px; margin: 0;
  color: var(--muted); font-weight: 700; font-size: 1.02rem; }
.off-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.status .btn { margin-top: 2px; }

/* Quando está EM DIRETO, o texto volta a branco (hero fica vermelho) */
.hero.home.is-live { color: #fff; }
.hero.home.is-live .s-next b { color: #fff; }

/* ---- Hero quando a Xandi está EM DIRETO ----
   Mesmo tratamento do hero normal corrigido: só radiais suaves (vermelho/rosa
   da live) que desvanecem antes das bordas — sem filter/transform, logo sem
   rebordo de camada composta. */
.hero.home.is-live { background: none; }
.hero.home.is-live::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: radial-gradient(44% 42% at 34% 36%, rgba(255,45,111,.9), transparent 66%),
              radial-gradient(42% 44% at 76% 46%, rgba(214,30,90,.8), transparent 66%),
              radial-gradient(58% 48% at 54% 98%, rgba(255,120,160,.5), transparent 70%);
  opacity: .55;
}
.status.live { gap: 10px; }
.live-tag { display: inline-flex; align-items: center; gap: 12px;
  background: transparent; color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.1;
  font-size: clamp(1.6rem, 5vw, 2.6rem); padding: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
  animation: liveTextPulse 1.3s ease-in-out infinite; }
.live-tag .live-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: livePulse 1.4s infinite; }
@keyframes liveTextPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .78; transform: scale(1.035); }
}
.live-big { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; opacity: .95; max-width: 30ch; }
.status.live .s-meta { font-weight: 700; opacity: .95; }
.mi-inline { width: 1.05em; height: 1.05em; vertical-align: -0.16em; display: inline-block; }
.live-cta { margin-top: 8px; background: #fff; color: #e0114b; border-color: #fff;
  font-size: 1.05rem; padding: 13px 28px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease; }
.live-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.3); }

/* Thumbnail da stream */
.live-thumb { position: relative; display: block; width: 100%; max-width: 560px; aspect-ratio: 16/9;
  border-radius: 18px; overflow: hidden; border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.lt-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-placeholder { background: linear-gradient(135deg, #7b1030, #ff2d6f); }
.lt-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: 14px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 48%); }
.lt-overlay .live-tag { font-size: clamp(1.05rem, 3.4vw, 1.6rem); }
.live-title { margin: 12px 0 0; font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.5rem); line-height: 1.15; max-width: 36ch; }
@media (prefers-reduced-motion: reduce) {
  .hero.home::before, .hero.home.is-live::before { animation: none; }
  .live-tag, .live-tag .live-dot { animation: none; }
  .scroll-cue svg { animation: none; }
}

/* ---- Home one-page: cue de scroll ---- */
.scroll-cue { margin: 30px auto 0; align-self: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; opacity: .8; transition: opacity .2s, color .2s; }
.scroll-cue:hover { opacity: 1; color: var(--accent); }
.scroll-cue svg { width: 24px; height: 24px; animation: cueBob 1.8s ease-in-out infinite; }
.hero.home.is-live .scroll-cue { color: rgba(255,255,255,.85); }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---- Home one-page: secções ---- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 16px; margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(1.4rem, 4.2vw, 2rem); line-height: 1.1; }
.sec-sub { color: var(--muted); font-weight: 600; width: 100%; margin-top: -2px; }
.sec-link { color: var(--accent); font-weight: 700; font-size: .92rem; text-decoration: none;
  white-space: nowrap; transition: opacity .15s; }
.sec-link:hover { opacity: .75; }

/* Reveal ao fazer scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Entrada alternada das fitas ao fazer scroll (acompanha o ângulo) */
.rib--a.reveal, .rib--c.reveal, .rib--cta.reveal { transform: translate3d(-72px, 24px, 0) rotate(-1.4deg); transition-duration: .8s; }
.rib--b.reveal, .rib--d.reveal { transform: translate3d(72px, 24px, 0) rotate(1.4deg); transition-duration: .8s; }
.rib--a.reveal.in, .rib--b.reveal.in, .rib--c.reveal.in, .rib--d.reveal.in, .rib--cta.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .rib--a.reveal, .rib--b.reveal, .rib--c.reveal, .rib--d.reveal, .rib--cta.reveal {
    opacity: 1; transform: none; transition: none; }
}

/* Próximas lives */
.lives-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.live-card { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px;
  transition: border-color .18s, transform .18s, box-shadow .18s; }
.live-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 26px var(--glow); }
.live-date { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; display: grid;
  place-items: center; align-content: center; background: linear-gradient(140deg, #7b3fa8, var(--accent)); color: #fff; }
.ld-day { font: 800 1.4rem "Baloo 2", sans-serif; line-height: 1; }
.ld-mon { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.live-info { display: grid; gap: 2px; min-width: 0; }
.live-when { color: var(--accent); font-weight: 800; font-size: .85rem; text-transform: capitalize; }
.live-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Clips em destaque — grelha fixa de até 4 */
#clipsFeat { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Parcerias — chips */
.partners-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.partner-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 8px; text-decoration: none;
  color: var(--text); font-weight: 700; transition: border-color .18s, transform .18s, box-shadow .18s; }
.partner-chip:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 20px var(--glow); }
.pp-logo { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface2); }
.pp-logo img { width: 100%; height: 100%; object-fit: cover; }
.pp-mono { font: 800 1.1rem "Baloo 2", sans-serif; color: var(--accent); }
.pp-name { font-size: .95rem; }
.pp-code { background: var(--surface2); color: var(--accent); font-size: .72rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; }

/* ---- Secções em fita inclinada (home), ângulo + cor alternados ---- */
.ribbon-sec { position: relative; width: 100vw; margin: 64px 0;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow-x: clip; }
.rib-band { position: relative; width: 108vw; margin-left: 50%;
  transform: translateX(-50%) rotate(var(--ang, -1.8deg)); padding: 56px 20px;
  color: #fff; background: var(--rib-bg);
  box-shadow: 0 22px 55px rgba(60,20,70,.26), inset 0 1px 0 rgba(255,255,255,.22); }
/* Textura + brilhos nos cantos (profundidade) */
.rib-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(70% 135% at 8% -18%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(64% 135% at 94% 125%, rgba(0,0,0,.2), transparent 60%),
    radial-gradient(300px 230px at 24% 118%, rgba(255,255,255,.16), transparent 72%),
    radial-gradient(340px 250px at 82% -22%, rgba(255,255,255,.14), transparent 72%),
    radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.5px);
  background-size: auto, auto, auto, auto, 22px 22px; }
/* Reflexo de luz a atravessar a faixa */
.rib-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: ribSheen 8s ease-in-out infinite; }
@keyframes ribSheen { 0% { background-position: 170% 0; } 55%, 100% { background-position: -70% 0; } }
@media (prefers-reduced-motion: reduce) { .rib-band::after { animation: none; opacity: 0; } }
.rib-inner { position: relative; z-index: 1; transform: rotate(calc(-1 * var(--ang, -1.8deg)));
  width: 100%; max-width: 1000px; margin: 0 auto; }

/* ângulo + cor alternados por secção — paleta coesa e suave */
.rib--a { --ang: -1.8deg; } .rib--a .rib-band { --rib-bg: linear-gradient(125deg, #e0479f 0%, #b94bbf 55%, #8f4fd6 100%); }
.rib--b { --ang:  1.8deg; } .rib--b .rib-band { --rib-bg: linear-gradient(125deg, #8f5bd6 0%, #c257b0 60%, #e05fa0 100%); }
.rib--c { --ang: -1.8deg; } .rib--c .rib-band { --rib-bg: linear-gradient(125deg, #d24fa0 0%, #a94fc4 55%, #7b4fd0 100%); }
.rib--d { --ang:  1.8deg; } .rib--d .rib-band { --rib-bg: linear-gradient(125deg, #7b53cc 0%, #b957b8 55%, #e061a3 100%); }
.rib--cta { --ang: -2deg; } .rib--cta .rib-band { --rib-bg: linear-gradient(125deg, #e0479f 0%, #9a4fc0 55%, #6d3fb0 100%); }

/* conteúdo legível sobre a cor */
.rib-inner .sec-head { margin-bottom: 18px; }
.rib-inner .sec-head h2 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.22); }
.rib-inner .sec-sub { color: rgba(255,255,255,.88); }
.rib-inner .sec-link { color: #fff; opacity: .92; text-decoration: underline; text-underline-offset: 3px; }
.rib-inner .sec-link:hover { opacity: 1; }
.rib-inner .stat-val { color: #fff; }
.rib-inner .stat-label { color: rgba(255,255,255,.82); }
.rib-inner .stat-ic { color: rgba(255,255,255,.92); }
.rib-inner .clip-title { color: #fff; }
.rib-inner .clip-meta { color: rgba(255,255,255,.82); }
.rib-inner .clip-author { color: #fff; }

/* Cards dentro das faixas: estilo "glass" para integrarem na cor (em vez de opacos) */
.rib-inner .live-card,
.rib-inner .partner-chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28);
  color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.rib-inner .live-card:hover,
.rib-inner .partner-chip:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.24); }
.rib-inner .live-name { color: #fff; }
.rib-inner .live-when { color: rgba(255,255,255,.92); }
.rib-inner .pp-name { color: #fff; }
.rib-inner .pp-mono { color: #fff; }
.rib-inner .pp-logo { background: rgba(255,255,255,.2); }
.rib-inner .pp-code { background: rgba(255,255,255,.22); color: #fff; }

/* CTA final: centrado + botões */
.rib--cta .rib-inner { max-width: 720px; text-align: center; }
.rib--cta .rib-inner h2 { font-size: clamp(1.6rem, 5.5vw, 2.5rem); text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.rib--cta .rib-inner p { color: rgba(255,255,255,.9); max-width: 46ch; margin: 10px auto 22px; }
.community-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn.cb-main { background: #fff; color: #7b3fa8; border-color: #fff; font-weight: 800;
  box-shadow: 0 8px 22px rgba(0,0,0,.2); transition: transform .15s, box-shadow .15s; }
.btn.cb-main:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.btn.cb-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.75);
  transition: background .15s, transform .15s; }
.btn.cb-ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn.cb-main, .btn.cb-ghost { transition: none; } }

/* ---- Redes sociais no footer (todas as páginas) ---- */
.foot-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.foot-social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface2); color: var(--muted);
  transition: background .18s ease, color .18s ease, transform .18s ease; }
.foot-social a svg { width: 22px; height: 22px; }
.foot-social a:hover { background: var(--c, var(--accent)); color: #fff; transform: translateY(-2px); }
.foot-email { margin-bottom: 14px; font-size: .88rem; color: var(--muted); }
.foot-email a { color: var(--accent); font-weight: 700; text-decoration: none; }
.foot-email a:hover { text-decoration: underline; }

section { padding: 32px 0 8px; }
section h2 { font-size: 1.6rem; margin-bottom: 4px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px;
  box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { box-shadow: var(--shadow-2); }
.card h3 { font-size: 1.1rem; margin-bottom: 6px; }

/* nav das secções fica sempre visível no header (faz scroll horizontal se não couber) */

.btn.ghost { background: transparent; color: var(--accent); }

footer { padding: 32px 0 28px; color: var(--muted); text-align: center; font-size: .9rem;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 7%, transparent)); }

@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; margin: 12px auto; }
  .hero { padding: 32px 24px; text-align: center; align-items: center; }
  .hero p { margin-inline: auto; }
  .perks { display: none; }
  .panel { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .bunny { animation: none; }
}

/* ===== Login imersivo: gradiente no ecrã todo + card de vidro ===== */
body.auth-page { min-height: 100vh;
  background: radial-gradient(circle at 18% 16%, #7b3fa8, transparent 42%),
    radial-gradient(circle at 86% 20%, #e0509f, transparent 40%),
    radial-gradient(circle at 50% 104%, #ff8fb5, transparent 55%), #241238;
  background-attachment: fixed; background-size: 175% 175%; animation: authShift 18s ease-in-out infinite; }
body.auth-page header { background: transparent; border-bottom: 0; box-shadow: none; }
body.auth-page .logo { color: #fff; }
body.auth-page .icon-btn { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
body.auth-page main.wrap { min-height: calc(100vh - 86px); display: flex; align-items: center; justify-content: center; }
body.auth-page footer { color: rgba(255,255,255,.72); }

/* card = painel de vidro, numa só coluna */
body.auth-page .auth { grid-template-columns: 1fr; max-width: 430px; width: 100%; margin: 20px auto;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.28); border-radius: 26px; box-shadow: 0 30px 70px rgba(20,8,30,.5); }

/* cabeçalho do card (coelho + título), já sobre o vidro claro */
body.auth-page .hero { background: none; color: var(--text); padding: 30px 30px 2px;
  text-align: center; align-items: center; animation: none; overflow: visible; }
body.auth-page .hero::before { display: none; }
body.auth-page .hero .bunny { stroke: var(--accent); width: 68px; margin-bottom: 10px; filter: drop-shadow(0 0 12px var(--glow)); }
body.auth-page .hero h1 { font-size: 1.5rem; }
body.auth-page .hero p { font-size: .9rem; opacity: .82; margin: 8px auto 2px; }
body.auth-page .perks { display: none; }

body.auth-page .panel { background: none; padding: 16px 30px 30px; }

@media (prefers-reduced-motion: reduce) { body.auth-page { animation: none; } }
@media (max-width: 480px) { body.auth-page .auth { margin: 10px auto; } body.auth-page .hero { padding: 24px 22px 0; } body.auth-page .panel { padding: 14px 22px 24px; } }

/* ============ Apoiar o canal ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.support-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 10px; }
.support-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; padding: 24px 22px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--surface); transition: border-color .18s, transform .18s, box-shadow .18s; }
.support-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 16px 38px var(--glow); }
.support-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #9a5bd0); }
.support-card h2 { font: 800 1.25rem "Baloo 2", sans-serif; margin: 2px 0 0; }
.support-card p { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; }
.support-card .btn { margin-top: 10px; }
.sc-icon { font-size: 2rem; line-height: 1; filter: drop-shadow(0 6px 14px var(--glow)); }
.sc-badge { position: absolute; top: 14px; right: 14px; background: #2f9e52; color: #fff;
  font: 800 .7rem Nunito, sans-serif; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; }

.support-free { margin-top: 44px; }
.sf-title { font: 800 clamp(1.4rem, 4vw, 1.9rem) "Baloo 2", sans-serif; margin: 0 0 2px; }
.free-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.free-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  transition: border-color .18s, transform .18s; }
.free-list li:hover { border-color: var(--accent); transform: translateY(-2px); }
.fl-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.free-list div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.free-list b { font-size: .98rem; }
.free-list span { color: var(--muted); font-size: .84rem; }
.free-go { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface2); color: var(--accent); text-decoration: none; font-weight: 800; font-size: 1.1rem;
  transition: background .18s, transform .18s; }
.free-go:hover { background: var(--accent); color: var(--accent-ink); transform: translateX(2px); }

.support-goals { margin-top: 44px; }
.goals { display: grid; gap: 18px; margin-top: 16px; }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 7px; }
.goal-head span { color: var(--text); }
.goal-amount { color: var(--muted); font-weight: 700; font-size: .85rem; margin-left: 8px; }
.goal-pct { color: var(--accent); font: 800 1rem "Baloo 2", sans-serif; }
.goal-track { height: 14px; border-radius: 999px; background: var(--surface2); overflow: hidden; border: 1px solid var(--line); }
.goal-bar { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #9a5bd0);
  box-shadow: 0 0 14px var(--glow); transition: width 1s cubic-bezier(.2,.8,.2,1); }

.support-thanks { margin: 48px 0 8px; text-align: center; display: grid; gap: 8px; place-items: center; }
.support-thanks span { font-size: 2rem; }
.support-thanks p { color: var(--muted); font-weight: 600; max-width: 44ch; margin: 0; }

/* ============ Comunidade (mural) ============ */
/* Botão flutuante "+" para nova publicação */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 85; width: 58px; height: 58px;
  border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(140deg, #9a5bd0, var(--accent)); color: #fff;
  box-shadow: 0 10px 26px var(--glow), 0 4px 10px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .18s ease; }
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px var(--glow), 0 6px 14px rgba(0,0,0,.25); }
.fab:active { transform: scale(.96); }
.fab svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }

/* Compositor dentro do modal */
#postText { width: 100%; border: 1px solid var(--line); border-radius: 14px; resize: vertical;
  background: var(--bg); color: var(--text); padding: 12px 14px; font: 400 1rem Nunito, sans-serif; margin-top: 4px; }
#postText:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.composer-bar { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; flex-wrap: wrap; }
.announce-opt { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.composer-count { color: var(--muted); font-size: .82rem; margin-left: auto; }

.feed { display: grid; gap: 0; }
.feed-more { display: flex; justify-content: center; margin-top: 22px; }

/* Estado sem caixa (vazio / erro) — alinhado com a timeline */
.feed-note { text-align: center; color: var(--muted); padding: 48px 20px; font-weight: 600; }
.feed-note .big { font-size: 2.4rem; display: block; margin-bottom: 10px; }

/* Skeletons de carregamento (sem a caixa antiga) */
.feed-skeleton { display: grid; gap: 0; }
.sk-post { padding: 22px 14px; margin: 0 -14px; border-bottom: 1px solid var(--line); }
.sk-post:last-child { border-bottom: 0; }
.sk-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sk-ava { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; display: grid; gap: 7px; }
.sk-lines i { height: 11px; border-radius: 6px; width: 40%; }
.sk-lines i.short { width: 22%; }
.sk-body { display: block; height: 52px; border-radius: 10px; }
.sk-ava, .sk-lines i, .sk-body {
  background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--text) 9%, var(--surface)) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: skShimmer 1.3s ease-in-out infinite; }
@keyframes skShimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-ava, .sk-lines i, .sk-body { animation: none; } }

/* Publicação — timeline aberto, sem caixas: só uma linha a separar */
.post { position: relative; background: none; border: 0; border-radius: 14px;
  padding: 22px 14px; margin: 0 -14px; border-bottom: 1px solid var(--line);
  transition: background .15s; }
.post:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.post:last-child { border-bottom: 0; }
/* Anúncio: barra de destaque à esquerda + leve tom (sem caixa) */
.post--announce { padding-left: 16px; border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%); }
/* Fixado: pequena marca, sem contorno */
.post--pinned .post-who b::after { content: " 📌"; font-size: .85em; opacity: .7; }
.post-top { display: flex; align-items: flex-start; gap: 12px; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.post-avatar--txt { display: grid; place-items: center; color: #fff; font: 800 1.2rem "Baloo 2", sans-serif;
  background: linear-gradient(140deg, #7b3fa8, var(--accent)); }
.post-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-who b { font-size: 1rem; }
.post-who time { display: block; width: 100%; color: var(--muted); font-size: .8rem; font-weight: 600; }
.who-admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
  font: 800 .72rem Nunito, sans-serif; padding: 2px 9px; border-radius: 999px; }
.post-tag { background: var(--accent); color: var(--accent-ink); font: 800 .72rem Nunito, sans-serif;
  padding: 2px 9px; border-radius: 999px; margin-right: 8px; }
.post-actions { display: flex; gap: 4px; flex-shrink: 0; }
.post-ico { border: 1px solid var(--line); background: var(--bg); color: var(--muted); width: 32px; height: 32px;
  border-radius: 9px; cursor: pointer; font-size: .9rem; line-height: 1; }
.post-ico:hover { border-color: var(--accent); }
.post-del:hover { background: #c2264b; color: #fff; border-color: #c2264b; }
.post-body { margin: 12px 2px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }

.post-react { display: flex; gap: 8px; flex-wrap: wrap; }
.react { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent;
  background: var(--surface2, color-mix(in srgb, var(--text) 6%, var(--surface))); border-radius: 999px;
  padding: 5px 11px; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.react:hover { transform: translateY(-2px); border-color: var(--accent); }
.react.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.react-emo { font-size: 1rem; line-height: 1; }
.react-n { font-weight: 800; font-size: .85rem; color: var(--text); }

.post-ctoggle { margin-top: 12px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer;
  font: 700 .9rem Nunito, sans-serif; padding: 6px 12px; border-radius: 999px; transition: background .15s, color .15s, border-color .15s; }
.post-ctoggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.post-comments { margin-top: 14px; padding: 14px 0 4px 16px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.comments-list { display: grid; gap: 14px; margin-bottom: 14px; }
.comments-list:empty { margin-bottom: 0; }
.comments-empty { color: var(--muted); font-size: .88rem; padding: 2px 0 10px; }
.comment { display: flex; gap: 10px; }
.comment .post-avatar { width: 30px; height: 30px; font-size: .85rem; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-head b { font-size: .9rem; }
.comment-head time { color: var(--muted); font-size: .76rem; font-weight: 600; }
.comment-del { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .85rem; }
.comment-del:hover { color: #c2264b; }
.comment-body { line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 8px; align-items: center; }
.comment-form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--text); padding: 10px 16px; font: 400 .92rem Nunito, sans-serif; transition: border-color .15s, box-shadow .15s; }
.comment-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); background: var(--bg); }
.btn.small { padding: 8px 16px; font-size: .9rem; }

/* ============ Chat (beta) ============ */
.beta-tag { display: inline-block; vertical-align: middle; font: 800 .6em Nunito, sans-serif;
  text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink);
  background: var(--accent); padding: 3px 8px; border-radius: 999px; margin-left: 8px; }

.chat { display: flex; flex-direction: column; height: min(68vh, 620px); margin-top: 6px; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 6px 2px 10px; scroll-behavior: smooth; }
.chat-state, .chat-empty { color: var(--muted); text-align: center; padding: 24px; }
.chat-list { display: grid; gap: 14px; }

.chat-row { display: flex; gap: 10px; align-items: flex-start; }
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chat-avatar--txt { display: grid; place-items: center; color: #fff; font: 800 1rem "Baloo 2", sans-serif;
  background: linear-gradient(140deg, #7b3fa8, var(--accent)); }
.chat-main { flex: 1; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-head b { font-size: .95rem; }
.chat-head time { color: var(--muted); font-size: .76rem; font-weight: 600; }
.chat-del { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .85rem; }
.chat-del:hover { color: #c2264b; }
.chat-text { line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; margin-top: 1px; }

.chat-form { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--text); padding: 11px 16px; font: 400 1rem Nunito, sans-serif; }
.chat-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.chat-msg { min-height: 1em; margin: 6px 2px 0; font-size: .85rem; color: var(--muted); }
.chat-msg.err { color: #c2264b; }

/* ============ Chat (widget flutuante) ============ */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 84; width: 58px; height: 58px;
  border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(140deg, #9a5bd0, var(--accent)); color: #fff;
  box-shadow: 0 10px 26px var(--glow), 0 4px 10px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .18s ease; }
.chat-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px var(--glow), 0 6px 14px rgba(0,0,0,.25); }
.chat-fab.on { transform: scale(.96); }
.chat-fab svg { width: 26px; height: 26px; fill: currentColor; }
.chat-fab.has-unread { animation: chatNudge 1.6s ease-in-out infinite; }
@keyframes chatNudge { 0%, 92%, 100% { transform: none; } 95% { transform: rotate(-9deg); } 98% { transform: rotate(7deg); } }
.chat-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #ff3b6b; color: #fff; font: 800 .72rem Nunito, sans-serif;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
@media (prefers-reduced-motion: reduce) { .chat-fab.has-unread { animation: none; } }

/* Na página da Comunidade existe o "+"; sobe para não colar ao chat */
.chat-page .fab, body .fab { bottom: 88px; }

.chat-panel { position: fixed; right: 20px; bottom: 88px; z-index: 84;
  width: min(360px, calc(100vw - 32px)); height: min(70vh, 540px);
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-3); animation: chatPop .18s ease; }
@keyframes chatPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-panel-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-panel-head b { font: 800 1.05rem "Baloo 2", sans-serif; }
.chat-panel-x { border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
.chat-panel-x:hover { color: var(--text); }
.chat-panel .chat-scroll { flex: 1; overflow-y: auto; padding: 12px 14px; }
.chat-panel .chat-list { display: grid; gap: 14px; }
.chat-panel .chat-form { padding: 10px 12px; border-top: 1px solid var(--line); gap: 8px; }
.chat-panel .chat-form .btn.main { padding: 10px 16px; }
.chat-panel .chat-msg { margin: 0 14px 8px; }
@media (max-width: 480px) {
  .chat-panel { right: 12px; left: 12px; width: auto; bottom: 84px; height: min(66vh, 480px); }
}

/* ============ Mini-Jogos ============ */
/* ===== Mini-Jogos — orbes flutuantes (sem caixas, estilo arcade) ===== */
.games-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 30px 44px; margin-top: 26px; padding: 12px 0 8px; }
.game-card { --gc: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 184px;
  animation: gcBob 4.2s ease-in-out infinite; }
.game-card:nth-child(2) { animation-delay: .5s; }
.game-card:nth-child(3) { animation-delay: 1s; }
.game-card:nth-child(4) { animation-delay: 1.5s; }
@keyframes gcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* O "planeta": orbe colorido com o emoji, brilho 3D e aro tracejado a girar */
.gc-emoji { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  font-size: 3.6rem; line-height: 1;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--gc) 55%, #fff), color-mix(in srgb, var(--gc) 94%, #000));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--gc) 42%, transparent),
              inset 0 -9px 18px rgba(0,0,0,.2), inset 0 9px 16px rgba(255,255,255,.38);
  transition: transform .26s cubic-bezier(.3,1.5,.5,1), box-shadow .26s ease; }
.gc-emoji::before { content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--gc) 45%, transparent); opacity: .55;
  animation: gcSpin 18s linear infinite; }
@keyframes gcSpin { to { transform: rotate(360deg); } }
.game-card:hover .gc-emoji { transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 24px 54px color-mix(in srgb, var(--gc) 60%, transparent),
              inset 0 -9px 18px rgba(0,0,0,.22), inset 0 9px 16px rgba(255,255,255,.42); }

.gc-body { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.gc-title { font: 800 1.3rem "Baloo 2", sans-serif; line-height: 1.1; }
.gc-desc { color: var(--muted); font-size: .84rem; line-height: 1.4; max-width: 20ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* "Jogar" — pílula sticker na cor do jogo */
.gc-play { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 17px; border-radius: 999px;
  font: 800 .85rem Nunito, sans-serif; color: #fff; background: var(--gc);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gc) 38%, transparent);
  transition: transform .2s ease, box-shadow .2s ease; }
.game-card:hover .gc-play { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px color-mix(in srgb, var(--gc) 46%, transparent); }
.gc-arrow { transition: transform .2s ease; }
.game-card:hover .gc-arrow { transform: translateX(3px); }

.game-card[data-key="galo"]     { --gc: #d6469f; }
.game-card[data-key="connect4"] { --gc: #2b6fd6; }
.game-card[data-key="xadrez"]   { --gc: #7b3fa8; }
.game-card[data-key="memoria"]  { --gc: #2f9e78; }

@media (max-width: 560px) { .games-grid { gap: 24px; } .game-card { width: 46%; } .gc-emoji { width: 112px; height: 112px; font-size: 3rem; } }
@media (prefers-reduced-motion: reduce) {
  .game-card { animation: none; }
  .gc-emoji::before { animation: none; }
  .game-card:hover .gc-emoji, .game-card:hover .gc-play, .game-card:hover .gc-arrow { transform: none; }
}

.game-view { margin-top: 6px; }
.game-back { display: inline-block; margin-bottom: 6px; }
.game-title { font: 800 clamp(1.5rem, 5vw, 2.1rem) "Baloo 2", sans-serif; margin: 0 0 14px; text-align: center; }
/* Conteúdo de cada jogo centrado — texto centrado + tabuleiros com margem auto
   (SEM flex align-items:center, que encolhia os contentores e o tabuleiro). */
#gameMount { text-align: center; width: 100%; }
#gameMount .chess-board,
#gameMount .ttt-board,
#gameMount .c4-board,
#gameMount .mem-board { margin-left: auto; margin-right: auto; }
#gameMount .ttt-score,
#gameMount .ttt-controls { justify-content: center; }

/* Segmentos (seletor de modo/dificuldade) */
.ttt-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; background: var(--surface2, color-mix(in srgb, var(--text) 6%, var(--surface)));
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; color: var(--muted); cursor: pointer; font: 700 .88rem Nunito, sans-serif;
  padding: 7px 14px; border-radius: 999px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* Jogo do Galo */
.ttt-status { font-weight: 700; min-height: 1.4em; margin: 4px 0 12px; }
.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(440px, 100%); margin-bottom: 16px; }
.ttt-cell { aspect-ratio: 1; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; font-size: clamp(2rem, 11vw, 3.2rem); line-height: 1;
  transition: background .15s, transform .1s; }
.ttt-cell:not([disabled]):hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ttt-cell[disabled] { cursor: default; }
.ttt-cell.win { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.ttt-cell .m-X { color: var(--accent); }
.ttt-cell .m-O { color: #3aa0ff; }
.ttt-score { display: flex; gap: 18px; margin-bottom: 14px; color: var(--muted); font-weight: 600; }
.ttt-score b { color: var(--text); font-size: 1.1rem; }

/* Connect 4 — tabuleiro 7×6 */
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.2%;
  width: min(560px, 100%); aspect-ratio: 7 / 6; margin-bottom: 16px; padding: 2.2%;
  background: linear-gradient(160deg, #2b6fd6, #1f54a8); border-radius: 16px;
  box-shadow: 0 10px 26px rgba(31, 84, 168, .35); }
.c4-cell { aspect-ratio: 1; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.c4-cell[disabled] { cursor: default; }
.c4-cell .c4-disc { width: 100%; height: 100%; border-radius: 50%;
  background: color-mix(in srgb, #0a2f66 55%, #ffffff 0%); box-shadow: inset 0 3px 6px rgba(0,0,0,.4);
  transition: transform .1s; }
.c4-cell:not([disabled]):hover .c4-disc { transform: scale(.9); box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 55%, transparent); }
.c4-disc.c4-X { background: radial-gradient(circle at 35% 30%, #ff6a6a, #d6263b); box-shadow: inset 0 3px 7px rgba(0,0,0,.35); }
.c4-disc.c4-O { background: radial-gradient(circle at 35% 30%, #ffe27a, #f2c012); box-shadow: inset 0 3px 7px rgba(0,0,0,.35); }
.c4-cell.win .c4-disc { outline: 3px solid #fff; outline-offset: -3px; }

/* Perfil público de membro + leaderboard */
/* Usa a mesma estrutura/CSS do perfil próprio (.profile-hero, .avatar-wrap, …). */
.profile-bio-text { margin: 0; white-space: pre-wrap; color: var(--text); opacity: .9; line-height: 1.5; }

/* ===== Leaderboard de pontos (StreamElements) ===== */
.lb { max-width: 640px; margin: 0 auto; }
.lb-podium-wrap { margin: 6px auto 18px; max-width: 460px; }
.lb-state { text-align: center; color: var(--muted); margin: 10px 0; line-height: 1.5; }
.lb-state.err { color: #c0392b; }

.lb-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.lb-rank { width: 26px; text-align: center; font: 800 1rem "Baloo 2", sans-serif; color: var(--muted); flex-shrink: 0; }
.lb-row .hof-ava { width: 34px; height: 34px; }
.lb-row .hof-ava--txt { font-size: .95rem; }
.lb-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pts { font: 800 .95rem "Baloo 2", sans-serif; color: var(--accent); flex-shrink: 0; }

/* Vê os teus pontos */
.lb-me { margin: 26px 0 10px; padding: 18px 18px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid var(--line); }
.lb-me-title { font: 800 1.1rem "Baloo 2", sans-serif; margin: 0 0 4px; }
.lb-me-hint { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.lb-me-form { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-me-form input { flex: 1; min-width: 180px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.lb-me-form input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
.lb-me-result { margin-top: 12px; }
.lb-me-result.err { color: #c0392b; font-size: .9rem; }
.lb-me-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.lb-me-card .hof-ava { width: 44px; height: 44px; }
.lb-me-info { display: flex; flex-direction: column; min-width: 0; }
.lb-me-info b { font: 800 1rem "Baloo 2", sans-serif; }
.lb-me-info span { color: var(--muted); font-size: .9rem; }

.lb-cta { text-align: center; margin: 18px 0 4px; }

/* Widgets compactos Top Pontos / Top Watchtime (sidebar da Comunidade) */
.se-list { display: grid; gap: 4px; }
.se-list--rest { margin-top: 10px; }

/* Avatar com foto da Twitch (imagem por cima; inicial fica de fallback) */
.se-pic { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent), #7b3fa8); }
.se-pic .se-pic-letter { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font: 800 1.1rem "Baloo 2", sans-serif; }
.se-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hof-gold .se-pic .se-pic-letter { font-size: 1.3rem; }
.se-row .se-ava.se-pic .se-pic-letter { font-size: .85rem; }
.se-row { display: flex; align-items: center; gap: 9px; padding: 5px 4px; }
.se-rank { width: 16px; text-align: center; font: 800 .82rem "Baloo 2", sans-serif; color: var(--muted); flex-shrink: 0; }
.se-row .se-ava { width: 26px; height: 26px; font-size: .8rem; }
.se-name { flex: 1; min-width: 0; font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-val { font: 800 .8rem "Baloo 2", sans-serif; color: var(--accent); flex-shrink: 0; }
.se-more { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.se-more:hover { text-decoration: underline; }

.pub-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pub-stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center;
  box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease; }
.pub-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pub-stat-game { font-weight: 800; margin-bottom: 8px; }
.pub-stat-nums { display: flex; justify-content: center; gap: 10px; font-weight: 800; font-size: 1.05rem; }
.pub-stat-nums .win { color: #16a34a; }
.pub-stat-nums .loss { color: #dc2626; }
.pub-stat-nums .draw { color: var(--muted); }
.pub-stat-rate { color: var(--muted); font-size: .82rem; margin-top: 6px; }

.lb-wrap { max-width: 560px; margin: 0 auto; }
.lb-tabs { display: flex; gap: 8px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.lb-tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--text);
  padding: 9px 16px; border-radius: 999px; font: 700 .9rem Nunito, sans-serif; cursor: pointer; }
.lb-tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lb-list { display: grid; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--shadow-1); transition: transform .16s ease, box-shadow .16s ease; }
.lb-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.lb-rank { font: 800 1.1rem "Baloo 2", sans-serif; width: 36px; text-align: center; color: var(--muted); }
.lb-row.top1 .lb-rank { color: #f2b705; } .lb-row.top2 .lb-rank { color: #9aa7b4; } .lb-row.top3 .lb-rank { color: #cd7f32; }
.lb-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface2); }
.lb-ava.letter { display: grid; place-items: center; font: 800 1.05rem "Baloo 2", sans-serif; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), #9a5bd0); }
.lb-name { flex: 1; font-weight: 700; }
.lb-name a { color: inherit; text-decoration: none; } .lb-name a:hover { text-decoration: underline; }
.lb-wins { font-weight: 800; color: var(--accent); }

/* Nome de utilizador clicável (abre o perfil público) */
.profile-link { color: inherit; text-decoration: none; cursor: pointer; }
.profile-link:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* Jogo da Memória */
.mem-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.mem-top b { color: var(--text); }
.mem-top .btn { margin-left: auto; }
.mem-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(520px, 100%); }
.mem-card { aspect-ratio: 1; border: 0; border-radius: 14px; cursor: pointer; position: relative;
  background: linear-gradient(140deg, #7b3fa8, var(--accent)); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.mem-card .mem-face { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(1.6rem, 9vw, 2.4rem); opacity: 0; transition: opacity .15s; }
.mem-card::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.85); font: 800 1.4rem "Baloo 2", sans-serif; transition: opacity .15s; }
.mem-card.flipped, .mem-card.done { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mem-card.flipped .mem-face, .mem-card.done .mem-face { opacity: 1; }
.mem-card.flipped::after, .mem-card.done::after { opacity: 0; }
.mem-card.done { outline: 2px solid var(--accent); outline-offset: -2px; }
.mem-win { margin-top: 16px; font: 800 1.1rem "Baloo 2", sans-serif; color: var(--accent); }

/* ---- Quiz da Xandi ---- */
.quiz { max-width: 540px; margin: 0 auto; text-align: center; }
.quiz-bar { height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; margin-bottom: 14px; }
.quiz-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8f4fd6)); transition: width .3s ease; }
.quiz-count { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }
.quiz-count b { color: var(--accent); }
.quiz-q { font: 800 1.35rem/1.25 "Baloo 2", sans-serif; margin: 0 0 18px; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left;
  transition: transform .12s ease, border-color .15s ease, background .15s ease; box-shadow: var(--shadow-1); }
.quiz-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { border-color: #2ea06a; background: color-mix(in srgb, #2ea06a 16%, var(--surface)); color: #1c7a4e; }
.quiz-opt.wrong { border-color: var(--error); background: color-mix(in srgb, var(--error) 14%, var(--surface)); color: var(--error); }
.quiz-fb { min-height: 24px; margin: 16px 0 0; font-weight: 800; }
.quiz-fb.ok { color: #1c7a4e; }
.quiz-fb.no { color: var(--error); }
.quiz-next { margin-top: 14px; }
.quiz-result { padding-top: 8px; }
.quiz-score-big { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.quiz-result .quiz-q { color: var(--accent); font-size: 2rem; }
.quiz-result-msg { color: var(--muted); font-weight: 600; margin: 4px 0 20px; }
.quiz-empty { text-align: center; color: var(--muted); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .quiz-opt.right { color: #74e0a6; }
}

/* ---- Páginas legais (privacidade) ---- */
.legal { max-width: 760px; margin: 0 auto; line-height: 1.65; }
.legal h2 { font: 800 1.2rem "Baloo 2", sans-serif; margin: 26px 0 8px; color: var(--accent); }
.legal p, .legal li { color: var(--text); }
.legal ul { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
.legal a { color: var(--accent); font-weight: 700; }
.legal-updated { color: var(--muted); font-size: .9rem; }
.legal-back { margin-top: 28px; }
.foot-legal { margin-top: 6px; font-size: .85rem; }
.foot-legal a { color: var(--muted); }
.foot-legal a:hover { color: var(--accent); }
.profile-legal { text-align: center; margin: 18px 0 0; font-size: .9rem; }
.profile-legal a { color: var(--muted); }

/* ---- Zona de perigo do perfil (eliminar conta) ---- */
.danger-zone { border: 1px solid color-mix(in srgb, var(--error) 40%, var(--line)); border-radius: 16px;
  padding: 18px; background: color-mix(in srgb, var(--error) 5%, var(--surface)); }
.danger-zone .block-title { color: var(--error); }
.danger-zone .btn.danger { background: var(--error); color: #fff; border: 0; }
.danger-zone .btn.danger:hover { filter: brightness(1.05); }

/* ---- Ticker do quiz diário (topo da home, sob o header) ---- */
.quiz-ticker { display: flex; align-items: stretch; width: 100%; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--line); overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  text-align: left; font: inherit; transition: background .15s ease; }
.quiz-ticker:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.quiz-ticker.is-done { opacity: .8; }
.qt-label { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  font: 800 .72rem/1 Nunito, sans-serif; letter-spacing: .1em; color: #fff;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8f4fd6)); }
.qt-track { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.qt-move { position: relative; left: 100%; display: inline-block; white-space: nowrap; will-change: transform;
  animation: quizMarquee 22s linear infinite; }
.quiz-ticker:hover .qt-move { animation-play-state: paused; }
.qt-seg { display: inline-block; padding: 9px 0; font-weight: 700; color: var(--text); }
/* Começa encostado à ponta direita (left:100%, fora do ecrã) e desliza até
   sair por completo à esquerda (largura do próprio texto + largura do ecrã). */
@keyframes quizMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 100vw)); } }
@media (prefers-reduced-motion: reduce) {
  .qt-move { animation: none; }
  .qt-track { overflow-x: auto; }
}

/* ---- Modal do quiz ---- */
body.quiz-open { overflow: hidden; }
.quiz-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 10, 25, .55); backdrop-filter: blur(3px); animation: quizFade .18s ease; }
@keyframes quizFade { from { opacity: 0; } to { opacity: 1; } }
.quiz-modal-box { position: relative; width: 100%; max-width: 480px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px; box-shadow: var(--shadow-3);
  animation: quizPop .22s ease; }
@keyframes quizPop { from { transform: scale(.94); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.quiz-modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--surface2); color: var(--text); font-size: 1rem; cursor: pointer; }
.quiz-modal-x:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface2)); }
.quiz-chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 5px 12px;
  border-radius: 999px; font: 800 .72rem Nunito, sans-serif; letter-spacing: .06em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
@media (prefers-reduced-motion: reduce) { .quiz-modal, .quiz-modal-box { animation: none; } }

/* ---- Jogo do Galo: modo online (lobby + partida) ---- */
.lobby { display: grid; gap: 20px; }
.lobby-sec h3 { font: 800 1.05rem "Baloo 2", sans-serif; margin: 0 0 8px; }
.lobby-list { display: grid; gap: 8px; }
.lobby-search { width: 100%; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font: 400 1rem Nunito, sans-serif; }
.lobby-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.lobby-empty { color: var(--muted); font-size: .9rem; margin: 0; }
.lobby-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.lobby-row:last-child { border-bottom: 0; }
.lobby-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-wait { color: var(--muted); font-size: .85rem; font-weight: 700; }
.gu-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gu-av--txt { display: grid; place-items: center; color: #fff; font: 800 .95rem "Baloo 2", sans-serif;
  background: linear-gradient(140deg, #7b3fa8, var(--accent)); }
.omatch-actions { display: flex; gap: 10px; margin-top: 4px; }

/* ---- Xadrez (tabuleiro online) ---- */
.chess-intro { color: var(--muted); margin: 0 0 14px; }
.chess-intro b { color: var(--text); }
.chess-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: min(600px, 100%); aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  margin-bottom: 16px; user-select: none; }
.cb-sq { border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; position: relative;
  width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 1;
  font-size: clamp(1.4rem, 7vw, 2.4rem); line-height: 1; }
.cb-sq.light { background: #eADFce; }
.cb-sq.dark { background: #b08457; }
:root[data-theme="dark"] .cb-sq.light { background: #c9b79c; }
:root[data-theme="dark"] .cb-sq.dark { background: #7c5a3a; }
.cb-sq .cp { pointer-events: none; paint-order: stroke fill; }
/* Peças com contorno para distinguir claramente brancas de pretas em qualquer casa */
.cp-w { color: #fbfbfb; -webkit-text-stroke: 1.6px #2a2a2a; text-shadow: 0 2px 2px rgba(0,0,0,.35); }
.cp-b { color: #161616; -webkit-text-stroke: 1.4px #000; text-shadow: 0 1px 1px rgba(255,255,255,.28); }
/* Peças douradas do #1 do xadrez (sobrepõe-se à cor normal) */
.cp-gold { color: #ffcf33; -webkit-text-stroke: 1.5px #7a5200; text-shadow: 0 0 6px rgba(255,190,40,.7), 0 2px 2px rgba(0,0,0,.35); }
/* Relógios do xadrez (modo bot) — bot em cima, jogador em baixo do tabuleiro */
.chess-clock-row { display: flex; justify-content: flex-end; width: min(600px, 100%); margin: 0 auto 6px; }
.chess-clock-row + .chess-board { margin-top: 2px; }
.chess-board + .chess-clock-row { margin-top: 8px; }
.chess-clock { font: 800 1.1rem "Baloo 2", sans-serif; padding: 6px 14px; border-radius: 12px;
  background: var(--surface2); color: var(--text); border: 1.5px solid var(--line);
  font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; transition: border-color .15s, box-shadow .15s; }
.chess-clock.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.chess-clock.low { color: #e23b4e; border-color: #e23b4e; }

.cb-sq.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.cb-sq.tgt::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%;
  background: rgba(0,0,0,.28); }
.cb-sq.tgt.cap::after { width: 86%; height: 86%; background: none; border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.3); }
:root[data-theme="dark"] .cb-sq.tgt::after { background: rgba(255,255,255,.3); }
:root[data-theme="dark"] .cb-sq.tgt.cap::after { background: none; box-shadow: inset 0 0 0 4px rgba(255,255,255,.3); }

/* =====================================================================
   POLISH MODERNO (2026-11-10) — melhorias transversais, baixo risco.
   Bloco isolado no fim para fácil revisão/remoção.
   ===================================================================== */

/* 1) Seleção de texto com a cor da marca (em vez do azul do browser) */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
::-moz-selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }

/* 2) Âncoras internas (scroll-cue, #secStats, etc.) não ficam escondidas
      por baixo do header fixo ao saltar */
html { scroll-padding-top: 78px; }

/* 3) Sem o flash cinzento do toque em mobile (Android/iOS) */
a, button, .btn, select, summary, label[for], [role="button"], .tab, .react, .seg button, .pager button {
  -webkit-tap-highlight-color: transparent;
}

/* 4) Autofill do Chrome deixa de pintar a caixa amarela — segue o tema */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  box-shadow: 0 0 0 1000px var(--surface2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

/* 5) Feedback de "pressão" consistente nos botões em pílula/retângulo
      que ainda não o tinham (alinha com a linguagem dos .btn) */
.pager button:active:not(:disabled),
.lb-tabs button:active,
.seg button:active,
.pc-copy:active,
.cf-select:active,
.theme-dot:active,
.feat-opt:active { transform: translateY(1px); }

/* 6) .card genérico ganha a mesma subida subtil no hover que os restantes
      cards do site (partner/support/live), unificando a interação */
.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
@media (prefers-reduced-motion: reduce) {
  .pager button:active, .lb-tabs button:active, .seg button:active,
  .pc-copy:active, .cf-select:active, .theme-dot:active, .feat-opt:active,
  .card:hover { transform: none; }
}

/* =====================================================================
   COMUNIDADE — refinamento de UI (2026-11-10). Overrides no fim para
   vencerem as regras base do mural (.post, .react, …).
   ===================================================================== */

/* Nome do autor acende ao passar o rato */
.post-who .profile-link b { transition: color .15s ease; }
.post-who .profile-link:hover b { color: var(--accent); }

/* Reações estilo Instagram/Facebook: botão "Reagir" + painel flutuante de emojis */
.post-react { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.react-wrap { position: relative; display: inline-flex; }

/* Botão que abre o painel (mostra a tua reação, se já reagiste) */
.react-trigger { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font: 800 .85rem Nunito, sans-serif;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.react-trigger:hover { border-color: var(--accent); color: var(--accent); }
.react-trigger:active { transform: scale(.96); }
.react-trigger.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.react-trigger .react-emo { font-size: 1.06rem; }
.react-trigger .rt-ic { font-size: 1.06rem; filter: saturate(.7); }

/* Painel de opções (abre no hover do conjunto ou com .open no toque) */
.react-pop { position: absolute; top: calc(100% + 9px); bottom: auto; left: 0; z-index: 30;
  display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.9); transform-origin: top left;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,1.3,.4,1), visibility .16s ease; }
.react-wrap:hover .react-pop, .post-react.open .react-pop { opacity: 1; visibility: visible; transform: none; }
.react-pop::after { content: ""; position: absolute; bottom: 100%; left: 22px;
  border: 7px solid transparent; border-bottom-color: var(--surface);
  filter: drop-shadow(0 -1px 0 var(--line)); }
.react-opt { border: 0; background: none; cursor: pointer; padding: 4px 5px; border-radius: 50%;
  line-height: 1; transition: transform .16s cubic-bezier(.3,1.6,.5,1), background .12s ease; }
.react-opt .react-emo { font-size: 1.55rem; display: block; }
.react-opt:hover { transform: scale(1.4) translateY(-3px); }
.react-opt.sel { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Resumo: emojis usados + total */
.react-summary { display: inline-flex; align-items: center; color: var(--muted);
  font-weight: 700; font-size: .9rem; }
.react-summary .rs-emos { font-size: 1rem; letter-spacing: -.22em; margin-right: 8px; }
.react-summary b { color: var(--text); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .react-pop { transition: opacity .16s ease, visibility .16s ease; transform: none; }
  .react-opt:hover, .react-trigger:active { transform: none; }
}

/* Botão de comentários — pílula sempre visível (afirma que é clicável) */
.post-ctoggle { background: var(--surface2); border-color: transparent; }
.post-ctoggle .cc { color: var(--accent); font-weight: 800; }

/* Anúncio — chip "📢 Anúncio" por cima + destaque mais quente */
.post--announce { background: linear-gradient(92deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%); }
.post--announce::before { content: "📢 Anúncio"; display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 6px 2px; font: 800 .68rem Nunito, sans-serif; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); }

/* Linha lateral dos comentários na cor da marca, mais presente */
.post-comments { border-left-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* "Carregar mais" ganha vida ao passar o rato */
.feed-more .btn.ghost { transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.feed-more .btn.ghost:hover { transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 8px 20px var(--glow); }
@media (prefers-reduced-motion: reduce) { .feed-more .btn.ghost:hover { transform: none; } }

/* ---- Timeline estilo X: avatar à esquerda, conteúdo indentado por baixo ---- */
:root { --post-gut: 58px; }  /* avatar 46 + gap 12 */
.feed, .feed-skeleton { gap: 0; }
.post { background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 18px 14px; margin: 0 -14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  transition: background .15s ease; }
.post:hover { transform: none; box-shadow: none;
  background: color-mix(in srgb, var(--accent) 5%, transparent); }
.post:last-child { border-bottom: 0; }
/* Post com painel de reações aberto/em hover sobe acima dos vizinhos
   (senão o popup fica por trás do header do post seguinte) */
.post:hover, .post:focus-within, .post:has(.post-react.open) { z-index: 20; }

/* Avatar um pouco maior, com identidade */
.post-top > .post-avatar { width: 46px; height: 46px; }
.sk-ava { width: 46px; height: 46px; }

/* Cabeçalho: avatar + (nome · tempo) na mesma linha, hierarquia mais clara */
.post-top { align-items: flex-start; gap: 12px; }
.post-who { align-items: center; gap: 7px; row-gap: 2px; }
.post-who .profile-link b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.post-who time { display: inline; width: auto; color: var(--muted); font-weight: 600; }
.post-who time::before { content: "·"; margin-right: 7px; color: var(--muted); font-weight: 700; }

/* Conteúdo alinhado por baixo do nome (recuo = largura do avatar) */
.post-body { margin: 7px 0 12px var(--post-gut); font-size: 1rem; line-height: 1.62; }
.post-react { margin-left: var(--post-gut); }
.post-ctoggle { margin-left: calc(var(--post-gut) - 12px); }
.post-comments { margin-left: var(--post-gut); padding-left: 14px; }

/* Anúncio: sem caixa — só uma barra fina à esquerda + chip, encaixa no timeline */
.post--announce { padding-left: 14px; border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%); }
.post--announce::before { margin-left: var(--post-gut); }

/* Fixado: marca discreta (já tem 📌 no nome), um ténue tom de fundo */
.post--pinned { background: color-mix(in srgb, var(--accent) 3%, transparent); }

/* Skeleton combina com o timeline (sem caixa) */
.sk-post { padding: 18px 14px; margin: 0 -14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: none; border-radius: 0; box-shadow: none; }
.sk-post:last-child { border-bottom: 0; }

@media (max-width: 480px) { :root { --post-gut: 48px; } }

/* =====================================================================
   APOIAR — modernização dos cards (cor por tipo + ícone em tile)
   ===================================================================== */
.support-card { --sc: var(--accent); border-radius: 24px; }
.support-card::before { background: linear-gradient(90deg, var(--sc), color-mix(in srgb, var(--sc) 45%, #9a5bd0)); }
.support-card:hover { border-color: color-mix(in srgb, var(--sc) 55%, var(--line));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--sc) 26%, transparent); }
/* ícone passa de emoji solto para um tile arredondado na cor do tipo */
.support-card .sc-icon { width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 16px; font-size: 1.7rem; filter: none; margin-bottom: 6px;
  background: color-mix(in srgb, var(--sc) 15%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent); }
.support-card h2 { margin-top: 2px; }
/* cor própria por forma de apoio */
.support-card.sc--sub   { --sc: #f0b400; } /* ⭐ subscrição — dourado */
.support-card.sc--prime { --sc: #8f4fd6; } /* 👑 prime — roxo */
.support-card.sc--tip   { --sc: #e0479f; } /* 💝 bits/donativos — rosa */

/* Barra de progresso dos objetivos com brilho a atravessar */
.goal-bar { position: relative; overflow: hidden; }
.goal-bar::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  background-size: 250% 100%; animation: goalSheen 3.5s ease-in-out infinite; }
@keyframes goalSheen { 0% { background-position: 160% 0; } 60%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .goal-bar::after { animation: none; opacity: 0; } }

/* =====================================================================
   AVISO GLOBAL (ligação / servidor) — barra discreta e dispensável
   ===================================================================== */
.site-notice-wrap { position: fixed; left: 0; right: 0; bottom: 14px; z-index: 95;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 14px; pointer-events: none; }
.site-notice { pointer-events: auto; display: flex; align-items: center; gap: 12px;
  max-width: 560px; width: 100%; padding: 11px 14px; border-radius: 14px;
  font-weight: 700; font-size: .92rem; line-height: 1.35;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow-3);
  animation: snIn .22s ease; }
@keyframes snIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.site-notice .sn-msg { flex: 1; min-width: 0; }
.site-notice .sn-x { flex-shrink: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 4px; border-radius: 8px; }
.site-notice .sn-x:hover { color: var(--text); background: var(--surface2); }
/* tipos: aviso (amarelo) e erro (vermelho) — só no acento à esquerda */
.site-notice.sn-warn { border-left: 4px solid #e0a52e; }
.site-notice.sn-error { border-left: 4px solid var(--error); }
@media (prefers-reduced-motion: reduce) { .site-notice { animation: none; } }

/* =====================================================================
   VOTAÇÃO — layout aberto, sem caixas (2026-11-11)
   ===================================================================== */

/* Cabeçalho aberto (sem card): badge em texto, título, semana e stats soltos */
.vote-hero { position: static; overflow: visible; background: none; border: 0; box-shadow: none;
  border-radius: 0; padding: 14px 0 6px; margin: 0 0 8px; text-align: center; }
.vote-hero-glow { display: none; }
.vote-hero::before { display: none; }
.vote-badge { background: none; border: 0; padding: 0; color: var(--accent); letter-spacing: .16em; }
.vote-hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.vote-week { margin: 6px 0 14px; }
.vote-stats { gap: 22px; justify-content: center; }
.vote-pill { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 700; font-size: .92rem; }

/* Candidatura aberta: só o título + o seletor e botão (sem card) */
.cv-nominate { background: none; border: 0; border-radius: 0; padding: 0; margin: 10px 0 30px; }
.cv-nominate h2 { font: 800 1.2rem "Baloo 2", sans-serif; margin: 0 0 4px; }

/* Picker visual: grelha com TODAS as miniaturas (scroll vertical só se forem muitas) */
.clip-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
  margin: 12px 0 4px; padding: 4px 2px; max-height: 470px; overflow-y: auto; }
.clip-picker::-webkit-scrollbar { width: 7px; }
.clip-picker::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; }
.cp-tile { display: flex; flex-direction: column; gap: 6px;
  padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; }
.cp-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
  background: var(--surface2); border: 2px solid var(--line);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-tile:hover .cp-thumb { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cp-title { font-size: .82rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Selecionado: moldura de acento + marca */
.cp-tile.sel .cp-thumb { border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.cp-tile.sel .cp-title { color: var(--accent); }
.cp-tile.sel .cp-thumb::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: .8rem; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
/* Já candidatado (confirmação, só leitura) */
.cp-tile.done { cursor: default; }
.cp-tile.done .cp-thumb { border-color: #2ea06a; box-shadow: 0 0 0 3px color-mix(in srgb, #2ea06a 26%, transparent); }
.cp-check { position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, #0b3d22 45%, transparent); color: #fff; font-size: 1.8rem; font-weight: 800; }
.cv-nominate #nominateBtn { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .cp-tile:hover .cp-thumb { transform: none; } }

/* Secções abertas (sem caixa) */
.clipvote { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 34px; }
.cv-head { margin-bottom: 10px; }

/* Linhas do ranking: abertas, separadas por linha fina (sem molduras) */
.cv-row { background: none !important; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  padding: 12px 4px; }
.cv-row:hover { transform: none; box-shadow: none;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important; border-color: color-mix(in srgb, var(--line) 75%, transparent); }
.cv-rank .cv-row:last-child { border-bottom: 0; }
/* Top 3: destaque só pela medalha (já grande) — sem fundo colorido */
.cv-row.rank-1 .cv-pos { font-size: 1.5rem; }
.cv-votes small { font-weight: 600; font-size: .72rem; color: var(--muted); }
.cv-row .cv-votes { display: inline-flex; align-items: baseline; gap: 4px; }

/* Semana anterior: sem caixa, só os votos dourados */
.cv-last { background: none; border: 0; }

/* Estado vazio aberto (sem o tracejado) */
.cv-empty { border: 0; background: none; padding: 32px 10px; line-height: 1.5; }
.cv-empty-ic { display: block; font-size: 2.2rem; margin-bottom: 8px; }

/* Rótulos das duas zonas (pódio = montra · lista = votação) */
.pod-caption { font: 800 .8rem Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); text-align: center; margin: 2px 0 12px; }
.cv-list-label { font: 800 .8rem Nunito, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }

/* Pódio aberto no topo (sem caixas/pedestais) — Top 3, 1.º ao centro maior */
.vote-podium { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin: 6px 0 26px; }
.pod { flex: 1 1 0; min-width: 0; max-width: 230px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; }
.pod-1 { max-width: 290px; }
.pod-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--line); background: var(--surface2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pod:hover .pod-thumb { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pod-1 .pod-thumb { border-color: color-mix(in srgb, #ffcf33 60%, var(--line));
  box-shadow: 0 8px 24px color-mix(in srgb, #ffcf33 28%, transparent); }
.pod-2 .pod-thumb { border-color: color-mix(in srgb, #c3c7d4 60%, var(--line)); }
.pod-3 .pod-thumb { border-color: color-mix(in srgb, #e0a06a 60%, var(--line)); }
.pod-medal { position: absolute; top: 6px; left: 7px; font-size: 1.5rem; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.pod-1 .pod-medal { font-size: 1.85rem; }
.pod-title { font-weight: 700; font-size: .88rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pod-votes { font-weight: 800; color: var(--accent); font-size: .9rem; }
.pod-votes small { font-weight: 600; font-size: .72rem; color: var(--muted); }
.pod .clip-vote { width: 100%; border-radius: 999px; }

/* Lugar vazio do pódio (aberto, sem pedestal) */
.pod-thumb--empty { display: grid; place-items: center; border-style: dashed;
  border-color: var(--line); background: var(--surface2); box-shadow: none; cursor: default; }
.pod-empty:hover .pod-thumb--empty { transform: none; box-shadow: none; }
.pod-ph { position: absolute; font: 800 2rem "Baloo 2", sans-serif;
  color: color-mix(in srgb, var(--accent) 40%, var(--muted)); opacity: .6; }
.pod-empty .pod-medal { opacity: .45; filter: grayscale(.4) drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.pod-title--empty { color: var(--muted); font-style: italic; font-weight: 600; }
.pod-votes--empty { color: var(--muted); }
.pod-wait { width: 100%; text-align: center; color: var(--muted) !important;
  border-color: var(--line) !important; background: none !important; cursor: default; opacity: .7; font-weight: 700; }

.cv-empty--mini { padding: 14px 10px 4px; font-size: .92rem; }

@media (max-width: 440px) {
  .vote-podium { gap: 8px; }
  .pod-title { font-size: .76rem; }
  .pod-votes { font-size: .8rem; }
  .pod .clip-vote { padding: 7px 8px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .pod:hover .pod-thumb { transform: none; } }

/* =====================================================================
   PASSE MODERNO (2026-11-14) — tipografia, cabeçalhos, inputs, profundidade
   e movimento. Transversal às páginas de secção; não toca em Home/Votação.
   ===================================================================== */

/* 1) Cabeçalhos de página — maiores, mais ar, com assinatura de acento */
.page-head { padding: 44px 0 18px; }
.page-head h1 { font-size: clamp(2.2rem, 6.2vw, 3.3rem); letter-spacing: -.025em; line-height: 1.05; }
.page-head > h1::after {
  content: ""; display: block; width: 54px; height: 4px; border-radius: 999px; margin-top: 14px;
  background: linear-gradient(90deg, var(--accent), #9a5bd0);
  box-shadow: 0 2px 10px var(--glow);
}
.page-head--row > h1::after { margin-bottom: -4px; }
.page-head .sub { font-size: clamp(1rem, 2.3vw, 1.14rem); line-height: 1.55; max-width: 62ch; margin-top: 12px; }

/* 2) Títulos de secção — mesma assinatura de acento */
.sec-head h2 { letter-spacing: -.015em; }

/* 3) Botões mais "premium" — brilho interior + física mais suave */
.btn { transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .16s ease, border-color .16s ease; }
.btn.main { box-shadow: 0 4px 14px var(--glow), inset 0 1px 0 rgba(255,255,255,.28); }
.btn.main:hover { box-shadow: 0 12px 30px var(--glow), inset 0 1px 0 rgba(255,255,255,.34); }

/* 4) Campos de formulário — cantos mais suaves, sensação moderna */
input[type="email"], input[type="password"], input[type="text"],
#addForm textarea, #addForm input[type="text"], #addForm input[type="url"], #postText { border-radius: 16px; }

/* 5) Profundidade + movimento premium nos cards (unifica várias páginas) */
.partner-card, .support-card, .lb-row, .pub-stat-card, .free-list li {
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; }
.partner-card:hover, .pub-stat-card:hover { box-shadow: var(--shadow-3); }

/* 6) Ranking — pódio do Top 3 mais vincado (fundo tonal + aro) */
.lb-row.top1 { background: color-mix(in srgb, #f2b705 10%, var(--surface)); border-color: color-mix(in srgb, #f2b705 42%, var(--line)); }
.lb-row.top2 { background: color-mix(in srgb, #9aa7b4 10%, var(--surface)); border-color: color-mix(in srgb, #9aa7b4 42%, var(--line)); }
.lb-row.top3 { background: color-mix(in srgb, #cd7f32 10%, var(--surface)); border-color: color-mix(in srgb, #cd7f32 42%, var(--line)); }
.lb-row.top1 .lb-rank, .lb-row.top2 .lb-rank, .lb-row.top3 .lb-rank { font-size: 1.3rem; }

/* 7) Grelha de clips — thumbnail com elevação e sombra ao passar o rato */
.clip-item { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.clip-item:hover { transform: translateY(-4px); }
.clip-card:hover .clip-thumb { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

@media (prefers-reduced-motion: reduce) {
  .clip-item, .clip-item:hover { transform: none; }
}

/* =====================================================================
   PARCERIAS — lista aberta, limpa e consistente (sem caixas)
   ===================================================================== */
.partners-grid { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; }
.partner-card { position: relative; display: flex; align-items: center; gap: 28px;
  background: none !important; border: 0; border-radius: 16px; box-shadow: none !important; overflow: visible;
  padding: 26px 14px; margin: 0 -14px; transition: background .15s ease;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  animation: partnerIn .5s cubic-bezier(.2,.8,.2,1) both; }
.partner-card:last-child { border-bottom: 0; }
.partner-card:hover { box-shadow: none !important; background: color-mix(in srgb, var(--accent) 4%, transparent); }
@keyframes partnerIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* entrada escalonada */
.partner-card:nth-child(1) { animation-delay: .04s; }
.partner-card:nth-child(2) { animation-delay: .12s; }
.partner-card:nth-child(3) { animation-delay: .20s; }
.partner-card:nth-child(4) { animation-delay: .28s; }
.partner-card:nth-child(5) { animation-delay: .36s; }
.partner-card:nth-child(n+6) { animation-delay: .44s; }
/* barra de acento que cresce no hover */
.partner-card::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 3px; background: linear-gradient(var(--accent), #9a5bd0);
  transition: height .28s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.partner-card:hover::before { height: 58%; }

/* logo = quadrado arredondado limpo (sem inclinação), leve zoom + brilho no hover */
.partner-banner { position: relative; width: 120px; height: 120px; flex-shrink: 0; border-radius: 22px; overflow: hidden;
  background: var(--surface2); box-shadow: var(--shadow-1); transform: none;
  transition: transform .2s ease; }
.partner-card:hover .partner-banner { transform: scale(1.04); }
.partner-banner img { width: 100%; height: 100%; object-fit: cover; }
/* reflexo a atravessar o logo ao passar o rato */
.partner-banner::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .6s ease; }
.partner-card:hover .partner-banner::after { transform: translateX(130%); }
.partner-banner--contain { background: #0b1020; display: grid; place-items: center; }
.partner-banner--contain img { object-fit: contain; padding: 14px; }

/* corpo aberto, alinhado à esquerda */
.partner-body { flex: 1 1 auto; min-width: 0; padding: 0; background: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.partner-body h3 { font: 800 1.5rem "Baloo 2", sans-serif; letter-spacing: -.01em; }
.partner-desc { font-size: .98rem; line-height: 1.5; max-width: 60ch; color: var(--muted); margin: 0; flex: none; }

/* código = chip simples (copiar incluído) com pulsar subtil para chamar a atenção */
.partner-code { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 999px; padding: 7px 8px 7px 16px;
  animation: codePulse 2.8s ease-in-out infinite; }
@keyframes codePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
}
.partner-code .pc-value { font: 800 1.08rem "Baloo 2", sans-serif; }
.partner-actions { gap: 10px; }

@media (max-width: 680px) {
  .partner-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .partner-banner { width: 100%; height: 160px; }
  .partner-card:hover .partner-banner { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-card { animation: none; opacity: 1; }
  .partner-code { animation: none; }
  .partner-card:hover .partner-banner { transform: none; }
  .partner-banner::after, .partner-card:hover .partner-banner::after { transition: none; transform: translateX(-130%); }
}

/* =====================================================================
   APOIAR O CANAL — redesign aberto (orbes + missões coloridas)
   ===================================================================== */
/* --- Formas de apoio (pagas): orbes flutuantes, sem caixas --- */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; margin-top: 22px; }
.support-card { background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
  overflow: visible; padding: 8px 6px; align-items: center; text-align: center; gap: 10px;
  transform: none !important; transition: none; animation: supIn .5s cubic-bezier(.2,.8,.2,1) both; }
.support-card::before { display: none !important; } /* tira a barra de topo */
.support-card:hover { transform: none !important; box-shadow: none !important; border: 0 !important; }
.support-card:nth-child(1) { animation-delay: .05s; }
.support-card:nth-child(2) { animation-delay: .14s; }
.support-card:nth-child(3) { animation-delay: .23s; }
@keyframes supIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* badge "Grátis" deixa de ser absoluto → pílula centrada no topo */
.support-card .sc-badge { position: static; align-self: center; margin: 0 0 2px; }

/* ícone = orbe 3D na cor do tipo, a flutuar */
.support-card .sc-icon { width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.7rem; line-height: 1; margin-bottom: 6px; filter: none;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--sc) 50%, #fff), color-mix(in srgb, var(--sc) 90%, #000));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--sc) 40%, transparent),
              inset 0 -7px 14px rgba(0,0,0,.2), inset 0 7px 12px rgba(255,255,255,.35);
  animation: supBob 4.2s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.support-card:nth-child(2) .sc-icon { animation-delay: .6s; }
.support-card:nth-child(3) .sc-icon { animation-delay: 1.2s; }
@keyframes supBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.support-card:hover .sc-icon { transform: translateY(-5px) scale(1.06); }
.support-card h2 { font: 800 1.35rem "Baloo 2", sans-serif; }
.support-card p { color: var(--muted); max-width: 32ch; margin: 0 auto; flex: none; }
.support-card .btn { margin-top: 8px; }

/* --- Formas grátis: lista aberta colorida (estilo "missões") --- */
.free-list { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
.free-list li { --fc: var(--accent); background: none !important; border: 0 !important; border-radius: 12px;
  padding: 16px 12px; margin: 0 -12px; gap: 16px; transform: none !important; transition: background .15s ease;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.free-list li:last-child { border-bottom: 0; }
.free-list li:hover { transform: none !important; border: 0 !important; background: color-mix(in srgb, var(--fc) 5%, transparent); }
.free-list li:nth-child(1) { --fc: #9146ff; } /* Twitch */
.free-list li:nth-child(2) { --fc: #e0479f; } /* seguir */
.free-list li:nth-child(3) { --fc: #00b8d4; } /* clips/TikTok */
.free-list li:nth-child(4) { --fc: #5865f2; } /* Discord */
.free-list .fl-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--fc) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 28%, transparent);
  transition: transform .2s ease; }
.free-list li:hover .fl-icon { transform: scale(1.08) rotate(-5deg); }
.free-list b { font-size: 1.02rem; }
.free-list .free-go { background: color-mix(in srgb, var(--fc) 12%, var(--surface)); color: var(--fc);
  transition: background .18s ease, color .18s ease, transform .18s ease; }
.free-list li:hover .free-go { background: var(--fc); color: #fff; transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .support-card, .support-card .sc-icon { animation: none; }
  .support-card .sc-icon { transform: none; }
  .support-card:hover .sc-icon, .free-list li:hover .fl-icon, .free-list li:hover .free-go { transform: none; }
}

/* =====================================================================
   COMUNIDADE — estilo "conversa": corpo do post num balão de fala
   ===================================================================== */
/* o corpo vira um balão com bico a apontar ao autor */
.post-body { position: relative; width: fit-content; max-width: 100%;
  background: var(--surface2); color: var(--text);
  border-radius: 5px 18px 18px 18px; padding: 12px 16px;
  margin: 9px 0 12px var(--post-gut); line-height: 1.55; }
.post-body::before { content: ""; position: absolute; top: -5px; left: 16px; width: 13px; height: 13px;
  background: inherit; border-radius: 3px; transform: rotate(45deg); }

/* anúncio: balão na cor da marca (acompanha o bico) */
.post--announce .post-body { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
/* os meus próprios posts: balão de acento mais vivo */
.post--mine .post-body { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }

/* avatar com um anel subtil (sem o "fio") */
.post-top > .post-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* entrada suave dos posts */
.post { animation: postIn .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes postIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.post:nth-child(1) { animation-delay: .03s; }
.post:nth-child(2) { animation-delay: .09s; }
.post:nth-child(3) { animation-delay: .15s; }
.post:nth-child(4) { animation-delay: .21s; }
.post:nth-child(5) { animation-delay: .27s; }
.post:nth-child(n+6) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) { .post { animation: none; opacity: 1; } }

/* =====================================================================
   COMUNIDADE v2 — mural (masonry) + hero com mascote + sidebar
   ===================================================================== */
.community .cm-hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0 6px; }
.cm-badge { display: inline-flex; align-items: center; gap: 7px; font: 800 .74rem Nunito, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 6px 14px; }
.cm-title { font: 800 clamp(2.6rem, 8vw, 4.6rem) "Baloo 2", sans-serif; line-height: 1; letter-spacing: -.03em; margin: 14px 0 6px;
  background: linear-gradient(100deg, var(--text) 32%, var(--accent) 76%, #9a5bd0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cm-sub { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.18rem); margin: 0; }

.cm-mascot { position: relative; flex-shrink: 0; display: none; }
@media (min-width: 760px) { .cm-mascot { display: block; width: 240px; height: 190px; } }
.cm-orb { position: absolute; right: 8px; bottom: 0; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 62%),
              radial-gradient(circle at 64% 66%, color-mix(in srgb, #7b3fa8 44%, transparent), transparent 64%);
  box-shadow: 0 0 70px color-mix(in srgb, var(--accent) 40%, transparent); animation: cmFloat 5s ease-in-out infinite; }
.cm-orb .bunny { width: 54%; height: auto; filter: drop-shadow(0 0 14px var(--glow)); }
@keyframes cmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.cm-bubble { position: absolute; left: 0; top: 2px; z-index: 1; background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: 800 .95rem "Baloo 2", sans-serif; padding: 10px 15px; border-radius: 16px 16px 16px 5px; box-shadow: var(--shadow-2);
  animation: cmFloat 5s ease-in-out infinite .3s; }

.cm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.cm-tab { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px;
  padding: 9px 16px; font: 800 .9rem Nunito, sans-serif; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.cm-tab:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cm-tab.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }

.cm-composer { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 22px;
  box-shadow: var(--shadow-1); transition: border-color .15s ease, box-shadow .15s ease; }
.cm-composer:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-2); }
.cm-composer-ava { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
  background: linear-gradient(140deg, #7b3fa8, var(--accent)); }
.cm-composer-ph { color: var(--muted); font-weight: 600; }
.cm-composer-acts { display: flex; gap: 16px; margin-left: 8px; color: var(--muted); font-weight: 700; font-size: .88rem; }
.cm-composer-send { margin-left: auto; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
  color: #fff; font: 800 .95rem Nunito, sans-serif; padding: 10px 22px; border-radius: 999px; box-shadow: 0 6px 16px var(--glow); flex-shrink: 0; }
@media (max-width: 680px) { .cm-composer-acts { display: none; } }

.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .cm-layout { grid-template-columns: 1fr; } }

/* mural masonry */
.cm-main .feed { column-count: 2; column-gap: 18px; display: block; gap: 0; }
@media (max-width: 760px) { .cm-main .feed { column-count: 1; } }
.cm-main .feed .post { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-1);
  padding: 16px 16px 14px; animation: postIn .4s cubic-bezier(.2,.8,.2,1) both; }
.cm-main .feed .post:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: var(--shadow-2); }
/* corpo normal dentro do card (sem balão/fio/indent) */
.cm-main .post-body { background: none !important; width: auto; max-width: none; margin: 10px 2px; padding: 0; border-radius: 0; }
.cm-main .post-body::before { display: none !important; }
.cm-main .post-top > .post-avatar { box-shadow: none; }
.cm-main .post-body, .cm-main .post-react, .cm-main .post-ctoggle, .cm-main .post-comments { margin-left: 0; }
.cm-main .post--announce { border-left: 3px solid var(--accent); }

/* sidebar */
.cm-side { display: grid; gap: 18px; position: sticky; top: 84px; }
@media (max-width: 960px) { .cm-side { position: static; } }
.cm-widget { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; box-shadow: var(--shadow-1); }
.cm-widget-title { font: 800 1rem "Baloo 2", sans-serif; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.cm-widget-empty { color: var(--muted); font-size: .88rem; margin: 4px 0; }

/* ===== Hall of Fame (sidebar da Comunidade) ===== */
.cm-widget--hof { background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--surface); }
.hof-sub { color: var(--muted); font-size: .8rem; margin: -6px 0 14px; }
/* Pódio a sério: degraus de alturas diferentes, foto+nome por cima (sem caixa) */
.hof-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; margin-bottom: 16px; }
.hof-place { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-decoration: none; color: inherit; min-width: 0; }
.hof-place--empty { pointer-events: none; }
.hof-place--empty .hof-step { opacity: .35; }

/* bloco foto + nome, sem fundo/caixa */
.hof-top { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
  padding: 0 2px 6px; transition: transform .18s; }
.hof-place:hover .hof-top { transform: translateY(-3px); }
.hof-medal { font-size: 1.2rem; line-height: 1; }
.hof-gold .hof-medal { font-size: 1.5rem; filter: drop-shadow(0 2px 7px rgba(255,190,40,.65)); }
.hof-ava { width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.hof-gold .hof-ava { width: 54px; height: 54px; border-color: #ffd34d; box-shadow: 0 0 0 2px #ffd34d, 0 4px 14px rgba(255,190,40,.4); }
.hof-silver .hof-ava { width: 46px; height: 46px; border-color: #d7dde6; }
.hof-bronze .hof-ava { border-color: #e0a876; }
.hof-ava--txt { display: grid; place-items: center; font: 800 1.1rem "Baloo 2", sans-serif; color: #fff;
  background: linear-gradient(135deg, var(--accent), #7b3fa8); }
.hof-name { font: 800 .8rem "Baloo 2", sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-score { font-size: .7rem; font-weight: 800; color: var(--accent); }

/* degraus metálicos */
.hof-step { position: relative; width: 100%; border-radius: 8px 8px 0 0; overflow: hidden;
  display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.18); }
.hof-step::after { /* brilho diagonal metálico */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%); }
.hof-rank { position: relative; z-index: 1; font: 900 1.3rem "Baloo 2", sans-serif;
  color: rgba(0,0,0,.32); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.hof-gold   .hof-step { height: 70px; background: linear-gradient(180deg, #ffe487, #f3bf3a 55%, #d99a1b); }
.hof-silver .hof-step { height: 50px; background: linear-gradient(180deg, #f6f8fb, #ccd3dd 55%, #a7afbb); }
.hof-bronze .hof-step { height: 36px; background: linear-gradient(180deg, #f2c591, #cd8a4e 55%, #a4642d); }
.hof-gold .hof-step { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 16px rgba(240,180,40,.45); }
@media (prefers-reduced-motion: no-preference) {
  .hof-gold .hof-step::after { background-size: 220% 100%; animation: hofShine 3.4s ease-in-out infinite; }
}
@keyframes hofShine { 0%, 100% { background-position: 160% 0; } 50% { background-position: -60% 0; } }

.hof-list { list-style: none; counter-reset: hof 3; margin: 0; padding: 0; display: grid; gap: 6px; }
.hof-list li { counter-increment: hof; }
.hof-list a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  padding: 7px 10px; border-radius: 12px; transition: background .15s; }
.hof-list a:hover { background: var(--surface2); }
.hof-list a::before { content: counter(hof); font-weight: 800; color: var(--muted); font-size: .82rem; width: 16px; text-align: center; flex-shrink: 0; }
.hof-list .hof-ava { width: 28px; height: 28px; }
.hof-list .hof-ava--txt { font-size: .85rem; }
.hof-ln { flex: 1; min-width: 0; font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-lp { font-size: .78rem; font-weight: 800; color: var(--accent); }
.cm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-tag { background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: .82rem; cursor: pointer; transition: background .15s ease; }
.cm-tag:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface2)); }
.cm-tag.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 12px var(--glow); }

/* =====================================================================
   PERFIL — capa: só foto (com badge na foto) + nome
   ===================================================================== */
.profile-page .profile-hero { position: relative; height: auto; min-height: 180px; margin-bottom: 30px;
  border-radius: 26px; overflow: visible; display: flex; align-items: center; justify-content: flex-start; padding: 28px; }
.profile-page .profile-hero-bg { border-radius: 26px; }
.ph-main { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; color: #fff; }

/* Tag do utilizador — ao centro da capa, cor consoante o tema do perfil */
.ph-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font: 900 clamp(1.5rem, 3.4vw, 2.6rem) "Baloo 2", sans-serif; letter-spacing: .005em; line-height: 1.05;
  color: #fff; background: none; border: 0; box-shadow: none; padding: 0;
  max-width: 54%; white-space: nowrap; overflow: visible;
  text-shadow: 0 2px 14px color-mix(in srgb, var(--pa, var(--accent)) 60%, rgba(0,0,0,.5)),
               0 0 30px color-mix(in srgb, var(--pa2, #7b3fa8) 45%, transparent),
               0 1px 2px rgba(0,0,0,.45);
  animation: phTagGlow 3.6s ease-in-out infinite; }
@keyframes phTagGlow {
  0%,100% { text-shadow: 0 2px 14px color-mix(in srgb, var(--pa, var(--accent)) 60%, rgba(0,0,0,.5)), 0 0 24px color-mix(in srgb, var(--pa2, #7b3fa8) 40%, transparent), 0 1px 2px rgba(0,0,0,.45); }
  50% { text-shadow: 0 2px 16px color-mix(in srgb, var(--pa, var(--accent)) 72%, rgba(0,0,0,.5)), 0 0 42px color-mix(in srgb, var(--pa2, #7b3fa8) 60%, transparent), 0 1px 2px rgba(0,0,0,.45); }
}
@media (max-width: 760px) {
  .profile-page .profile-hero { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .ph-tag { position: static; transform: none; margin-top: 0; max-width: none; font-size: clamp(1.4rem, 7vw, 2rem); }
}
/* avatar com o badge destacado na foto (position:relative para o badge ficar na foto) */
.profile-page .profile-hero .avatar-wrap { position: relative; transform: none; left: auto; bottom: auto;
  width: 120px; height: 120px; flex-shrink: 0; border: 4px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 5px color-mix(in srgb, var(--pa, var(--accent)) 38%, transparent); }
.ph-id { min-width: 0; }
.profile-page .ph-id .profile-name { color: #fff !important; -webkit-text-fill-color: #fff; background: none;
  font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.02em; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); margin: 0; }
@media (max-width: 560px) { .ph-main { flex-direction: column; text-align: center; } }
.profile-page[data-ptheme="streamer"] .profile-hero::after { display: none; }

/* chips (função + tag) na coluna "Sobre mim" */
.pf-chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pf-chips2 .role-chip { background: var(--surface2); color: var(--muted); }
.pf-chips2 .profile-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 13px;
  font: 800 .78rem Nunito, sans-serif; color: #4a2c00; border: 0;
  background: linear-gradient(135deg, #ffd678, #ffaa3c); box-shadow: 0 3px 10px rgba(0,0,0,.18); }

/* ===== PERFIL — grelha de 3 colunas (mockup) ===== */
.wrap.profile-page { max-width: 1240px; }
.pf-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: 1fr; } }
/* perfil público (membro): 2 colunas */
.pf-grid--public { grid-template-columns: 320px minmax(0, 1fr); max-width: 940px; margin: 0 auto; }
@media (max-width: 820px) { .pf-grid--public { grid-template-columns: 1fr; } }
.pf-col { display: grid; gap: 20px; min-width: 0; }
.pf-left, .pf-right { position: sticky; top: 84px; }
@media (max-width: 1100px) { .pf-left, .pf-right { position: static; } }

.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 16px; box-shadow: var(--shadow-1); }
.pf-card-title { font: 800 1rem "Baloo 2", sans-serif; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.pf-about { color: var(--muted); line-height: 1.55; margin: 0 0 10px; white-space: pre-wrap; word-wrap: break-word; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 10px; }

/* Conquistas (ganhas com atividade) */
.pf-achievements { display: grid; gap: 10px; }
.ach { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--pa, var(--accent)) 7%, var(--surface)); border: 1px solid var(--line); }
.ach-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--pa, var(--accent)) 40%, transparent)); }
.ach-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ach-txt b { font: 800 .92rem "Baloo 2", sans-serif; }
.ach-txt small { color: var(--muted); font-size: .76rem; }
.ach--locked { opacity: .62; filter: grayscale(.5); }
.ach--locked .ach-ico { filter: grayscale(1) opacity(.8); }
.ach-bar { height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin-top: 5px; }
.ach-bar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--pa, var(--accent)), var(--pa2, #7b3fa8)); }
.ach-prog { color: var(--muted); font-size: .72rem; font-weight: 700; margin-top: 3px; }
.pf-thanks { display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.pf-thanks-emoji { font-size: 2rem; line-height: 1; }
.pf-thanks b { display: block; }
.pf-thanks span { color: var(--muted); font-size: .88rem; }

/* coluna central: as definições em cards */
.pf-center .profile-form { display: grid; gap: 20px; }
.pf-center .profile-block { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow-1); }
.pf-center .profile-save { margin-top: 2px; }
.pf-center .profile-legal { text-align: center; margin-top: 16px; }
.cm-top-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.cm-top-rank { width: 20px; font: 800 1rem "Baloo 2", sans-serif; color: var(--muted); text-align: center; }
.cm-top-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface2); flex-shrink: 0; }
.cm-top-name { flex: 1; font-weight: 700; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-top-pts { font-weight: 800; color: var(--accent); font-size: .85rem; }
.cm-act-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.cm-act-row:last-child { border-bottom: 0; }
.cm-act-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: linear-gradient(140deg, #7b3fa8, var(--accent)); }
.cm-act-text { font-size: .84rem; color: var(--muted); line-height: 1.35; min-width: 0; }
.cm-act-text b { color: var(--text); }

@media (prefers-reduced-motion: reduce) { .cm-orb, .cm-bubble { animation: none; } }

/* ===== Comunidade — toque mágico (brilhos, orbita, glows, elevação) ===== */
.cm-hero-main, .cm-mascot { position: relative; z-index: 1; }

/* brilhos a cintilar à volta do hero */
.cm-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cm-sparkles span { position: absolute; font-size: clamp(.9rem, 2vw, 1.5rem); opacity: .5;
  filter: drop-shadow(0 0 8px var(--glow)); animation: cmTwinkle ease-in-out infinite; }
.cm-sparkles span:nth-child(1) { left: 16%; top: 14%; animation-duration: 6s; }
.cm-sparkles span:nth-child(2) { left: 50%; top: 6%; animation-duration: 7s; animation-delay: .6s; }
.cm-sparkles span:nth-child(3) { left: 42%; top: 70%; animation-duration: 8s; animation-delay: 1.2s; }
.cm-sparkles span:nth-child(4) { left: 64%; top: 56%; animation-duration: 6.5s; animation-delay: .3s; }
.cm-sparkles span:nth-child(5) { left: 7%; top: 58%; animation-duration: 9s; animation-delay: .9s; }
.cm-sparkles span:nth-child(6) { left: 28%; top: 34%; animation-duration: 7.5s; animation-delay: 1.5s; }
@keyframes cmTwinkle { 0%, 100% { transform: translateY(0) scale(1); opacity: .32; } 50% { transform: translateY(-10px) scale(1.2); opacity: .85; } }

/* corações a orbitar a mascote + orbe a pulsar */
.cm-orb { animation: cmFloat 5s ease-in-out infinite, cmOrbGlow 4.5s ease-in-out infinite; }
@keyframes cmOrbGlow { 0%, 100% { box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 34%, transparent); } 50% { box-shadow: 0 0 105px color-mix(in srgb, var(--accent) 55%, transparent); } }
.cm-orbit { position: absolute; z-index: 2; font-size: 1.15rem; filter: drop-shadow(0 0 6px var(--glow)); }
.cm-orbit-1 { top: -4px; right: 12px; animation: cmOrbit1 5s ease-in-out infinite; }
.cm-orbit-2 { bottom: 6px; left: -4px; animation: cmOrbit2 6s ease-in-out infinite; }
@keyframes cmOrbit1 { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-9px) rotate(8deg); } }
@keyframes cmOrbit2 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(8px) scale(1.12); } }

/* badge com pulsar subtil */
.cm-badge { animation: cmBadge 3.2s ease-in-out infinite; }
@keyframes cmBadge { 0%, 100% { box-shadow: 0 0 0 0 var(--glow); } 50% { box-shadow: 0 4px 16px var(--glow); } }

/* tab ativa com glow · composer com anel ao focar/hover */
.cm-tab.on { box-shadow: 0 6px 18px var(--glow); }
.cm-composer:hover, .cm-composer:focus-within { box-shadow: 0 0 0 3px var(--glow), var(--shadow-2); }

/* cards do mural: elevação no hover + brilho nos fixados/anúncios */
.cm-main .feed .post { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease; }
.cm-main .feed .post:hover { transform: translateY(-4px); }
.cm-main .post--pinned { border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-1); }
.cm-main .post--announce { box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-1); }

/* widgets com friso de acento no topo */
.cm-widget { position: relative; overflow: hidden; }
.cm-widget::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #9a5bd0); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .cm-sparkles span, .cm-orbit, .cm-badge { animation: none; }
  .cm-orb { animation: none; }
  .cm-main .feed .post:hover { transform: none; }
}

/* ===== Comunidade — mascote engraçada + posts como POST-ITS ===== */
.cm-mascot-face { font-size: 4.8rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  animation: cmWiggle 3s ease-in-out infinite; }
@keyframes cmWiggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) scale(1.06); } }

/* post-its: papel colorido, cantos menos redondos, fita-cola e inclinação */
.cm-main .feed .post { border: 0; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.14);
  padding: 18px 16px 14px; animation: cmFadeIn .4s ease both; }
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* fita-cola no topo da nota */
.cm-main .feed .post::after { content: ""; position: absolute; top: -9px; left: 50%; width: 62px; height: 20px;
  transform: translateX(-50%) rotate(-4deg); border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 22%, #fff); opacity: .55; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* inclinações alternadas (endireita + sobe no hover) */
.cm-main .feed .post:nth-child(3n+1) { transform: rotate(-1.3deg); }
.cm-main .feed .post:nth-child(3n+2) { transform: rotate(1deg); }
.cm-main .feed .post:nth-child(3n)   { transform: rotate(-.4deg); }
.cm-main .feed .post:hover { transform: rotate(0deg) translateY(-5px) scale(1.02); box-shadow: 0 18px 36px rgba(0,0,0,.2); }
/* cores de papel por nota (tom subtil, legível em claro e escuro) */
.cm-main .feed .post:nth-child(5n+1) { background: color-mix(in srgb, #ffd94d 12%, var(--surface)); }
.cm-main .feed .post:nth-child(5n+2) { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.cm-main .feed .post:nth-child(5n+3) { background: color-mix(in srgb, #3ad2ff 11%, var(--surface)); }
.cm-main .feed .post:nth-child(5n+4) { background: color-mix(in srgb, #7bd88a 12%, var(--surface)); }
.cm-main .feed .post:nth-child(5n)   { background: color-mix(in srgb, #ff9ecb 12%, var(--surface)); }

@media (prefers-reduced-motion: reduce) {
  .cm-mascot-face { animation: none; }
  .cm-main .feed .post:nth-child(3n+1), .cm-main .feed .post:nth-child(3n+2), .cm-main .feed .post:nth-child(3n) { transform: none; }
}

/* ===== Comunidade — POST-ITS realistas (papel claro + letra manuscrita) ===== */
/* papel claro fixo (nota em qualquer tema), texto escuro, curl no fundo */
.cm-main .feed .post { display: flex; flex-direction: column; color: #2f2838; border: 0; border-radius: 6px;
  padding: 20px 18px 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 -22px 26px -22px rgba(0,0,0,.13); }
.cm-main .feed .post:nth-child(5n+1) { background: #fff3c4; }
.cm-main .feed .post:nth-child(5n+2) { background: #ffd9ea; }
.cm-main .feed .post:nth-child(5n+3) { background: #d6eeff; }
.cm-main .feed .post:nth-child(5n+4) { background: #d8f3dc; }
.cm-main .feed .post:nth-child(5n)   { background: #e9ddff; }

/* fita-cola translúcida (mais real) */
.cm-main .feed .post::after { content: ""; position: absolute; top: -8px; left: 50%; width: 72px; height: 22px;
  transform: translateX(-50%) rotate(-3deg); border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(215,215,215,.35));
  border: 1px solid rgba(255,255,255,.4); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* texto da nota em cima, grande e manuscrito */
.cm-main .post-body { order: 1; margin: 0; font-family: "Caveat", "Baloo 2", cursive; font-weight: 600;
  font-size: 1.55rem; line-height: 1.25; color: #2f2838; }
/* header desaparece — autor vira ASSINATURA em baixo */
.cm-main .post-top { order: 2; display: block; margin: 12px 0 0; }
.cm-main .post-react { order: 3; margin-top: 10px; }
.cm-main .post-ctoggle { order: 4; }
.cm-main .post-comments { order: 5; }
.cm-main .post-top > .post-avatar { display: none; }
.cm-main .post-who { display: inline; align-items: baseline; font-family: "Caveat", cursive; }
.cm-main .post-who::before { content: "— "; color: rgba(0,0,0,.45); }
.cm-main .post-who .profile-link b { font-weight: 700; color: rgba(0,0,0,.6); font-size: 1.2rem; }
.cm-main .post-who time { color: rgba(0,0,0,.42); font-family: Nunito, sans-serif; font-size: .76rem; }
.cm-main .post-who time::before { content: "·"; margin: 0 5px; }
.cm-main .post--announce::before { margin-left: 0; }

/* ações (apagar/fixar) discretas no canto, só no hover */
.cm-main .post-actions { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s ease; }
.cm-main .feed .post:hover .post-actions { opacity: .8; }
.cm-main .post-ico { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.12); color: #4a4255; }

/* reações/comentários legíveis sobre o papel claro */
.cm-main .react-trigger, .cm-main .post-ctoggle { background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important; color: #463d53 !important; }
.cm-main .post-ctoggle .cc { color: #8a2f6e; }
.cm-main .react-summary, .cm-main .react-summary b { color: #463d53; }
.cm-main .post-comments { border-left-color: rgba(0,0,0,.15); }
.cm-main .comment-body, .cm-main .comment-head b { color: #2f2838; }
.cm-main .comment-head time { color: rgba(0,0,0,.45); }
.cm-main .comment-form input { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.12); color: #2f2838; }

/* ===== Comunidade — post-it v2: PIN + assinatura limpa + comentários em mini-notas ===== */
/* PIN (em vez da fita-cola) */
.cm-main .feed .post::after { content: ""; top: -7px; left: 50%; width: 17px; height: 17px; border-radius: 50%;
  transform: translateX(-50%); border: 0;
  background: radial-gradient(circle at 36% 30%, #ff9a9a, #d93a4e 70%);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.5); }
.cm-main .feed .post::after { width: 17px; height: 17px; }

/* Assinatura limpa: só "— nome · hora" (sem badge/barra preta) */
.cm-main .post-who .badge, .cm-main .post-who .badge-tip { display: none !important; }
.cm-main .post-top { background: none !important; }
.cm-main .post-who, .cm-main .post-who .profile-link, .cm-main .post-who b { background: none !important; color: rgba(0,0,0,.6) !important; }
.cm-main .post-who time { color: rgba(0,0,0,.42) !important; }

/* Comentários = mini post-its que surgem animados por baixo */
.cm-main .post-comments { border-left: 0; padding: 4px 0 0; margin-top: 4px; }
.cm-main .comments-list { display: grid; gap: 12px; margin-top: 4px; }
.cm-main .comment { position: relative; display: block; background: #fffdf3; border-radius: 4px;
  padding: 10px 12px 10px 14px; box-shadow: 0 5px 12px rgba(0,0,0,.15);
  transform: rotate(-1.2deg); transform-origin: top center; animation: cmNoteIn .4s cubic-bezier(.2,.9,.3,1) both; }
.cm-main .comment:nth-child(2n) { transform: rotate(1.2deg); background: #fdf6ff; }
.cm-main .comment:nth-child(3n) { transform: rotate(-.5deg); background: #f3fbff; }
.cm-main .comment:nth-child(1) { animation-delay: .03s; }
.cm-main .comment:nth-child(2) { animation-delay: .10s; }
.cm-main .comment:nth-child(3) { animation-delay: .17s; }
.cm-main .comment:nth-child(n+4) { animation-delay: .22s; }
@keyframes cmNoteIn { from { opacity: 0; transform: translateY(-12px) rotate(0deg) scale(.95); } to { opacity: 1; } }
/* mini pin azul em cada nota de comentário */
.cm-main .comment::before { content: ""; position: absolute; top: -5px; left: 16px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #8fc3ff, #2b6fd6 70%); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cm-main .comment > .post-avatar { display: none; }
.cm-main .comment-main { flex: 1; }
.cm-main .comment-head b { color: rgba(0,0,0,.6); font-family: "Caveat", cursive; font-size: 1.05rem; }
.cm-main .comment-head time { color: rgba(0,0,0,.4); }
.cm-main .comment-body { font-family: "Caveat", "Baloo 2", cursive; font-size: 1.18rem; line-height: 1.25; color: #2f2838; margin-top: 2px; }
.cm-main .comment-del { color: rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) { .cm-main .comment { animation: none; transform: none; } }

/* ===== Comunidade — STACK de post-its + folhear comentários ===== */
/* quando há comentários, espreitam "folhas" de papel por baixo do post */
.cm-main .feed .post.has-comments {
  box-shadow:
    0 10px 22px rgba(0,0,0,.15),
    7px 11px 0 -2px color-mix(in srgb, var(--surface) 88%, #c9b8d6),
    7px 12px 3px -2px rgba(0,0,0,.12),
    14px 20px 0 -6px color-mix(in srgb, var(--surface) 82%, #c9b8d6),
    14px 21px 3px -5px rgba(0,0,0,.1),
    inset 0 -22px 26px -22px rgba(0,0,0,.13); }

/* comentários: só UM visível de cada vez (folheável) */
.cm-main .comments-list { display: block; gap: 0; }
.cm-main .comments-list .comment { display: none; }
.cm-main .comments-list .comment.is-active { display: block; animation: cmNoteIn .38s cubic-bezier(.2,.9,.3,1) both; }

/* navegador ‹ i/N › */
.cm-cnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.cm-cbtn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.7); color: #4a4255; font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, transform .1s ease; }
.cm-cbtn:hover { background: #fff; border-color: rgba(0,0,0,.25); }
.cm-cbtn:active { transform: scale(.9); }
.cm-ccount { font: 800 .82rem Nunito, sans-serif; color: rgba(0,0,0,.5); min-width: 46px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cm-main .comments-list .comment.is-active { animation: none; }
}

/* ===== Comunidade — comentários numa NOTA SEPARADA por baixo (folheável) ===== */
/* o bloco de comentários é a "folha de baixo" — papel próprio, pin, inclinado */
.cm-main .post-comments { position: relative; z-index: 1;
  margin: 20px -8px 2px; padding: 16px 16px 14px; border-left: 0;
  background: #fffdf6; color: #2f2838; border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,.2); transform: rotate(-1.1deg);
  animation: cmUnderNote .4s cubic-bezier(.2,.9,.3,1) both; }
@keyframes cmUnderNote { from { opacity: 0; transform: translateY(-16px) rotate(0deg) scale(.96); } to { opacity: 1; transform: rotate(-1.1deg); } }
/* pin da nota de comentários */
.cm-main .post-comments::before { content: ""; position: absolute; top: -6px; left: 50%; width: 15px; height: 15px; border-radius: 50%;
  transform: translateX(-50%); background: radial-gradient(circle at 36% 30%, #8fc3ff, #2b6fd6 70%);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -1px 2px rgba(0,0,0,.3); }

/* dentro da nota: comentário em texto simples (sem mini-nota aninhada) */
.cm-main .comments-list { display: block; }
.cm-main .comments-list .comment { background: none; box-shadow: none; transform: none; padding: 0; margin: 0; border-radius: 0; }
.cm-main .comments-list .comment::before { display: none; }
.cm-main .comments-list .comment { display: none; }
.cm-main .comments-list .comment.is-active { display: block; animation: cmNoteIn .32s ease both; }
.cm-main .comments-empty { color: rgba(0,0,0,.5); font-family: "Caveat", cursive; font-size: 1.2rem; }

/* navegador por baixo do comentário */
.cm-cnav { margin-top: 12px; }
.cm-main .comment-form { margin-top: 12px; }
.cm-main .comment-form input { background: rgba(255,255,255,.85); }

/* ===== Comunidade — ESTRUTURA EM STACK (post em cima, comentários nota de baixo) ===== */
/* o item do mosaico passa a ser o .post-stack */
.cm-main .feed .post-stack { display: inline-block; width: 100%; vertical-align: top; break-inside: avoid; margin: 0 0 22px; }
.cm-main .feed .post { display: flex; flex-direction: column; width: auto; margin: 0; break-inside: auto; }

/* cor do papel por NOTA (varia por post-stack) — alta especificidade p/ vencer as regras antigas */
.cm-main .feed .post-stack:nth-child(5n+1) .post { background: #fff3c4; }
.cm-main .feed .post-stack:nth-child(5n+2) .post { background: #ffd9ea; }
.cm-main .feed .post-stack:nth-child(5n+3) .post { background: #d6eeff; }
.cm-main .feed .post-stack:nth-child(5n+4) .post { background: #d8f3dc; }
.cm-main .feed .post-stack:nth-child(5n)   .post { background: #e9ddff; }
/* inclinação por nota */
.cm-main .feed .post-stack:nth-child(3n+1) .post { transform: rotate(-1.2deg); }
.cm-main .feed .post-stack:nth-child(3n+2) .post { transform: rotate(1deg); }
.cm-main .feed .post-stack:nth-child(3n)   .post { transform: rotate(-.4deg); }
.cm-main .feed .post-stack .post:hover { transform: rotate(0deg) translateY(-4px) scale(1.01); z-index: 2; }

/* fechado com comentários: folhas a espreitar por baixo (peek do stack) */
.cm-main .feed .post-stack.has-comments .post {
  box-shadow: 0 10px 22px rgba(0,0,0,.15),
    7px 11px 0 -2px color-mix(in srgb, var(--surface) 88%, #c9b8d6), 7px 12px 3px -2px rgba(0,0,0,.12),
    14px 20px 0 -6px color-mix(in srgb, var(--surface) 82%, #c9b8d6), 14px 21px 3px -5px rgba(0,0,0,.1),
    inset 0 -22px 26px -22px rgba(0,0,0,.13); }
/* aberto: tira o peek (a nota real de comentários já aparece em baixo) */
.cm-main .feed .post-stack.open .post {
  box-shadow: 0 10px 22px rgba(0,0,0,.15), inset 0 -22px 26px -22px rgba(0,0,0,.13); }

/* a NOTA de comentários encosta por baixo do post (stack), tombada ao contrário */
.cm-main .post-comments { margin: 6px 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .cm-main .feed .post-stack:nth-child(3n+1) .post,
  .cm-main .feed .post-stack:nth-child(3n+2) .post,
  .cm-main .feed .post-stack:nth-child(3n) .post { transform: none; }
}

/* ===== Comunidade — DOBRAR o post-it para revelar o comentário (mesmo pin) ===== */
.cm-main .feed .post-stack { position: relative; perspective: 1500px; }
/* tilt do post-it inteiro (nota pregada ligeiramente torta) */
.cm-main .feed .post-stack:nth-child(3n+1) { transform: rotate(-1.1deg); }
.cm-main .feed .post-stack:nth-child(3n+2) { transform: rotate(.9deg); }
.cm-main .feed .post-stack:nth-child(3n)   { transform: rotate(-.4deg); }
/* o post deixa de ter tilt próprio (fica livre para dobrar) */
.cm-main .feed .post-stack:nth-child(3n+1) .post,
.cm-main .feed .post-stack:nth-child(3n+2) .post,
.cm-main .feed .post-stack:nth-child(3n) .post { transform: none; }

/* PIN PARTILHADO no topo do stack (prende as duas notas); remove os pins antigos */
.cm-main .feed .post::after { display: none; }
.cm-main .post-comments::before { display: none; }
.cm-main .feed .post-stack::after { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%; z-index: 6;
  background: radial-gradient(circle at 36% 30%, #ff9a9a, #d93a4e 70%);
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 -2px 3px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.55); }

/* o post dobra para cima a partir do topo (como levantar a folha presa no pin) */
.cm-main .feed .post-stack > .post { position: relative; z-index: 2; transform-origin: top center;
  transition: transform .45s cubic-bezier(.45,.05,.2,1), box-shadow .3s ease; }
.cm-main .feed .post-stack.open > .post { transform: rotateX(-72deg); box-shadow: 0 -12px 24px rgba(0,0,0,.22); }

/* nota de comentários tucada por baixo/atrás, no mesmo topo (revela-se ao dobrar) */
.cm-main .post-comments { position: relative; z-index: 1; margin: -28px 2px 0; padding: 36px 16px 14px;
  transform: none; animation: cmReveal .42s ease both; }
@keyframes cmReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* lift no hover só quando fechado */
.cm-main .feed .post-stack:not(.open) .post:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .cm-main .feed .post-stack.open > .post { transform: none; }
  .cm-main .post-comments { animation: none; margin-top: 8px; padding-top: 16px; }
}

/* ===== Comunidade — comentário folheável, inclinado e TUCADO por baixo do post ===== */
.cm-main .feed .post-stack { perspective: none; transform: none; }
/* tilt do post-it */
.cm-main .feed .post-stack:nth-child(3n+1) .post { transform: rotate(-1.1deg); }
.cm-main .feed .post-stack:nth-child(3n+2) .post { transform: rotate(.9deg); }
.cm-main .feed .post-stack:nth-child(3n)   .post { transform: rotate(-.4deg); }
.cm-main .feed .post-stack > .post { position: relative; z-index: 2; transition: box-shadow .2s ease; }
.cm-main .feed .post-stack.open > .post { box-shadow: 0 10px 22px rgba(0,0,0,.16); } /* mantém o tilt do nth-child */

/* pin do próprio post (remove o partilhado) */
.cm-main .feed .post-stack::after { display: none; }
.cm-main .feed .post::after { content: ""; display: block; top: -7px; left: 50%; width: 17px; height: 17px; border-radius: 50%;
  transform: translateX(-50%); border: 0;
  background: radial-gradient(circle at 36% 30%, #ff9a9a, #d93a4e 70%);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.5); }
/* fechado (com comentários): uma folha a espreitar por baixo — some ao abrir */
.cm-main .feed .post-stack.has-comments:not(.open) .post {
  box-shadow: 0 10px 22px rgba(0,0,0,.15), 0 11px 0 -2px #fffdf6, 0 14px 12px -4px rgba(0,0,0,.2); }

/* nota de comentários MUITO tucada por baixo do post, inclinada */
.cm-main .post-comments { position: relative; z-index: 1; margin: -42px 6px 0; padding: 50px 16px 14px;
  background: #fffdf6; color: #2f2838; border-radius: 8px; box-shadow: 0 12px 22px rgba(0,0,0,.22);
  transform: rotate(2deg); transform-origin: top center; animation: cmReveal .42s ease both; }
@keyframes cmReveal { from { opacity: 0; transform: translateY(-6px) rotate(2deg); } to { opacity: 1; transform: rotate(2deg); } }
.cm-main .post-comments::before { display: none; }

/* carrossel: um comentário de cada vez + setas ‹ › */
.cm-main .comments-list { display: block; }
.cm-main .comments-list .comment { display: none; background: none; box-shadow: none; transform: none; padding: 0; margin: 0; }
.cm-main .comments-list .comment.is-active { display: block; animation: cmNoteIn .3s ease both; }
.cm-main .comments-list .comment::before { display: none; }
.cm-cnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cm-main .post-comments { animation: none; }
  .cm-main .comments-list .comment.is-active { animation: none; }
}