/* Área do Piloto: visual gamificado pra criança, seguindo o tema do site
   (Chakra Petch, fundo carbono, vermelho/azul eKarts). Namespace mc-. */

:root {
  --mc-verde: #0F8A3D;
  --mc-vermelho: #D8121A;
  --mc-azul: #0A46E4;
  --mc-ouro: #E5B800;
  --mc-raro: #2E7CF6;
  --mc-epico: #9B4DFF;
  --mc-lendario: #F0A500;
}
[data-theme="dark"] {
  --mc-bg: #101114;
  --mc-card: #1A1C21;
  --mc-card-2: #22242B;
  --mc-borda: #2E3138;
  --mc-texto: #F2F3F5;
  --mc-mudo: #9AA0AA;
}
[data-theme="light"] {
  --mc-bg: #EEF0F3;
  --mc-card: #FFFFFF;
  --mc-card-2: #F5F6F8;
  --mc-borda: #D9DCE1;
  --mc-texto: #17181C;
  --mc-mudo: #5C6470;
}

* { box-sizing: border-box; margin: 0; }
body {
  font-family: "Chakra Petch", "Outfit", sans-serif;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.015) 6px 12px),
    var(--mc-bg);
  color: var(--mc-texto);
  min-height: 100vh;
}

.mc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--mc-borda);
}
.mc-brand img { height: 30px; display: block; }
[data-theme="light"] .mc-brand img { filter: invert(1) hue-rotate(180deg); }
.mc-sair {
  background: none; border: 1px solid var(--mc-borda); color: var(--mc-mudo);
  border-radius: 8px; padding: 6px 14px; font: 600 12px "Chakra Petch", sans-serif; cursor: pointer;
}

.mc-main { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; }

.mc-card {
  background: var(--mc-card); border: 1px solid var(--mc-borda);
  border-radius: 16px; padding: 20px;
}

