/* Menu GTS em quadros (04/11/2026, Claude, pedido de Denis: "muda esse menu [...] intuitivo, mais pegada da nossa versão nova,
   com personagens, transição em movimento, me surpreenda"). Uma página de quadrinho viva, como a capa GTS: cada modo é um quadro
   com a arte e um personagem saindo da moldura. Escolher corta a tela com um golpe de katana; Mundo livre e Arena crescem até
   ocupar a página e mostram as opções dentro. Montado por src/menu-quadros.js por cima do menu de sempre (os botões são os
   mesmos, escondidos), então main.js, historia-menu.js, o controle e os testes seguem valendo.
   Só transform, opacity e clip-path animam (nada que trave). Paleta da marca: MEMORIA/MARCA-GTS.md. */
:root {
  --gq-osso: #fff0da;
  --gq-sangue: #e3241b;
  --gq-brasa: #ff5a12;
  --gq-ouro: #ffa51f;
  --gq-luz: #ffe07a;
  --gq-tinta: #0a0708;
  --gq-margem: clamp(14px, 3.2vw, 56px);
  --gq-titulo: "Bahnschrift", "DIN Condensed", "Arial Narrow", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --gq-kanji: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Gothic", serif;
}

/* O menu de sempre fica embaixo, escondido: só os botões continuam vivos para quem os chama. */
#menu.gts-quadros.mi-pg-inicio :is(.lados, .mi-acoes, #mi-descricao) { visibility: hidden; }
#menu.gts-quadros.mi-pg-inicio .lados { display: none; }
#menu.gts-quadros.mi-pg-acervo #gts-quadros { display: none; }

