:root{
  --grau-comum-veu:var(--cfg-grau-comum-veu,#ECE5DE); --grau-comum-profundo:var(--cfg-grau-comum-profundo,#322D27);
  --grau-comum-profundo-rgb:var(--cfg-grau-comum-profundo-rgb,50,45,39);
  --grau-comum-tinta:var(--cfg-grau-comum-tinta,#68625C); --grau-comum-fundo:var(--cfg-grau-comum-fundo,#FBF4ED); --grau-comum-borda:var(--cfg-grau-comum-borda,#D5CEC7);
  --grau-incomum-veu:var(--cfg-grau-incomum-veu,#EAE3DB); --grau-incomum-profundo:var(--cfg-grau-incomum-profundo,#26211A);
  --grau-incomum-profundo-rgb:var(--cfg-grau-incomum-profundo-rgb,38,33,26);
  --grau-incomum-tinta:var(--cfg-grau-incomum-tinta,#5A544D); --grau-incomum-fundo:var(--cfg-grau-incomum-fundo,#F7F1E9); --grau-incomum-borda:var(--cfg-grau-incomum-borda,#D5CEC6);
  --grau-rara-veu:var(--cfg-grau-rara-veu,#E9E1D8); --grau-rara-profundo:var(--cfg-grau-rara-profundo,#1A150F);
  --grau-rara-profundo-rgb:var(--cfg-grau-rara-profundo-rgb,26,21,15);
  --grau-rara-tinta:var(--cfg-grau-rara-tinta,#4D463F); --grau-rara-fundo:var(--cfg-grau-rara-fundo,#F4EDE6); --grau-rara-borda:var(--cfg-grau-rara-borda,#D6CEC5);
  --grau-epica-veu:var(--cfg-grau-epica-veu,#E9DED4); --grau-epica-profundo:var(--cfg-grau-epica-profundo,#171009);
  --grau-epica-profundo-rgb:var(--cfg-grau-epica-profundo-rgb,23,16,9);
  --grau-epica-tinta:var(--cfg-grau-epica-tinta,#413931); --grau-epica-fundo:var(--cfg-grau-epica-fundo,#F1EAE3); --grau-epica-borda:var(--cfg-grau-epica-borda,#D7CDC4);
  --grau-lendaria-veu:var(--cfg-grau-lendaria-veu,#E7DCD1); --grau-lendaria-profundo:var(--cfg-grau-lendaria-profundo,#171008);
  --grau-lendaria-profundo-rgb:var(--cfg-grau-lendaria-profundo-rgb,23,16,8);
  --grau-lendaria-tinta:var(--cfg-grau-lendaria-tinta,#342C23); --grau-lendaria-fundo:var(--cfg-grau-lendaria-fundo,#EDE7DF); --grau-lendaria-borda:var(--cfg-grau-lendaria-borda,#D8CDC2);
  --grau-lendaria-filete:var(--cfg-grau-lendaria-filete,#736660);
  --grau-palco:#FFFFFF;

  --mc-ease:cubic-bezier(.2,.8,.2,1);
  --mc-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --mc-ease-varre:cubic-bezier(.4,0,.2,1);
}
[data-modo="escuro"]{
  --grau-comum-tinta:var(--cfg-grau-comum-tinta-escuro,#C3BCB6); --grau-comum-fundo:var(--cfg-grau-comum-fundo-escuro,#2B2520); --grau-comum-borda:var(--cfg-grau-comum-borda-escuro,#47413C);
  --grau-incomum-tinta:var(--cfg-grau-incomum-tinta-escuro,#C3BCB4); --grau-incomum-fundo:var(--cfg-grau-incomum-fundo-escuro,#26211B); --grau-incomum-borda:var(--cfg-grau-incomum-borda-escuro,#47413B);
  --grau-rara-tinta:var(--cfg-grau-rara-tinta-escuro,#C4BCB4); --grau-rara-fundo:var(--cfg-grau-rara-fundo-escuro,#221C15); --grau-rara-borda:var(--cfg-grau-rara-borda-escuro,#48413A);
  --grau-epica-tinta:var(--cfg-grau-epica-tinta-escuro,#C6BCB2); --grau-epica-fundo:var(--cfg-grau-epica-fundo-escuro,#1D1711); --grau-epica-borda:var(--cfg-grau-epica-borda-escuro,#494139);
  --grau-lendaria-tinta:var(--cfg-grau-lendaria-tinta-escuro,#C6BCB1); --grau-lendaria-fundo:var(--cfg-grau-lendaria-fundo-escuro,#18130C); --grau-lendaria-borda:var(--cfg-grau-lendaria-borda-escuro,#494137);
  --grau-lendaria-filete:var(--cfg-grau-lendaria-filete-escuro,#A3958E);
}

[data-grau="1"]{--g-veu:var(--grau-comum-veu);--g-profundo:var(--grau-comum-profundo);--g-profundo-rgb:var(--grau-comum-profundo-rgb);--g-tinta:var(--grau-comum-tinta);--g-fundo:var(--grau-comum-fundo);--g-borda:var(--grau-comum-borda)}
[data-grau="2"]{--g-veu:var(--grau-incomum-veu);--g-profundo:var(--grau-incomum-profundo);--g-profundo-rgb:var(--grau-incomum-profundo-rgb);--g-tinta:var(--grau-incomum-tinta);--g-fundo:var(--grau-incomum-fundo);--g-borda:var(--grau-incomum-borda)}
[data-grau="3"]{--g-veu:var(--grau-rara-veu);--g-profundo:var(--grau-rara-profundo);--g-profundo-rgb:var(--grau-rara-profundo-rgb);--g-tinta:var(--grau-rara-tinta);--g-fundo:var(--grau-rara-fundo);--g-borda:var(--grau-rara-borda)}
[data-grau="4"]{--g-veu:var(--grau-epica-veu);--g-profundo:var(--grau-epica-profundo);--g-profundo-rgb:var(--grau-epica-profundo-rgb);--g-tinta:var(--grau-epica-tinta);--g-fundo:var(--grau-epica-fundo);--g-borda:var(--grau-epica-borda)}
[data-grau="5"]{--g-veu:var(--grau-lendaria-veu);--g-profundo:var(--grau-lendaria-profundo);--g-profundo-rgb:var(--grau-lendaria-profundo-rgb);--g-tinta:var(--grau-lendaria-tinta);--g-fundo:var(--grau-lendaria-fundo);--g-borda:var(--grau-lendaria-borda)}

.mc-caixa{border-color:var(--g-tinta);padding-top:24px;display:flex;flex-direction:column}
.mc-caixa>*{flex:none}
.mc-mola{flex:1 1 auto}
.mc.mc-medindo{visibility:hidden}
.mc-palco{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;height:208px;margin:0 0 20px;border-radius:8px;
  background-color:var(--g-veu);
  box-shadow:inset 0 0 0 1px var(--g-borda);
  user-select:none;cursor:default;
  transition:background-color .36s ease,box-shadow .36s ease;
}
.mc-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block;
  opacity:0;transition:opacity .36s ease}
.mc-foto.mc-foto-ativa{opacity:1}
.mc-foto.mc-foto-quebrada{visibility:hidden}
.mc-foto-falha{position:absolute;inset:0;margin:auto;width:40px;height:40px;
  fill:none;stroke:var(--g-tinta);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mc-nome{font-size:var(--t40);text-wrap:balance;overflow-wrap:anywhere;user-select:text;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mc-grau{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.mc-pill{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px 4px 10px;
  border-radius:4px;background:var(--g-profundo);color:var(--g-veu);user-select:none;
  font-family:var(--fb);font-size:var(--t12);font-weight:600;letter-spacing:.2px}
[data-modo="escuro"] .mc-pill{box-shadow:inset 0 0 0 1px var(--g-tinta)}
.mc-pips{display:inline-flex;gap:3px}
.mc-pips i{width:6px;height:6px;border-radius:1px;background:currentColor;opacity:.28}
.mc[data-grau="1"] .mc-pips i:nth-child(-n+1),
.mc[data-grau="2"] .mc-pips i:nth-child(-n+2),
.mc[data-grau="3"] .mc-pips i:nth-child(-n+3),
.mc[data-grau="4"] .mc-pips i:nth-child(-n+4),
.mc[data-grau="5"] .mc-pips i{opacity:1}
.mc-rotulo{font-size:var(--t12);color:var(--ink-3);user-select:none}
.mc-frase{margin-top:12px;user-select:text}
.mc-serie{font-size:var(--t11);color:var(--muted);margin-top:6px;user-select:text}
.mc-mais{font-size:var(--t12);color:var(--ink-2);margin-top:14px;padding-top:12px;border-top:1px solid var(--bege-2);user-select:none}
.mc-acoes{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.mc-passo{font-size:var(--t11);color:var(--muted);margin-right:auto;font-variant-numeric:tabular-nums;user-select:none}
.mc-reflexo{display:none}
.mc-nome,.mc-grau,.mc-frase,.mc-serie,.mc-mais,.mc-passo,.mc-ver{transition:opacity .22s ease}
.mc-trocando .mc-nome,.mc-trocando .mc-grau,.mc-trocando .mc-frase,.mc-trocando .mc-serie,
.mc-trocando .mc-mais,.mc-trocando .mc-passo,.mc-trocando .mc-ver{opacity:0;transition-duration:.18s}
.mc .btn{cursor:pointer;user-select:none}

.mc[data-grau="4"],.mc[data-grau="5"]{background:rgba(var(--g-profundo-rgb),.66)}
.mc[data-grau="5"]{background:rgba(var(--g-profundo-rgb),.72)}
.mc[data-grau="5"] .mc-caixa{
  border-color:var(--grau-lendaria-filete);
  box-shadow:0 0 0 4px var(--papel),0 0 0 5px var(--grau-lendaria-filete),0 16px 40px var(--sombra);
}
.mc[data-grau="5"] .mc-reflexo{
  display:block;position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-12deg);pointer-events:none;opacity:0;
}

@keyframes mc-palco-entra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes mc-veu-inunda{from{background-color:var(--grau-palco)}}
@keyframes mc-sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mc-pill-pop{from{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes mc-pip{from{opacity:.28;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mc-filete{from{box-shadow:0 0 0 4px var(--papel),0 0 0 5px transparent,0 16px 40px var(--sombra)}}
@keyframes mc-varre{0%{opacity:0;left:-60%}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:115%}}

.mc.mc-anima .mc-palco{animation:mc-palco-entra .6s var(--mc-ease) .1s both, mc-veu-inunda .7s ease-out .35s both}
.mc.mc-anima[data-grau="3"] .mc-palco,
.mc.mc-anima[data-grau="4"] .mc-palco,
.mc.mc-anima[data-grau="5"] .mc-palco{animation:joia-entra .7s var(--mc-ease) .1s both, mc-veu-inunda .7s ease-out .35s both}
.mc.mc-anima .mc-nome{animation:mc-sobe .4s var(--mc-ease) .45s both}
.mc.mc-anima .mc-pill{animation:mc-pill-pop .45s var(--mc-ease-pop) .6s both}
.mc.mc-anima[data-grau="1"] .mc-pill{animation:mc-sobe .3s var(--mc-ease) .6s both}
.mc.mc-anima .mc-rotulo{animation:mc-sobe .3s var(--mc-ease) .6s both}
.mc.mc-anima .mc-frase,.mc.mc-anima .mc-serie,.mc.mc-anima .mc-mais{animation:mc-sobe .4s var(--mc-ease) .7s both}
.mc.mc-anima[data-grau="3"] .mc-pips i:nth-child(-n+3),
.mc.mc-anima[data-grau="4"] .mc-pips i:nth-child(-n+4),
.mc.mc-anima[data-grau="5"] .mc-pips i{animation:mc-pip .18s ease-out both}
.mc.mc-anima .mc-pips i:nth-child(1){animation-delay:.75s}
.mc.mc-anima .mc-pips i:nth-child(2){animation-delay:.84s}
.mc.mc-anima .mc-pips i:nth-child(3){animation-delay:.93s}
.mc.mc-anima .mc-pips i:nth-child(4){animation-delay:1.02s}
.mc.mc-anima .mc-pips i:nth-child(5){animation-delay:1.11s}
.mc.mc-anima[data-grau="5"] .mc-caixa{animation:momento-entra .5s var(--mc-ease) both, mc-filete .4s ease-out .3s both}
.mc.mc-anima[data-grau="5"] .mc-reflexo{animation:mc-varre .9s var(--mc-ease-varre) 1.1s both}

.mc-caixa>*:not(.mc-acoes).mc-saindo{opacity:0;transition:opacity .15s ease}
.mc{transition:background-color .3s ease}

@media (prefers-reduced-motion:reduce){
  .mc,.mc *,.mc .mc-caixa{animation:none !important;transition:none !important}
  .mc .mc-reflexo{display:none}
}

@media (max-width:760px){
  .mc-palco{height:168px;margin-bottom:16px}
  .mc-nome{font-size:var(--t30)}
  .mc-acoes{flex-direction:column;align-items:stretch}
  .mc-acoes .btn{min-height:44px;width:100%}
  .mc-passo{order:-1;margin:0 0 4px;width:100%;text-align:center}
  .mc-caixa{max-height:calc(100dvh - 32px);overflow-y:auto;padding-bottom:max(20px, env(safe-area-inset-bottom))}
}