/* Menu principal (estilo Persona): abre por cima do jogo ao entrar. Tudo fica preso ao #mm (ids e classes com
   prefixo mm-, animações também), para não esbarrar no style.css do jogo. As cores do menu são fixas no magenta. */
#mm {
  --accent: #ff2d8a;
  --accent2: #9b4dff;
  --accent-rgb: 255, 45, 138;
  --accent2-rgb: 155, 77, 255;
  --accent-light: #ff7ac0;
  --ink: #14040e;
  --soft: rgba(255, 222, 242, 0.86); /* itens não selecionados */
  --mx: 0; --my: 0;                   /* mouse, de -1 a 1 (parallax) */
  --font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  position: fixed; inset: 0; z-index: 900; overflow: hidden;
  background: #07020a; color: #fff; font-family: var(--font); user-select: none; -webkit-user-select: none;
  transition: opacity 0.35s;
}
#mm[hidden] { display: none; }
#mm.closing { opacity: 0; pointer-events: none; }
#mm *, #mm *::before, #mm *::after { box-sizing: border-box; }
/* base dos botões sem peso (:where): não pode passar por cima do tamanho e da cor de cada botão do menu */
:where(#mm button) { font: inherit; color: inherit; margin: 0; border-radius: 0; }

/* ---------- cenário ---------- */
#mm-scene { position: absolute; inset: 0; overflow: hidden; }
.mm-bg {
  position: absolute; inset: -6%;
  background: center / cover no-repeat;
  transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)) scale(1.04);
  transition: opacity 0.7s ease, filter 0.7s ease;
  animation: mm-drift 26s ease-in-out infinite alternate;
  opacity: 0;
}
.mm-bg.on { opacity: 1; }
@keyframes mm-drift { from { background-position: 46% 50%; } to { background-position: 54% 46%; } }
.mm-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 0, 18, 0.92) 0%, rgba(10, 0, 18, 0.62) 34%, rgba(10, 0, 18, 0.05) 62%),
    radial-gradient(120% 90% at 70% 40%, transparent 40%, rgba(5, 0, 10, 0.7) 100%);
}
/* feixes de luz passando em diagonal */
.mm-beams i {
  position: absolute; top: -30%; height: 160%; width: 16vw;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.22), transparent);
  transform: rotate(18deg); mix-blend-mode: screen; filter: blur(6px);
  animation: mm-beam 9s linear infinite;
}
.mm-beams i:nth-child(2) { width: 7vw; animation-duration: 13s; animation-delay: -5s; background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb), 0.2), transparent); }
.mm-beams i:nth-child(3) { width: 26vw; animation-duration: 17s; animation-delay: -11s; opacity: 0.6; }
@keyframes mm-beam { from { left: -30vw; } to { left: 120vw; } }
#mm-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px);
}

/* ---------- palavra gigante ---------- */
#mm-giant {
  position: absolute; left: -1.5vw; top: 50%; transform: translateY(-50%) rotate(-90deg);
  transform-origin: center; width: 0; display: flex; justify-content: center; pointer-events: none;
}
#mm-giant span {
  white-space: nowrap; font-weight: 900; font-style: italic; font-size: 24vh; line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.13);
  transition: opacity 0.25s;
}
#mm-giant.swap span { opacity: 0; }

/* ---------- personagem (da cintura para cima: a pose fica ~1,85× maior; a cintura, ≈47% da altura da imagem, cai na
   borda de baixo e as orelhas ficam 3vh abaixo do topo) ---------- */
#mm-stage {
  position: absolute; right: -3vw; bottom: -109vh; height: 206vh; width: 64vw;
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none;
}
.mm-slab {
  position: absolute; right: 10%; top: 2%; width: 62%; height: 52%;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent2-rgb), 0.35));
  clip-path: polygon(22% 0, 100% 4%, 78% 100%, 0 96%);
  transform: translate(calc(var(--mx) * 6px), calc(var(--my) * 4px));
  mix-blend-mode: screen; opacity: 0.55;
  transition: clip-path 0.45s cubic-bezier(0.2, 1.3, 0.3, 1), opacity 0.3s;
}
/* visual de personagem da história: o retrato já é da cintura para cima e tem 1152 px de altura; na altura da tela ele
   fica quase no tamanho original (sem a ampliação de 1,85× das poses de corpo inteiro, que borrava) */
#mm-stage.bust { bottom: -4vh; height: 104vh; }
#mm-stage.switch .mm-slab { clip-path: polygon(30% 0, 100% 10%, 70% 100%, 6% 88%); opacity: 0.9; }
#mm-pose, .mm-silhouette { position: absolute; bottom: 0; height: 100%; }
#mm-pose {
  width: auto; max-width: none;
  transform: translate(calc(var(--mx) * 10px), calc(var(--my) * 6px));
  filter: drop-shadow(0 0 30px rgba(var(--accent-rgb), 0.35));
  animation: mm-breathe 4.2s ease-in-out infinite;
}
@keyframes mm-breathe { 50% { translate: 0 -0.6%; scale: 1.006; } }
#mm-pose.out { animation: mm-pose-out 0.14s ease-in forwards; }
#mm-pose.in { animation: mm-pose-in 0.42s cubic-bezier(0.15, 1.2, 0.3, 1) both, mm-breathe 4.2s 0.42s ease-in-out infinite; }
@keyframes mm-pose-out { to { opacity: 0; translate: 6% 0; filter: blur(4px) drop-shadow(-14px 0 0 rgba(0, 255, 255, 0.7)) drop-shadow(14px 0 0 rgba(255, 0, 120, 0.7)); } }
@keyframes mm-pose-in {
  from { opacity: 0; translate: -7% 0; rotate: 2.5deg; filter: drop-shadow(-18px 0 0 rgba(0, 255, 255, 0.8)) drop-shadow(18px 0 0 rgba(255, 0, 120, 0.8)); }
  60% { opacity: 1; filter: drop-shadow(-8px 0 0 rgba(0, 255, 255, 0.5)) drop-shadow(4px 0 0 rgba(255, 0, 120, 0.5)); }
  to { opacity: 1; translate: 0 0; rotate: 0deg; } /* a sombra ciano (8 px) só aparece durante a entrada */
}
/* silhueta: a mesma pose em magenta, maior e deslocada; pulsa e às vezes "falha" */
.mm-silhouette {
  aspect-ratio: var(--ar, 0.56);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(180deg, var(--accent), var(--accent2));
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  transform: translate(calc(-5vw + var(--mx) * 22px), calc(-1.5vh + var(--my) * 12px)) scale(1.05);
  opacity: 0.55; filter: blur(0.5px);
  animation: mm-sil-pulse 2.6s ease-in-out infinite;
}
@keyframes mm-sil-pulse { 50% { opacity: 0.85; } }
.mm-silhouette.glitch { animation: mm-sil-glitch 0.32s steps(2) 1, mm-sil-pulse 2.6s ease-in-out infinite; }
@keyframes mm-sil-glitch {
  0% { translate: 14px 0; opacity: 1; clip-path: inset(10% 0 55% 0); }
  25% { translate: -18px 0; clip-path: inset(48% 0 20% 0); }
  50% { translate: 10px 0; clip-path: inset(0 0 70% 0); }
  75% { translate: -6px 0; clip-path: inset(65% 0 0 0); }
  100% { translate: 0 0; clip-path: inset(0); }
}

#mm-veil { display: none; } /* só no celular em pé (ver abaixo) */
/* fragmentos de echo (depois do fim da história): flutuam e giram como nas músicas; tamanho e desfoque dão a distância */
.mm-frags { position: absolute; inset: 0; pointer-events: none; }
.mm-frags[hidden] { display: none; }
.mm-frag { position: absolute; width: var(--s); height: var(--s); filter: blur(var(--b)) drop-shadow(0 0 calc(var(--s) * 0.18) rgba(255, 220, 120, 0.85)); opacity: var(--o); animation: mm-frag-float var(--t) ease-in-out infinite alternate; }
.mm-frag svg { width: 100%; height: 100%; overflow: visible; }
.mm-frag path { fill: rgba(255, 220, 120, 0.12); stroke: rgba(255, 230, 150, 0.95); stroke-width: 4; transform-origin: center; transform-box: fill-box; }
.mm-frag .o { animation: mm-frag-spin calc(var(--t) * 0.9) linear infinite; }
.mm-frag .i { stroke-width: 3; opacity: 0.6; animation: mm-frag-spin calc(var(--t) * 0.9) linear infinite reverse; }
.mm-frag.near { --s: 130px; --b: 2.5px; --o: 0.95; --t: 4.6s; right: 36vw; top: 60vh; }
.mm-frag.mid { --s: 62px; --b: 1px; --o: 0.8; --t: 5.8s; right: 10vw; top: 20vh; }
.mm-frag.far { --s: 40px; --b: 2.5px; --o: 0.7; --t: 7.2s; right: 50vw; top: 9vh; }
@media (max-width: 700px) { .mm-frag.near { --s: 84px; right: 3vw; top: 47vh; } .mm-frag.mid { --s: 48px; right: 62vw; top: 16vh; } .mm-frag.far { right: 30vw; top: 9vh; } }
@keyframes mm-frag-float { from { translate: 0 -14px; } to { translate: 0 14px; } }
@keyframes mm-frag-spin { to { rotate: 360deg; } }

/* ---------- topo ---------- */
#mm-brand { position: absolute; left: 3.4vw; top: 3.2vh; font-size: 45px; font-weight: 800; font-style: italic; letter-spacing: 0.01em; transform: skewX(-6deg); }
#mm-brand i, .mm-title-logo i { color: var(--accent); }
/* som geral e música de fundo, separados */
#mm-audio { position: absolute; right: 2.4vw; top: 2.8vh; z-index: 25; display: flex; gap: 8px; }
#mm-audio button, .mm-ar-audio button {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(10, 0, 18, 0.55); transform: skewX(-10deg);
  font-weight: 800; font-style: italic; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
#mm-audio button:hover, .mm-ar-audio button:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.25); }
/* idioma (PT · EN · ES): botões colados, o escolhido em magenta */
/* botões do topo só com ícone (quadrados) */
#mm-audio > button, #mm-lang-btn, .mm-ar-audio button { width: 44px; padding: 0; justify-content: center; }
/* idioma: globo que abre a lista */
#mm-audio .mm-lang { position: relative; display: flex; }
#mm-lang-btn svg.globe { fill: none; stroke: currentColor; stroke-width: 1.8; }
#mm-lang-btn.open { background: var(--accent); border-color: var(--accent); }
.mm-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: 6px;
  background: rgba(14, 2, 22, 0.96); border: 2px solid rgba(255, 255, 255, 0.4); border-left: 4px solid var(--accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.mm-lang-menu[hidden] { display: none; }
#mm-audio .mm-lang-menu button {
  width: auto; height: auto; justify-content: flex-start; padding: 8px 14px; border: 0; background: none; transform: none;
  font-size: 17px; font-weight: 800; font-style: italic; text-transform: none; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.85); text-align: left;
}
#mm-audio .mm-lang-menu button:hover, #mm-audio .mm-lang-menu button:focus-visible { background: rgba(var(--accent-rgb), 0.25); color: #fff; outline: none; }
#mm-audio .mm-lang-menu button.on { background: var(--accent); color: #fff; }
#mm-audio svg, .mm-ar-audio svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#mm-audio .slash, .mm-ar-audio .slash { display: none; stroke: var(--accent); stroke-width: 2.6; }
#mm-audio button[aria-pressed="false"], .mm-ar-audio button[aria-pressed="false"] { opacity: 0.55; }
#mm-audio button[aria-pressed="false"] .slash, .mm-ar-audio button[aria-pressed="false"] .slash { display: inline; }
#mm-audio button[aria-pressed="false"] .wave, .mm-ar-audio button[aria-pressed="false"] .wave { display: none; }
/* som geral desligado: a música também fica muda (o botão dela apaga) */
#mm-audio.all-off #mm-mute-music { opacity: 0.3; pointer-events: none; }