#gts-quadros { position: absolute; inset: 0; z-index: 1; display: grid; overflow: hidden; color: var(--gq-osso);
  grid-template-columns: minmax(250px, 31%) 1fr; grid-template-rows: 1fr auto;
  padding: clamp(64px, 10vh, 104px) var(--gq-margem) clamp(12px, 2.4vh, 26px); gap: clamp(10px, 2vh, 22px) clamp(16px, 2.6vw, 44px);
  background: radial-gradient(120% 90% at 78% 110%, #5a0d06 0%, #1b0604 42%, #070405 75%), #070405; font-family: var(--gq-titulo); }
#gts-quadros::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url("assets/menu/marca/capa-submundo.webp") center 70% / cover no-repeat; mix-blend-mode: luminosity; filter: blur(2px) brightness(.45); }
#gts-quadros::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(255, 240, 218, .07) 1px, transparent 1.4px) 0 0 / 6px 6px; }
.gq-brasas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- coluna da marca ---------- */
.gq-marca { position: relative; z-index: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.4vh, 14px); min-width: 0; }
.gq-gts { width: min(100%, 420px); height: auto; overflow: visible; fill: url(#gts-fogo); stroke: #050304; stroke-width: 1.5; paint-order: stroke fill; filter: drop-shadow(0 0 1.1vh rgba(255, 90, 16, .85)); }
.gq-placa svg { fill: var(--gq-osso); }
.gq-kanji-marca { width: min(86%, 360px); height: auto; margin-top: -1vh; filter: drop-shadow(0 3px 10px #000); }
.gq-nome { margin: 0; font: 800 clamp(15px, 2.3vh, 22px)/1.1 var(--gq-titulo); letter-spacing: .14em; text-transform: uppercase; }
.gq-nome small { display: block; margin-top: .35em; font: 500 clamp(10px, 1.5vh, 13px)/1.3 var(--gq-titulo); letter-spacing: .04em; text-transform: none; color: #d8c6b0; }
.gq-nome small b { color: var(--gq-sangue); font-weight: 700; }
.gq-placa { display: flex; align-items: center; gap: 10px; margin-top: .4vh; color: var(--gq-osso); }
.gq-placa svg { width: clamp(54px, 6vw, 84px); height: auto; flex: none; }
.gq-placa span { font: 700 clamp(10px, 1.45vh, 12px)/1.35 var(--gq-titulo); letter-spacing: .1em; text-transform: uppercase; }
.gq-placa small { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; color: #c9b8a2; }

.gq-continuar { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; width: min(100%, 430px); margin-top: clamp(6px, 1.6vh, 16px);
  padding: clamp(10px, 1.6vh, 16px) 18px; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--gq-tinta);
  background: linear-gradient(100deg, var(--gq-luz), var(--gq-ouro) 55%, var(--gq-brasa)); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
  font: 900 clamp(20px, 3.4vh, 32px)/1 var(--gq-titulo); letter-spacing: .06em; text-transform: uppercase; transition: transform .18s, filter .18s; }
.gq-continuar small { grid-column: 1; display: block; margin-top: .35em; font: 600 clamp(10px, 1.45vh, 13px)/1.2 var(--gq-titulo); letter-spacing: .02em; text-transform: none; }
.gq-continuar::after { content: "▶"; grid-row: 1 / 3; grid-column: 2; font-size: .7em; }
.gq-continuar:is(:hover, :focus-visible) { transform: translateX(6px); filter: brightness(1.12); outline: none; }
.gq-continuar[hidden] { display: none; }

/* ---------- a página de quadros ---------- */
.gq-pagina { position: relative; z-index: 2; grid-row: 1; display: grid; min-height: 0;
  grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(10px, 1.6vh, 18px);
  transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .2, 1); }
.gq-q { position: relative; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left;
  color: inherit; font: inherit; outline: none; --cor: var(--gq-ouro); --forma: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.gq-q[data-q="historia"] { grid-row: 1 / 3; --forma: polygon(0 0, 100% 1.5%, 96% 100%, 0 98%); }
.gq-q[data-q="mundo"] { --forma: polygon(3% 0, 100% 0, 100% 93%, 0 100%); }
.gq-q[data-q="arena"] { --forma: polygon(0 5%, 100% 0, 97% 100%, 2% 96%); }
.gq-q[data-q="ferro"] { --forma: polygon(0 0, 97% 6%, 100% 100%, 4% 96%); }
.gq-q[data-q="online"] { --forma: polygon(2% 3%, 100% 0, 98% 97%, 0 100%); }
.gq-brilho { position: absolute; inset: -6px; clip-path: var(--forma); background: var(--cor); opacity: 0; filter: blur(0); transition: opacity .2s; }
.gq-arte { position: absolute; inset: 0; clip-path: var(--forma); background: var(--gq-tinta) var(--arte) center / cover no-repeat;
  box-shadow: inset 0 0 0 3px var(--gq-tinta), inset 0 0 0 5px rgba(255, 240, 218, .85); transition: filter .25s, transform .45s cubic-bezier(.2, .9, .2, 1); }
.gq-arte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 4, 5, 0) 35%, rgba(7, 4, 5, .82) 82%, rgba(7, 4, 5, .95)),
  linear-gradient(90deg, color-mix(in srgb, var(--cor) 26%, transparent), transparent 60%); }
.gq-arte::after { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply;
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .9) 1.1px, transparent 1.6px) 0 0 / 5px 5px; }
.gq-herois { position: absolute; inset: 0; pointer-events: none; clip-path: inset(-14% 0 0 0); }
.gq-heroi { position: absolute; bottom: 0; right: -6%; height: 96%; width: auto; max-width: none; transform-origin: 50% 100%;
  filter: drop-shadow(-6px 6px 0 rgba(7, 4, 5, .85)) drop-shadow(0 0 18px color-mix(in srgb, var(--cor) 45%, transparent));
  transition: transform .45s cubic-bezier(.2, .9, .2, 1), filter .25s; animation: gq-respira 5.5s ease-in-out infinite; }
.gq-heroi.gq-segundo { right: auto; left: -14%; height: 78%; animation-delay: -2.7s; transform: scaleX(-1); }
.gq-q[data-q="historia"] .gq-heroi { height: 62%; right: -12%; }
.gq-q[data-q="arena"] .gq-heroi.gq-segundo { left: -20%; height: 84%; filter: drop-shadow(6px 6px 0 rgba(7, 4, 5, .85)) brightness(.7) saturate(1.2); }
.gq-num { position: absolute; top: 9%; left: 5%; padding: .2em .45em; font: 900 clamp(11px, 1.6vh, 14px)/1 var(--gq-titulo); letter-spacing: .08em;
  color: var(--gq-tinta); background: var(--gq-osso); transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--gq-tinta); }
