/* Os dois lados do GTS, Grand Theft Samurai (03/11/2026, pedidos de Denis: "um lado em cima, em português, e para baixo como se
   fosse o submundo"; nome em abreviação de letras, com pegada de GTA, chinês e samurai, e o LRV menor, como a cidade). Tela de carga
   e menu inicial são o mesmo desenho, partido por um horizonte: em cima GTS e a cidade; embaixo 大盗侍 e o mesmo chão de
   ponta-cabeça, com leitura e tradução. Carregado por último: vale por cima do abertura.css e do menu-imersivo.css. Quem liga o
   lado aceso é src/lados.js. */
:root {
  --lados-ouro: #ff9a24;
  --lados-tinta: #fff0da;   /* o texto de cima: osso, sobre o céu escuro */
  --lados-brasa: #ff5a12;
  --lados-noite: #0a0708;
  --lados-sangue: #e3241b;
  --lados-papel: #fff6e0;
  --lados-cinza: #cfc6b6;
  --lados-margem: clamp(16px, 3.6vw, 56px);
  --lados-corte: .62em;   /* a mesma diagonal das letras nas faixas acesas */
  --lrv-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* neste Windows não há Yu Mincho nem KaiTi: o japonês sai em Yu Gothic, como no filme, e o chinês menor em SimSun */
  --lados-mincho: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --lados-kai: "SimSun", "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", serif;
  --lados-marca-h: min(28vh, 14.8vw);
  --lados-marca-w: calc(var(--lados-marca-h) * 3.12);
  --lados-marca-x: 66vw;
  --lados-kanji-h: calc(var(--lados-marca-h) * 1.1);
  --lados-sol: calc(var(--lados-marca-h) * 2.7);
}
.lados-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- O desenho ---- */
.lados { position: absolute; inset: 0; overflow: hidden; background: var(--lados-noite); pointer-events: none; }
.lados-palco { position: absolute; left: 0; right: 0; top: -12vh; bottom: -12vh; transform: translate3d(0, var(--lados-d, 0vh), 0); transition: transform .6s cubic-bezier(.22, .9, .24, 1); will-change: transform; }
.lados-ceu { position: absolute; left: 0; right: 0; top: 0; bottom: 50%; background: linear-gradient(180deg, #050406 0%, #0d0507 40%, #240807 66%, #5e1206 84%, #a82a08 96%, #e8590f 100%); }
.lados-chao { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; background: var(--lados-noite); }
.lados-sol { position: absolute; left: calc(var(--lados-marca-x) - var(--lados-sol) / 2); top: calc(50% - var(--lados-sol) / 2); width: var(--lados-sol); height: var(--lados-sol); border-radius: 50%;
  background: linear-gradient(180deg, #2c0705 0%, #8e140b 30%, #cf2410 50%, #2a0807 50%, #150404 100%); box-shadow: 0 0 9vh rgba(255, 70, 16, .35); }
.lados-perfil { position: absolute; left: 0; width: 100%; height: 26vh; overflow: visible; }
.lados-cima { bottom: 50%; }
.lados-baixo { top: 50%; transform: scaleY(-1); }
.lados-perfil-longe.lados-cima { color: #1d0705; fill: #1d0705; }
.lados-perfil-perto.lados-cima { color: #040203; fill: #040203; }
.lados-perfil-longe.lados-baixo { fill: #2a0a09; }
.lados-perfil-perto.lados-baixo { fill: #6d1510; }
.lados-marca { position: absolute; left: calc(var(--lados-marca-x) - var(--lados-marca-w) / 2); width: var(--lados-marca-w); height: var(--lados-marca-h); overflow: visible; }
.lados-marca-cima { bottom: 50%; fill: url(#gts-fogo); stroke: #050304; stroke-width: 1.5; paint-order: stroke fill; filter: drop-shadow(0 0 1.3vh rgba(255, 90, 16, .9)); }
.lados-katanas { position: absolute; left: calc(var(--lados-marca-x) - var(--lados-marca-w) * .62); width: calc(var(--lados-marca-w) * 1.24); height: calc(var(--lados-marca-w) * 1.24 * .44); overflow: visible; }
.lados-katanas-cima { bottom: 50%; fill: #efe9dd; }
.lados-katanas-baixo, .lados-reflexo { display: none; }
/* samurais e silos na frente das letras: preto sobre o fogo */
.lados-perfil-perto.lados-cima { z-index: 1; }
/* o reflexo das letras fica no escuro, atrás dos caracteres */
.lados-reflexo { top: 50%; fill: #260908; transform: scaleY(-1); }
.lados-kanji-cheio { filter: drop-shadow(0 0 1vh rgba(227, 36, 27, .6)); }
.lados-kanji { position: absolute; left: calc(var(--lados-marca-x) - var(--lados-marca-w) / 2); top: calc(50% + .5vh); width: var(--lados-marca-w); height: var(--lados-kanji-h); }
.lados-kanji-base { opacity: .2; }
/* a tinta vermelha desce conforme a cidade monta; fora da tela de carga --ab-p não existe e ela fica inteira */
.lados-kanji-cheio { clip-path: inset(0 0 calc((1 - var(--ab-p, 1)) * 100%) 0); }
.lados-placa { z-index: 2; position: absolute; left: calc(var(--lados-marca-x) - var(--lados-marca-w) / 2); bottom: calc(50% + var(--lados-marca-h) + 1.9vh); display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); color: var(--lados-tinta); }
.lados-placa svg { flex: none; height: calc(var(--lados-marca-h) * .27); width: calc(var(--lados-marca-h) * .27 * 2.96); fill: var(--lados-tinta); }
.lados-placa strong { display: block; font: 800 clamp(10px, 1.85vh, 15px)/1.15 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lados-placa span { display: block; margin-top: .25em; font: 600 clamp(10px, 1.85vh, 15px)/1.15 var(--lrv-titulo); white-space: nowrap; }
.lados-sentido { position: absolute; left: calc(var(--lados-marca-x) - var(--lados-marca-w) / 2); top: calc(50% + var(--lados-kanji-h) + 1.3vh); width: var(--lados-marca-w); text-align: center; color: var(--lados-papel); }
.lados-sentido b { display: block; font: 800 clamp(13px, 3vh, 26px)/1.1 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.lados-sentido small { display: block; margin-top: .4em; font: 500 clamp(10px, 1.75vh, 14px)/1.15 var(--lrv-titulo); color: var(--lados-cinza); white-space: nowrap; }
.lados-sentido small [lang="zh"] { font: 700 1.15em/1 var(--lados-mincho); color: var(--lados-sangue); margin-right: .3em; }
.lados-sentido i { font-style: italic; }

/* ---- Tela de carga: a barra é o próprio horizonte, e o LRV de baixo acende conforme a cidade monta ---- */
#loading { background: var(--lados-noite); }
#loading::after { content: none; }
#loading .ab-conteudo { position: absolute; inset: 0; display: block; padding: 0; gap: 0; z-index: 1; }
#loading .ab-dica { position: absolute; left: var(--lados-margem); top: clamp(16px, 4vh, 40px); width: min(33vw, 440px); max-width: none; padding: 0; background: none; box-shadow: none; }
#loading .ab-dica-rotulo { font: 700 clamp(10px, 1.7vh, 13px)/1 var(--lrv-titulo); letter-spacing: .24em; color: var(--lados-tinta); }
#loading .tip { margin: .55em 0 0; min-height: 0; font: 500 clamp(13px, 2.1vh, 17px)/1.35 var(--lrv-titulo); color: var(--lados-tinta); }
#loading .tip kbd { color: #140806; background: var(--lados-ouro); box-shadow: none; }
#loading .load-box { position: static; width: auto; margin: 0; }
#loading .ab-etapas, #loading .ab-giro { display: none; }
#loading .load-bar { position: absolute; left: 0; right: 0; top: 50%; height: clamp(4px, .8vh, 7px); margin-top: calc(clamp(4px, .8vh, 7px) / -2); background: none; overflow: visible; }
#loading #load-fill { height: 100%; background: var(--lados-sangue); box-shadow: none; }
#loading .ab-status { position: absolute; left: var(--lados-margem); bottom: calc(50% + clamp(10px, 2vh, 20px)); margin: 0; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .3em; }
#loading .ab-pct { font: 800 clamp(44px, 12vh, 104px)/.86 var(--lrv-titulo); letter-spacing: -.03em; color: var(--lados-tinta); text-shadow: none; }
#loading #load-text { flex: none; font: 600 clamp(12px, 2vh, 16px)/1.2 var(--lrv-titulo); letter-spacing: 0; text-transform: none; color: var(--lados-tinta); }
.lados-carregando { position: absolute; left: var(--lados-margem); top: calc(50% + clamp(12px, 2.2vh, 22px)); display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: .7em; color: var(--lados-papel); }
.lados-carregando [lang="ja"] { font: 600 clamp(26px, 6vh, 52px)/1.05 var(--lados-mincho); letter-spacing: .08em; }
.lados-carregando [lang="zh"] { font: 400 clamp(15px, 3vh, 26px)/1.05 var(--lados-kai); letter-spacing: .06em; color: var(--lados-cinza); }
.lados-carregando small { grid-column: 1 / -1; margin-top: .45em; font: 500 clamp(11px, 1.8vh, 14px)/1.2 var(--lrv-titulo); color: var(--lados-cinza); }
.lados-carregando em { font-style: italic; }
/* filme por cima: o mesmo risco vermelho no lugar da barra colorida */
.ab-video-carga::after { background: var(--lados-sangue); }
.ab-video-carga, .ab-video-botoes button { font-family: var(--lrv-titulo); font-stretch: normal; }
.ab-video-botoes button { color: var(--lados-papel); background: rgba(10, 7, 8, .82); box-shadow: none; }
.ab-video-botoes button:hover, .ab-video-botoes button:focus-visible { color: #140806; background: var(--lados-ouro); }
.ab-video-som.ab-pulsa { animation: none; }

/* ---- Menu inicial ---- */
#menu .lados { z-index: 0; }
#menu.mi-pg-acervo .lados { display: none; }
#menu.lado-em-cima { --lados-d: 3.5vh; }
#menu.lado-embaixo { --lados-d: -3.5vh; }
#menu.lados-desce { --lados-d: -62vh; }
#menu.mi-pg-inicio::before, #menu.mi-pg-inicio::after { content: none; }
#menu.mi-pg-inicio .menu-panel.mi-grid { position: absolute; inset: 0; display: block; overflow: hidden; }
#menu.mi-pg-inicio .mi-topo { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: clamp(8px, 1.8vh, 18px) var(--lados-margem) 0; }
#menu.mi-pg-inicio .mi-aba { padding: .55em .85em .5em; font: 700 clamp(11px, 1.9vh, 14px)/1 var(--lrv-titulo); letter-spacing: .04em; text-transform: none; color: var(--lados-tinta); background: none; box-shadow: none; }
#menu.mi-pg-inicio .mi-aba:first-child { margin-left: -.85em; }
#menu.mi-pg-inicio .mi-aba:is(:hover, :focus-visible) { color: #0a0708; background: var(--lados-tinta); outline: none; }
#menu.mi-pg-inicio .mi-aba[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--lados-sangue); }
#menu.mi-pg-inicio .mi-topo-status { font: 700 clamp(11px, 1.9vh, 14px)/1.2 var(--lrv-titulo); letter-spacing: .04em; text-transform: none; text-shadow: none; }
#menu.mi-pg-inicio .mi-topo-status > *, #menu.mi-pg-inicio :is(.mi-st-nome, .mi-st-hora, .mi-st-dinheiro) { color: var(--lados-tinta); }
#menu.mi-pg-inicio .mi-inicio { position: absolute; inset: 0; display: block; padding: 0; }
#menu.mi-pg-inicio :is(#mi-plano, .mi-perfil, #mi-abertura) { display: none; }
#menu.mi-pg-inicio .mi-marca { position: static; }
#menu.mi-pg-inicio .mi-inicio .mi-acoes { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; pointer-events: none; }
.lado-lista { position: absolute; left: 0; width: calc(var(--lados-marca-x) - var(--lados-marca-w) / 2 - clamp(8px, 1.4vw, 24px)); display: flex; flex-direction: column; pointer-events: auto;
  transform: translate3d(0, var(--lados-d, 0vh), 0); transition: transform .6s cubic-bezier(.22, .9, .24, 1); will-change: transform; }
.lado-cima { bottom: calc(50% + clamp(4px, 1.1vh, 12px)); }
.lado-baixo { top: calc(50% + clamp(4px, 1.1vh, 12px)); }
#menu.mi-pg-inicio .lado-lista > :is(button, a) { display: block; width: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; transform: none; animation: none;
  padding: .3em calc(var(--lados-corte) + .6em) .3em var(--lados-margem); transition: background-color .1s, color .1s; clip-path: polygon(0 0, 100% 0, calc(100% - var(--lados-corte)) 100%, 0 100%); }
#menu.mi-pg-inicio .lado-lista > .hidden { display: none; }
#menu.mi-pg-inicio .lado-lista small { display: none; }
/* em cima: português, tinta sobre ouro */
#menu.mi-pg-inicio .lado-cima > :is(button, a) { font: 700 clamp(16px, 3.5vh, 28px)/1.16 var(--lrv-titulo); color: var(--lados-tinta); }
#menu.mi-pg-inicio .lado-cima .mi-rotulo { display: block; color: inherit; }
#menu.mi-pg-inicio .lado-cima > #btn-continue small { display: block; margin-top: .1em; font: 600 clamp(11px, 1.8vh, 14px)/1.2 var(--lrv-titulo); color: inherit; }
#menu.mi-pg-inicio .lado-cima > :is(button, a):is(:hover, :focus, :focus-visible) { color: #0a0708; background: var(--lados-tinta); outline: none; }
/* o style.css pinta o Continuar (e o Novo jogo, sem partida salva) de âmbar com dois ids: aqui ele é igual aos outros */
#menu.mi-pg-inicio #btn-continue:not(.hidden), #menu.mi-pg-inicio #btn-continue.hidden + button { color: var(--lados-tinta); font-weight: 700; background: none; }
#menu.mi-pg-inicio #btn-continue:not(.hidden):is(:hover, :focus, :focus-visible), #menu.mi-pg-inicio #btn-continue.hidden + button:is(:hover, :focus, :focus-visible) { color: #0a0708; background: var(--lados-tinta); }
/* embaixo: japonês grande, chinês menor, português embaixo */
#menu.mi-pg-inicio .lado-baixo > button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: .5em; font: 500 clamp(14px, 2.2vh, 18px)/1.15 var(--lrv-titulo); color: var(--lados-papel); padding-top: .32em; padding-bottom: .38em; }
#menu.mi-pg-inicio .lado-baixo .lado-ja { font: 600 clamp(24px, 5.2vh, 42px)/1.05 var(--lados-mincho); letter-spacing: .06em; color: inherit; }
#menu.mi-pg-inicio .lado-baixo .lado-zh { font: 400 clamp(13px, 2.6vh, 21px)/1.05 var(--lados-kai); letter-spacing: .05em; color: var(--lados-cinza); }
#menu.mi-pg-inicio .lado-baixo .mi-rotulo { grid-column: 1 / -1; margin-top: .22em; font: 600 clamp(12px, 2vh, 16px)/1.15 var(--lrv-titulo); color: var(--lados-cinza); }
#menu.mi-pg-inicio .lado-baixo .mi-rotulo i { font-style: italic; font-weight: 500; }
#menu.mi-pg-inicio .lado-baixo > button:is(:hover, :focus, :focus-visible) { color: #fff; background: var(--lados-sangue); outline: none; }
#menu.mi-pg-inicio .lado-baixo > button:is(:hover, :focus, :focus-visible) :is(.lado-zh, .mi-rotulo) { color: #fff; }
/* rodapé: personagens, controles, opções */
.lado-util { position: absolute; left: var(--lados-margem); bottom: clamp(8px, 2.4vh, 22px); display: flex; flex-wrap: wrap; gap: .2em 1.3em; pointer-events: auto; }
#menu.mi-pg-inicio .lado-util > :is(button, a) { width: auto; min-height: 0; margin: 0; padding: .3em 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0; transform: none; animation: none;
  font: 600 clamp(11px, 1.85vh, 14px)/1 var(--lrv-titulo); color: var(--lados-cinza); }
#menu.mi-pg-inicio .lado-util > .hidden { display: none; }
#menu.mi-pg-inicio .lado-util > :is(button, a):is(:hover, :focus-visible) { color: var(--lados-papel); box-shadow: inset 0 -2px 0 var(--lados-sangue); outline: none; }
#menu.mi-pg-inicio .lado-util > button:disabled { opacity: .45; cursor: default; }
#menu.mi-pg-inicio .mi-inicio .mi-descricao { position: absolute; right: var(--lados-margem); bottom: clamp(24px, 5vh, 44px); width: min(44vw, 560px); min-height: 0; margin: 0; padding: 0; text-align: right; font: 500 clamp(11px, 1.85vh, 14px)/1.3 var(--lrv-titulo); color: var(--lados-cinza); background: none; box-shadow: none; border-radius: 0; }
#menu.mi-pg-inicio .mi-rodape { position: absolute; right: var(--lados-margem); bottom: clamp(6px, 1.4vh, 12px); display: block; margin: 0; padding: 0; background: none; border: 0; }
#menu.mi-pg-inicio :is(#mi-letreiro, #menu-save-info) { display: none; }
#menu.mi-pg-inicio .mi-rodape-links { justify-content: flex-end; gap: 4px 14px; font: 500 11px/1.2 var(--lrv-titulo); color: #8b8275; }
#menu.mi-pg-inicio .mi-rodape-links :is(.mi-creditos, .privacy-link, .version) { min-height: 0; font: inherit; color: inherit; text-shadow: none; text-decoration: none; }
#menu.mi-pg-inicio .mi-rodape-links .mi-creditos { padding: 0; background: none; box-shadow: none; }
#menu.mi-pg-inicio .mi-rodape-links :is(.mi-creditos, .privacy-link):is(:hover, :focus-visible) { color: var(--lados-papel); outline: none; }
/* barra de cima sem o triângulo e os enfeites do menu antigo */
#menu.mi-pg-inicio .mi-topo::before, #menu.mi-pg-inicio .mi-topo::after { content: none; }

/* ---- Telas pequenas: a barra de cima sem o fundo escuro do menu antigo ---- */
@media (max-width: 900px), (max-height: 620px) {
  #menu.mi-pg-inicio .mi-topo { position: absolute; display: flex; flex-wrap: wrap; gap: 0 8px; padding-top: 6px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #menu.mi-pg-inicio .mi-topo-marca, #menu.mi-pg-inicio .mi-topo-status { display: none; }
  #menu.mi-pg-inicio #mi-abas { flex-wrap: wrap; overflow: visible; }
  #menu.mi-pg-inicio .mi-inicio { display: block; padding: 0; }
  #menu.mi-pg-inicio .menu-panel.mi-grid { display: block; }
}
/* ---- Tela em pé: a marca fica no meio e cada lista depois dela ---- */
@media (max-aspect-ratio: 1/1) {
  :root { --lados-marca-x: 50vw; --lados-marca-h: min(11vh, 27vw); --lados-sol: calc(var(--lados-marca-h) * 2.5); }
  .lados-placa, .lados-sentido, .lados-perfil-perto { display: none; }
  .lados-perfil { height: 12vh; }
  .lado-lista { width: min(94vw, 520px); }
  .lado-cima { bottom: calc(50% + var(--lados-marca-h) + 1vh); }
  .lado-baixo { top: calc(50% + var(--lados-kanji-h) + 1.4vh); }
  #menu.lado-em-cima, #menu.lado-embaixo { --lados-d: 0vh; }
  #menu.mi-pg-inicio .mi-inicio .mi-descricao { display: none; }
  #menu.mi-pg-inicio .lado-cima > :is(button, a) { font-size: clamp(16px, 2.6vh, 24px); }
  #loading .ab-dica { width: calc(100vw - 2 * var(--lados-margem)); }
  #loading .ab-status { bottom: calc(50% + var(--lados-marca-h) + 1.4vh); }
  .lados-carregando { top: calc(50% + var(--lados-kanji-h) + 1.8vh); }
}
/* ---- Tela baixa (celular deitado): sem descrição e sem legendas, a lista cabe ---- */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  :root { --lados-marca-h: min(29vh, 15vw); --lados-marca-x: 70vw; }
  .lados-placa, .lados-sentido { display: none; }
  #menu.mi-pg-inicio .mi-inicio .mi-descricao { display: none; }
  #menu.lado-em-cima, #menu.lado-embaixo { --lados-d: 0vh; }
  .lado-cima { bottom: calc(50% + 3px); }
  .lado-baixo { top: calc(50% + 3px); }
  #menu.mi-pg-inicio .lado-cima > :is(button, a) { font-size: 14px; padding-top: .14em; padding-bottom: .14em; }
  #menu.mi-pg-inicio .lado-cima > #btn-continue small { display: none; }
  #menu.mi-pg-inicio .lado-baixo .lado-ja { font-size: 18px; }
  #menu.mi-pg-inicio .lado-baixo .lado-zh, #menu.mi-pg-inicio .lado-baixo .mi-rotulo { font-size: 11px; }
  #menu.mi-pg-inicio .lado-baixo .mi-rotulo { margin-top: 0; }
  #menu.mi-pg-inicio .lado-baixo > button { padding-top: .08em; padding-bottom: .08em; }
  #loading .ab-dica { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lados-palco, .lado-lista { transition: none; }
}
.reduced-motion .lados-palco, .reduced-motion .lado-lista { transition: none; }

/* katanas cruzadas e cravadas para baixo, atrás dos caracteres: a ponta para antes da legenda */
.lados-katanas-cima { display: none; }
.lados-katanas-baixo { display: block; top: 50%; left: calc(var(--lados-marca-x) - var(--lados-marca-w) * .45); width: calc(var(--lados-marca-w) * .9); height: calc(var(--lados-marca-w) * .9 * .44); fill: #b9b2a6; stroke: none; transform: scaleY(-1); }
@media (max-aspect-ratio: 1/1) { .lados-katanas-baixo { display: none; } }

/* ---- Arte de fundo (GPT Image, 03/11, lote-gts-capa.mjs): samurais armados e a cidade queimando em cima; oni, Ceifador e silos-pagode
   embaixo. O meio escuro de cada desenho fica atrás da marca, e a coluna da esquerda fica limpa para a lista. A arte toma o lugar
   dos perfis, do sol e das katanas desenhados em código. ---- */
:root { --lados-arte-w: max(76vw, 95vh); }
.lados-perfil, .lados-sol, .lados-katanas-baixo { display: none; }
.lados-ceu, .lados-chao { overflow: hidden; }
.lados-ceu::before, .lados-chao::before { content: ""; position: absolute; left: calc(var(--lados-marca-x) - var(--lados-arte-w) / 2); width: var(--lados-arte-w); bottom: 0; background-repeat: no-repeat; background-size: 100% auto; background-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%); mask-image: linear-gradient(90deg, transparent 0, #000 13%); }
.lados-ceu::before { top: 12vh; background-image: url(assets/menu/marca/capa-cidade.webp); }
.lados-chao::before { top: 0; background-image: url(assets/menu/marca/capa-submundo.webp); opacity: .86; }
/* a linha do horizonte em brasa separa os dois desenhos */
.lados-chao::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(2px, .45vh, 4px); background: linear-gradient(90deg, #8e140b, #ff7a12 40%, #ffd27a 66%, #ff7a12 88%, #8e140b); box-shadow: 0 0 1.6vh #ff5a12; }
@media (max-aspect-ratio: 1/1) { .lados-ceu::before, .lados-chao::before { -webkit-mask-image: none; mask-image: none; } }
/* a arte sobe além da tela: quando o horizonte desce, não aparece faixa preta em cima */
.lados-ceu::before { top: 8vh; }
#menu.mi-pg-inicio .mi-inicio .mi-descricao, .lados-sentido small, #menu.mi-pg-inicio .mi-rodape-links, .lados-placa { text-shadow: 0 1px 3px #000, 0 0 9px #000; }
.lados-sentido b { text-shadow: 0 2px 4px #000, 0 0 12px #000; }
#menu.mi-pg-inicio .mi-rodape-links { color: #bdb3a2; }

/* Menu único (04/11/2026): Mundo livre e Arena abrem no lugar da lista (historia-menu.js põe #menu[data-sub]). Fechado, só
   aparecem os itens de cima; aberto, só os do grupo, com o subtítulo à mostra, e um Voltar no fim. */
#menu.mi-pg-inicio:not([data-sub]) .lado-lista > .sub-item { display: none; }
#menu.mi-pg-inicio[data-sub] .lado-lista > :not(.sub-item) { display: none; }
#menu.mi-pg-inicio[data-sub="mundo"] .lado-lista > .sub-item:not([data-grupo="mundo"]),
#menu.mi-pg-inicio[data-sub="arena"] .lado-lista > .sub-item:not([data-grupo="arena"]) { display: none; }
#menu.mi-pg-inicio .mi-grupo .mi-rotulo::after { content: " ›"; opacity: .65; }
#menu.mi-pg-inicio .lado-lista > .sub-item small { display: block; margin-top: .12em; font: 600 clamp(11px, 1.7vh, 14px)/1.2 var(--lrv-titulo); color: var(--lados-cinza); }
#menu.mi-pg-inicio .lado-lista > .sub-item:is(:hover, :focus, :focus-visible) small { color: inherit; }
#menu.mi-pg-inicio .lado-baixo > .sub-item { display: block; font: 700 clamp(15px, 3vh, 24px)/1.16 var(--lrv-titulo); color: var(--lados-papel); }
#menu.mi-pg-inicio .lado-baixo > .sub-item .mi-rotulo { margin: 0; font: inherit; color: inherit; }
#menu.mi-pg-inicio .lado-lista > .sub-voltar { opacity: .8; font-size: clamp(13px, 2.2vh, 18px); margin-top: .35em; }
#menu.mi-pg-inicio .lado-lista > .sub-voltar small { display: inline; margin-left: .5em; }
/* o grupo da Arena desce do horizonte para baixo; com poucos itens de altura, a lista cabe na metade de baixo */
@media (max-height: 560px) { #menu.mi-pg-inicio .lado-lista > .sub-item small { display: none; } }
/* a Arena tem sete itens na metade de baixo: o subtítulo só aparece no item aceso, para o Voltar não encostar no rodapé */
#menu.mi-pg-inicio[data-sub="arena"] .lado-baixo > .sub-item:not(:hover, :focus, :focus-visible) small { display: none; }
#menu.mi-pg-inicio[data-sub="arena"] .lado-baixo > .sub-item { padding-top: .18em; padding-bottom: .2em; }
/* Celular em pé (04/11/2026): o rodapé (Créditos, Privacidade, versão) caía em cima de Personagens · Controles · Opções.
   A linha de utilidades sobe o bastante para o rodapé caber embaixo dela. */
@media (max-width: 560px) {
  #menu.mi-pg-inicio .lado-util { bottom: calc(clamp(6px, 1.4vh, 12px) + 36px); }
  #menu.mi-pg-inicio .mi-rodape { left: var(--lados-margem); }
  #menu.mi-pg-inicio .mi-rodape-links { justify-content: flex-start; }
}
/* Com um grupo aberto, a linha de utilidades sai: o Voltar e o Esc fecham o grupo, e no celular os sete modos da Arena cabem. */
#menu.mi-pg-inicio[data-sub] .lado-util { display: none; }
/* Celular em pé com um grupo aberto: as abas do topo e o rodapé saem de cena (voltam ao fechar), para a lista do grupo caber. */
@media (max-width: 560px) {
  #menu.mi-pg-inicio[data-sub] :is(.mi-topo, .mi-rodape) { visibility: hidden; }
}