/* ---------- jogador (embaixo da logo) ---------- */
.mm-player {
  position: absolute; left: 3.4vw; bottom: 4.5vh; z-index: 25; /* canto inferior esquerdo */
  display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 10px 44px 10px 10px;
  /* como a legenda de teclas, espelhado: fundo escuro que some para a direita e borda rosa embaixo */
  background: linear-gradient(90deg, rgba(10, 0, 18, 0.82) 60%, transparent);
  border: 0; border-bottom: 2px solid var(--accent);
}
.mm-player > * { transform: none; }
.mm-avatar {
  flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  background: radial-gradient(circle at 50% 38%, #b9a5c9 0 18%, transparent 19%), radial-gradient(ellipse at 50% 100%, #b9a5c9 0 42%, transparent 43%), #2a1636;
}
.mm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-player-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; margin-right: 6px; }
.mm-player-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.mm-player-text strong { font-size: 22px; font-weight: 900; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.mm-player-btn {
  margin-left: auto; padding: 5px 14px; border: 0; cursor: pointer; background: #fff; color: var(--ink);
  font-weight: 900; font-style: italic; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em;
  clip-path: none;
}
.mm-player-btn:hover, .mm-player-btn:focus-visible { background: var(--accent); color: #fff; outline: none; }
/* "Sair": mais discreto que o "Entrar" */
.mm-player-btn.out { background: transparent; color: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); clip-path: none; transform: skewX(0deg); }
.mm-player-btn.out:hover, .mm-player-btn.out:focus-visible { background: rgba(var(--accent-rgb), 0.3); color: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.mm-player-btn[hidden] { display: none; }

/* selo "NOVO" no Desafio Diário (com conta e ainda não jogado hoje; jogado, sem selo): à esquerda do texto, cobrindo a
   pontinha da primeira letra (posição absoluta: não alarga a faixa) */
.mm-item .mm-badge {
  position: absolute; right: 100%; top: 68%; z-index: 1;
  font-size: 0.24em; font-weight: 900; font-style: italic; letter-spacing: 0.08em; padding: 0.18em 0.55em; white-space: nowrap;
  transform: translate(1.35em, -50%) skewX(-10deg); text-shadow: none;
  color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent)); background-size: 200% 100%;
  box-shadow: 0 0 12px var(--accent), 0 0 26px rgba(var(--accent-rgb), 0.6);
  animation: mm-badge-shine 1.6s linear infinite, mm-badge-glow 1.2s ease-in-out infinite;
}
@keyframes mm-badge-shine { to { background-position: -200% 0; } }
@keyframes mm-badge-glow { 50% { box-shadow: 0 0 4px var(--accent), 0 0 10px rgba(var(--accent-rgb), 0.3); } }

/* ---------- menu ---------- */
#mm-menu {
  position: absolute; left: 7vw; top: 52%;
  transform: translate(calc(var(--mx) * -5px), calc(-50% + var(--my) * -3px)) rotate(-8deg);
  transform-origin: left center;
}
#mm-items { list-style: none; margin: 0; padding: 0; position: relative; }
#mm-items li { display: block; }
.mm-item {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.35em;
  background: none; border: 0; padding: 0.02em 0.32em 0.04em 0.2em; cursor: pointer; white-space: nowrap;
  font-size: calc(var(--size, 1) * clamp(44px, 8.2vh, 104px));
  font-weight: 900; font-style: italic; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--soft); text-shadow: 4px 4px 0 rgba(var(--accent-rgb), 0.35);
  transition: color 0.12s, transform 0.18s cubic-bezier(0.2, 1.4, 0.3, 1), text-shadow 0.12s;
  margin-left: var(--shift, 0); /* recuo escalonado de cada linha (margem, para a faixa saber onde o texto está) */
}
.mm-item:focus { outline: none; }
.mm-item small { font-size: 0.26em; font-weight: 800; letter-spacing: 0.08em; padding: 0.2em 0.6em; border: 2px solid currentColor; transform: translateY(-0.9em) skewX(-8deg); opacity: 0.9; }
.mm-item.locked { color: rgba(255, 222, 242, 0.45); }
.mm-item.sel { color: var(--ink); text-shadow: none; transform: translateX(0.18em); }
.mm-item.sel small { color: var(--accent); }
.mm-item.sel.shake { animation: mm-shake 0.28s; }
@keyframes mm-shake { 20% { translate: 4px 0; } 40% { translate: -5px 0; } 60% { translate: 3px 0; } 80% { translate: -2px 0; } }
/* faixa do selecionado: magenta atrás, branco recortado na frente */
.mm-band { position: absolute; left: 0; top: 0; height: 0; width: 0; pointer-events: none; transition: transform 0.22s cubic-bezier(0.2, 1.35, 0.3, 1), width 0.22s cubic-bezier(0.2, 1.35, 0.3, 1), height 0.22s; }
.mm-band i { position: absolute; inset: 0; }
.mm-band .back { background: var(--accent); clip-path: polygon(3% 8%, 100% 0, 97% 100%, 0 92%); transform: translate(10px, 7px) skewX(-10deg); box-shadow: 0 0 40px var(--accent); }
.mm-band .front { background: #fff; clip-path: polygon(0 14%, 99% 0, 100% 84%, 1% 100%); transform: skewX(-10deg); }
.mm-band.pop .front { animation: mm-band-pop 0.3s cubic-bezier(0.2, 1.5, 0.3, 1); transform-origin: left center; }
.mm-band.pop .back { animation: mm-band-pop 0.36s 0.03s cubic-bezier(0.2, 1.5, 0.3, 1); transform-origin: left center; }
@keyframes mm-band-pop { from { scale: 0.35 1; } 60% { scale: 1.06 1; } to { scale: 1 1; } }
/* entrada do menu depois do título */
#mm.intro .mm-item { animation: mm-item-in 0.5s cubic-bezier(0.15, 1.3, 0.3, 1) both; animation-delay: calc(var(--i) * 0.06s + 0.15s); }
@keyframes mm-item-in { from { opacity: 0; translate: -60px 0; } }

/* ---------- descrição ---------- */
#mm-info {
  position: absolute; right: 3vw; bottom: 4.5vh; text-align: right;
  padding: 10px 18px 10px 40px; background: linear-gradient(90deg, transparent, rgba(10, 0, 18, 0.78) 30%);
  border-bottom: 2px solid #fff;
}
/* sem descrição e sem legenda de teclas (decisões de 22/10/2026): a caixa fica escondida (o texto continua no código) */
#mm-info { display: none !important; }
.mm-info-tag { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: 0.12em; color: var(--ink); background: var(--accent); padding: 2px 10px; transform: skewX(-12deg); min-height: 1em; }
.mm-info-tag:empty { display: none; }
#mm-info h2 { margin: 6px 0 2px; font-size: 34px; font-weight: 900; font-style: italic; line-height: 1; color: #fff; }
#mm-info p { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.82); line-height: 1.25; }
.mm-keys { display: flex; gap: 16px; justify-content: flex-end; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
#mm kbd { display: inline-block; min-width: 1.6em; padding: 0 0.35em; margin-right: 3px; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 5px; font: inherit; font-weight: 800; text-align: center; color: #fff; background: none; box-shadow: none; }

/* ---------- título ---------- */
#mm-title {
  position: absolute; inset: 0; z-index: 26; /* acima do card e dos botões do topo (25): ficam borrados atrás do título */ display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(40, 0, 40, 0.35), rgba(5, 0, 10, 0.88) 70%);
  backdrop-filter: blur(6px) saturate(1.2);
  transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s 0.4s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  cursor: pointer;
}
#mm-title.gone { clip-path: polygon(100% 0, 100% 0, 85% 100%, 85% 100%); opacity: 0; pointer-events: none; }
.mm-title-logo {
  font-size: clamp(64px, 13vw, 190px); font-weight: 900; font-style: italic; letter-spacing: -0.03em; line-height: 1;
  transform: skewX(-8deg) rotate(-4deg);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.55), -4px 0 0 rgba(0, 255, 255, 0.35), 4px 0 0 rgba(255, 0, 120, 0.4);
  animation: mm-flicker 4s infinite;
}
@keyframes mm-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.6; } 94% { opacity: 1; } 96% { opacity: 0.75; translate: 3px 0; } 97% { translate: 0 0; } }
/* carregando (tela de título): fio fino embaixo do "pressione", enche enquanto falta algo e some no fim */
.mm-load { position: absolute; left: 50%; bottom: 9vh; width: min(260px, 50vw); height: 3px; translate: -50% 0; background: rgba(255, 255, 255, 0.12); overflow: hidden; transition: opacity 0.6s 0.3s; }
.mm-load i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transform-origin: left; transform: scaleX(0); transition: transform 0.35s ease-out; }
.mm-load.done { opacity: 0; }
.mm-press { margin: 5vh 0 0; font-size: clamp(18px, 2.2vw, 28px); font-weight: 800; letter-spacing: 0.32em; animation: mm-blink 1.4s ease-in-out infinite; text-align: center; }
@keyframes mm-blink { 50% { opacity: 0.25; } }