.gq-texto { position: absolute; left: 6%; right: 6%; bottom: 7%; display: grid; gap: .2em; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.gq-kanji { font: 700 clamp(28px, 5.6vh, 58px)/1 var(--gq-kanji); letter-spacing: .04em; color: var(--gq-osso); transform-origin: 0 100%; transition: color .25s, transform .35s; }
.gq-q[data-q="historia"] .gq-kanji { font-size: clamp(40px, 8vh, 84px); }
.gq-leitura { font: italic 500 clamp(10px, 1.4vh, 13px)/1 var(--gq-titulo); color: #e7d6bf; letter-spacing: .04em; }
.gq-titulo { font: 900 clamp(15px, 2.5vh, 26px)/1 var(--gq-titulo); letter-spacing: .06em; text-transform: uppercase; }
.gq-titulo .gq-seta { display: inline-block; margin-left: .35em; transition: transform .25s; }
.gq-sub { max-width: 34ch; font: 500 clamp(10px, 1.45vh, 13px)/1.3 var(--gq-titulo); color: #e9dcc9; opacity: .85; }

/* foco e mouse: o quadro acende, o personagem salta e os outros recuam */
.gq-q:is(:hover, :focus-visible) .gq-brilho { opacity: .9; filter: blur(10px); }
.gq-q:is(:hover, :focus-visible) .gq-arte { filter: brightness(1.12) saturate(1.2); transform: scale(1.015); }
.gq-q:is(:hover, :focus-visible) .gq-heroi { transform: translate(-3%, -5%) scale(1.07); }
.gq-q:is(:hover, :focus-visible) .gq-heroi.gq-segundo { transform: scaleX(-1) translate(-3%, -4%) scale(1.05); }
.gq-q:is(:hover, :focus-visible) .gq-kanji { color: var(--cor); transform: scale(1.08); }
.gq-q:is(:hover, :focus-visible) .gq-seta { transform: translateX(6px); }
.gq-q:is(:hover, :focus-visible) .gq-num { background: var(--cor); }
.gq-pagina:has(.gq-q:is(:hover, :focus-visible)) .gq-q:not(:hover, :focus-visible) .gq-arte { filter: brightness(.5) saturate(.55); }
.gq-pagina:has(.gq-q:is(:hover, :focus-visible)) .gq-q:not(:hover, :focus-visible) .gq-heroi { filter: brightness(.6) saturate(.6) drop-shadow(-6px 6px 0 rgba(7, 4, 5, .85)); }

/* ---------- quadro aberto (Mundo livre, Arena) ---------- */
.gq-aberto { position: absolute; z-index: 3; display: grid; grid-template-columns: minmax(260px, 46%) 1fr; transform-origin: 0 0; color: var(--gq-osso); --cor: var(--gq-ouro); }
.gq-aberto[hidden] { display: none; }
.gq-aberto .gq-arte { clip-path: polygon(0 0, 100% 0, 99% 100%, 0 98.5%); filter: brightness(.62) saturate(1.1); }
.gq-aberto .gq-arte::before { background: linear-gradient(90deg, rgba(7, 4, 5, .94) 0%, rgba(7, 4, 5, .75) 40%, rgba(7, 4, 5, .1) 75%), linear-gradient(0deg, rgba(7, 4, 5, .7), transparent 40%); }
.gq-aberto .gq-heroi { height: 104%; right: -2%; animation: none; }
.gq-aberto .gq-heroi.gq-segundo { left: auto; right: 34%; height: 78%; opacity: .32; filter: brightness(.5) blur(1px); }
.gq-aberto-corpo { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.6vh, 16px); padding: clamp(18px, 4vh, 44px) clamp(18px, 3vw, 44px); min-height: 0; }
.gq-aberto h2 { margin: 0; display: grid; gap: .15em; position: static; }
.gq-aberto .gq-texto { position: static; left: auto; right: auto; bottom: auto; }
.gq-aberto .gq-herois { clip-path: inset(-6% 0 0 0); }
.gq-aberto h2 .gq-kanji { font-size: clamp(44px, 9vh, 96px); color: var(--cor); }
.gq-aberto h2 .gq-titulo { font-size: clamp(22px, 4vh, 40px); }
.gq-opcoes { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gq-op { display: grid; width: 100%; padding: clamp(7px, 1.2vh, 12px) 16px; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--gq-osso);
  background: rgba(7, 4, 5, .55); clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); border-left: 4px solid transparent;
  font: 800 clamp(15px, 2.5vh, 24px)/1.1 var(--gq-titulo); letter-spacing: .04em; text-transform: uppercase; transition: background .15s, color .15s, transform .2s, border-color .15s; }
.gq-op small { font: 500 clamp(10px, 1.45vh, 13px)/1.3 var(--gq-titulo); letter-spacing: .01em; text-transform: none; color: #d9c8b2; }
.gq-op:is(:hover, :focus-visible) { background: var(--cor); color: var(--gq-tinta); border-left-color: var(--gq-osso); transform: translateX(8px); outline: none; }
.gq-op:is(:hover, :focus-visible) small { color: rgba(10, 7, 8, .8); }
.gq-op.gq-voltar { margin-top: 6px; font-size: clamp(12px, 1.8vh, 16px); background: transparent; }
.gq-op.gq-voltar kbd { margin-left: .5em; padding: 0 .35em; font: 600 .8em/1.4 var(--gq-titulo); border: 1px solid currentColor; }

/* ---------- rodapé ---------- */
.gq-rodape { position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-right: min(42vw, 520px); }
.gq-rodape button { padding: .35em 0; border: 0; background: none; cursor: pointer; color: #e3d3bd; font: 700 clamp(11px, 1.7vh, 14px)/1 var(--gq-titulo); letter-spacing: .08em; text-transform: uppercase; box-shadow: none; }
.gq-rodape button:is(:hover, :focus-visible) { color: var(--gq-osso); box-shadow: inset 0 -2px 0 var(--gq-sangue); outline: none; }
.gq-rodape button[hidden] { display: none; }
.gq-legenda { margin: 0 0 0 auto; font: 500 clamp(10px, 1.4vh, 12px)/1.2 var(--gq-titulo); color: #bfae98; }

/* ---------- golpe de katana (transição) ---------- */
.gq-corte { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; display: none; }
.gq-corte.ativo { display: block; }
.gq-lamina { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 4px; margin: -2px 0 0 -85vmax;
  background: linear-gradient(90deg, transparent, var(--gq-luz) 46%, #fff 50%, var(--gq-brasa) 54%, transparent); box-shadow: 0 0 22px var(--gq-brasa); transform: rotate(-17deg) scaleX(0); }
.gq-clarao { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 246, 208, .55), rgba(227, 36, 27, .35) 40%, rgba(7, 4, 5, .9) 75%); opacity: 0; }

/* ---------- entrada: a página se monta quadro a quadro ---------- */
#gts-quadros.gq-entra .gq-q { animation: gq-chega .7s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
#gts-quadros.gq-entra .gq-marca > * { animation: gq-sobe .6s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
#gts-quadros.gq-entra .gq-rodape { animation: gq-sobe .6s .7s both; }
@keyframes gq-chega { from { opacity: 0; transform: translate(40px, 24px) rotate(2.5deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes gq-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gq-respira { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2%; } }
#gts-quadros.gq-recuando .gq-pagina { opacity: 0; transform: scale(.96); pointer-events: none; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  #gts-quadros { grid-template-columns: minmax(210px, 28%) 1fr; }
  .gq-sub { display: none; }
}
@media (max-width: 760px) {
  #gts-quadros { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; overflow-y: auto; padding-top: clamp(84px, 14vh, 110px); }
  .gq-marca { grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .gq-gts { width: 46%; }
  .gq-kanji-marca { width: 40%; margin: 0; }
  .gq-nome, .gq-placa { display: none; }
  .gq-continuar { width: 100%; }
  .gq-pagina { grid-row: 2; grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr 1fr; min-height: 66vh; }
  .gq-q[data-q="historia"] { grid-row: auto; grid-column: 1 / 3; }
  .gq-q[data-q="historia"] .gq-heroi { height: 112%; right: -4%; }
  .gq-rodape { grid-row: 3; padding-right: 0; }
  .gq-legenda { display: none; }
  .gq-aberto { grid-template-columns: 1fr; }
  .gq-aberto .gq-heroi { opacity: .35; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .gq-kanji-marca, .gq-placa, .gq-sub, .gq-leitura { display: none; }
  .gq-op small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gq-heroi { animation: none; }
  #gts-quadros.gq-entra :is(.gq-q, .gq-marca > *, .gq-rodape) { animation: none; }
  .gq-pagina, .gq-arte, .gq-heroi, .gq-op { transition: none; }
}
.reduced-motion .gq-heroi { animation: none; }
.reduced-motion #gts-quadros.gq-entra :is(.gq-q, .gq-marca > *, .gq-rodape) { animation: none; }

/* acertos da primeira olhada (04/11): kbd sem o estilo global, seta só nos quadros, celular sem personagem por cima da marca */
#gts-quadros kbd { display: inline-block; width: auto; min-width: 0; height: auto; margin: 0 0 0 .5em; padding: 0 .35em; background: none; color: inherit; border: 1px solid currentColor; border-radius: 2px; box-shadow: none; font: 600 .7em/1.5 var(--gq-titulo); vertical-align: middle; }
.gq-aberto .gq-seta { display: none; }
@media (max-width: 760px) {
  .gq-herois { clip-path: inset(0); }
  .gq-q .gq-kanji { font-size: clamp(24px, 4.6vh, 38px); }
  .gq-q[data-q="historia"] .gq-kanji { font-size: clamp(34px, 6vh, 52px); }
  .gq-titulo { font-size: clamp(13px, 2vh, 17px); }
  .gq-leitura { display: none; }
}
/* o rodapé de sempre (Créditos, Privacidade, versão) fica por cima da página de quadros, clicável */
#menu.gts-quadros.mi-pg-inicio .mi-rodape { z-index: 3; }