/* Modo História (historia.js): cena com fundo, retratos e caixa de diálogo; mapa de Aurora; cartão da fase.
   Tudo dentro de .mm-hi (uma .mm-screen do menu). */
.mm-hi { --ar-easy: #6ee7a0; --ar-normal: #56d4f5; --ar-hard: #ff4d6d; --ar-nightmare: #b56cff; background: #05000b; overflow: hidden; }
.mm-hi::after { display: none; }
.mm-hi-head { position: absolute; top: 0; left: 0; right: 0; z-index: 8; pointer-events: none; }
.mm-hi-head > * { pointer-events: auto; }
.mm-hi .mm-hi-head .mm-set-title { display: none; } /* sem o título "Modo História": na cena e no mapa, só o Voltar (e os Créditos no mapa) */

/* ---------- cena ---------- */
.mm-hi-scene { position: absolute; inset: 0; cursor: pointer; user-select: none; }
.mm-hi-scene[hidden] { display: none; }
.mm-hi-bg { position: absolute; inset: 0; background: #0a0012 center / cover no-repeat; transition: background-image 0.5s; }
.mm-hi-bg.page { background-color: #1a0f0a; background-size: auto min(61vh, 62vw); background-position: center 3vh; box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.7); }
.mm-hi-draw {
  position: absolute; z-index: 3; left: 37vw; top: 15vh; width: min(48vw, 78vh); aspect-ratio: 3 / 2; pointer-events: none;
  background: url("img/historia/cenas/caderno-1.webp") center / 100% 100% no-repeat; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: rotate(-1.5deg) scale(0.92) translateY(20px); transition: opacity 0.6s, transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}
.mm-hi-draw.on { opacity: 1; transform: rotate(-1.5deg); }
@media (max-aspect-ratio: 4/5) { .mm-hi-draw { left: 5vw; top: 10vh; width: 90vw; } }
/* a foto recebida no celular: cantos arredondados e borda branca, inclinada para o outro lado */
.mm-hi-draw.foto { box-sizing: border-box; border: 6px solid #f4f1ea; border-radius: 16px; background-size: cover; transform: rotate(1.5deg) scale(0.92) translateY(20px); }
.mm-hi-draw.foto.on { transform: rotate(1.5deg); }
.mm-hi-draw > div { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.mm-hi-bg.gray { filter: grayscale(1) brightness(0.72) contrast(0.95); }
.mm-hi-bg.half { filter: grayscale(0.6) brightness(0.86); }
.mm-hi-bg.reveal { transition: filter 3.2s ease-in-out, background-image 0.5s; }
/* mancha (historia.js spotFor): a mesma imagem por cima, só num círculo de borda suave */
@property --r { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --r2 { syntax: '<number>'; inherits: false; initial-value: 0; }
.mm-hi-spot {
  position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; pointer-events: none;
  /* raio em % da largura da tela; --k: altura ÷ largura (oval); a 2ª mancha (--x2, --y2, --r2, --k2) é opcional */
  --x: 50%; --y: 50%; --r: 0; --k: 1; --x2: 50%; --y2: 50%; --r2: 0; --k2: 1;
  --spot1: radial-gradient(calc(var(--r) * 1vw + 0.1px) calc(var(--r) * var(--k) * 1vw + 0.1px) at var(--x) var(--y), #000 60%, transparent 100%);
  --spot2: radial-gradient(calc(var(--r2) * 1vw + 0.1px) calc(var(--r2) * var(--k2) * 1vw + 0.1px) at var(--x2) var(--y2), #000 60%, transparent 100%);
  -webkit-mask-image: var(--spot1), var(--spot2);
  mask-image: var(--spot1), var(--spot2);
  transition: --r 1.8s ease-in-out, --r2 1.8s ease-in-out, opacity 0.6s;
}
.mm-hi-spot.on { opacity: 1; }
.mm-hi-spot.wave { transition: --r 4.2s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.6s; }
.mm-hi-spot.gray { filter: grayscale(1) brightness(0.72) contrast(0.95); }
/* som abafado: a tela toda sem cor por um instante */
.mm-hi-mute { position: absolute; inset: 0; background: center / cover no-repeat; filter: grayscale(1) brightness(0.72) contrast(0.95); opacity: 0; transition: opacity 1.8s ease-in-out; pointer-events: none; }
.mm-hi-mute.on { opacity: 1; }
.mm-hi-place span[hidden] { display: none; }
/* o fundo escurece um pouco embaixo, para os retratos e a caixa se destacarem (sem desfoque: amolecia a imagem) */
.mm-hi-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 0, 11, 0.25), transparent 30%, rgba(5, 0, 11, 0.35) 62%, rgba(5, 0, 11, 0.85));
}
.mm-hi-cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mm-hi-who {
  position: absolute; bottom: -6vh; height: 96vh; width: auto; max-width: 48vw; object-fit: contain; object-position: bottom;
  opacity: 0; transform: translateY(24px); filter: brightness(0.5) saturate(0.85);
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), filter 0.25s;
}
.mm-hi-who.left { left: 3vw; }
.mm-hi-who.right { right: 3vw; }
.mm-hi-who.on { opacity: 1; transform: translateY(10px); }
.mm-hi-who.on.lit { transform: none; filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5)); z-index: 2; } /* quem fala fica na frente (na tela estreita os retratos se cobrem) */
/* lugares fora do padrão ("entra: Sophie (show, centro)"): no meio e mais perto (maior), ou do outro lado */
.mm-hi-who.pos-centro { left: 50%; right: auto; height: 140vh; bottom: -46vh; max-width: 70vw; margin-left: -46.7vh; z-index: 1; } /* margem: metade da largura (retrato 2:3) */
.mm-hi-who.pos-esquerda { left: 3vw; right: auto; }
.mm-hi-who.pos-direita { right: 3vw; left: auto; }
/* chegando: desliza do lado dela; trocando de expressão: um pulinho */
.mm-hi-who.left.enter { animation: mm-hi-enter-l 0.55s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
.mm-hi-who.right.enter { animation: mm-hi-enter-r 0.55s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
.mm-hi-who.pop { animation: mm-hi-pop 0.32s ease-out; }
@keyframes mm-hi-enter-l { from { opacity: 0; translate: -18vw 0; } 60% { opacity: 1; } to { translate: 0 0; } }
@keyframes mm-hi-enter-r { from { opacity: 0; translate: 18vw 0; } 60% { opacity: 1; } to { translate: 0 0; } }
@keyframes mm-hi-pop { 40% { translate: 0 -14px; scale: 1.015; } }

.mm-hi-box {
  position: absolute; left: 50%; translate: -50% 0; width: min(1400px, 88vw); bottom: 4vh; z-index: 4; min-height: 230px; padding: 38px 54px 30px 46px;
  background: linear-gradient(100deg, rgba(14, 0, 24, 0.94), rgba(14, 0, 24, 0.86));
  border-left: 6px solid var(--accent); box-shadow: 10px 10px 0 rgba(var(--accent-rgb), 0.35), 0 20px 50px rgba(0, 0, 0, 0.5);
}
.mm-hi-name {
  position: absolute; top: -2px; left: 34px; translate: 0 -60%; padding: 3px 22px; z-index: 1;
  font-size: 32px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em;
  color: #0a0012; background: var(--c, #fff); transform: skewX(-12deg); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
}
.mm-hi-name[hidden] { display: none; }
.mm-hi-box:has(.mm-hi-name:not([hidden])) { margin-top: 24px; }
.mm-hi-text { margin: 0; font: 600 34px/1.45 Inter, system-ui, sans-serif; color: #fff; min-height: 2.9em; text-wrap: pretty; }
.mm-hi-text .ch { opacity: 0; }
.mm-hi-text .ch.v { opacity: 1; }
.mm-hi-box.voz .mm-hi-text { font-style: italic; }
.mm-hi-box.narra .mm-hi-text { font-style: italic; font-weight: 500; color: rgba(255, 240, 250, 0.88); }
.mm-hi-me { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.7); }
.mm-hi-word { font-style: italic; color: #ffb8de; text-shadow: 0 0 14px rgba(255, 120, 190, 0.45); }
.mm-hi-next { position: absolute; right: 26px; bottom: 14px; font-size: 16px; color: var(--accent-light); opacity: 0; }
.mm-hi-next.on { opacity: 1; animation: mm-hi-bob 0.9s ease-in-out infinite; }
@keyframes mm-hi-bob { 50% { transform: translateY(4px); } }
.mm-hi-choices { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
.mm-hi-choices button.ghost { visibility: hidden; }
/* opção em foco (fundo magenta): nomes e palavras coloridas ficam brancos, para dar para ler */
.mm-hi-choices button:is(:hover, :focus-visible) b { color: #fff !important; text-shadow: none; }
.mm-hi-choices button:not(.ghost) { animation: mm-hi-choice-in 0.25s ease both; }
@keyframes mm-hi-choice-in { from { opacity: 0; translate: -10px 0; } }
/* com opções na tela, o texto não guarda a altura de duas linhas (o espaço vazio entre a fala e as opções) */
.mm-hi-box:has(.mm-hi-choices button) .mm-hi-text { min-height: 0; }
.mm-hi-choices:empty { display: none; }
.mm-hi-choices button, .mm-hi-ask button {
  padding: 10px 30px; border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(10, 0, 18, 0.6); color: #fff; cursor: pointer;
  font-size: 34px; font-weight: 800; font-style: italic; transform: skewX(-10deg); text-align: left;
}
.mm-hi-choices button:hover, .mm-hi-choices button:focus-visible, .mm-hi-ask button:hover, .mm-hi-ask button:focus-visible {
  background: var(--accent); border-color: var(--accent); outline: none;
}
.mm-hi-ask { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; }
.mm-hi-ask[hidden] { display: none; }
.mm-hi-ask label { display: grid; gap: 4px; font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mm-hi-ask input {
  width: min(320px, 60vw); padding: 8px 12px; border: 0; border-bottom: 3px solid var(--accent); background: rgba(255, 255, 255, 0.08);
  color: #fff; font: 800 italic 24px var(--font); outline: none;
}
/* "Echo recuperado" no meio da tela */
.mm-hi-echo {
  position: absolute; left: 50%; top: 38%; z-index: 6; translate: -50% -50%; display: grid; justify-items: center; gap: 6px;
  padding: 18px 60px; background: linear-gradient(90deg, transparent, rgba(30, 14, 0, 0.9) 20%, rgba(30, 14, 0, 0.9) 80%, transparent);
  pointer-events: none; text-align: center;
}
.mm-hi-echo[hidden] { display: none; }
.mm-hi-echo small { font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: 0.2em; text-transform: uppercase; color: #ffcf6e; }
.mm-hi-echo strong { font-size: clamp(34px, 6vh, 60px); font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgba(255, 207, 110, 0.8); }
.mm-hi-echo.run { animation: mm-hi-echo 3.2s ease both; }
@keyframes mm-hi-echo { 0% { opacity: 0; scale: 0.9; } 12%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.04; } }

/* cartão de dia */
.mm-hi-day { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none; background: rgba(5, 0, 11, 0.55); }
.mm-hi-day[hidden] { display: none; }
.mm-hi-day strong { font-size: clamp(56px, 11vh, 120px); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; color: #fff; text-shadow: 6px 6px 0 rgba(var(--accent-rgb), 0.6); }
.mm-hi-day small { font-size: clamp(22px, 3.6vh, 36px); font-weight: 900; font-style: italic; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb8de; }
.mm-hi-day.run { animation: mm-hi-day 1.7s ease both; }
@keyframes mm-hi-day { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.mm-hi-day.run strong { animation: mm-hi-day-in 1.7s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes mm-hi-day-in { from { translate: -40px 0; } 20%, 80% { translate: 0 0; } to { translate: 30px 0; } }
.mm-hi-day.end.run, .mm-hi-day.end.run strong { animation-duration: 4.5s; } /* o "Fim" fica mais tempo */
.mm-hi-box.away { opacity: 0; transition: opacity 0.2s; }

/* ---------- mapa ---------- */
/* a cidade cobre a tela inteira (um pouco maior que ela) e arrasta; os lugares e os marcadores andam junto. A barra dos
   capítulos, à direita, empurra o mapa (ele estreita) */
.mm-hi-map { position: absolute; inset: 0; display: flex; }
.mm-hi-map[hidden] { display: none; }
.mm-hi-mapimg { position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: grab; touch-action: none; }
.mm-hi-mapimg.dragging { cursor: grabbing; }
/* o tamanho vem da tela, não da área: abrir a barra não muda o tamanho do mapa */
.mm-hi-mapin { position: absolute; left: 0; top: 0; width: calc(max(100vw, 150vh) * 1.12); aspect-ratio: 3 / 2; }
.mm-hi-mapin.glide { transition: translate 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.mm-hi-mapin svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(0.6); }
/* ao chegar no mapa, ele escurece devagar: os pontos ficam em destaque e a tela cansa menos a vista */
.mm-hi-map.enter .mm-hi-mapin svg { animation: mm-hi-dim 1.4s ease 0.25s both; }
@keyframes mm-hi-dim { from { filter: brightness(1); } }
.mm-hi-places, .mm-hi-pins { position: absolute; inset: 0; pointer-events: none; }
/* lugar: um ponto e, embaixo, a caixinha com o nome */
.mm-hi-place { position: absolute; display: grid; justify-items: center; gap: 8px; translate: -50% -9px; }
.mm-hi-place i { width: 18px; height: 18px; border-radius: 50%; background: #d8d2dc; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(10, 0, 18, 0.6), 0 4px 10px rgba(0, 0, 0, 0.5); }
.mm-hi-place.lit i { background: var(--accent); box-shadow: 0 0 0 3px rgba(10, 0, 18, 0.6), 0 0 16px rgba(var(--accent-rgb), 0.9); }
.mm-hi-place span { padding: 4px 14px; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(10, 0, 18, 0.82); color: #fff; transform: skewX(-10deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; }
/* quem você vai encontrar: o retrato (ou "?") num círculo em cima do lugar, com uma ponta apontando para o ponto */
.mm-hi-pin { position: absolute; translate: -50% calc(-100% - 22px); display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; pointer-events: auto; animation: mm-hi-bob 1.8s ease-in-out infinite; }
.mm-hi-face { position: relative; flex: none; width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--accent); background: #1a0b22; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 38px; font-weight: 900; font-style: italic; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--accent-rgb), 0.6); }
.mm-hi-face img { position: absolute; left: 50%; top: 0; width: 190%; translate: -50% -3%; max-width: none; }
.mm-hi-pin::after { content: ''; position: absolute; left: 50%; bottom: -14px; translate: -50% 0; border: 9px solid transparent; border-top: 12px solid var(--accent); }
.mm-hi-pin small { order: -1; padding: 3px 12px; background: #ffcf6e; color: #1a0b22; transform: skewX(-10deg); font-size: 14px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; }
.mm-hi-pin:is(:hover, :focus-visible) { outline: none; }
.mm-hi-pin:is(:hover, :focus-visible) .mm-hi-face { border-color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--accent), 0 0 30px rgba(var(--accent-rgb), 0.9); }
@keyframes mm-hi-bob { 50% { translate: -50% calc(-100% - 30px); } }
/* o lugar com capítulo é um botão; o brilho em volta do ponto = novidade (prêmio liberado ainda não visto) */
button.mm-hi-place { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; }
button.mm-hi-place:is(:hover, :focus-visible) { outline: none; }
button.mm-hi-place:is(:hover, :focus-visible) span { background: var(--accent); border-color: var(--accent); }
.mm-hi-place:not(.on) span { opacity: 0.7; }
.mm-hi-place.new i { animation: mm-hi-new 1.4s ease-in-out infinite; }
@keyframes mm-hi-new { 50% { box-shadow: 0 0 0 3px rgba(10, 0, 18, 0.6), 0 0 0 9px rgba(255, 207, 110, 0.55), 0 0 26px rgba(255, 207, 110, 0.9); } }
/* a sua foto: onde você está; anda até o próximo lugar */
.mm-hi-avatar { position: absolute; z-index: 1; translate: calc(-100% - 22px) -50%; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: #1a0b22; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 900; font-style: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); pointer-events: none; }
.mm-hi-avatar[hidden] { display: none; }
.mm-hi-avatar.walk { transition: left 1s cubic-bezier(0.45, 0, 0.2, 1), top 1s cubic-bezier(0.45, 0, 0.2, 1); }
.mm-hi-me img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* o relógio, preso à torre da rádio */
.mm-hi-clock { position: absolute; translate: -50% 0; max-width: 300px; margin: 0; padding: 6px 14px; font-size: 15px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1.2; color: #fff; background: rgba(40, 0, 10, 0.88); border-left: 4px solid #ff4a4a; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); transform: skewX(-8deg); white-space: nowrap; }
.mm-hi-clock:empty { display: none; }
/* Continuar: embaixo, no meio, sempre à mão */
.mm-hi-go {
  position: absolute; z-index: 2; left: 50%; bottom: 4vh; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 14px 44px; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; transform: skewX(-10deg); box-shadow: 8px 8px 0 var(--accent); white-space: nowrap;
}
.mm-hi-go[hidden] { display: none; }
.mm-hi-go svg { width: 22px; height: 22px; fill: currentColor; }
.mm-hi-go:is(:hover, :focus-visible) { background: var(--accent); color: #fff; box-shadow: 8px 8px 0 #fff; outline: none; }
/* o cartão do lugar: ao lado dele, no mapa (no celular, uma folha embaixo) */
.mm-hi-cards { position: absolute; inset: 0; pointer-events: none; }
.mm-hi-card {
  position: absolute; z-index: 3; translate: 34px -50%; width: min(440px, 80vw); max-height: 72vh; overflow-y: auto; scrollbar-width: none; pointer-events: auto; cursor: auto;
  display: grid; gap: 14px; padding: 18px 22px 20px; background: rgba(14, 0, 24, 0.96); border-left: 5px solid var(--accent); box-shadow: 10px 10px 0 rgba(var(--accent-rgb), 0.3), 0 20px 50px rgba(0, 0, 0, 0.55);
}
.mm-hi-card[hidden] { display: none; }
.mm-hi-card.left { translate: calc(-100% - 34px) -50%; }
.mm-hi-card.in { animation: mm-hi-card-in 0.3s cubic-bezier(0.15, 1.2, 0.3, 1) both; }
@keyframes mm-hi-card-in { from { opacity: 0; scale: 0.94; } }
.mm-hi-card.sheet { position: absolute; left: 0; right: 0; bottom: 0; top: auto; translate: none; width: auto; max-height: 62vh; border-left: 0; border-top: 5px solid var(--accent); }
.mm-hi-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.mm-hi-card header .mm-hi-face { width: 56px; height: 56px; font-size: 28px; border-width: 3px; box-shadow: none; }
.mm-hi-card header strong { display: block; font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; }
.mm-hi-card header small { display: block; font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: 0.12em; text-transform: uppercase; color: #ffcf6e; }
.mm-hi-cardx { width: 36px; height: 36px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.7); font-size: 28px; line-height: 1; cursor: pointer; }
.mm-hi-cardx:is(:hover, :focus-visible) { color: #fff; outline: none; }
.mm-hi-csec { display: grid; gap: 8px; }
/* o palco: o nome ao lado do ponto (fica perto do ponto da praça) */
.mm-hi-place.side { display: flex; align-items: center; gap: 8px; translate: -9px -50%; }
/* afinidade: 4 corações e o 5º dourado; quanto falta para o próximo */
.mm-hi-hearts { display: flex; gap: 6px; }
.mm-hi-hearts i { font-style: normal; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, 0.18); }
.mm-hi-hearts i.on { color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7); }
.mm-hi-hearts i.gold { margin-left: 6px; }
.mm-hi-hearts i.gold.on { color: #ffcf6e; text-shadow: 0 0 14px rgba(255, 207, 110, 0.9); }
.mm-hi-affmsg { margin: 0 0 4px; font-size: 15px; font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.75); }
.mm-hi-cbody { display: grid; gap: 16px; }
/* abas do cartão: Músicas e Memórias (o pontinho = prêmio novo) */
.mm-hi-tabs { display: flex; gap: 6px; border-bottom: 2px solid rgba(255, 255, 255, 0.12); }
.mm-hi-tabs button {
  position: relative; padding: 6px 16px 8px; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent; background: none; color: rgba(255, 255, 255, 0.6); cursor: pointer;
  font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase;
}
.mm-hi-tabs button.on { color: #fff; border-bottom-color: var(--accent); }
.mm-hi-tabs button:is(:hover, :focus-visible) { color: #fff; outline: none; }
.mm-hi-tabs button.new::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ffcf6e; box-shadow: 0 0 8px rgba(255, 207, 110, 0.9); }
.mm-hi-csec h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-bottom: 4px; border-bottom: 2px solid rgba(var(--accent-rgb), 0.6); font-size: 19px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-hi-csec h3 small { font-size: 15px; color: #ffcf6e; }

/* ---------- cartão da fase ---------- */
.mm-hi-fase { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(5, 0, 11, 0.72); backdrop-filter: blur(6px); }
.mm-hi-fase[hidden] { display: none; }
.mm-hi-fbox {
  width: min(860px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 12px; padding: 26px 34px 30px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.18), rgba(14, 0, 24, 0.95) 40%); border-left: 6px solid var(--accent);
  box-shadow: 12px 12px 0 rgba(var(--accent-rgb), 0.35);
}
.mm-hi-fase.in .mm-hi-fbox { animation: mm-set-in 0.45s cubic-bezier(0.15, 1.2, 0.3, 1) both; }
.mm-hi-fbox > small { font-size: 16px; font-weight: 900; font-style: italic; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-light); }
.mm-hi-fbox h2 { margin: 0; font-size: clamp(30px, 5vh, 46px); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; }
.mm-hi-goals { margin: 4px 0 6px; padding: 0; list-style: none; display: grid; gap: 6px; }
.mm-hi-goals li { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.85); }
.mm-hi-goals i { font-style: normal; font-size: 22px; color: rgba(255, 255, 255, 0.25); }
.mm-hi-goals li.got i { color: #ffcf6e; text-shadow: 0 0 10px rgba(255, 207, 110, 0.7); }
.mm-hi-flabel { margin: 4px 0 0; font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.mm-hi-songs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 60px; }
.mm-hi-song {
  display: grid; gap: 6px; padding: 8px; text-align: left; cursor: pointer; color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(10, 0, 18, 0.6);
}
.mm-hi-song img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mm-hi-song strong { display: block; font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1.05; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mm-hi-song em { display: block; font-size: 14px; font-weight: 700; font-style: normal; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-hi-song.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(var(--accent-rgb), 0.5); }
.mm-hi-song:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mm-hi-play {
  justify-self: start; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 46px; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; transform: skewX(-10deg);
  box-shadow: 8px 8px 0 var(--accent);
}
.mm-hi-play svg { width: 20px; height: 20px; fill: currentColor; }
.mm-hi-play:hover, .mm-hi-play:focus-visible { background: var(--accent); color: #fff; box-shadow: 8px 8px 0 #fff; outline: none; }
.mm-hi-play:disabled { opacity: 0.4; cursor: default; }
/* fase com música própria (uma só, nada para escolher): título, objetivos e efeito à esquerda, o vídeo à direita;
   dificuldade e Jogar centralizados embaixo */
.mm-hi-fbox.solo { grid-template-columns: minmax(0, 1fr) minmax(220px, 38%); column-gap: 28px; }
.mm-hi-fbox.solo > :is(small, h2, .mm-hi-goals) { grid-column: 1; }
.mm-hi-fbox.solo .mm-hi-flabel { display: none; }
.mm-hi-fbox.solo .mm-hi-songs { grid-column: 2; grid-row: 1 / span 4; align-self: center; grid-template-columns: 1fr; }
.mm-hi-fbox.solo .mm-hi-song { cursor: default; }
.mm-hi-fbox.solo .mm-hi-play { grid-column: 1 / -1; }
.mm-hi-fbox.solo .mm-hi-play { justify-self: center; }
@media (max-width: 700px) {
  .mm-hi-fbox.solo { grid-template-columns: minmax(0, 1fr); }
  .mm-hi-fbox.solo .mm-hi-songs { grid-column: 1; grid-row: auto; }
}

/* ---------- na partida: fragmentos e Holofote ---------- */
body.jg #view-jogar .hud-frag { position: absolute; top: calc(3vh + 66px + clamp(54px, 7vh, 84px) + 34px); left: 3vw; display: flex; align-items: center; gap: 8px; font-family: var(--jg-font); }
body.jg #view-jogar .hud-frag[hidden] { display: none; }
body.jg #view-jogar .hud-frag span { font-size: 22px; color: #ffe39a; text-shadow: 0 0 12px rgba(255, 207, 110, 0.9); }
body.jg #view-jogar .hud-frag strong { font-size: 30px; font-weight: 900; font-style: italic; color: #fff; text-shadow: 3px 3px 0 rgba(240, 169, 58, 0.7); }
/* Holofote (a Nina): o combo grande, iluminado */
body.hi-holofote.jg #view-jogar .hud-combo strong { font-size: clamp(80px, 11vh, 130px); color: #fff; text-shadow: 4px 4px 0 #3fe0d8, 0 0 40px rgba(63, 224, 216, 0.75); }
body.hi-holofote.jg #view-jogar .hud-combo span { background: #3fe0d8; color: #0a0012; }
body.hi-holofote.jg #view-jogar .hud-frag { top: calc(3vh + 66px + clamp(80px, 11vh, 130px) + 34px); }
.res-story { color: #fff !important; }
.res-story[hidden] { display: none; }
.res-story-stars { display: inline-flex; gap: 4px; margin-right: 12px; vertical-align: middle; }
.res-story-stars i { font-style: normal; font-size: 30px; color: rgba(255, 255, 255, 0.25); }
.res-story-stars i.on { color: #ffcf6e; text-shadow: 0 0 14px rgba(255, 207, 110, 0.8); }
.res-story-goals { font-size: 15px; color: rgba(255, 255, 255, 0.8); }

/* ---------- fases, botões e prêmios do capítulo (no cartão do lugar) ---------- */
.mm-hi-cfases { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mm-hi-cfases button, .mm-hi-prize {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 16px; cursor: pointer; text-align: left;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: none; color: #fff; transform: skewX(-8deg);
  font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase;
}
.mm-hi-cfases button b { flex: none; display: flex; gap: 3px; }
.mm-hi-cfases i { font-style: normal; font-size: 20px; color: rgba(255, 255, 255, 0.22); }
.mm-hi-cfases i.on { color: #ffcf6e; text-shadow: 0 0 10px rgba(255, 207, 110, 0.7); }
.mm-hi-cfases button:disabled, .mm-hi-prize:not(.got) { opacity: 0.45; cursor: default; }
.mm-hi-cfases button:not(:disabled):hover, .mm-hi-cfases button:focus-visible, .mm-hi-prize:not(:disabled):is(:hover, :focus-visible) { background: rgba(var(--accent-rgb), 0.3); outline: none; }
/* Extras: os prêmios de cada capítulo */
.mm-hi-prizes { display: grid; gap: 4px; }
.mm-hi-prize { font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-hi-prize:disabled { cursor: default; }
.mm-hi-prize b { flex: none; font-size: 16px; color: var(--accent-light); }
.mm-hi-prize.got b { color: #ffcf6e; }
.mm-hi-prizenote { margin: 2px 0 0 16px; font-size: 14px; font-weight: 700; font-style: italic; color: var(--accent-light); }
.mm-hi-cacts { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 10px; }
.mm-hi-cacts:empty { display: none; }
.mm-hi-cacts button {
  padding: 8px 18px; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; cursor: pointer; transform: skewX(-10deg);
  font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase;
}
.mm-hi-cacts button.main { height: auto; background: #fff; color: var(--ink); border-color: #fff; box-shadow: 6px 6px 0 var(--accent); }
.mm-hi-cacts button:hover, .mm-hi-cacts button:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.mm-hi-cmem { margin: 0; font-size: 15px; font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.55); }
.mm-hi-cmem:empty { display: none; }

/* ---------- pausa ---------- */
.mm-hi-pause { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(5, 0, 11, 0.7); backdrop-filter: blur(6px); }
.mm-hi-pause[hidden] { display: none; }
.mm-hi-pbox { display: grid; gap: 12px; min-width: min(420px, 86vw); padding: 28px 34px 32px; background: rgba(14, 0, 24, 0.95); border-left: 6px solid var(--accent); box-shadow: 12px 12px 0 rgba(var(--accent-rgb), 0.35); animation: mm-set-in 0.35s cubic-bezier(0.15, 1.2, 0.3, 1) both; }
.mm-hi-pbox h2 { margin: 0 0 6px; font-size: 44px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; }
.mm-hi-pbox button {
  padding: 11px 24px; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; cursor: pointer; text-align: left;
  font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; transform: skewX(-10deg);
}
.mm-hi-pbox button:hover, .mm-hi-pbox button:focus-visible { background: var(--accent); border-color: var(--accent); outline: none; }

/* ---------- boas-vindas (só na primeira vez) ---------- */
.mm-hi-wbox { max-width: min(640px, 90vw); gap: 14px; }
.mm-hi-wbox h2 { font-size: 40px; }
.mm-hi-wbox p { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.mm-hi-wbox button { justify-self: start; margin-top: 8px; text-align: center; }
.mm-hi-wbox small { font-size: 14px; color: rgba(255, 255, 255, 0.55); }

/* ---------- telas estreitas ---------- */
@media (max-width: 900px) {
  .mm-hi-go { padding: 12px 30px; font-size: 20px; bottom: 3vh; }
  .mm-hi-place span { font-size: 14px; }
  .mm-hi-face { width: 58px; height: 58px; font-size: 30px; }
  .mm-hi-songs { grid-template-columns: 1fr; }
  .mm-hi-song { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
}
@media (max-aspect-ratio: 4/5) {
  /* tela em pé: o corte do retrato (meio das coxas) fica atrás da caixa de diálogo, não flutuando acima dela */
  .mm-hi-who { height: 72vh; max-width: 92vw; bottom: 3vh; }
  /* só cabe um retrato: aparece quem fala (na narração, quem falou por último), no meio; o outro some e volta ao falar */
  .mm-hi-who.left, .mm-hi-who.right { left: 0; right: 0; margin: 0 auto; }
  .mm-hi-who.on:not(.front) { opacity: 0; animation: none; } /* sem a animação de entrada: ela entra quando for a vez dela */
  .mm-hi-box { width: calc(100% - 24px); bottom: 16px; padding: 30px 22px 24px; min-height: 0; }
  .mm-hi-text { font-size: 22px; }
  .mm-hi-name { font-size: 24px; left: 18px; }
  .mm-hi-choices button { font-size: 22px; }
}

/* ---------- vida nos cenários (historia.js LIFE): luz da torre, lâmpadas, neon do quiosque ---------- */
.mm-hi-life { position: absolute; pointer-events: none; transition: opacity 1.2s; }
.mm-hi-life.off { opacity: 0; }
.mm-hi-life.dim { opacity: 0.5; }
.mm-hi-life i { position: absolute; translate: -50% -50%; border-radius: 50%; }
/* a luz vermelha da torre: pisca devagar, com um halo */
.mm-hi-torre, .mm-hi-aviso { --k: 1; width: calc(14px * var(--k)); height: calc(14px * var(--k)); background: #ff3b3b; box-shadow: 0 0 calc(10px * var(--k)) calc(4px * var(--k)) rgba(255, 50, 50, 0.85), 0 0 calc(34px * var(--k)) calc(12px * var(--k)) rgba(255, 40, 40, 0.35); animation: mm-hi-torre 2.4s ease-in-out infinite; }
.mm-hi-torre.map { position: absolute; translate: -50% -50%; border-radius: 50%; z-index: 1; --k: 0.9; pointer-events: none; }
@keyframes mm-hi-torre { 0%, 55%, 100% { opacity: 0.15; scale: 0.7; } 65%, 80% { opacity: 1; scale: 1; } }
/* lâmpada acesa: um brilho quente que respira; uma ou outra falha */
.mm-hi-luz { --k: 1; width: calc(70px * var(--k)); height: calc(70px * var(--k)); background: radial-gradient(circle, rgba(255, 214, 140, 0.55), rgba(255, 180, 90, 0.18) 40%, transparent 70%); mix-blend-mode: screen; animation: mm-hi-luz 3.2s ease-in-out infinite; }
.mm-hi-luz.falha { animation: mm-hi-luz 3.2s ease-in-out infinite, mm-hi-falha 7.3s steps(1) infinite; }
@keyframes mm-hi-luz { 50% { opacity: 0.7; scale: 0.92; } }
@keyframes mm-hi-falha { 0%, 91%, 93%, 95%, 100% { filter: none; } 92%, 94% { filter: brightness(0.2); } }
/* neon verde-limão do Kai: pulsa no ritmo de uma batida (120 bpm) */
.mm-hi-neon { mix-blend-mode: screen; animation: mm-hi-neon 0.5s ease-out infinite; }
.mm-hi-neon.bar-top, .mm-hi-neon.bar-bot { width: 24%; height: 5%; border-radius: 50%; background: radial-gradient(ellipse, rgba(182, 240, 60, 0.5), transparent 70%); }
.mm-hi-neon.ring { width: 5.5%; height: 9%; background: radial-gradient(circle, transparent 35%, rgba(182, 240, 60, 0.55) 50%, transparent 68%); }
@keyframes mm-hi-neon { 0% { opacity: 1; } 100% { opacity: 0.35; } }
/* o sol: um brilho grande e quente no canto, que respira devagar */
.mm-hi-sol { width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 210, 0.55), rgba(255, 220, 150, 0.2) 30%, transparent 65%); mix-blend-mode: screen; animation: mm-hi-sol 6s ease-in-out infinite; }
@keyframes mm-hi-sol { 50% { opacity: 0.75; scale: 0.96; } }
/* pétala de cerejeira: cai girando e balançando para o lado */
.mm-hi-petala { --k: 1; width: calc(14px * var(--k)); height: calc(10px * var(--k)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd6e6, #f7a8c8); box-shadow: 0 0 4px rgba(255, 190, 215, 0.5); opacity: 0.9; animation: mm-hi-petala 10s linear infinite; }
@keyframes mm-hi-petala {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.9; }
  50% { transform: translate(calc(var(--dx) * 0.5 + 3vw), 55vh) rotate(260deg); }
  92% { opacity: 0.85; }
  100% { transform: translate(var(--dx), 112vh) rotate(540deg); opacity: 0; }
}
/* raios de sol entrando pela janela: faixas a 45°, descendo para a esquerda, que deslizam e respiram devagar */
/* o volume de luz: a caixa cobre a janela "arrastada" a 45° até o chão (historia-vida.js monta as faixas e o esfumado) */
.mm-hi-life .mm-hi-raios { translate: none; border-radius: 0; mix-blend-mode: screen; animation: mm-hi-raios-luz 7s ease-in-out infinite; }
.mm-hi-raios > span { position: absolute; inset: 0; background-size: 424px 424px; animation: mm-hi-raios 14s linear infinite; }
@keyframes mm-hi-raios { to { background-position: var(--rx, 424px) 424px; } }
@keyframes mm-hi-raios-luz { 50% { opacity: 0.6; } }
/* grão de poeira na luz: flutua devagar e cintila quando pega o sol */
.mm-hi-grao { --k: 1; width: calc(5px * var(--k)); height: calc(5px * var(--k)); background: #fff3d6; box-shadow: 0 0 calc(6px * var(--k)) rgba(255, 236, 190, 0.9); animation: mm-hi-grao 10s ease-in-out infinite alternate, mm-hi-cintila 3s ease-in-out infinite; }
@keyframes mm-hi-grao { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes mm-hi-cintila { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mm-hi-life i, .mm-hi-raios > span, .mm-hi-torre.map { animation: none; } .mm-hi-petala, .mm-hi-grao { display: none; } }
/* a opção "Animar o cenário" desligada (game.js: body.sem-anim) para a vida das cenas e do fundo dos echos do mesmo jeito;
   o zoom lento e a troca de imagens do fundo dos echos continuam */
body.sem-anim .mm-hi-life i, body.sem-anim .mm-hi-raios > span, body.sem-anim .mm-hi-torre.map { animation: none; }
body.sem-anim .mm-hi-petala, body.sem-anim .mm-hi-grao { display: none; }

/* ---------- créditos (depois do fim): o texto rolando de um lado, o agradecimento e o apoio do outro ---------- */
.mm-hi-credits { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #05000b; }
.mm-hi-credits[hidden] { display: none; }
.mm-hi-credits.in { animation: mm-hi-credits-in 1.6s ease both; }
@keyframes mm-hi-credits-in { from { opacity: 0; } }
.mm-hi-roll { position: relative; overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.mm-hi-rollin { padding: 55vh 6vw 60vh; text-align: center; }
.mm-hi-rollin h3 { margin: 7vh 0 1.4vh; font-size: 17px; font-weight: 900; font-style: italic; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-light); }
.mm-hi-rollin h3:first-child { margin-top: 0; font-size: 46px; letter-spacing: 0; color: #fff; text-shadow: 4px 4px 0 rgba(var(--accent-rgb), 0.6); }
.mm-hi-rollin p { margin: 0 0 2vh; font-size: 22px; font-weight: 700; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.mm-hi-thanks { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 8vh 6vw; border-left: 4px solid var(--accent); background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.16), rgba(14, 0, 24, 0.9) 50%); }
.mm-hi-thanks h2 { margin: 0; font-size: clamp(38px, 6vh, 60px); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; text-shadow: 4px 4px 0 rgba(var(--accent-rgb), 0.55); }
.mm-hi-thanks p { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.mm-hi-support { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.mm-hi-support a {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; color: #fff; text-decoration: none; transform: skewX(-10deg);
  font-size: 21px; font-weight: 900; font-style: italic; text-transform: uppercase; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}
.mm-hi-support svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mm-hi-support .kofi { background: #29abe0; }
.mm-hi-support .pixgg { background: #32bcad; }
.mm-hi-support a:is(:hover, :focus-visible) { filter: brightness(1.12); outline: 2px solid #fff; outline-offset: 3px; }
.mm-hi-credits-go { align-self: flex-start; margin-top: 18px; padding: 10px 26px; border: 2px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; cursor: pointer; transform: skewX(-10deg); font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-hi-credits-go:is(:hover, :focus-visible) { background: var(--accent); border-color: var(--accent); outline: none; }
@media (max-width: 900px) {
  .mm-hi-credits { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .mm-hi-thanks { border-left: 0; border-top: 4px solid var(--accent); padding: 22px 20px 26px; gap: 12px; }
  .mm-hi-thanks h2 { font-size: 32px; } .mm-hi-thanks p { font-size: 17px; }
  .mm-hi-rollin p { font-size: 18px; }
}
/* o botão Créditos no mapa (depois de ver os créditos uma vez) */
.mm-hi-credbtn { margin-left: auto; padding: 9px 22px; border: 2px solid #fff; background: rgba(10, 0, 18, 0.85); color: #fff; cursor: pointer; transform: skewX(-10deg); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4); font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.mm-hi-credbtn[hidden] { display: none; }
.mm-hi-credbtn:is(:hover, :focus-visible) { background: var(--accent); border-color: var(--accent); outline: none; }

/* fundo da fase com música própria: as imagens da música atrás das notas (historia.js fundoEm) */
/* isolation: as camadas das imagens (z-index 0 a 3) ficam presas aqui dentro, sempre atrás do canvas das notas */
.hi-stage-bg { position: absolute; inset: 0; overflow: hidden; background: #05060f; pointer-events: none; isolation: isolate; }
.hi-stage-bg[hidden] { display: none; }
.hi-stage-cena { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; will-change: opacity, transform; }
.hi-stage-cena .mm-hi-life { position: absolute; inset: 0; width: 100%; height: 100%; transition: none; }

/* pausa da história: o volume fica no canto, junto do idioma e do mudo (#mm-audio sobe por cima da tela da história) */
#mm-audio .mm-hi-pvol { display: none; }
#mm:has(.mm-hi-pause:not(.mm-hi-welcome):not([hidden])) #mm-audio { z-index: 28; }
#mm:has(.mm-hi-pause:not(.mm-hi-welcome):not([hidden])) #mm-audio .mm-hi-pvol {
  display: flex; align-items: center; gap: 10px; height: 40px; margin: 0; padding: 0 14px;
  border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(10, 0, 18, 0.55); transform: skewX(-10deg);
}
#mm-audio .mm-hi-pvol > * { transform: skewX(10deg); }
#mm-audio .mm-hi-pvol label { font-size: 13px; }
#mm-audio .mm-hi-pvol input { width: 130px; flex: none; }
#mm-audio .mm-hi-pvol output { min-width: 3em; font-size: 14px; }
@media (max-width: 900px) {
  #mm:has(.mm-hi-pause:not(.mm-hi-welcome):not([hidden])) #mm-audio .mm-hi-pvol { height: 34px; padding: 0 10px; gap: 6px; }
  #mm-audio .mm-hi-pvol label { display: none; }
  #mm-audio .mm-hi-pvol input { width: 90px; }
}
.mm-hi-pbox button[hidden] { display: none; } /* "Ver o mapa" na pausa aberta no próprio mapa */

/* tela deitada baixa (celular virado, janela pequena): caixa de diálogo, texto e pausa menores, para caber na altura */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .mm-hi-box { min-height: 0; width: min(1400px, 92vw); bottom: 2.5vh; padding: 18px 30px 14px 26px; }
  .mm-hi-box:has(.mm-hi-name:not([hidden])) { margin-top: 14px; }
  .mm-hi-name { font-size: 19px; padding: 2px 14px; left: 20px; }
  .mm-hi-text { font-size: 18px; line-height: 1.4; }
  .mm-hi-choices { gap: 8px; margin-top: 10px; }
  .mm-hi-choices button, .mm-hi-ask button { font-size: 17px; padding: 6px 20px; }
  .mm-hi-pbox { gap: 8px; padding: 16px 24px 18px; }
  .mm-hi-pbox h2 { font-size: 28px; margin-bottom: 2px; }
  .mm-hi-pbox button { font-size: 17px; padding: 7px 18px; }
}
/* tela em pé: a faixa da contagem da torre quebra em duas linhas (numa só, ela passava da borda da tela) */
@media (max-aspect-ratio: 4/5) { .mm-hi-clock { white-space: normal; max-width: 52vw; text-align: center; } }

/* cartão da fase no celular e no tablet (em pé, ou deitado com pouca altura): tela cheia, sem borda, sombra nem margem */
@media (max-aspect-ratio: 4/5), (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .mm-hi-fase { padding: 0; background: #0a0012; backdrop-filter: none; }
  .mm-hi-fbox {
    width: 100%; height: 100%; max-height: none; align-content: center; padding: 84px 6vw 28px;
    border-left: 0; box-shadow: none; background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), #0a0012 45%);
  }
  .mm-hi-fase.in .mm-hi-fbox { animation: none; }
}
/* deitado e baixo: duas colunas (título e objetivos à esquerda; música e Jogar à direita) */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .mm-hi-fbox, .mm-hi-fbox.solo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5vw; row-gap: 6px; padding: 58px 5vw 8px; }
  .mm-hi-fbox > :is(small, h2, .mm-hi-goals) { grid-column: 1; }
  .mm-hi-fbox > small { grid-row: 1; } .mm-hi-fbox > h2 { grid-row: 2; } .mm-hi-goals { grid-row: 3; }
  .mm-hi-fbox > :is(.mm-hi-flabel, .mm-hi-songs, .mm-hi-play), .mm-hi-fbox.solo > :is(.mm-hi-songs, .mm-hi-play) { grid-column: 2; grid-row: auto; }
  .mm-hi-fbox > .mm-hi-flabel { grid-row: 1; } .mm-hi-fbox > .mm-hi-songs { grid-row: 2 / span 2; } .mm-hi-fbox.solo > .mm-hi-songs { grid-row: 1 / span 3; }
  .mm-hi-fbox > .mm-hi-play { grid-row: 4; }
  .mm-hi-fbox h2 { font-size: 26px; }
  .mm-hi-goals li { font-size: 15px; } .mm-hi-goals i { font-size: 17px; }
  .mm-hi-play { font-size: 19px; padding: 9px 34px; margin-top: 4px; }
  .mm-hi-song strong { font-size: 14px; } .mm-hi-song em { font-size: 12px; }
}
/* o botão do canto da história: o ícone de pausa (abre a pausa na cena e no mapa) */
.mm-hi .mm-hi-pausebtn { display: grid; place-items: center; width: 52px; height: 44px; padding: 0; }
.mm-hi .mm-hi-pausebtn svg { width: 22px; height: 22px; fill: currentColor; }
/* tela estreita: o volume da pausa desce para a linha de baixo (numa linha só, ele cobria o botão de pausa) */
@media (max-width: 520px) {
  #mm:has(.mm-hi-pause:not(.mm-hi-welcome):not([hidden])) #mm-audio { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; max-width: calc(100vw - 96px); }
  #mm-audio .mm-hi-pvol { order: 1; }
}
/* boas-vindas no celular e no tablet (em pé, ou deitado com pouca altura): tela cheia, sem borda nem sombra, e rola se
   o texto não couber; o alto fica livre para o botão de pausa */
@media (max-aspect-ratio: 4/5), (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .mm-hi-welcome { display: block; overflow-y: auto; background: #0a0012; backdrop-filter: none; }
  .mm-hi-welcome[hidden] { display: none; }
  .mm-hi-wbox {
    box-sizing: border-box; max-width: none; min-width: 0; width: 100%; min-height: 100%; align-content: center; padding: 84px 6vw 28px;
    border-left: 0; box-shadow: none; background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), #0a0012 45%);
  }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .mm-hi-wbox { padding: 64px 6vw 18px; }
  .mm-hi-wbox h2 { font-size: 30px; }
  .mm-hi-wbox p { font-size: 16px; }
}