/* ---------- transição de confirmar ---------- */
#mm-wipe {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(110deg, var(--accent), var(--accent2));
  clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%);
}
#mm-wipe span { font-size: clamp(40px, 7vw, 110px); font-weight: 900; font-style: italic; color: #fff; transform: skewX(-8deg); text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25); opacity: 0; }
#mm-wipe.run { animation: mm-wipe 1.5s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
#mm-wipe.run span { animation: mm-wipe-text 1.5s forwards; }
@keyframes mm-wipe {
  0% { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); }
  30%, 70% { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
  100% { clip-path: polygon(120% 0, 120% 0, 100% 100%, 100% 100%); }
}
/* volta de uma partida: a cortina já começa fechada e abre (historia.js) */
#mm-wipe.out { animation: mm-wipe-out 0.6s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
#mm-wipe.out span { opacity: 0; }
@keyframes mm-wipe-out {
  0% { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
  100% { clip-path: polygon(120% 0, 120% 0, 100% 100%, 100% 100%); }
}
@keyframes mm-wipe-text { 0%, 22% { opacity: 0; translate: -40px 0; } 35%, 65% { opacity: 1; translate: 0 0; } 80%, 100% { opacity: 0; translate: 40px 0; } }

/* ---------- telas cheias do menu (Configurações, Conquistas): o conteúdo da tela do jogo, restilizado ---------- */
.mm-screen {
  position: absolute; inset: 0; z-index: 27; display: flex; flex-direction: column;
  background:
    linear-gradient(120deg, rgba(var(--accent-rgb), 0.16) 0 18%, transparent 18.2%),
    linear-gradient(180deg, rgba(10, 0, 18, 0.9), rgba(6, 0, 12, 0.95));
  backdrop-filter: blur(12px) saturate(1.1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.42s cubic-bezier(0.7, 0, 0.2, 1);
}
.mm-screen[hidden] { display: none; }
.mm-screen.leaving { clip-path: polygon(0 0, 0 0, -15% 100%, -15% 100%); }
/* palavra gigante de fundo, como no menu */
.mm-screen::after {
  content: ''; position: absolute; right: -4vw; bottom: -6vh; width: 46vw; height: 46vw; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(var(--accent-rgb), 0.07) 0 2px, transparent 2px 16px);
  clip-path: polygon(30% 0, 100% 10%, 80% 100%, 0 90%);
}
.mm-set-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 28px; padding: 3.2vh 4vw 2vh; margin: 0; width: auto; }
.mm-set-head h1 {
  margin: 0; font-size: clamp(44px, 7vh, 84px); font-weight: 900; font-style: italic; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1; /* reto, sem girar (o itálico da fonte fica) */
  text-shadow: 5px 5px 0 rgba(var(--accent-rgb), 0.55);
}
.mm-set-back { flex: none; margin-left: 0; font-size: 18px; padding: 8px 18px; }
.mm-set-arrow { font-style: normal; }
.mm-set-body {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 1vh 4vw 6vh;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.6) transparent;
}
/* Configurações: duas colunas (gerais à esquerda; teclado e controle à direita) */
.mm-screen--settings .mm-set-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px 28px; align-content: start; }
.mm-screen--settings .mm-set-body > .mm-lang-panel + .panel { grid-row: span 2; } /* o painel geral: ocupa a altura do teclado + controle */
.mm-set-body > .legal-links { grid-column: 1 / -1; margin: 0; font-size: 14px; opacity: 0.6; }
.mm-set-body > .legal-links a { color: inherit; }
.mm-screen:not(.leaving) .mm-set-body > * { animation: mm-set-in 0.45s cubic-bezier(0.15, 1.2, 0.3, 1) both; }
.mm-screen .mm-set-body > :nth-child(2) { animation-delay: 0.06s; }
.mm-screen .mm-set-body > :nth-child(3) { animation-delay: 0.12s; }
@keyframes mm-set-in { from { opacity: 0; translate: 40px 0; } }
/* os painéis do jogo, com a cara do menu */
.mm-screen .panel {
  margin: 0; padding: 22px 24px; border-radius: 0; color: #fff;
  background: rgba(22, 4, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.mm-screen .panel-head h3, .mm-screen .panel h3 { font-size: 28px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; }
.mm-screen .field { margin-top: 20px; }
.mm-screen .field:first-child { margin-top: 0; }
.mm-screen .field label { font-size: 19px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; }
.mm-screen .field output { font-size: 20px; font-weight: 800; font-style: italic; color: var(--accent-light); }
.mm-screen input[type=range] { accent-color: var(--accent); height: 22px; cursor: pointer; }
.mm-screen .toggle { font-size: 18px; font-weight: 600; margin-top: 16px; }
.mm-screen .toggle input { accent-color: var(--accent); width: 20px; height: 20px; flex: none; }
.mm-screen .toggle a { color: var(--accent-light); }
.mm-screen .hint, .mm-screen .pad-status { font-size: 15px; color: rgba(255, 255, 255, 0.62); }
.mm-screen .hint kbd { height: 22px; font-size: 12px; }
.mm-screen .btn.small.ghost {
  padding: 6px 14px; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; cursor: pointer;
  font-weight: 800; font-style: italic; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; transform: skewX(-10deg); border-radius: 0;
}
.mm-screen .btn.small.ghost:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.25); }
.mm-screen .key-config { border-radius: 0; background: rgba(255, 255, 255, 0.05); }
.mm-screen .key-config-name { font-size: 14px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mm-screen .key-slot { font-family: var(--font); font-size: 18px; font-weight: 800; border-radius: 0; }
.mm-screen select {
  font: 700 17px var(--font); color: #fff; background: rgba(10, 0, 18, 0.8); border: 2px solid rgba(255, 255, 255, 0.4); padding: 6px 10px; border-radius: 0;
}
.mm-screen .yt-message:empty { display: none; }
/* painel de idioma no topo das Configurações (ocupa a largura toda) */
.mm-screen--settings .mm-set-body > .mm-lang-panel { grid-column: 1 / -1; }
/* o personagem do menu (prêmio da História), logo abaixo do idioma: a linha inteira; o painel geral continua alto */
.mm-screen--settings .mm-set-body > .mm-lang-panel + .mm-skin-panel { grid-column: 1 / -1; grid-row: auto; }
.mm-screen--settings .mm-set-body > .mm-skin-panel + .panel { grid-row: span 2; }
.mm-skin-panel[hidden] { display: none; }
.mm-lang-big { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-lang-big button {
  padding: 10px 22px; border: 2px solid rgba(255, 255, 255, 0.45); background: transparent; color: #fff; cursor: pointer;
  font-weight: 800; font-style: italic; font-size: 20px; letter-spacing: 0.02em; transform: skewX(-10deg); transition: background 0.15s, border-color 0.15s;
}
.mm-lang-big button:hover, .mm-lang-big button:focus-visible { border-color: var(--accent); outline: none; }
.mm-lang-big button.on { background: var(--accent); border-color: var(--accent); }

/* Desafio Diário: a música de hoje em destaque (capa grande, título, tempo, jogar) e o ranking de hoje ao lado;
   embaixo, os 6 dias anteriores (com o de hoje, a semana) */
.mm-screen--daily .mm-set-sub { display: none; } /* o texto explicativo da tela do jogo fica de fora */
/* Geral / Seguindo no topo (um só para todos os rankings da tela); as chaves dos cartões ficam escondidas */
.mm-scope { margin-left: auto; display: flex; gap: 4px; align-self: center; }
.mm-scope button {
  padding: 8px 20px; border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(10, 0, 18, 0.5); color: rgba(255, 255, 255, 0.85); cursor: pointer;
  font-family: var(--font); font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
}
.mm-scope button:hover { border-color: var(--accent); }
.mm-scope button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mm-screen--daily #daily-scope, .mm-screen--daily .daily-past-scope { display: none; }
.mm-screen--daily #daily-status-msg { font-size: 18px; color: rgba(255, 255, 255, 0.7); }
.mm-screen--daily .daily-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
/* o desafio de hoje em dourado (como no resto do jogo) */
.mm-screen--daily .daily-card {
  --gold: #ffcf6e; --gold-2: #f0a93a; --gold-rgb: 255, 207, 110;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px 26px; align-items: start; margin: 0; padding: 26px;
  border-radius: 0; border: 1px solid rgba(var(--gold-rgb), 0.35); border-left: 6px solid var(--gold);
  background: linear-gradient(130deg, rgba(var(--gold-rgb), 0.26), rgba(40, 22, 8, 0.6) 40%, rgba(22, 4, 30, 0.85) 75%);
  box-shadow: 0 0 50px rgba(var(--gold-rgb), 0.16), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.mm-screen--daily .daily-cover {
  border-radius: 0; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); outline: 2px solid rgba(255, 255, 255, 0.2);
}
.mm-screen--daily .daily-label {
  display: inline-block; padding: 3px 12px; font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2a1600; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform: skewX(-12deg);
}
.mm-screen--daily .daily-info h2 { margin: 12px 0 4px; font-size: clamp(32px, 4.4vh, 52px); font-weight: 900; font-style: italic; line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; }
.mm-screen--daily .daily-info p { font-size: 22px; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.mm-screen--daily .daily-ends { margin-top: 12px !important; font-size: 18px !important; font-weight: 800; font-style: italic; color: var(--gold) !important; }
.mm-screen--daily .daily-state { font-size: 19px; }
.mm-screen--daily #daily-play {
  padding: 14px 34px; border: 0; border-radius: 0; transform: skewX(-10deg); cursor: pointer;
  background: #fff; color: var(--ink); font-family: var(--font); font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em;
  box-shadow: 8px 8px 0 var(--gold);
}
.mm-screen--daily #daily-play:hover, .mm-screen--daily #daily-play:focus-visible { background: linear-gradient(90deg, var(--gold), var(--gold-2)); color: #2a1600; box-shadow: 8px 8px 0 #fff; outline: none; filter: none; }
.mm-screen--daily #daily-play svg { width: 22px; height: 22px; }
.mm-screen--daily #daily-login { border-radius: 0; transform: skewX(-10deg); font-family: var(--font); font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-screen--daily #daily-tries { font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.75); margin-top: 14px; }
.mm-screen--daily .board-scope { padding: 0; border: 0; border-radius: 0; background: none; gap: 4px; }
.mm-screen--daily .board-scope button {
  padding: 5px 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 0; transform: skewX(-10deg); color: rgba(255, 255, 255, 0.8);
  font-family: var(--font); font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase;
}
.mm-screen--daily .board-scope button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mm-screen--daily .daily-row { border-radius: 0; font-size: 19px; font-weight: 700; padding: 8px 10px; }
.mm-screen--daily .daily-rank.big .daily-row { grid-template-columns: 40px 36px minmax(0, 1fr) auto; }
.mm-screen--daily .daily-rank.big .avatar.small { width: 36px; height: 36px; }
.mm-screen--daily .daily-row:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.mm-screen--daily .daily-row.me { background: rgba(var(--accent-rgb), 0.22); box-shadow: inset 4px 0 0 var(--accent); }
.mm-screen--daily .daily-pos { font-size: 22px; font-weight: 900; font-style: italic; }
.mm-screen--daily .daily-res { font-size: 19px; }
.mm-screen--daily .daily-res .grade { color: var(--accent-light); font-weight: 900; font-style: italic; }
.mm-screen--daily .daily-res .grade.s { color: #ffd166; }
.mm-screen--daily #daily-past-sec { margin-top: 30px; }
.mm-screen--daily #daily-past-sec .section-title {
  position: relative; z-index: 0; display: block; width: fit-content; margin: 0 0 14px; padding: 2px 16px 2px 10px;
  font-size: 30px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff;
}
.mm-screen--daily #daily-past-sec .section-title::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(var(--accent-rgb), 0.28); border-left: 4px solid var(--accent); transform: skewX(-12deg);
}
/* 6 cartões fechando linhas inteiras: 6 / 3 + 3 / 2 + 2 + 2 / 1 por linha */
.mm-screen--daily .daily-past { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1800px) { .mm-screen--daily .daily-past { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mm-screen--daily .daily-past { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mm-screen--daily .daily-past { grid-template-columns: minmax(0, 1fr); } }
.mm-screen--daily .daily-past-card { border-left: 4px solid rgba(var(--accent-rgb), 0.7); }
.mm-screen--daily .daily-past-song { color: #fff; font-family: var(--font); }
.mm-screen--daily .daily-past-song img { border-radius: 0; }
.mm-screen--daily .daily-past-info strong { font-size: 19px; font-weight: 900; font-style: italic; }
.mm-screen--daily .daily-past-info span, .mm-screen--daily .daily-past-me { font-size: 15px; color: rgba(255, 255, 255, 0.65); }
.mm-screen--daily .daily-past-card .daily-row { font-size: 16px; padding: 5px 6px; }
.mm-screen--daily .small-text, .mm-screen--daily #daily-rank-empty { font-size: 16px; color: rgba(255, 255, 255, 0.6); }
/* tablet e telas estreitas: o cartão do desafio e o ranking um embaixo do outro */
@media (max-width: 1100px) {
  .mm-screen--daily .daily-top { grid-template-columns: minmax(0, 1fr); }
}
/* cartões da semana: sem as frases de "ninguém pontuou" / "você não segue ninguém"; o cartão fecha no que tem */
.mm-screen--daily .daily-past-card .small-text { display: none; }
.mm-screen--daily .daily-past-card .daily-rank:not(:has(li)) { display: none; }

/* ---------- Arcade (arcade.js): roda de músicas | detalhes; Jogar embaixo da roda ---------- */
.mm-ar { --ar-easy: #6ee7a0; --ar-normal: #56d4f5; --ar-hard: #ff4d6d; --ar-nightmare: #b56cff; background: #07020a; overflow: hidden; }
.mm-ar-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mm-ar-bgimg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) saturate(1.3) brightness(0.55); opacity: 0; transition: opacity 0.6s; transform: scale(1.1); }
.mm-ar-bgimg.on { opacity: 1; }
.mm-ar-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 0, 18, 0.88) 0%, rgba(10, 0, 18, 0.55) 45%, rgba(10, 0, 18, 0.7) 100%); }
.mm-ar > .mm-set-head, .mm-ar-body { position: relative; z-index: 1; }
/* abas e, ao lado, os mesmos botões de som do menu */
.mm-ar-extra { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.mm-ar-audio { display: flex; gap: 8px; }
.mm-ar-tabs { display: flex; gap: 4px; }
.mm-ar-tabs button {
  padding: 8px 18px; border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(10, 0, 18, 0.5); color: rgba(255, 255, 255, 0.85); cursor: pointer;
  font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
}
.mm-ar-tabs button:hover { border-color: var(--accent); }
.mm-ar-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mm-ar-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 3vw; padding: 0 4vw 4vh; }
.mm-ar-col { display: flex; flex-direction: column; min-height: 0; }
.mm-ar-tools { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.mm-ar-search {
  flex: 1; min-width: 0; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; transform: skewX(-10deg);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5); background: linear-gradient(90deg, transparent, rgba(10, 0, 18, 0.6));
}
.mm-ar-search > * { transform: skewX(10deg); }
.mm-ar-search:focus-within { border-color: var(--accent); }
.mm-ar-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.mm-ar-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: 700 italic 19px var(--font); }
.mm-ar-search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.mm-ar-addbtn {
  flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer;
  background: rgba(10, 0, 18, 0.55); color: #fff; font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
}
.mm-ar-addbtn b { font-size: 24px; line-height: 1; color: var(--accent); font-style: normal; }
.mm-ar-addbtn:hover, .mm-ar-addbtn:focus-visible { background: var(--accent); border-color: var(--accent); outline: none; }
.mm-ar-addbtn:hover b, .mm-ar-addbtn:focus-visible b { color: #fff; }
.mm-ar-addbtn.big { height: 52px; padding: 0 26px; font-size: 22px; background: var(--accent); border-color: var(--accent); }
.mm-ar-addbtn.big b { color: #fff; }
.mm-ar-addbtn[hidden] { display: none; }
.mm-ar-queue { flex: none; display: grid; gap: 4px; max-width: 460px; margin: 0 0 6px; padding: 6px 12px; font-size: 15px; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.85); background: linear-gradient(90deg, rgba(10, 0, 18, 0.75) 70%, transparent); border-bottom: 2px solid var(--accent); }
.mm-ar-queue[hidden] { display: none; }
.mm-ar-queue i { display: block; height: 5px; background: rgba(255, 255, 255, 0.12); }
.mm-ar-queue b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 0.3s; }
/* roda */
.mm-ar-wheel { position: relative; flex: 1; min-height: 0; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.mm-ar-band { position: absolute; left: 0; right: 4%; top: 50%; height: 92px; translate: 0 -50%; pointer-events: none; }
.mm-ar-band[hidden] { display: none; }
.mm-ar-band i { position: absolute; inset: 0; }
.mm-ar-band .back { background: var(--accent); clip-path: polygon(2% 8%, 100% 0, 98% 100%, 0 92%); transform: translate(10px, 7px) skewX(-10deg); box-shadow: 0 0 40px var(--accent); }
.mm-ar-band .front { background: #fff; clip-path: polygon(0 12%, 99% 0, 100% 86%, 1% 100%); transform: skewX(-10deg); }
.mm-ar-band.pop .front { animation: mm-band-pop 0.28s cubic-bezier(0.2, 1.5, 0.3, 1); transform-origin: left center; }
.mm-ar-band.pop .back { animation: mm-band-pop 0.34s 0.03s cubic-bezier(0.2, 1.5, 0.3, 1); transform-origin: left center; }
.mm-ar-items { position: absolute; inset: 0; }
.mm-ar-song {
  position: absolute; left: 0; top: 50%; width: 92%; height: 72px; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  padding: 0 18px 0 14px; cursor: pointer; transform-origin: left center; color: var(--soft);
  transition: transform 0.24s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.24s, color 0.15s;
}
.mm-ar-song img { width: 112px; height: 63px; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); background: #1a0a22; }
.mm-ar-song img.blank { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.mm-ar-song .txt { min-width: 0; line-height: 1.02; }
.mm-ar-song strong { display: block; font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 3px 3px 0 rgba(var(--accent-rgb), 0.35); }
.mm-ar-song span { display: block; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-ar-song .rank { font-size: 26px; font-weight: 900; font-style: italic; color: var(--accent-light); min-width: 34px; text-align: center; }
.mm-ar-song .rank.s { color: #ffd166; }
.mm-ar-song .tag { font-size: 13px; font-weight: 900; font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--accent2); padding: 1px 8px; transform: skewX(-12deg); }
.mm-ar-song.sel { color: var(--ink); }
.mm-ar-song.sel strong { text-shadow: none; }
.mm-ar-song.sel span { color: rgba(20, 4, 14, 0.65); }
.mm-ar-song.sel .rank { color: var(--accent); }
.mm-ar-song.sel .rank.s { color: #c98a00; }
/* a música do Desafio Diário: dourada na roda, e a faixa fica dourada quando ela é a escolhida */
.mm-ar-song.daily strong { color: #ffcf6e; text-shadow: 3px 3px 0 rgba(240, 169, 58, 0.35); }
.mm-ar-song.daily span { color: rgba(255, 207, 110, 0.75); }
.mm-ar-song.daily img { filter: drop-shadow(0 0 8px rgba(255, 207, 110, 0.8)); }
.mm-ar-song.daily.sel strong { color: #3a2000; text-shadow: none; }
.mm-ar-song.daily.sel span { color: rgba(58, 32, 0, 0.7); }
.mm-ar-song.daily.sel .rank, .mm-ar-song.daily.sel .rank.s { color: #3a2000; }
.mm-ar-band.daily .front { background: linear-gradient(90deg, #ffe3a3, #ffcf6e 55%, #f0a93a); }
.mm-ar-band.daily .back { background: #f0a93a; box-shadow: 0 0 40px rgba(255, 207, 110, 0.8); }
.mm-ar-audio .mm-ar-dailybtn { color: #ffcf6e; }
.mm-ar-audio .mm-ar-dailybtn path { fill: currentColor; stroke: none; }
.mm-ar-audio .mm-ar-dailybtn[aria-pressed="false"] { color: #fff; }
.mm-ar-audio .mm-ar-dailybtn[aria-pressed="false"] path { fill: none; stroke: currentColor; }
.mm-ar-audio .mm-ar-dailybtn[aria-pressed="false"] .slash { display: inline; }
.mm-ar-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-size: 24px; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.6); text-align: center; padding: 0 20px; }
.mm-ar-empty[hidden] { display: none; }
.mm-ar-empty p { margin: 0; }
.mm-ar-empty.loading { animation: mm-ar-blink 1.2s ease-in-out infinite alternate; }
@keyframes mm-ar-blink { to { opacity: 0.45; } }
.mm-ar-link { display: inline-block; margin: 0 4px; padding: 2px 14px; border: 0; cursor: pointer; background: var(--accent); color: #fff; font: 900 italic 20px var(--font); text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg); }
.mm-ar-link:hover, .mm-ar-link:focus-visible { background: #fff; color: var(--ink); outline: none; }
.mm-ar-count { position: absolute; left: 14px; bottom: 6px; font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); }
/* prévia: botão na capa e na faixa da escolhida */
.mm-ar-pv {
  position: absolute; right: 5%; bottom: 10px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(10, 0, 18, 0.75); color: #fff; transform: skewX(-10deg);
}
.mm-ar-pv:hover, .mm-ar-pv:focus-visible { background: var(--accent); border-color: var(--accent); outline: none; }
.mm-ar-pv svg { width: 24px; height: 24px; fill: currentColor; }
.mm-ar-pv .pv-off, .mm-ar.pv-off .mm-ar-pv .pv-on { display: none; }
.mm-ar.pv-off .mm-ar-pv .pv-off { display: block; }
.mm-ar.pv-off .mm-ar-pv { opacity: 0.75; }
.mm-ar.pv-playing .mm-ar-pv .pv-on rect { transform-origin: center bottom; transform-box: fill-box; animation: mm-eq 0.7s ease-in-out infinite alternate; }
.mm-ar.pv-playing .mm-ar-pv .pv-on rect:nth-child(2) { animation-delay: -0.25s; }
.mm-ar.pv-playing .mm-ar-pv .pv-on rect:nth-child(3) { animation-delay: -0.45s; }
@keyframes mm-eq { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.mm-ar-pv.small { position: static; width: 38px; height: 38px; display: none; border-color: rgba(20, 4, 14, 0.5); background: transparent; color: var(--ink); }
.mm-ar-song.sel .mm-ar-pv.small { display: grid; }
.mm-ar-song.sel .mm-ar-pv.small:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* capa: curtir (as suas músicas), compartilhar e denunciar, lado a lado no canto */
.mm-ar-acts { position: absolute; right: 5%; bottom: 10px; display: flex; gap: 8px; }
.mm-ar-acts button {
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(10, 0, 18, 0.75); color: #fff; transform: skewX(-10deg);
  transition: background 0.15s, border-color 0.15s;
}
.mm-ar-acts button:hover, .mm-ar-acts button:focus-visible { background: var(--accent); border-color: var(--accent); outline: none; }
.mm-ar-acts svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-ar-like.on { background: var(--accent); border-color: var(--accent); }
.mm-ar-like.on svg { fill: currentColor; }
.mm-ar-like.on:hover { background: rgba(10, 0, 18, 0.75); border-color: var(--accent); color: var(--accent); }
/* Jogar: embaixo da roda, na largura da coluna */
.mm-ar-play {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 18px 4px 0; padding: 16px 40px; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); font-size: 30px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em;
  transform: skewX(-10deg); box-shadow: 8px 8px 0 var(--accent); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.mm-ar-play svg { width: 24px; height: 24px; fill: currentColor; }
.mm-ar-play:hover:not(:disabled), .mm-ar-play:focus-visible { background: var(--accent); color: #fff; box-shadow: 8px 8px 0 #fff; outline: none; }
.mm-ar-play:disabled { opacity: 0.4; cursor: default; }
/* detalhes */
.mm-ar-detail { display: flex; flex-direction: column; gap: 1.4vh; min-width: 0; min-height: 0; }
.mm-ar-detail.swap > * { animation: mm-ar-in 0.35s cubic-bezier(0.15, 1.2, 0.3, 1) both; }
.mm-ar-detail.swap > :nth-child(2) { animation-delay: 0.03s; } .mm-ar-detail.swap > :nth-child(3) { animation-delay: 0.06s; } .mm-ar-detail.swap > :nth-child(n+4) { animation-delay: 0.09s; }
@keyframes mm-ar-in { from { opacity: 0; translate: 28px 0; } }
.mm-ar-cover { position: relative; width: 100%; max-width: min(620px, 36vh * 16 / 9); aspect-ratio: 16 / 9; flex: none; }
.mm-ar-cover img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); background: #1a0a22; }
.mm-ar-tag { position: absolute; left: 10%; top: -12px; padding: 3px 12px; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; color: #2a1600; background: linear-gradient(90deg, #ffcf6e, #f0a93a); transform: skewX(-12deg); box-shadow: 0 0 18px rgba(255, 207, 110, 0.5); }
.mm-ar-tag:empty { display: none; }
.mm-ar-best { position: absolute; left: 4%; bottom: 10px; z-index: 1; min-width: 150px; padding: 6px 16px; border: 2px solid rgba(255, 255, 255, 0.7); border-left: 5px solid var(--accent); background: rgba(10, 0, 18, 0.85); transform: skewX(-10deg); }
.mm-ar-best > * { transform: skewX(10deg); }
.mm-ar-best small { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; transform-origin: left; }
.mm-ar-best b { display: inline-block; font-size: 34px; font-weight: 900; font-style: italic; margin-right: 8px; color: var(--accent-light); }
.mm-ar-best b.s { color: #ffd166; }
.mm-ar-best span { display: inline-block; font-size: 22px; font-weight: 800; font-style: italic; }
.mm-ar-best em { display: inline-block; font-style: italic; font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.mm-ar-title { margin: 4px 0 0; font-size: clamp(30px, 4.4vh, 54px); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.96; overflow-wrap: anywhere; }
.mm-ar-artist { margin: 0; font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.mm-ar-artist:empty { display: none; }
.mm-ar-chips { display: flex; gap: 10px; }
.mm-ar-own { margin-left: auto; padding: 3px 14px; border: 0; cursor: pointer; background: var(--accent); color: #fff; font-size: 16px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg); }
.mm-ar-own b { font-style: normal; }
.mm-ar-own:hover, .mm-ar-own:focus-visible { background: #fff; color: var(--ink); outline: none; }
.mm-ar-own[hidden] { display: none; }
.mm-ar-chips > span { padding: 3px 12px; font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: 0.06em; border: 2px solid rgba(255, 255, 255, 0.35); transform: skewX(-10deg); color: rgba(255, 255, 255, 0.85); }
.mm-ar-levels { display: flex; gap: 8px; margin-top: 4px; }
.mm-ar-levels button {
  position: relative; flex: 1; padding: 9px 14px 8px; border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(10, 0, 18, 0.55); cursor: pointer; text-align: left; color: #fff;
  transform: skewX(-10deg); transition: background 0.15s, border-color 0.15s;
}
.mm-ar-levels button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lv); }
.mm-ar-levels b { display: block; font-size: 22px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-ar-levels small { display: block; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.65); }
.mm-ar-levels button:hover { border-color: var(--lv); }
.mm-ar-levels button.on { background: var(--lv); border-color: var(--lv); color: var(--ink); }
.mm-ar-levels button.on small { color: rgba(20, 4, 14, 0.7); }
.mm-ar-top { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.mm-ar-top li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 3px 10px; font-size: 18px; font-weight: 700; background: rgba(255, 255, 255, 0.04); }
.mm-ar-top .crown { width: 22px; height: 22px; }
.mm-ar-top li:nth-child(1) .crown { fill: #ffd166; } .mm-ar-top li:nth-child(2) .crown { fill: #d6dbe8; } .mm-ar-top li:nth-child(3) .crown { fill: #e09a5a; }
.mm-ar-top-name { min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-ar-top-name:hover, .mm-ar-top-name:focus-visible { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.mm-ar-top .pts { font-style: italic; font-weight: 800; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
.mm-ar-top .none { display: block; padding: 6px 0; color: rgba(255, 255, 255, 0.5); font-style: italic; background: none; }
.mm-ar-yt { position: absolute; width: 1px; height: 1px; left: -10px; top: -10px; overflow: hidden; opacity: 0; pointer-events: none; }
/* janela de adicionar música */
.mm-ar-dlg {
  width: min(620px, calc(100vw - 32px)); padding: 0; border: 0; color: #fff; font-family: var(--font);
  background: rgba(16, 2, 26, 0.97); border-left: 6px solid var(--accent); box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.25), 0 24px 60px rgba(0, 0, 0, 0.6);
}
.mm-ar-dlg::backdrop { background: rgba(4, 0, 10, 0.7); backdrop-filter: blur(4px); }
.mm-ar-dlg[open] { animation: mm-dlg-in 0.3s cubic-bezier(0.15, 1.2, 0.3, 1); }
@keyframes mm-dlg-in { from { opacity: 0; translate: -30px 0; } }
.mm-ar-dlg form { display: grid; gap: 14px; padding: 26px 28px 24px; }
.mm-ar-dlg h2 { margin: 0; font-size: 40px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; text-shadow: 4px 4px 0 rgba(var(--accent-rgb), 0.55); }
.mm-ar-dlg-help { margin: 0; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.mm-ar-field { display: block; border-bottom: 2px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.04); }
.mm-ar-field:focus-within { border-color: var(--accent); }
.mm-ar-field input { width: 100%; padding: 12px 14px; background: none; border: 0; outline: none; color: #fff; font: 700 19px var(--font); }
.mm-ar-prev { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: center; }
.mm-ar-prev[hidden], .mm-ar-err[hidden] { display: none; }
.mm-ar-prev img { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); background: #1a0a22; }
.mm-ar-prev strong { display: block; font-size: 21px; font-weight: 900; font-style: italic; line-height: 1.1; }
.mm-ar-prev span { display: block; font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }
.mm-ar-prev em { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--accent-light); }
.mm-ar-prev em:empty { display: none; }
.mm-ar-err { margin: 0; font-size: 16px; font-weight: 700; color: #ff8aa8; }
.mm-ar-dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.mm-ar-ghost, .mm-ar-go { padding: 10px 26px; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; cursor: pointer; font-size: 19px; font-weight: 900; font-style: italic; text-transform: uppercase; transform: skewX(-10deg); }
.mm-ar-ghost:hover, .mm-ar-ghost:focus-visible { border-color: var(--accent); outline: none; }
.mm-ar-go { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 6px 6px 0 var(--accent); }
.mm-ar-go:hover:not(:disabled), .mm-ar-go:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.mm-ar-go:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
/* telas baixas (notebook 768 px): capa menor */
@media (max-height: 820px) and (min-aspect-ratio: 4/5) { .mm-ar-cover { max-width: min(560px, 30vh * 16 / 9); } .mm-ar-detail { gap: 1vh; } }
/* tablet: roda mais compacta */
@media (max-width: 1100px) {
  .mm-ar-song { grid-template-columns: 84px minmax(0, 1fr) auto auto; height: 62px; }
  .mm-ar-song img { width: 84px; height: 47px; }
  .mm-ar-song strong { font-size: 21px; } .mm-ar-song span { font-size: 15px; }
  .mm-ar-band { height: 78px; }
  .mm-set-head.mm-ar-head { grid-template-areas: 'back extra' 'title audio'; }
  .mm-ar-extra { display: contents; }
  .mm-ar-tabs { grid-area: extra; justify-self: end; }
  .mm-ar-audio { grid-area: audio; justify-self: end; }
}
/* celular: Voltar e o som em cima, o título, e as três abas embaixo na largura toda */
@media (max-width: 600px) {
  .mm-set-head.mm-ar-head { grid-template-areas: 'back audio' 'title title' 'extra extra'; }
  .mm-ar-tabs { justify-self: stretch; }
  .mm-ar-tabs button { flex: 1; }
}
/* celular e tablet em pé: a roda ocupa a tela; embaixo, as dificuldades e o Jogar fixos */
@media (max-aspect-ratio: 4/5) {
  .mm-ar-body { display: block; padding: 0 0 170px; }
  .mm-ar-col { height: 100%; padding: 0 4vw; }
  .mm-ar-detail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; gap: 10px; padding: 14px 4vw 92px; background: linear-gradient(0deg, rgba(10, 0, 18, 0.96) 70%, transparent); }
  .mm-ar-title, .mm-ar-artist, .mm-ar-chips, .mm-ar-top { display: none; }
  /* da capa, só os botões (curtir, compartilhar, denunciar), à direita em cima das dificuldades */
  .mm-ar-detail .mm-ar-cover { aspect-ratio: auto; max-width: none; }
  .mm-ar-cover > :not(.mm-ar-acts) { display: none; }
  .mm-ar-acts { position: static; justify-content: flex-end; }
  .mm-ar-acts button { width: 42px; height: 42px; }
  .mm-ar-levels button { padding: 8px 10px 7px; } .mm-ar-levels b { font-size: 18px; } .mm-ar-levels small { font-size: 13px; }
  .mm-ar-play { position: absolute; left: 4vw; right: 4vw; bottom: 16px; z-index: 7; margin: 0; }
  .mm-ar-addbtn { padding: 0 12px; font-size: 16px; }
  .mm-ar-prev { grid-template-columns: 110px minmax(0, 1fr); } .mm-ar-prev img { width: 110px; }
}

/* Conquistas: resumo ao lado do título, seções com faixa, cartões no estilo do menu */
.mm-set-sub { margin-left: auto; align-self: flex-end; }
.mm-set-sub:empty { display: none; }
.mm-set-sub .muted {
  margin: 0; padding: 4px 14px; font-size: 18px; font-weight: 800; font-style: italic; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--accent); transform: skewX(-12deg); display: inline-block;
}
.mm-screen--ach .mm-set-body > .section-title {
  position: relative; z-index: 0; display: block; width: fit-content; margin: 26px 0 14px; padding: 2px 16px 2px 10px;
  font-size: 30px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; color: #fff;
}
.mm-screen--ach .mm-set-body > .section-title:first-child { margin-top: 4px; }
.mm-screen--ach .mm-set-body > .section-title::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(var(--accent-rgb), 0.28); border-left: 4px solid var(--accent); transform: skewX(-12deg);
}
.mm-screen--ach .ach-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mm-screen--ach .ach {
  border-radius: 0; padding: 16px 18px; color: #fff;
  background: rgba(22, 4, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid rgba(255, 255, 255, 0.25);
}
.mm-screen--ach .ach.done { border-left-color: var(--accent); background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.16), rgba(22, 4, 30, 0.72) 60%); }
.mm-screen--ach .ach strong { font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: 0.01em; }
.mm-screen--ach .ach span { font-size: 15px; color: rgba(255, 255, 255, 0.68); }
.mm-screen--ach .ach .medal { border-radius: 0; transform: rotate(45deg) scale(0.86); }
.mm-screen--ach .ach .medal > * { transform: rotate(-45deg); }
.mm-screen--ach .ach .meter { height: 6px; border-radius: 0; background: rgba(255, 255, 255, 0.1); }
.mm-screen--ach .ach .meter i { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.mm-screen--ach .ach-progress small, .mm-screen--ach .ach-date { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.mm-screen--ach .mm-set-body > p.muted { font-size: 17px; color: rgba(255, 255, 255, 0.6); }

/* ---------- celular em pé: menu reto e centralizado, itens do mesmo tamanho (o efeito da faixa continua) ---------- */
@media (max-aspect-ratio: 4/5) {
  #mm-stage { width: 100vw; right: 0; } /* personagem no meio da tela */
  /* véu escuro por cima da personagem e do fundo (abaixo do menu): menos informação visual; mais forte embaixo, onde
     ficam os itens */
  #mm-veil {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 0, 14, 0.35) 0%, rgba(8, 0, 14, 0.5) 45%, rgba(8, 0, 14, 0.78) 100%);
  }
  #mm-audio span { display: none; }
  /* topo compacto: logo menor e botões mais estreitos, para o idioma e o som caberem ao lado da logo */
  #mm-brand { font-size: 22px; top: 2.6vh; }
  #mm-audio { gap: 5px; top: 2vh; right: 3vw; }
  #mm-audio button { height: 34px; padding: 0 8px; font-size: 13px; }
  #mm-audio > button, #mm-lang-btn, .mm-ar-audio button { width: 38px; padding: 0; }
  /* card embaixo, centralizado, abaixo do menu */
  .mm-player { min-width: 0; left: 50%; bottom: 3vh; translate: -50% 0; }
  .mm-player-text strong { font-size: 18px; max-width: 120px; }
  #mm-menu { left: 0; right: 0; top: auto; bottom: calc(3vh + 90px); transform: none; }
  #mm-items li { text-align: center; }
  .mm-item { font-size: clamp(30px, 9.5vw, 56px); margin-left: 0; }
  /* as etiquetas não entram na largura do item (ele fica centralizado pelo texto) */
  .mm-item small { position: absolute; left: 100%; top: 50%; transform: translate(0.2em, -50%) skewX(-8deg); font-size: 0.3em; }
  .mm-item .mm-badge { font-size: 0.34em; }
  .mm-info-tag { font-size: 12px; letter-spacing: 0.06em; }
  #mm.intro .mm-item { animation-name: mm-item-in-up; }
  #mm-info { display: none; } /* no celular não há teclas para mostrar */
  #mm-info .mm-keys { display: none; }
  #mm-giant span { font-size: 18vh; }
  .mm-set-head { gap: 14px; padding: 2.4vh 4vw 1.4vh; flex-wrap: wrap; }
  .mm-set-head h1 { font-size: 40px; }
  .mm-set-body { padding: 1vh 4vw 4vh; }
  .mm-screen--settings .mm-set-body { grid-template-columns: minmax(0, 1fr); }
  .mm-screen--settings .mm-set-body > .mm-lang-panel + .panel { grid-row: auto; }
  .mm-screen--settings .mm-set-body > .mm-skin-panel + .panel { grid-row: auto; }
  .mm-set-sub { flex-basis: 100%; margin-left: 0; }
  .mm-screen--ach .ach-list { grid-template-columns: minmax(0, 1fr); }
  .mm-screen--daily .daily-top, .mm-screen--daily .daily-card { grid-template-columns: minmax(0, 1fr); }
  .mm-screen--daily .daily-card { padding: 18px; }
  .mm-screen--daily #daily-play { width: 100%; }
}
@keyframes mm-item-in-up { from { opacity: 0; translate: 0 30px; } }
/* tablet em pé (usa as regras de celular acima): logo 50% maior, como no computador */
@media (max-aspect-ratio: 4/5) and (min-width: 600px) { #mm-brand { font-size: 33px; } }
/* telas cheias no tablet e no celular: Voltar e os extras (Geral/Seguindo, resumo) em cima; o título embaixo, numa
   linha só (lado a lado, o título quebrava e ficava apertado) */
@media (max-width: 1100px) {
  .mm-set-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'back extra' 'title title';
    align-items: center; gap: 14px 12px;
  }
  .mm-set-back { grid-area: back; justify-self: start; }
  .mm-set-head h1 { grid-area: title; white-space: nowrap; justify-self: start; transform-origin: left center; }
  .mm-set-sub, .mm-scope { grid-area: extra; justify-self: end; align-self: center; margin-left: 0; }
  .mm-set-sub { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-bg, .mm-beams i, #mm-pose, .mm-silhouette, .mm-title-logo, .mm-press { animation: none !important; }
}

/* ---------- Perfil (o seu e o dos outros) e Editar perfil: as telas "usuario" e "perfil" do jogo com a cara do menu ---------- */
.mm-screen--profile { z-index: 28; } /* por cima do Arcade e das outras telas */
.mm-screen--profile-edit { z-index: 29; }
/* o card do jogador abre o seu perfil */
#mm-player:has(#mm-logout:not([hidden])) { cursor: pointer; }
#mm-player:has(#mm-logout:not([hidden])):hover .mm-player-text strong { color: var(--accent-light); }
.mm-screen--profile .pf-msg { font-size: 22px; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.7); }
/* cabeçalho: foto recortada com a sombra magenta, nome enorme, bio, números e as ações */
.mm-screen--profile .pf-head {
  grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; align-items: center; padding: 26px 30px; border-left-width: 6px;
  background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.18), rgba(22, 4, 30, 0.72) 45%);
}
.mm-screen--profile .avatar.huge { width: 168px; height: 168px; border: 0; border-radius: 0; overflow: visible; background: none; }
.mm-screen--profile .avatar.huge::before { /* sombra magenta deslocada, mesmo recorte */
  content: ""; position: absolute; inset: 0; translate: 10px 10px; background: var(--accent); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}
.mm-screen--profile .avatar.huge img, .mm-screen--profile .avatar.huge svg { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.mm-screen--profile .avatar.huge svg { padding: 34px; box-sizing: border-box; background: #2a0c36; color: rgba(255, 255, 255, 0.8); }
.mm-screen--profile .avatar.huge img:not([hidden]) + svg { display: none; }
.mm-screen--profile .pf-info h1 {
  font-size: clamp(44px, 6.4vh, 78px); font-weight: 900; font-style: italic; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.005em;
  text-shadow: 5px 5px 0 var(--accent);
}
.mm-screen--profile .pf-bio { margin-top: 12px; font-size: 21px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.85); opacity: 1; }
.mm-screen--profile .pf-counts { gap: 10px; margin-top: 16px; }
.mm-screen--profile .pf-count {
  padding: 4px 16px; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(10, 0, 18, 0.55); color: rgba(255, 255, 255, 0.8);
  font-family: var(--font); font-size: 19px; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
}
.mm-screen--profile .pf-count b { font-size: 24px; font-weight: 900; color: #fff; margin-right: 4px; }
.mm-screen--profile .pf-count:not(.static):hover, .mm-screen--profile .pf-count:not(.static):focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.25); outline: none; }
.mm-screen--profile .pf-count:not(.static):hover span { text-decoration: none; }
.mm-screen--profile .pf-count.static { color: rgba(255, 255, 255, 0.75); }
/* ações: Seguir (ou Editar perfil) em cima; copiar link e denunciar em quadradinhos, como na capa do Arcade */
.mm-screen--profile .pf-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; width: 270px; align-self: center; padding-right: 12px; }
.mm-screen--profile .pf-actions > #pf-follow, .mm-screen--profile .pf-actions > #pf-edit { flex: 1 0 100%; white-space: nowrap; }
.mm-screen--profile .pf-actions .btn {
  border-radius: 0; font-family: var(--font); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* Seguir: o botão branco do Jogar; Deixar de seguir: contornado */
.mm-screen--profile #pf-follow { padding: 14px 24px; font-size: 26px; border: 2px solid rgba(255, 255, 255, 0.6); background: rgba(10, 0, 18, 0.6); color: #fff; }
.mm-screen--profile #pf-follow.primary { border-color: #fff; background: #fff; color: var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.mm-screen--profile #pf-follow:hover:not(:disabled), .mm-screen--profile #pf-follow:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; filter: none; }
.mm-screen--profile #pf-follow.primary:hover:not(:disabled), .mm-screen--profile #pf-follow.primary:focus-visible { box-shadow: 8px 8px 0 #fff; }
.mm-screen--profile #pf-edit { padding: 12px 26px; font-size: 24px; border: 0; background: #fff; color: var(--ink); box-shadow: 7px 7px 0 var(--accent); }
.mm-screen--profile #pf-edit:hover, .mm-screen--profile #pf-edit:focus-visible { background: var(--accent); color: #fff; box-shadow: 7px 7px 0 #fff; outline: none; }
.mm-screen--profile #pf-link, .mm-screen--profile #pf-more {
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(10, 0, 18, 0.6); color: #fff;
}
.mm-screen--profile #pf-link:hover, .mm-screen--profile #pf-more:hover, .mm-screen--profile #pf-link:focus-visible, .mm-screen--profile #pf-more:focus-visible { background: var(--accent); border-color: var(--accent); outline: none; }
.mm-screen--profile #pf-link svg, .mm-screen--profile #pf-more svg { width: 22px; height: 22px; }
.mm-screen--profile .pf-actions [hidden], .mm-screen--profile #pf-more[hidden], .mm-screen--profile #pf-follow[hidden], .mm-screen--profile #pf-edit[hidden] { display: none; }
/* abas: como as do Arcade */
.mm-screen--profile .board-scope.wide.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 18px; padding: 0; border: 0; border-radius: 0; background: none; }
.mm-screen--profile .pf-tabs button {
  flex: none; padding: 8px 20px; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 0; background: rgba(10, 0, 18, 0.5); color: rgba(255, 255, 255, 0.85);
  font-family: var(--font); font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
}
.mm-screen--profile .pf-tabs button:hover { border-color: var(--accent); color: #fff; }
.mm-screen--profile .pf-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.mm-screen--profile .pf-tab { animation: mm-set-in 0.35s cubic-bezier(0.15, 1.2, 0.3, 1) both; }
.mm-screen--profile .pf-mine, .mm-screen--profile .pf-tab > .muted { font-size: 19px; font-style: italic; font-weight: 700; color: rgba(255, 255, 255, 0.65); }
/* melhores pontuações e últimas partidas: faixas como as da roda do Arcade */
.mm-screen--profile .pf-best { gap: 8px; max-width: 1100px; }
.mm-screen--profile .pf-best-row {
  grid-template-columns: 48px 112px minmax(0, 1fr) auto; gap: 16px; padding: 8px 22px 8px 10px; border: 0; border-radius: 0; color: #fff;
  background: rgba(22, 4, 30, 0.72); transform: skewX(-10deg); transition: background 0.15s, translate 0.15s; font-family: var(--font);
}
.mm-screen--profile .pf-best-row.recent { grid-template-columns: 112px minmax(0, 1fr) auto; padding-left: 10px; }
.mm-screen--profile .pf-best-row > * { transform: skewX(10deg); }
.mm-screen--profile .pf-best-row:hover, .mm-screen--profile .pf-best-row:focus-visible { background: #fff; color: var(--ink); translate: 8px 0; outline: none; box-shadow: 6px 6px 0 var(--accent); }
.mm-screen--profile .pf-best-n { font-size: 30px; font-weight: 900; font-style: italic; color: var(--accent); }
.mm-screen--profile .pf-best-row img { width: 112px; height: 63px; border-radius: 0; transform: none; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.mm-screen--profile .pf-best-info strong { font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; }
.mm-screen--profile .pf-best-info span { font-size: 18px; font-weight: 700; color: inherit; opacity: 0.7; }
.mm-screen--profile .pf-best-res { column-gap: 14px; }
.mm-screen--profile .pf-best-res .grade { font-size: 32px; font-weight: 900; font-style: italic; color: var(--accent-light); }
.mm-screen--profile .pf-best-res .grade.s { color: #ffd166; }
.mm-screen--profile .pf-best-res > span { font-size: 26px; font-weight: 900; font-style: italic; }
.mm-screen--profile .pf-best-res small { grid-column: 1 / -1; font-size: 16px; font-weight: 700; opacity: 0.65; }
.mm-screen--profile .pf-best-row:hover .grade, .mm-screen--profile .pf-best-row:focus-visible .grade { color: var(--accent); }

.mm-screen--profile .song-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.mm-screen--profile .tile-wrap { border: 0; border-radius: 0; background: rgba(22, 4, 30, 0.72); }
.mm-screen--profile .tile-wrap:hover { box-shadow: 6px 6px 0 var(--accent); }
.mm-screen--profile .song-tile { font-family: var(--font); color: #fff; }
.mm-screen--profile .song-tile .tile-cover img { aspect-ratio: 16 / 9; border-radius: 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.mm-screen--profile .song-tile strong { font-size: 21px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-screen--profile .song-tile span { font-size: 16px; font-weight: 700; }
.mm-screen--profile .song-tile .tile-by, .mm-screen--profile .song-tile .tile-by > span:last-child { font-size: 15px; }
.mm-screen--profile .song-tile .best, .mm-screen--profile .song-tile .crown { border-radius: 0; }
.mm-screen--profile .tile-more { border-radius: 0; }
.mm-screen--profile .pf-more { font-family: var(--font); font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--accent-light); }

/* Editar perfil */
.mm-screen--profile-edit #profile-view-own, .mm-screen--profile-edit .mm-set-sub h1 { display: none; } /* o título já está no topo */ /* chega-se aqui pelo próprio perfil */
.mm-screen--profile-edit .mm-set-sub .muted { background: none; color: rgba(255, 255, 255, 0.65); padding: 0; transform: none; font-size: 18px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.mm-screen--profile-edit .mm-set-body { display: grid; gap: 22px; align-content: start; }
.mm-screen--profile-edit .mm-set-body > * { max-width: 1100px; } /* a rolagem fica na borda da tela */
.mm-screen--profile-edit .profile-card { max-width: none; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; }
.mm-screen--profile-edit .avatar.big { width: 180px; height: 180px; border: 0; border-radius: 0; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.mm-screen--profile-edit .profile-photo { width: 240px; }
.mm-screen--profile-edit .edit-field > span { font-size: 19px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.mm-screen--profile-edit .edit-field input, .mm-screen--profile-edit .edit-field textarea {
  border: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.5); border-radius: 0; background: rgba(10, 0, 18, 0.6); color: #fff;
  font-family: var(--font); font-size: 22px; font-weight: 700; padding: 10px 14px;
}
.mm-screen--profile-edit .edit-field input:focus-visible, .mm-screen--profile-edit .edit-field textarea:focus-visible { outline: none; border-bottom-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.mm-screen--profile-edit .profile-sub { margin-top: 22px; font-size: 19px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; }
.mm-screen--profile-edit .btn {
  border-radius: 0; font-family: var(--font); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
  border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(10, 0, 18, 0.6); color: #fff; font-size: 19px;
}
.mm-screen--profile-edit .btn:hover:not(:disabled), .mm-screen--profile-edit .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; filter: none; }
.mm-screen--profile-edit #profile-save { padding: 12px 40px; font-size: 26px; border-color: #fff; background: #fff; color: var(--ink); box-shadow: 7px 7px 0 var(--accent); }
.mm-screen--profile-edit #profile-save:hover:not(:disabled), .mm-screen--profile-edit #profile-save:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 7px 7px 0 #fff; }
.mm-screen--profile-edit .btn.danger { color: #ff8aa0; border-color: rgba(255, 77, 109, 0.6); }
.mm-screen--profile-edit .btn.danger:hover:not(:disabled) { background: #ff4d6d; border-color: #ff4d6d; color: #fff; }
.mm-screen--profile-edit .profile-msg { font-size: 19px; font-weight: 800; font-style: italic; }
.mm-screen--profile-edit .bio-count { font-weight: 800; }

@media (max-width: 1100px) {
  .mm-screen--profile .pf-head { grid-template-columns: auto minmax(0, 1fr); }
  .mm-screen--profile .pf-actions { grid-column: 1 / -1; width: auto; flex-wrap: nowrap; justify-content: flex-start; padding: 6px 0 0; }
  .mm-screen--profile .pf-actions > #pf-follow, .mm-screen--profile .pf-actions > #pf-edit { flex: 0 1 auto; min-width: 220px; }
}
@media (max-width: 700px) {
  .mm-screen--profile .pf-head { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px; }
  .mm-screen--profile .avatar.huge { width: 120px; height: 120px; }
  .mm-screen--profile .pf-info h1 { font-size: 40px; }
  .mm-screen--profile .pf-bio { font-size: 18px; }
  .mm-screen--profile .pf-actions > #pf-follow, .mm-screen--profile .pf-actions > #pf-edit { flex: 1 1 auto; min-width: 0; }
  .mm-screen--profile #pf-follow { font-size: 22px; padding: 10px 18px; }
  .mm-screen--profile #pf-edit { font-size: 20px; }
  .mm-screen--profile .pf-tabs button { font-size: 16px; padding: 6px 12px; }
  .mm-screen--profile .pf-best-row { grid-template-columns: 30px 72px minmax(0, 1fr) auto; gap: 10px; padding: 6px 12px 6px 6px; }
  .mm-screen--profile .pf-best-row.recent { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .mm-screen--profile .pf-best-row img { width: 72px; height: 41px; }
  .mm-screen--profile .pf-best-n { font-size: 22px; }
  .mm-screen--profile .pf-best-info strong { font-size: 18px; }
  .mm-screen--profile .pf-best-info span { font-size: 15px; }
  .mm-screen--profile .pf-best-res .grade { font-size: 24px; }
  .mm-screen--profile .pf-best-res > span { font-size: 19px; }
  .mm-screen--profile .song-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mm-screen--profile-edit .profile-card { grid-template-columns: minmax(0, 1fr); }
  .mm-screen--profile-edit .profile-photo { width: auto; }
  .mm-screen--profile-edit .avatar.big { width: 130px; height: 130px; }
}

/* ---------- Notas: um cartão por tipo, com a nota caindo até a linha ---------- */
.mm-screen--notes .mm-set-body { max-width: none; }
.mm-screen--notes .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; max-width: 1400px; }
.mm-screen--notes .note-card {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 24px 18px 18px;
  background: rgba(22, 4, 30, 0.72); border-left: 5px solid var(--c, var(--accent)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.mm-screen--notes .note-card.judge { grid-template-columns: minmax(0, 1fr); border-left-color: #fff; }
.mm-screen--notes .note-text h3 {
  margin: 0; font-size: 34px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
  color: #fff; text-shadow: 3px 3px 0 var(--c, var(--accent));
}
.mm-screen--notes .note-text p { margin: 8px 0 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.85); }
.mm-screen--notes .note-art { width: 110px; height: 156px; overflow: hidden; background: rgba(0, 0, 0, 0.35); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.mm-screen--notes .note-art .lane { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.mm-screen--notes .note-art .hit { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--c)); }
.mm-screen--notes .note-art .orb { fill: var(--c); stroke: #fff; stroke-width: 2.5; }
.mm-screen--notes .note-art .halo { fill: var(--c); opacity: 0.22; }
.mm-screen--notes .note-art .tail { fill: var(--c); opacity: 0.45; stroke: #fff; stroke-opacity: 0.6; stroke-width: 1.5; }
.mm-screen--notes .note-art .band { fill: var(--c); opacity: 0.16; }
.mm-screen--notes .note-art .core { fill: #1a0608; stroke: var(--c); stroke-width: 2; }
.mm-screen--notes .note-art .spikes { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; }
.mm-screen--notes .note-art .fever { font: italic 900 15px var(--font); fill: var(--c); letter-spacing: 0.04em; }
.mm-screen--notes .note-art .fall { animation: mm-note-fall 2.2s linear infinite; }
/* nota dupla/tripla: cai com 2 esferas girando em volta; a cada toque (brilho na linha) salta uma batida para trás e
   solta uma esfera; no 3º toque some. Queda em velocidade constante (o salto de volta é "uma batida") */
.mm-screen--notes .note-art .orbit { fill: none; stroke: var(--c); stroke-opacity: 0.35; stroke-width: 1.2; }
.mm-screen--notes .note-art .moon { fill: #fff; stroke: var(--c); stroke-width: 2; }
.mm-screen--notes .note-art .spin { transform-origin: 60px 0; animation: mm-note-spin 1.4s linear infinite; }
@keyframes mm-note-spin { to { transform: rotate(360deg); } }
.mm-screen--notes .multi-art .mt { animation: mm-multi-y 3.2s infinite; }
@keyframes mm-multi-y {
  0% { transform: translateY(-30px); opacity: 1; animation-timing-function: linear; }
  28.75% { transform: translateY(146px); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  33.75% { transform: translateY(96px); animation-timing-function: linear; }
  41.95% { transform: translateY(146px); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  46.95% { transform: translateY(96px); animation-timing-function: linear; }
  55.15% { transform: translateY(146px); opacity: 1; }
  60%, 100% { transform: translateY(146px); opacity: 0; }
}
.mm-screen--notes .multi-art .m1 { animation: mm-multi-m1 3.2s infinite; }
.mm-screen--notes .multi-art .m2 { animation: mm-multi-m2 3.2s infinite; }
@keyframes mm-multi-m1 { 0%, 28.75% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translate(16px, -22px); } }
@keyframes mm-multi-m2 { 0%, 41.95% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translate(-16px, -22px); } }
.mm-screen--notes .multi-art .orbit { animation: mm-multi-orbit 3.2s infinite; }
@keyframes mm-multi-orbit { 0%, 41.95% { opacity: 1; } 47%, 100% { opacity: 0; } }
/* brilho na linha a cada toque */
.mm-screen--notes .multi-art .flash { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: mm-multi-flash 3.2s infinite; }
@keyframes mm-multi-flash {
  0%, 28.7% { opacity: 0; transform: scale(0.6); } 28.75% { opacity: 1; transform: scale(0.6); } 34% { opacity: 0; transform: scale(2); }
  41.9% { opacity: 0; transform: scale(0.6); } 41.95% { opacity: 1; transform: scale(0.6); } 47% { opacity: 0; transform: scale(2); }
  55.1% { opacity: 0; transform: scale(0.6); } 55.15% { opacity: 1; transform: scale(0.6); } 61%, 100% { opacity: 0; transform: scale(2.4); }
}
.mm-screen--notes .note-art .fall.fast { animation-duration: 1.6s; }
@keyframes mm-note-fall { from { transform: translateY(-120px); } to { transform: translateY(80px); } }
/* brilho na linha a cada toque (saltadora, divide, investida): o mesmo brilho, cada um no seu instante (delay) */
.mm-screen--notes :is(.hop-art, .split-art, .charge-art) .flash { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: mm-flash 3.2s infinite; }
@keyframes mm-flash { 0% { opacity: 1; transform: scale(0.6); } 16% { opacity: 0; transform: scale(2.2); } 16.1%, 100% { opacity: 0; transform: scale(0.6); } }
.mm-screen--notes .note-art .chev { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--c)); }
/* saltadora: toques em 28,75%, 42% e 55,25% do ciclo; entre eles salta, num arco, para a coluna da direita */
.mm-screen--notes .hop-art .hp { animation: mm-hop 3.2s infinite; }
@keyframes mm-hop {
  0% { transform: translate(24px, -30px); opacity: 1; animation-timing-function: linear; }
  28.75% { transform: translate(24px, 146px); animation-timing-function: ease-out; }
  31.4% { transform: translate(42px, 90px); animation-timing-function: ease-in; }
  34% { transform: translate(60px, 104px); animation-timing-function: linear; }
  42% { transform: translate(60px, 146px); animation-timing-function: ease-out; }
  44.6% { transform: translate(78px, 90px); animation-timing-function: ease-in; }
  47.25% { transform: translate(96px, 104px); animation-timing-function: linear; }
  55.25% { transform: translate(96px, 146px); opacity: 1; }
  60%, 100% { transform: translate(96px, 146px); opacity: 0; }
}
.mm-screen--notes .hop-art .c2 { animation: mm-hop-c2 3.2s infinite; }
.mm-screen--notes .hop-art .c1 { animation: mm-hop-c1 3.2s infinite; }
@keyframes mm-hop-c2 { 0%, 28.7% { opacity: 1; } 28.75%, 100% { opacity: 0; } }
@keyframes mm-hop-c1 { 0%, 41.95% { opacity: 1; } 42%, 100% { opacity: 0; } }
.mm-screen--notes .hop-art .f1 { animation-delay: 0.92s; }
.mm-screen--notes .hop-art .f2 { animation-delay: 1.344s; }
.mm-screen--notes .hop-art .f3 { animation-delay: 1.768s; }
/* nota que divide: toque em 28,75%; as metades saltam para os lados e chegam à linha em 42% */
.mm-screen--notes .split-art .crack { fill: none; stroke: rgba(10, 6, 24, 0.85); stroke-width: 2.6; stroke-linejoin: round; }
.mm-screen--notes .split-art .sp { animation: mm-split 3.2s infinite; }
@keyframes mm-split { 0% { transform: translate(60px, -30px); opacity: 1; animation-timing-function: linear; } 28.75% { transform: translate(60px, 146px); opacity: 1; } 28.8%, 100% { transform: translate(60px, 146px); opacity: 0; } }
.mm-screen--notes .split-art .k1 { animation: mm-split-k1 3.2s infinite; }
.mm-screen--notes .split-art .k2 { animation: mm-split-k2 3.2s infinite; }
@keyframes mm-split-k1 {
  0%, 28.7% { transform: translate(60px, 146px); opacity: 0; }
  28.75% { transform: translate(60px, 146px); opacity: 1; animation-timing-function: ease-out; }
  31.4% { transform: translate(42px, 96px); animation-timing-function: ease-in; }
  34% { transform: translate(24px, 104px); animation-timing-function: linear; }
  42% { transform: translate(24px, 146px); opacity: 1; }
  47%, 100% { transform: translate(24px, 146px); opacity: 0; }
}
@keyframes mm-split-k2 {
  0%, 28.7% { transform: translate(60px, 146px); opacity: 0; }
  28.75% { transform: translate(60px, 146px); opacity: 1; animation-timing-function: ease-out; }
  31.4% { transform: translate(78px, 96px); animation-timing-function: ease-in; }
  34% { transform: translate(96px, 104px); animation-timing-function: linear; }
  42% { transform: translate(96px, 146px); opacity: 1; }
  47%, 100% { transform: translate(96px, 146px); opacity: 0; }
}
.mm-screen--notes .split-art .f1 { animation-delay: 0.92s; }
.mm-screen--notes .split-art .f2 { animation-delay: 1.344s; }
/* investida: desce até o meio (22%), espera, pisca e treme (32% a 42%), dispara e chega à linha em 50% */
.mm-screen--notes .charge-art .blade { fill: #fff; opacity: 0.9; }
.mm-screen--notes .charge-art .ring { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0; animation: mm-charge-ring 3.2s infinite; }
.mm-screen--notes .charge-art .ch { animation: mm-charge 3.2s infinite; }
@keyframes mm-charge {
  0% { transform: translate(60px, -30px); opacity: 1; animation-timing-function: ease-out; }
  22%, 42% { transform: translate(60px, 66px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  50% { transform: translate(60px, 146px); opacity: 1; }
  55%, 100% { transform: translate(60px, 146px); opacity: 0; }
}
.mm-screen--notes .charge-art .shake { animation: mm-charge-shake 3.2s infinite; }
@keyframes mm-charge-shake {
  0%, 32% { transform: none; } 33% { transform: translateX(-2px); } 34% { transform: translateX(2px); } 35% { transform: translateX(-2px); }
  36% { transform: translateX(2px); } 37% { transform: translateX(-2px); } 38% { transform: translateX(2px); } 39% { transform: translateX(-2px); }
  40% { transform: translateX(2px); } 41%, 100% { transform: none; }
}
@keyframes mm-charge-ring {
  0%, 32% { opacity: 0; } 32.1%, 34% { opacity: 1; } 34.1%, 36% { opacity: 0.25; } 36.1%, 38% { opacity: 1; } 38.1%, 40% { opacity: 0.25; } 40.1%, 42% { opacity: 1; } 42.1%, 100% { opacity: 0; }
}
.mm-screen--notes .charge-art .trail { fill: var(--c); opacity: 0; transform-box: fill-box; transform-origin: top; animation: mm-charge-trail 3.2s infinite; }
@keyframes mm-charge-trail { 0%, 42% { opacity: 0; transform: scaleY(0); } 42.1% { opacity: 0.5; transform: scaleY(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } 50% { opacity: 0.5; transform: scaleY(1); } 56%, 100% { opacity: 0; transform: scaleY(1); } }
.mm-screen--notes .charge-art .f1 { animation-delay: 1.6s; }
.mm-screen--notes .judge-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mm-screen--notes .judge-list li { padding: 10px 16px; background: rgba(10, 0, 18, 0.6); border-left: 4px solid currentColor; transform: skewX(-10deg); }
.mm-screen--notes .judge-list b { font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-screen--notes .note-card[hidden] { display: none; }
.mm-notes-filter { margin-left: auto; } /* no topo, à direita (como o Geral/Seguindo do Desafio) */
/* celular: o filtro numa linha só dele, embaixo do título, na largura toda */
@media (max-width: 600px) {
  .mm-screen--notes .mm-set-head { grid-template-areas: 'back back' 'title title' 'extra extra'; }
  .mm-notes-filter { justify-self: stretch; margin-left: 0; }
  .mm-notes-filter button { flex: 1; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 700px) {
  .mm-screen--notes .note-card { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 14px 16px 14px 12px; }
  .mm-screen--notes .note-art { width: 80px; height: 114px; }
  .mm-screen--notes .note-text h3 { font-size: 26px; }
  .mm-screen--notes .note-text p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-screen--notes .note-art .fall, .mm-screen--notes .note-art .spin, .mm-screen--notes :is(.multi-art, .hop-art, .split-art, .charge-art) * { animation: none; }
  .mm-screen--notes .multi-art .mt { transform: translateY(70px); }
  .mm-screen--notes .hop-art .hp { transform: translate(24px, 80px); }
  .mm-screen--notes .split-art .sp, .mm-screen--notes .charge-art .ch { transform: translate(60px, 70px); }
  .mm-screen--notes .split-art .kid { opacity: 0; }
}

/* ---------- Arcade: lápis (renomear) só nas suas músicas; barra da fila clicável; janela da fila de preparo ---------- */
.mm-ar-acts button[hidden] { display: none; }
button.mm-ar-queue { width: 100%; text-align: left; cursor: pointer; font-family: var(--font); }
button.mm-ar-queue:hover, button.mm-ar-queue:focus-visible { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3) 70%, transparent); outline: none; }
.mm-ar-queue.alert { border-bottom-color: #ffd166; color: #ffd166; animation: mm-q-alert 1.2s ease-in-out infinite alternate; }
@keyframes mm-q-alert { to { color: #fff; } }
.mm-ar-qbox { display: grid; gap: 14px; padding: 26px 28px 24px; }
.mm-ar-qslot { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.mm-ar-qslot .yt-warning, .mm-ar-qslot .yt-message { margin: 0; font-size: 17px; font-weight: 700; color: #ffd166; }
.mm-ar-qslot .yt-warning.hidden, .mm-ar-qslot .yt-message:empty { display: none; }
.mm-ar-qslot .row-buttons { margin: 0; justify-content: flex-start; }
.mm-ar-qslot .row-buttons:has(> [hidden]:only-child) { display: none; }
.mm-ar-qslot #yt-resume {
  padding: 10px 24px; border: 0; border-radius: 0; background: #fff; color: var(--ink); cursor: pointer;
  font: italic 900 22px var(--font); text-transform: uppercase; transform: skewX(-10deg); box-shadow: 6px 6px 0 var(--accent);
}
.mm-ar-qslot #yt-resume:hover, .mm-ar-qslot #yt-resume:focus-visible { background: var(--accent); color: #fff; box-shadow: 6px 6px 0 #fff; outline: none; }
.mm-ar-qslot .yt-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm-ar-qslot .yt-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 12px 8px 8px;
  border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.05); border-left: 4px solid var(--accent);
}
.mm-ar-qslot .yt-item.erro { border-left-color: #ff4d6d; }
.mm-ar-qslot .yt-item img { width: 96px; height: 54px; object-fit: cover; border-radius: 0; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.mm-ar-qslot .yt-info { display: grid; gap: 3px; min-width: 0; }
.mm-ar-qslot .yt-info strong { font-size: 19px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-ar-qslot .yt-status { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.mm-ar-qslot .yt-item.erro .yt-status { color: #ff8aa0; }
.mm-ar-qslot .yt-bar { height: 5px; border-radius: 0; background: rgba(255, 255, 255, 0.12); }
.mm-ar-qslot .yt-bar i { display: block; height: 100%; border-radius: 0; background: var(--accent); }
.mm-ar-qslot .yt-actions { display: flex; gap: 6px; }
.mm-ar-qslot .yt-actions .btn {
  padding: 5px 12px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 0; background: rgba(10, 0, 18, 0.6); color: #fff; cursor: pointer;
  font: italic 900 15px var(--font); text-transform: uppercase; transform: skewX(-10deg);
}
.mm-ar-qslot .yt-actions .btn:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Perfil: as suas estatísticas (só no próprio perfil) ---------- */
.mm-screen--profile .pf-stats-box { margin-top: 20px; }
.mm-screen--profile .pf-stats-box[hidden] { display: none; }
.mm-screen--profile .pf-stats-box h3 { margin: 0 0 10px; font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }
.mm-screen--profile .pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1100px; }
.mm-screen--profile .pf-stats div { display: flex; flex-direction: column; padding: 10px 18px; background: rgba(22, 4, 30, 0.72); border-left: 4px solid var(--accent2); transform: skewX(-10deg); }
.mm-screen--profile .pf-stats span { font-size: 16px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.65); }
.mm-screen--profile .pf-stats strong { font-size: 34px; font-weight: 900; font-style: italic; line-height: 1.05; }
@media (max-width: 700px) { .mm-screen--profile .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-screen--profile .pf-stats strong { font-size: 26px; } }

/* ---------- Arcade: trazer música do YouTube (busca no YouTube, passo a passo, colar) ---------- */
.mm-ar .yt-ico { width: 22px; height: 22px; flex: none; }
.mm-ar .yt-ico rect { fill: #ff2b2b; }
.mm-ar .yt-ico path { fill: #fff; }
.mm-ar-addbtn.pulse { animation: mm-ar-pulse 1.6s ease-in-out infinite; }
@keyframes mm-ar-pulse { 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.35), 0 0 22px rgba(var(--accent-rgb), 0.55); border-color: var(--accent); } }
.mm-ar-ytchip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 5px 14px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.1); color: #fff; font: 800 italic 15px var(--font); text-transform: uppercase; transform: skewX(-10deg); }
.mm-ar-ytchip:hover, .mm-ar-ytchip:focus-visible { background: rgba(255, 255, 255, 0.2); outline: none; }
.mm-ar-ytchip[hidden] { display: none; }
.mm-ar-ytbtn[disabled] { opacity: 0.7; cursor: progress; }
.mm-ar-empty.yt { justify-content: flex-start; padding-top: 10px; overflow-y: auto; }
.mm-ar-ytres { list-style: none; margin: 0; padding: 0; width: min(560px, 100%); display: grid; gap: 8px; }
.mm-ar-ytres[hidden], .mm-ar-guide[hidden], .mm-ar-empty-btns .mm-ar-ghost[hidden], .mm-ar-ytbtn[hidden] { display: none; }
.mm-ar-ytres li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; background: rgba(10, 0, 18, 0.7); border-left: 4px solid var(--accent); text-align: left; }
.mm-ar-ytres img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mm-ar-ytres strong { display: block; color: #fff; font-size: 17px; font-weight: 800; font-style: normal; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mm-ar-ytres span { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.6); font-style: normal; }
.mm-ar-ytact { display: flex; align-items: center; gap: 8px; }
.mm-ar-ytpv { padding: 2px 12px; border: 2px solid rgba(255, 255, 255, 0.35); cursor: pointer; background: transparent; color: #fff; font: 800 italic 16px var(--font); text-transform: uppercase; white-space: nowrap; transform: skewX(-10deg); }
.mm-ar-ytpv:hover, .mm-ar-ytpv:focus-visible { border-color: #fff; outline: none; }
.mm-ar-ytres li.pv { background: rgba(60, 0, 50, 0.85); }
.mm-ar-ytres li.pv .mm-ar-ytpv { background: #fff; color: var(--ink); border-color: #fff; }
.mm-ar-guide { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.mm-ar-guide-title { color: #fff; font-size: 20px; font-weight: 900; }
.mm-ar-guide ol { margin: 10px auto 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 8px; text-align: left; width: fit-content; }
.mm-ar-guide li { counter-increment: passo; display: flex; align-items: center; gap: 10px; font-style: normal; }
.mm-ar-guide li::before { content: counter(passo); flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 900; font-style: italic; transform: skewX(-10deg); }
.mm-ar-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mm-ar-empty-btns .mm-ar-ghost { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 16px; padding: 8px 18px; }
@media (max-width: 700px) {
  .mm-ar-ytres li { grid-template-columns: 88px minmax(0, 1fr); }
  .mm-ar-ytres img { width: 88px; }
  .mm-ar-ytres .mm-ar-ytact { grid-column: 1 / -1; justify-self: end; }
}

/* tela deitada baixa (celular virado, janela pequena): tudo menor para caber na altura sem sobrepor (o tamanho mínimo
   dos itens, 44px, não deixava a lista caber entre a logo e o card do jogador) */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #mm-brand { font-size: 30px; top: 2.4vh; }
  #mm-audio { top: 2vh; gap: 6px; }
  #mm-audio button { height: 34px; }
  #mm-audio > button, #mm-lang-btn { width: 38px; }
  .mm-item { font-size: calc(var(--size, 1) * 8.6vh); }
  .mm-player { bottom: 3vh; padding: 6px 30px 6px 6px; min-width: 0; }
  .mm-avatar { width: 34px; height: 34px; }
  .mm-player-label { font-size: 10px; }
  .mm-player-text strong { font-size: 17px; }
  .mm-set-head { padding-top: 2vh; padding-bottom: 1vh; }
  .mm-set-head h1 { font-size: 34px; }
}

/* versão publicada, bem discreta no canto de baixo (index.html, build.js) */
.mm-version { position: absolute; left: 14px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 5; pointer-events: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.3); }

/* ---------- modo leve (game.js: Perf, body.leve): tablets e computadores fracos ----------
   o que mais pesa no menu é o desfoque por trás (título e telas cheias), a sombra da pose redesenhada enquanto ela
   "respira", os feixes desfocados com mistura de cor e as faíscas (menu.js para de desenhar) */
body.leve .mm-bg, body.leve .mm-beams i, body.leve #mm-pose, body.leve .mm-silhouette, body.leve .mm-title-logo, body.leve .mm-press,
body.leve .mm-frag .o, body.leve .mm-frag .i, body.leve .mm-badge { animation: none !important; }
body.leve #mm-pose, body.leve .mm-silhouette, body.leve .mm-frag { filter: none !important; }
body.leve .mm-beams, body.leve #mm-particles { display: none; }
body.leve #mm-title, body.leve .mm-screen, body.leve #mm *, body.leve .dialog::backdrop, body.leve .mm-ar-dlg::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.leve #mm-title { background: radial-gradient(circle at 50% 45%, rgba(40, 0, 40, 0.6), rgba(5, 0, 10, 0.94) 70%); }
body.leve .mm-screen { background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.16) 0 18%, transparent 18.2%), linear-gradient(180deg, rgba(10, 0, 18, 0.97), rgba(6, 0, 12, 0.99)); }
body.leve .mm-ar-bgimg { filter: saturate(1.2) brightness(0.35); }
body.leve .mm-hi-life i, body.leve .mm-hi-raios > span, body.leve .mm-hi-torre.map { animation: none; }
body.leve .mm-hi-petala, body.leve .mm-hi-grao { display: none; }