/* ---------- login ---------- */
.mc-login { max-width: 420px; margin: 8vh auto 0; text-align: center; }
.mc-login__badge { font-size: 44px; }
.mc-login h1 { font-family: "Racing Sans One", "Chakra Petch", sans-serif; font-size: 30px; margin: 6px 0 4px; }
.mc-login__sub { color: var(--mc-mudo); font-size: 13.5px; margin-bottom: 16px; }
.mc-login form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.mc-login label { font-size: 12px; font-weight: 700; color: var(--mc-mudo); display: flex; flex-direction: column; gap: 5px; }
.mc-login input {
  background: var(--mc-card-2); border: 1.5px solid var(--mc-borda); border-radius: 10px;
  padding: 11px 13px; font: 600 15px "Chakra Petch", sans-serif; color: var(--mc-texto);
}
.mc-login input:focus { outline: none; border-color: var(--mc-azul); }
.mc-escolha { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mc-escolha button {
  background: var(--mc-card-2); border: 1.5px solid var(--mc-borda); color: var(--mc-texto);
  border-radius: 10px; padding: 10px 16px; font: 700 14px "Chakra Petch", sans-serif; cursor: pointer;
}
.mc-escolha button.on { border-color: var(--mc-verde); color: var(--mc-verde); }

.mc-btn {
  border: none; border-radius: 12px; padding: 13px 18px; cursor: pointer;
  font: 800 15px "Chakra Petch", sans-serif; letter-spacing: .5px; color: #fff;
}
.mc-btn--verde { background: var(--mc-verde); }
.mc-btn--verde:disabled { opacity: .55; cursor: default; }
.mc-erro { color: var(--mc-vermelho); font-size: 13px; font-weight: 700; text-align: center; }
.mc-ok { color: var(--mc-verde); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
/* Acao secundaria das telas de senha: um link de verdade, discreto, pra nao
   competir com o botao principal. */
.mc-link {
  display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  color: var(--mc-mudo); font: 600 13px "Chakra Petch", sans-serif;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}
.mc-link:hover { color: var(--mc-texto); }

/* ---------- tabs ---------- */
.mc-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 8px; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--mc-bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.mc-tabs button {
  flex-shrink: 0; background: var(--mc-card); border: 1.5px solid var(--mc-borda);
  color: var(--mc-mudo); border-radius: 999px; padding: 9px 15px;
  font: 700 13px "Chakra Petch", sans-serif; cursor: pointer; white-space: nowrap;
}
.mc-tabs button.on { background: var(--mc-azul); border-color: var(--mc-azul); color: #fff; }
.mc-tab { display: flex; flex-direction: column; gap: 14px; }
[hidden] { display: none !important; }
/* Página única: cada seção rola com folga pro nav grudado não cobrir o topo */
.mc-tab, .mc-h2 { scroll-margin-top: 64px; }
.mc-h2 {
  font-family: "Racing Sans One", "Chakra Petch", sans-serif;
  font-size: 21px; margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--mc-borda);
}

/* ---------- garagem ---------- */
.mc-carteirinha {
  background: linear-gradient(135deg, #16181D 0%, #23262E 55%, #1A1C22 100%);
  border: 1px solid #34373F; border-radius: 18px; padding: 22px; color: #F2F3F5;
  position: relative; overflow: hidden;
}
.mc-carteirinha::after {
  content: ""; position: absolute; top: 0; right: 0; width: 130px; height: 100%;
  background: repeating-conic-gradient(#0000 0% 25%, rgba(255,255,255,.06) 0% 50%) 0 0 / 22px 22px;
  mask-image: linear-gradient(to left, #000, #0000);
}
.mc-carteirinha .nome { font-family: "Racing Sans One", sans-serif; font-size: 28px; }
.mc-carteirinha .nivel { display: inline-block; margin-top: 4px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; }
.mc-carteirinha .linha { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.mc-carteirinha .stat b { display: block; font-size: 24px; }
.mc-carteirinha .stat span { font-size: 11px; color: #9AA0AA; text-transform: uppercase; letter-spacing: .6px; }
.mc-progress { margin-top: 14px; }
.mc-progress .txt { font-size: 11.5px; color: #9AA0AA; margin-bottom: 5px; }
.mc-progress .barra { height: 9px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.mc-progress .fill { height: 100%; background: linear-gradient(90deg, var(--mc-verde), #29C463); border-radius: 999px; transition: width .8s ease; }

.mc-resgates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mc-resgate {
  background: var(--mc-card); border: 1.5px solid var(--mc-borda); border-radius: 14px;
  padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 6px;
}
.mc-resgate .emoji { font-size: 26px; }
.mc-resgate .titulo { font-size: 13px; font-weight: 800; }
.mc-resgate .pts { font-size: 12px; color: var(--mc-mudo); }
.mc-resgate button {
  margin-top: 4px; border: none; border-radius: 9px; padding: 9px; cursor: pointer;
  font: 800 12.5px "Chakra Petch", sans-serif; color: #fff; background: var(--mc-verde);
}
.mc-resgate button:disabled { background: var(--mc-card-2); color: var(--mc-mudo); cursor: default; }
.mc-resgate.disponivel { border-color: var(--mc-verde); animation: mc-pulsa 1.6s infinite; }
.mc-resgate.niver { border-color: var(--mc-ouro); }
.mc-resgate.niver button { background: var(--mc-ouro); color: #17181C; }
@keyframes mc-pulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(15,138,61,.35); } 50% { box-shadow: 0 0 0 7px rgba(15,138,61,0); } }

/* ---------- corridas ---------- */
.mc-corrida {
  display: flex; align-items: center; gap: 14px; background: var(--mc-card);
  border: 1px solid var(--mc-borda); border-radius: 13px; padding: 12px 15px;
}
.mc-corrida .pos { font-family: "Racing Sans One", sans-serif; font-size: 22px; width: 44px; text-align: center; }
.mc-corrida .pos.p1 { color: var(--mc-ouro); } .mc-corrida .pos.p2 { color: #A8B0BC; } .mc-corrida .pos.p3 { color: #C77B3F; }
.mc-corrida .info { flex: 1; }
.mc-corrida .data { font-size: 12px; color: var(--mc-mudo); }
.mc-corrida .best { font-size: 16px; font-weight: 800; }
.mc-corrida .voltas { font-size: 12px; color: var(--mc-mudo); }
.mc-tag-recorde {
  background: var(--mc-vermelho); color: #fff; border-radius: 6px; padding: 3px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
}

/* ---------- ranking ---------- */
.mc-rk-tabs { display: flex; gap: 6px; }
.mc-rk-tabs button {
  background: var(--mc-card); border: 1.5px solid var(--mc-borda); color: var(--mc-mudo);
  border-radius: 9px; padding: 7px 13px; font: 700 12.5px "Chakra Petch", sans-serif; cursor: pointer;
}
.mc-rk-tabs button.on { border-color: var(--mc-vermelho); color: var(--mc-vermelho); }
.mc-rk-linha {
  display: flex; align-items: center; gap: 12px; background: var(--mc-card);
  border: 1px solid var(--mc-borda); border-radius: 12px; padding: 10px 14px;
}
.mc-rk-linha.eu { border-color: var(--mc-azul); background: color-mix(in srgb, var(--mc-azul) 8%, var(--mc-card)); }
.mc-rk-linha .p { font-family: "Racing Sans One", sans-serif; font-size: 18px; width: 34px; }
.mc-rk-linha .nome { flex: 1; font-weight: 700; font-size: 14.5px; }
.mc-rk-linha .tempo { font-weight: 800; font-size: 14.5px; }
.mc-rk-nota { font-size: 12.5px; color: var(--mc-mudo); text-align: center; }

/* ---------- conquistas ---------- */
.mc-cat-titulo {
  font-family: "Racing Sans One", sans-serif; font-size: 17px; letter-spacing: .5px;
  margin: 18px 0 2px; color: var(--mc-texto);
}
.mc-cat-titulo:first-child { margin-top: 0; }
.mc-medalhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Colapsada = só a primeira linha aparece; as demais viram linhas de altura 0
   escondidas pelo overflow (funciona com qualquer largura de tela) */
.mc-medalhas.colapsada { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
.mc-ver-mais {
  justify-self: start; margin: 6px 0 2px; padding: 6px 14px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--mc-borda); color: var(--mc-mudo);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.mc-ver-mais:hover { border-color: var(--mc-ouro); color: var(--mc-ouro); }
.mc-medalha {
  background: var(--mc-card); border: 1.5px solid var(--mc-borda); border-radius: 14px;
  padding: 14px 12px; text-align: center; display: flex; flex-direction: column; gap: 5px;
}
.mc-medalha .emoji { font-size: 30px; }
.mc-medalha .nome { font-size: 12px; font-weight: 800; line-height: 1.25; }
.mc-medalha .pts { font-size: 11px; color: var(--mc-mudo); }
.mc-medalha.off { opacity: .45; filter: grayscale(1); }
.mc-medalha.on { border-color: var(--mc-ouro); }
.mc-medalha .vezes { font-size: 10.5px; color: var(--mc-ouro); font-weight: 800; }

/* ---------- escada de niveis (garagem) ---------- */
.mc-niveis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.mc-nivel {
  background: var(--mc-card); border: 1.5px solid var(--mc-borda); border-radius: 14px;
  padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.mc-nivel .emoji { font-size: 26px; }
.mc-nivel .nome { font-size: 12px; font-weight: 800; line-height: 1.2; }
.mc-nivel .min { font-size: 10.5px; color: var(--mc-mudo); font-weight: 700; }
.mc-nivel.off { opacity: .4; filter: grayscale(1); }
.mc-nivel.on .min { color: var(--mc-verde, #2E9E5B); }
.mc-nivel.atual { border-color: var(--mc-ouro); box-shadow: 0 0 14px rgba(240, 190, 60, .25); }
.mc-nivel.atual .min { color: var(--mc-ouro); }

/* ---------- pit shop ---------- */
.mc-saldo-topo { text-align: center; font-size: 15px; font-weight: 800; }
.mc-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mc-premio {
  border-radius: 15px; padding: 15px 13px; text-align: center; display: flex;
  flex-direction: column; gap: 6px; background: var(--mc-card); border: 2px solid var(--mc-borda);
  position: relative;
}
.mc-premio .emoji { font-size: 32px; }
.mc-premio .nome { font-size: 12.5px; font-weight: 800; line-height: 1.3; min-height: 32px; }
.mc-premio .custo { font-size: 14px; font-weight: 800; }
.mc-premio .raridade { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.mc-premio[data-r="comum"] { border-color: var(--mc-borda); }
.mc-premio[data-r="raro"] { border-color: var(--mc-raro); } .mc-premio[data-r="raro"] .raridade { color: var(--mc-raro); }
.mc-premio[data-r="epico"] { border-color: var(--mc-epico); } .mc-premio[data-r="epico"] .raridade { color: var(--mc-epico); }
.mc-premio[data-r="lendario"] { border-color: var(--mc-lendario); box-shadow: 0 0 18px rgba(240,165,0,.18); }
.mc-premio[data-r="lendario"] .raridade { color: var(--mc-lendario); }
.mc-premio button {
  border: none; border-radius: 9px; padding: 9px; cursor: pointer;
  font: 800 12px "Chakra Petch", sans-serif; color: #fff; background: var(--mc-verde);
}
.mc-premio button:disabled { background: var(--mc-card-2); color: var(--mc-mudo); cursor: default; }
.mc-premio .falta { height: 5px; background: var(--mc-card-2); border-radius: 999px; overflow: hidden; }
.mc-premio .falta i { display: block; height: 100%; background: var(--mc-verde); }
.mc-codigo {
  display: flex; align-items: center; gap: 10px; background: var(--mc-card);
  border: 1px dashed var(--mc-borda); border-radius: 12px; padding: 10px 14px; font-size: 13px;
}
.mc-codigo b { font-size: 17px; letter-spacing: 3px; }
.mc-codigo .st { margin-left: auto; font-size: 11px; font-weight: 800; }
.mc-codigo .st.ATIVO { color: var(--mc-verde); } .mc-codigo .st.USADO { color: var(--mc-mudo); } .mc-codigo .st.EXPIRADO { color: var(--mc-vermelho); }

.mc-secao-titulo { font-size: 12px; font-weight: 800; color: var(--mc-mudo); text-transform: uppercase; letter-spacing: .8px; }
.mc-vazio { text-align: center; color: var(--mc-mudo); font-size: 13.5px; padding: 26px 10px; }

/* ---------- confete (aniversário / resgate) ---------- */
#mc-confete { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
#mc-confete i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation: mc-cai linear forwards;
}
@keyframes mc-cai { to { transform: translateY(105vh) rotate(720deg); } }

/* toast */
.mc-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #17181C; color: #fff; border: 1px solid #34373F; border-radius: 12px;
  padding: 12px 20px; font: 700 14px "Chakra Petch", sans-serif; z-index: 60;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

@media (max-width: 520px) {
  .mc-carteirinha .linha { gap: 14px; }
  .mc-carteirinha .stat b { font-size: 20px; }
}

/* ===== Reservas (futuras) ===== */
.mc-reserva {
  background: var(--mc-card);
  border: 1px solid var(--mc-borda);
  border-left: 4px solid var(--mc-azul);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mc-reserva .quando { display: flex; align-items: baseline; gap: 10px; }
.mc-reserva .quando b { font-size: 17px; text-transform: capitalize; }
.mc-reserva .quando span { color: var(--mc-mudo); font-weight: 600; }
.mc-reserva .meta { color: var(--mc-mudo); font-size: 13.5px; margin-top: 3px; }
.mc-reserva .acoes { display: flex; gap: 8px; margin-top: 11px; }
.mc-btn-mini {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--mc-azul); border-radius: 999px; padding: 8px 16px;
  border: 1px solid transparent;
}
.mc-btn-mini.fantasma { background: transparent; color: var(--mc-mudo); border-color: var(--mc-borda); }
.mc-vazio .acoes-vazio { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

/* ===== Festa: cartao-convite, unico da pagina =====
   Borda de gradiente animado (ouro/rosa/azul), baloes flutuando e picote de
   ingresso. Nada aqui se repete em outro cartao: festa e festa. */
.mc-festa {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 24px 20px 20px;
  margin-bottom: 14px;
  text-align: center;
  color: #FFF7E6;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(155,77,255,.35), transparent 55%),
    radial-gradient(120% 90% at 10% 110%, rgba(216,18,26,.4), transparent 55%),
    linear-gradient(160deg, #2A1140, #3D1024 55%, #1C0F3A);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.mc-festa::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(120deg, #E5B800, #FF5FA2, #9B4DFF, #E5B800);
  background-size: 300% 300%;
  animation: mcFestaBorda 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes mcFestaBorda { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.mc-festa__balao { position: absolute; font-size: 26px; opacity: .85; animation: mcFestaFlutua 4.2s ease-in-out infinite; pointer-events: none; }
.mc-festa__balao.b1 { left: 8%; top: 14px; }
.mc-festa__balao.b2 { right: 9%; top: 26px; animation-delay: 1.3s; }
.mc-festa__balao.b3 { left: 5%; top: 104px; font-size: 22px; animation-delay: 2.2s; }
@keyframes mcFestaFlutua { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
.mc-festa__tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: #2A1140; background: linear-gradient(135deg, #FFE082, #E5B800);
  border-radius: 999px; padding: 5px 14px;
  box-shadow: 0 4px 16px rgba(229,184,0,.4);
}
.mc-festa__data { font-size: 26px; font-weight: 800; margin-top: 12px; text-transform: capitalize; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.mc-festa__hora { color: #FFD9EC; font-weight: 600; margin-top: 2px; }
.mc-festa__conta {
  display: inline-block; margin-top: 10px;
  font-size: 14px; font-weight: 800; color: #FFE082;
  animation: mcFestaPulsa 1.6s ease-in-out infinite;
}
@keyframes mcFestaPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.mc-festa__picote {
  margin: 16px -20px 14px;
  border-top: 2px dashed rgba(255,255,255,.35);
  position: relative;
}
.mc-festa__picote::before, .mc-festa__picote::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--mc-bg);
}
.mc-festa__picote::before { left: -10px; }
.mc-festa__picote::after { right: -10px; }
.mc-festa__aviso { font-size: 13px; line-height: 1.55; color: #F3E8FF; max-width: 42ch; margin: 0 auto; }
.mc-festa__zap {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px; text-decoration: none;
  font-weight: 800; font-size: 14px; color: #0A2A16;
  background: linear-gradient(135deg, #3DDC68, #25D366);
  border-radius: 999px; padding: 12px 22px;
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
}
[data-theme="light"] .mc-festa { color: #FFF7E6; } /* o convite e sempre noturno, de proposito */
@media (prefers-reduced-motion: reduce) {
  .mc-festa::before, .mc-festa__balao, .mc-festa__conta { animation: none; }
}
/* No celular o cartao tem ~335px: a mesma % que afasta o balao no desktop deixa
   ele encostando na borda animada, e o bolo caia na linha do horario. Aqui os
   tres sobem pra faixa do topo, que e a unica sobra real de espaco, e diminuem
   pra nao competir com a data.
   O `top` minimo e 12px de proposito: a flutuacao sobe 9px, e o cartao tem
   overflow hidden, entao topo menor que isso corta o balao no ponto alto. */
@media (max-width: 460px) {
  .mc-festa__balao { font-size: 21px; }
  .mc-festa__balao.b1 { left: 12px; top: 14px; }
  .mc-festa__balao.b2 { right: 12px; top: 20px; }
  .mc-festa__balao.b3 { left: auto; right: 42px; top: 12px; font-size: 17px; }
}

/* ---- festa de progresso na entrada (novidades desde a última visita) ---- */
#mc-nov {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(8, 9, 12, .78);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#mc-nov[hidden] { display: none; }
body.mc-nov-aberta { overflow: hidden; }
.mc-nov__card {
  width: min(430px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--mc-card); border: 1px solid var(--mc-borda);
  border-radius: 18px; padding: 26px 22px 22px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: mc-nov-pop .55s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes mc-nov-pop { from { transform: scale(.72) translateY(34px); opacity: 0; } }
.mc-nov__tag { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--mc-mudo); }
.mc-nov__pontos { font-size: 46px; font-weight: 800; color: var(--mc-ouro); margin: 8px 0 0; line-height: 1.1; }
.mc-nov__pontos i { font-style: normal; font-size: 16px; color: var(--mc-mudo); font-weight: 700; }
.mc-nov__extra { font-size: 13px; color: var(--mc-texto); margin-top: 6px; font-weight: 700; }
.mc-nov__nivel { font-size: 15px; font-weight: 800; margin: 18px 0 6px; }
.mc-nov__barra {
  height: 16px; background: rgba(127,127,127,.18);
  border-radius: 999px; overflow: hidden;
  border: 1px solid var(--mc-borda);
}
.mc-nov__barra .fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--mc-verde), #29C463, var(--mc-ouro));
  background-size: 200% 100%;
  animation: mc-nov-brilho 1.6s linear infinite;
}
.mc-nov__barra .fill.anda { transition: width 1.3s cubic-bezier(.25, .1, .25, 1); }
@keyframes mc-nov-brilho { to { background-position: -200% 0; } }
.mc-nov__meta { font-size: 12px; color: var(--mc-mudo); margin-top: 6px; }
.mc-nov__levelup {
  margin: 14px auto 0; display: inline-block;
  font-size: 17px; font-weight: 800; color: #17181C;
  background: linear-gradient(135deg, var(--mc-ouro), #FFD84D);
  border-radius: 999px; padding: 9px 20px;
  box-shadow: 0 8px 26px rgba(229,184,0,.45);
  animation: mc-nov-levelup .6s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes mc-nov-levelup { from { transform: scale(0); } }
.mc-nov__medalhas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.mc-nov__medalha {
  width: 118px; background: var(--mc-card-2);
  border: 1px solid var(--mc-ouro); border-radius: 12px;
  padding: 10px 8px; animation: mc-nov-medalha .5s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes mc-nov-medalha { from { transform: scale(0) rotate(-14deg); opacity: 0; } }
.mc-nov__medalha .emoji { font-size: 28px; }
.mc-nov__medalha .nome { font-size: 11.5px; font-weight: 800; line-height: 1.25; margin-top: 3px; }
.mc-nov__medalha .pts { font-size: 11px; color: var(--mc-ouro); font-weight: 800; margin-top: 2px; }
.mc-nov__btn {
  margin-top: 20px; width: 100%;
  font: inherit; font-weight: 800; font-size: 15px; letter-spacing: .04em;
  color: #fff; background: linear-gradient(135deg, #E2231A, var(--mc-vermelho));
  border: 0; border-radius: 12px; padding: 13px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(216,18,26,.35);
}
.mc-nov__btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .mc-nov__card, .mc-nov__levelup, .mc-nov__medalha { animation: none; }
  .mc-nov__barra .fill { animation: none; transition: none; }
}

/* ---- Minhas Festas: souvenir da festa (podio + memoria de calculo) ---- */
.mc-festa-res {
  background: var(--mc-card); border: 1px solid var(--mc-borda);
  border-radius: 14px; padding: 16px; margin-bottom: 12px;
}
.mc-festa-res .topo { display: flex; gap: 12px; align-items: center; }
.mc-festa-res .emoji { font-size: 30px; }
.mc-festa-res .titulo { font-weight: 800; font-size: 15.5px; }
.mc-festa-res .data { font-size: 12px; color: var(--mc-mudo); }
.mc-festa-res .minha { margin-top: 10px; font-size: 14px; }
.mc-festa-res .minha b { color: var(--mc-ouro); }
.mc-festa-res .bloco {
  margin-top: 10px; background: var(--mc-card-2);
  border: 1px solid var(--mc-borda); border-radius: 10px; padding: 10px 12px;
}
.mc-festa-res .rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mc-mudo); margin-bottom: 6px;
}
.mc-festa-res .linha { font-size: 13px; padding: 3px 0; display: flex; justify-content: space-between; gap: 10px; }
.mc-festa-res .linha .pts { color: var(--mc-mudo); }

/* ---- layout com menu lateral esquerdo (Reservas / Corridas / Festas) ---- */
.mc-layout { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; }
.mc-lateral {
  position: sticky; top: 62px; /* logo abaixo do nav grudado */
  display: flex; flex-direction: column; gap: 8px;
  background: var(--mc-card); border: 1px solid var(--mc-borda);
  border-radius: 14px; padding: 12px;
}
.mc-lateral__titulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mc-mudo); padding: 2px 4px 4px;
}
.mc-lateral button {
  text-align: left; background: var(--mc-card-2); border: 1.5px solid var(--mc-borda);
  color: var(--mc-mudo); border-radius: 10px; padding: 10px 12px;
  font: 700 13px "Chakra Petch", sans-serif; cursor: pointer;
}
.mc-lateral button.on { background: var(--mc-azul); border-color: var(--mc-azul); color: #fff; }
.mc-conteudo { min-width: 0; } /* deixa a coluna encolher sem estourar o grid */
/* No celular a coluna nao cabe: o menu vira uma linha de atalhos compacta
   entre o nav e o conteudo, mesmo visual de chips do nav de cima. */
@media (max-width: 700px) {
  .mc-layout { display: block; }
  .mc-lateral {
    position: static; flex-direction: row; align-items: center;
    overflow-x: auto; padding: 8px 10px; margin-bottom: 14px;
  }
  .mc-lateral__titulo { padding: 0 4px 0 0; white-space: nowrap; }
  .mc-lateral button { flex-shrink: 0; border-radius: 999px; padding: 8px 13px; }
}

/* ---- abas de verdade: lateral desde o topo, uma vista por aba ---- */
.mc-view { min-width: 0; }
.mc-h2--primeira { border-top: none; margin-top: 0; padding-top: 4px; }
.mc-lateral { top: 12px; } /* sobe junto com o topo da pagina, nav mora na coluna da direita */
#menu-perfil { margin-top: -4px; }

.mc-embed iframe {
  width: 100%; height: 1000px; border: 0; display: block;
  background: var(--mc-card); border: 1px solid var(--mc-borda); border-radius: 14px;
}

/* ---- vista de Festas: o cartao "explodido" da festa que ja aconteceu ---- */
.mc-festa-show {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 22px 20px 20px; margin-bottom: 16px;
  background:
    linear-gradient(var(--mc-card), var(--mc-card)) padding-box,
    linear-gradient(120deg, var(--mc-vermelho), var(--mc-ouro), var(--mc-azul)) border-box;
  border: 2px solid transparent;
}
.mc-festa-show__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(340px 180px at 12% -10%, rgba(216,18,26,.22), transparent 70%),
    radial-gradient(300px 170px at 95% 0%, rgba(10,70,228,.22), transparent 70%),
    radial-gradient(260px 150px at 50% 110%, rgba(229,184,0,.14), transparent 70%);
}
.mc-festa-show > *:not(.mc-festa-show__glow) { position: relative; }
.mc-festa-show__topo { display: flex; align-items: center; gap: 14px; }
.mc-festa-show__topo .emoji { font-size: 40px; filter: drop-shadow(0 4px 10px rgba(229,184,0,.4)); }
.mc-festa-show__topo .titulo { font-family: "Racing Sans One", "Chakra Petch", sans-serif; font-size: 24px; line-height: 1.15; }
.mc-festa-show__topo .data { color: var(--mc-mudo); font-size: 13px; margin-top: 2px; }
.mc-festa-show__niver {
  display: inline-block; margin-top: 12px; font-size: 13px;
  background: rgba(229,184,0,.14); border: 1px solid rgba(229,184,0,.45);
  border-radius: 999px; padding: 5px 12px;
}
.mc-festa-show__minha { margin-top: 12px; font-size: 16.5px; }
.mc-festa-show__minha b { color: var(--mc-ouro); }
.mc-festa-show__rotulo {
  margin: 18px 0 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .16em; color: var(--mc-mudo);
}
/* Palco: degraus de podio de verdade (2-1-3), o 1o mais alto e dourado */
.mc-festa-show__palco {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end;
}
.mc-festa-show__palco .piloto {
  text-align: center; font-weight: 800; font-size: 13px; line-height: 1.2;
  margin-bottom: 6px; overflow-wrap: anywhere;
}
.mc-festa-show__palco .degrau {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1px; border-radius: 10px 10px 4px 4px; padding-top: 8px;
  border: 1px solid rgba(255,255,255,.14);
}
.mc-festa-show__palco .medalha { font-size: 22px; }
.mc-festa-show__palco .pos { font-family: "Racing Sans One", sans-serif; font-size: 17px; }
.mc-festa-show__palco .pts { font-size: 11px; opacity: .85; padding-bottom: 6px; }
.mc-festa-show__palco .p1 .degrau {
  min-height: 96px; color: #241C00;
  background: linear-gradient(180deg, #FFD84D, var(--mc-ouro) 55%, #B38F00);
  box-shadow: 0 10px 28px rgba(229,184,0,.35);
}
.mc-festa-show__palco .p2 .degrau {
  min-height: 72px; color: #14161A;
  background: linear-gradient(180deg, #F2F5FA, #C6CEDA 60%, #97A1B0);
}
.mc-festa-show__palco .p3 .degrau {
  min-height: 56px; color: #2B1503;
  background: linear-gradient(180deg, #E8A96B, #C77B3F 60%, #8A4B1F);
}
/* Baterias: memoria de calculo em cartoezinhos */
.mc-festa-show__bats { display: grid; gap: 10px; }
.mc-festa-show__bats .bat {
  background: var(--mc-card-2); border: 1px solid var(--mc-borda);
  border-radius: 12px; padding: 10px 12px;
}
.mc-festa-show__bats .rotulo { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--mc-mudo); margin-bottom: 6px; }
.mc-festa-show__bats .dados { display: flex; flex-wrap: wrap; gap: 14px; }
.mc-festa-show__bats .dado b { display: block; font-size: 16px; }
.mc-festa-show__bats .dado span { font-size: 10.5px; color: var(--mc-mudo); text-transform: uppercase; letter-spacing: .06em; }

/* Festas vazia: convite pra primeira festa */
.mc-festa-vazia {
  text-align: center; padding: 44px 22px; border-radius: 18px;
  background:
    linear-gradient(var(--mc-card), var(--mc-card)) padding-box,
    linear-gradient(120deg, var(--mc-vermelho), var(--mc-ouro), var(--mc-azul)) border-box;
  border: 2px solid transparent;
}
.mc-festa-vazia .baloes { font-size: 34px; letter-spacing: 8px; }
.mc-festa-vazia h2 { font-family: "Racing Sans One", "Chakra Petch", sans-serif; font-size: 26px; margin-top: 10px; }
.mc-festa-vazia p { color: var(--mc-mudo); max-width: 44ch; margin: 8px auto 18px; }
.mc-festa-vazia__cta {
  display: inline-block; text-decoration: none; color: #fff;
  font: 800 15px "Chakra Petch", sans-serif; letter-spacing: .04em;
  background: linear-gradient(135deg, #E2231A, var(--mc-vermelho));
  border-radius: 12px; padding: 14px 26px;
  box-shadow: 0 10px 28px rgba(216,18,26,.4);
}

/* Nota do login: a conta e do responsavel; o acesso da crianca e decisao dele
   (alinhado ao ECA Digital: supervisao parental por padrao). */
.mc-login__nota {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mc-borda);
  font-size: 12.5px; color: var(--mc-mudo); line-height: 1.5;
}

/* ---- Conquistas v2: dois visuais por natureza ----
   Mérito esportivo (velocidade, pódio) = MEDALHÃO metálico com fita; bloqueada
   ganha anel de progresso. Trajetória (carreira, especiais) = ESCUDO de equipe;
   bloqueada é vaga tracejada na garagem com barrinha. Metal sobe por tier. */
.mc-cq { background: var(--mc-card); border: 1px solid var(--mc-borda); border-radius: 14px; padding: 16px 10px 13px; text-align: center; position: relative; overflow: hidden; }
.mc-cq .nome { font: 700 12.5px "Chakra Petch", sans-serif; line-height: 1.25; }
.mc-cq .pts { font-size: 11px; color: var(--mc-mudo); margin-top: 3px; }
.mc-cq .pts .vezes { color: var(--mc-ouro); }
.mc-cq .raro { font-size: 10.5px; font-weight: 700; margin-top: 4px; color: var(--mc-mudo); }
.mc-cq .raro.top { color: var(--mc-ouro); }
.mc-cq .prog { font-size: 10.5px; font-weight: 700; margin-top: 4px; color: var(--mc-tier); }
.mc-cq[data-tier="bronze"]   { --mc-tier: #C77B3F; }
.mc-cq[data-tier="prata"]    { --mc-tier: #B9C3D2; }
.mc-cq[data-tier="ouro"]     { --mc-tier: #E5B800; }
.mc-cq[data-tier="diamante"] { --mc-tier: #7FD8FF; }
.mc-cq-destaque[data-tier="bronze"]   { --mc-tier: #C77B3F; }
.mc-cq-destaque[data-tier="prata"]    { --mc-tier: #B9C3D2; }
.mc-cq-destaque[data-tier="ouro"]     { --mc-tier: #E5B800; }
.mc-cq-destaque[data-tier="diamante"] { --mc-tier: #7FD8FF; }

/* medalhão */
.mc-cq--medal .aro { width: 82px; height: 82px; margin: 0 auto 10px; position: relative; }
.mc-cq--medal .medal { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; overflow: hidden; }
.mc-cq--medal .fita { position: absolute; left: 50%; top: 54px; width: 44px; height: 38px; transform: translateX(-50%); z-index: 0; }
.mc-cq--medal .fita::before, .mc-cq--medal .fita::after {
  content: ""; position: absolute; top: 0; width: 15px; height: 36px;
  background: linear-gradient(180deg, var(--mc-vermelho) 33%, #fff 33% 66%, var(--mc-azul) 66%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.mc-cq--medal .fita::before { left: 4px; transform: rotate(14deg); }
.mc-cq--medal .fita::after { right: 4px; transform: rotate(-14deg); }
.mc-cq--medal .medal { z-index: 1; }
.mc-cq--medal.on .medal { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--mc-tier) 50%, transparent)); }
.mc-cq--medal.on[data-tier="bronze"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 45%), conic-gradient(from 210deg, #C77B3F, #F0B482 12%, #A05A24 38%, #6E3C13 55%, #E8A96B 78%, #C77B3F); }
.mc-cq--medal.on[data-tier="prata"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 45%), conic-gradient(from 210deg, #C6CEDA, #F4F7FB 12%, #97A1B0 38%, #6B7482 55%, #E6EBF2 78%, #C6CEDA); }
.mc-cq--medal.on[data-tier="ouro"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%), conic-gradient(from 210deg, #E5B800, #FFF3B0 12%, #C89B00 38%, #8A6D00 55%, #FFDE59 78%, #E5B800); }
.mc-cq--medal.on[data-tier="diamante"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 45%), conic-gradient(from 210deg, #7FD8FF, #E8F9FF 12%, #4FA8DA 38%, #0A46E4 55%, #C9F0FF 78%, #7FD8FF); }
.mc-cq--medal.on .medal::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  transform: translateX(-130%);
}
.mc-cq--medal.on:hover .medal::after { animation: mc-cq-shine .9s ease; }
@keyframes mc-cq-shine { to { transform: translateX(130%); } }
/* medalhão bloqueado: silhueta + anel de progresso */
.mc-cq--medal .anel { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--mc-tier) calc(var(--pct, 0) * 1%), rgba(255,255,255,.09) 0); }
.mc-cq--medal .anel::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--mc-card); }
.mc-cq--medal.off .medal { background: #1A2233; border: 1px solid rgba(255,255,255,.14); }
.mc-cq--medal.off .medal .emoji { filter: brightness(0) invert(.28); }
.mc-cq--medal.off .nome { color: var(--mc-mudo); }
.mc-cq--medal .cadeado { position: absolute; right: 0; bottom: 0; font-size: 15px; filter: drop-shadow(0 2px 4px #000); }

/* escudo */
.mc-cq--escudo.on::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px;
  background: repeating-conic-gradient(#E8E8E8 0 25%, #16181D 0 50%);
  background-size: 9px 9px; opacity: .8;
}
.mc-cq--escudo .num {
  position: absolute; right: 6px; top: 8px;
  font-family: "Racing Sans One", sans-serif; font-size: 38px; line-height: 1;
  color: rgba(255,255,255,.07);
}
.mc-cq--escudo .escudow { width: 76px; height: 82px; margin: 10px auto 10px; }
.mc-cq--escudo.on .escudow { filter: drop-shadow(0 5px 14px color-mix(in srgb, var(--mc-tier) 42%, transparent)); }
.mc-cq--escudo .escudo { width: 100%; height: 100%; padding: 3px; position: relative; clip-path: polygon(50% 0, 100% 12%, 100% 68%, 50% 100%, 0 68%, 0 12%); }
.mc-cq--escudo.on[data-tier="bronze"] .escudo { background: conic-gradient(from 210deg, #C77B3F, #F0B482 12%, #A05A24 38%, #6E3C13 55%, #E8A96B 78%, #C77B3F); }
.mc-cq--escudo.on[data-tier="prata"] .escudo { background: conic-gradient(from 210deg, #C6CEDA, #F4F7FB 12%, #97A1B0 38%, #6B7482 55%, #E6EBF2 78%, #C6CEDA); }
.mc-cq--escudo.on[data-tier="ouro"] .escudo { background: conic-gradient(from 210deg, #E5B800, #FFF3B0 12%, #C89B00 38%, #8A6D00 55%, #FFDE59 78%, #E5B800); }
.mc-cq--escudo.on[data-tier="diamante"] .escudo { background: conic-gradient(from 210deg, #7FD8FF, #E8F9FF 12%, #4FA8DA 38%, #0A46E4 55%, #C9F0FF 78%, #7FD8FF); }
.mc-cq--escudo .escudo > i {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 32px;
  clip-path: polygon(50% 0, 100% 12%, 100% 68%, 50% 100%, 0 68%, 0 12%);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.16), transparent 50%), linear-gradient(180deg, var(--mc-card-2), #14161B);
}
.mc-cq--escudo.on .escudo::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0, 100% 12%, 100% 68%, 50% 100%, 0 68%, 0 12%);
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-130%);
}
.mc-cq--escudo.on:hover .escudo::after { animation: mc-cq-shine .9s ease; }
/* vaga na garagem */
.mc-cq--escudo.vaga { background: transparent; border: 2px dashed rgba(255,255,255,.22); }
.mc-cq--escudo.vaga .escudo { background: rgba(255,255,255,.14); }
.mc-cq--escudo.vaga .escudo > i { background: #14161B; }
.mc-cq--escudo.vaga .escudo > i .emoji { opacity: .25; filter: grayscale(1); }
.mc-cq--escudo.vaga .nome { color: var(--mc-mudo); }
.mc-cq--escudo .vaga-txt { font: 700 9.5px "Chakra Petch", sans-serif; letter-spacing: .08em; color: var(--mc-mudo); margin-top: 5px; text-transform: uppercase; }
.mc-cq--escudo .barra { height: 6px; border-radius: 99px; background: rgba(255,255,255,.09); margin-top: 7px; overflow: hidden; }
.mc-cq--escudo .barra i { display: block; height: 100%; background: linear-gradient(90deg, #C77B3F, var(--mc-ouro)); border-radius: 99px; }

/* vitrine em destaque */
.mc-cq-destaque {
  display: flex; gap: 18px; align-items: center; margin-bottom: 16px;
  background: linear-gradient(120deg, var(--mc-card), var(--mc-card-2));
  border: 1px solid var(--mc-borda); border-radius: 16px; padding: 16px 18px;
}
.mc-cq-destaque .aro { width: 100px; height: 100px; position: relative; flex-shrink: 0; }
.mc-cq-destaque .medal { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 44px; overflow: hidden; z-index: 1; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--mc-tier) 50%, transparent)); }
.mc-cq-destaque .fita { position: absolute; left: 50%; top: 66px; width: 52px; height: 42px; transform: translateX(-50%); }
.mc-cq-destaque .fita::before, .mc-cq-destaque .fita::after {
  content: ""; position: absolute; top: 0; width: 17px; height: 40px;
  background: linear-gradient(180deg, var(--mc-vermelho) 33%, #fff 33% 66%, var(--mc-azul) 66%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.mc-cq-destaque .fita::before { left: 5px; transform: rotate(14deg); }
.mc-cq-destaque .fita::after { right: 5px; transform: rotate(-14deg); }
.mc-cq-destaque[data-tier="bronze"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 45%), conic-gradient(from 210deg, #C77B3F, #F0B482 12%, #A05A24 38%, #6E3C13 55%, #E8A96B 78%, #C77B3F); }
.mc-cq-destaque[data-tier="prata"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 45%), conic-gradient(from 210deg, #C6CEDA, #F4F7FB 12%, #97A1B0 38%, #6B7482 55%, #E6EBF2 78%, #C6CEDA); }
.mc-cq-destaque[data-tier="ouro"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%), conic-gradient(from 210deg, #E5B800, #FFF3B0 12%, #C89B00 38%, #8A6D00 55%, #FFDE59 78%, #E5B800); }
.mc-cq-destaque[data-tier="diamante"] .medal { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 45%), conic-gradient(from 210deg, #7FD8FF, #E8F9FF 12%, #4FA8DA 38%, #0A46E4 55%, #C9F0FF 78%, #7FD8FF); }
.mc-cq-destaque .medal::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  transform: translateX(-130%); animation: mc-cq-shine 3.5s ease infinite;
}
.mc-cq-destaque .rot { font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .15em; color: var(--mc-ouro); }
.mc-cq-destaque .nm { font-family: "Racing Sans One", "Chakra Petch", sans-serif; font-size: 21px; margin: 4px 0 2px; }
.mc-cq-destaque .dt { color: var(--mc-mudo); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .mc-cq--medal .medal::after, .mc-cq--escudo .escudo::after, .mc-cq-destaque .medal::after { animation: none !important; }
}

/* ==================== Animação de recordação da festa (3 estilos) ==================== */
#mc-anim { position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #fff; }
#mc-anim .mc-anim-x, #mc-anim .mc-anim-rep {
  position: absolute; top: 14px; z-index: 5; border: 0; border-radius: 999px; cursor: pointer;
  width: 40px; height: 40px; font-size: 17px; color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
}
#mc-anim .mc-anim-x { right: 14px; }
#mc-anim .mc-anim-rep { right: 62px; }
#mc-anim-cena { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px 14px; }
#mc-anim .mc-anim-prog { position: absolute; bottom: 0; left: 0; height: 5px; width: 0; background: #F5E617; transition: width .4s linear; z-index: 5; }
.a-in { animation: aEntra .7s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes aEntra { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes aPisca { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes aKart { from { transform: translateX(-18vw); } to { transform: translateX(118vw); } }
@keyframes aFlutua { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* comuns */
.a-mid { text-align: center; width: min(92vw, 620px); }
.a-tit { font-size: clamp(22px, 6vw, 40px); font-weight: 900; }
.a-sub { color: #8FA3DD; margin-top: 10px; letter-spacing: 2px; font-size: 13px; }
.a-live { margin-top: 22px; color: #FF6B71; font-weight: 800; letter-spacing: 3px; animation: aPisca 1s infinite; }
.a-final { margin-top: 14px; font-size: 16px; line-height: 1.8; }
.a-final b { color: #F5E617; }
.a-url { margin-top: 16px; color: #8FA3DD; letter-spacing: 2px; font-weight: 700; }
.a-tower { width: min(92vw, 600px); }
.a-h { font-size: 14px; letter-spacing: 3px; font-weight: 800; color: #8FA3DD; margin-bottom: 6px; }
.a-h.roxo { color: #D24BE8; }
.a-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 9px 14px; margin-top: 7px; animation: aEntra .5s both; }
.a-row.p1 { background: rgba(245,230,23,.1); border-color: rgba(245,230,23,.5); }
.a-pos { font-size: 20px; font-weight: 900; width: 40px; color: #9AA6C8; }
.a-row.p1 .a-pos, .a-row.p1 .a-nm { color: #F5E617; }
.a-nm { flex: 1; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-st { font-size: 11.5px; color: #9FB2E8; text-align: right; font-variant-numeric: tabular-nums; }
.a-st b { color: #5BE87A; font-size: 13.5px; }
.a-st b.roxo { color: #D24BE8; }
.a-lt { margin-top: 14px; text-align: center; background: linear-gradient(90deg, #D8121A, #7A0C10); font-weight: 800; letter-spacing: 1px; padding: 12px; border-radius: 8px; }

/* estilo 1: transmissão */
#mc-anim.s1 { background: #04060D; font-family: "Orbitron", "Chakra Petch", monospace; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); }
#mc-anim.s1 .a-tit, #mc-anim.s1 .a-h { color: #F5E617; text-shadow: 0 0 16px rgba(245,230,23,.5); }
#mc-anim.s1 .a-h.roxo { color: #D24BE8; text-shadow: none; }

/* estilo 2: fantasia */
#mc-anim.s2 { background: #0a1a3a url('/assets/festa-anim/pista-fantasia.jpg') center/cover; }
#mc-anim.s2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(4,8,24,.28), rgba(4,8,24,.8)); }
#mc-anim.s2 #mc-anim-cena { z-index: 2; }
.a-card2 { position: relative; text-align: center; width: min(92vw, 460px); background: rgba(255,255,255,.95); color: #1A2440; border-radius: 22px; padding: 22px 20px; box-shadow: 0 16px 50px rgba(0,0,0,.45); max-height: 82vh; overflow: auto; }
.a-card2 h3 { font-size: clamp(20px, 6vw, 30px); color: #D8121A; font-style: italic; }
.a-cap { color: #5C6470; font-weight: 700; font-size: 14px; }
.a-big { font-size: clamp(24px, 7vw, 34px); font-weight: 900; color: #0A46E4; font-style: italic; margin-top: 6px; }
.a-balao { position: absolute; font-size: 30px; animation: aFlutua 2.2s ease-in-out infinite alternate; }
.a-kart { position: absolute; bottom: 12%; font-size: 44px; z-index: 3; animation: aKart 2.6s linear forwards; }
.a-bolha { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 7px 16px 7px 8px; margin-top: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.28); text-align: left; }
.a-med { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: 14px; flex: none; }
.a-bnm { font-weight: 800; flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-bpts { font-size: 12px; color: #5C6470; text-align: right; }
.a-bpts b { color: #0A46E4; font-size: 14px; }
.a-ticket { background: repeating-linear-gradient(45deg, #F5E617 0 14px, #FFD400 14px 28px); color: #08246b; border-radius: 14px; border: 3px dashed #08246b; padding: 14px 18px; font-weight: 900; margin-top: 10px; }
.a-ticket span { font-size: 20px; }

/* estilo 3: premiação */
#mc-anim.s3 { background: radial-gradient(ellipse at 50% 24%, #33270a 0%, #120d03 55%, #000 100%); }
.a-card3 { position: relative; text-align: center; width: min(92vw, 520px); }
.a-card3 h3 { font-size: clamp(20px, 5.5vw, 30px); color: #F0C24B; }
.a-al { color: #C7B07B; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; }
.a-al2 { color: #FFE9A8; font-size: 15px; line-height: 1.8; margin-top: 12px; }
.a-medalhao { width: 104px; height: 104px; border-radius: 50%; margin: 16px auto 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; color: #120d03; background: radial-gradient(circle at 32% 28%, #FFE9A8, #F0C24B 55%, #B8860B); box-shadow: 0 0 44px rgba(240,194,75,.5), inset 0 -6px 14px rgba(0,0,0,.25); }
.a-stats { display: flex; justify-content: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.a-stat .v { font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.a-stat .k { font-size: 10px; color: #C7B07B; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }
.a-big3 { font-size: 26px; font-weight: 800; color: #fff; margin-top: 8px; }
.a-conv { border: 1.5px solid #F0C24B; border-radius: 12px; padding: 13px 18px; margin-top: 14px; background: rgba(240,194,75,.08); color: #FFE9A8; font-size: 14.5px; }
.a-ouro { position: absolute; inset: -10% -10% auto -10%; height: 60%; background: radial-gradient(circle, rgba(240,194,75,.22), transparent 60%); animation: aPisca 1.4s ease-in-out infinite; pointer-events: none; }

.mc-anim-btn { margin-top: 12px; width: 100%; border: 0; cursor: pointer; border-radius: 10px; padding: 12px; font-family: inherit; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #E5223A, #B60E22); box-shadow: 0 4px 14px rgba(216,18,26,.3); }