:root {
  --tinta: #0b0a0e; --tinta2: #16141b; --papel: #efe6d2; --papel2: #cfc4ad; --verm: #e0301e; --verm2: #ff5a3c; --ouro: #d3a84c; --azul: #5fc7e8; --violeta: #9a5cff;
  --fonte-kanji: "Yuji Boku", "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;
  --fonte-titulo: "Dela Gothic One", "Noto Serif JP", "Yu Gothic", sans-serif;
  --fonte: "Barlow Condensed", "Arial Narrow", "Trebuchet MS", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--tinta); color: var(--papel); font-family: var(--fonte); overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#palco { position: fixed; inset: 0; background: #000; }
#tela { display: block; width: 100%; height: 100%; outline: none; }
#camadas { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.tela { position: absolute; inset: 0; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; }
.tela.ativa { opacity: 1; visibility: visible; }
.tela.passante { pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
img { display: block; }

/* Carregando */
#t-carregando { background: var(--tinta); display: grid; place-items: center; z-index: 30; }
#t-carregando { background: linear-gradient(180deg, rgba(8, 6, 10, .72), rgba(8, 6, 10, .9)), var(--arte, none) center / cover no-repeat, #0b0a0e; }
.carga { width: min(560px, 86vw); text-align: center; }
.kt { display: block; font-weight: 700; letter-spacing: .06em; font-size: clamp(12px, 1.9vh, 16px); line-height: 1.15; color: var(--papel2); }
.carga .kt { margin-top: 4px; }
.logo-ori { margin-top: .3vh; display: flex; flex-wrap: wrap; gap: 0 .5em; align-items: baseline; font-weight: 700; font-size: clamp(13px, 2.1vh, 19px); color: var(--verm2); }
.logo-ori small { flex-basis: 100%; white-space: nowrap; font-weight: 600; font-size: clamp(10px, 1.5vh, 13px); line-height: 1.15; color: var(--papel2); letter-spacing: .02em; }
.cap .k small { display: block; margin-top: 1px; width: 56px; margin-left: -6px; text-align: center; font: 700 clamp(11px, 1.7vh, 13px)/1.05 var(--fonte); letter-spacing: 0; color: var(--papel); }
.hud-est .e { position: relative; }
.hud-est .e small { position: absolute; left: 50%; bottom: -.1em; transform: translateX(-50%); font: 700 clamp(8px, 1.3vh, 10px)/1 var(--fonte); letter-spacing: .02em; color: var(--papel); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.tq small { display: block; font-size: .62em; font-weight: 700; }
#final-kanji::after { content: attr(data-tr); position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; font: italic 800 clamp(18px, 4vh, 38px)/1 var(--fonte); color: var(--papel); text-shadow: 0 2px 10px #000; }
.res-rank .kt { align-self: center; }
.carga .selo { width: clamp(190px, 36vh, 360px); margin: 0 auto; animation: respiro 1.6s ease-in-out infinite; }
@keyframes respiro { 50% { transform: scale(1.06); opacity: .82; } }
.carga h2 { margin: 12px 0 4px; font: 400 clamp(18px, 3vh, 26px) var(--fonte-titulo); letter-spacing: .08em; }
.carga .barra-c { height: 4px; background: #2a262e; margin: 16px 0 12px; overflow: hidden; }
.carga .barra-c i { display: block; height: 100%; width: 0; background: var(--verm); transition: width .2s; }
.carga p { margin: 0; color: var(--papel2); font-size: clamp(14px, 2.2vh, 18px); line-height: 1.3; min-height: 2.6em; }

/* Menu principal */
#t-menu { display: grid; grid-template-columns: minmax(300px, 42vw) 1fr; background: linear-gradient(90deg, rgba(8, 6, 10, .86) 0%, rgba(8, 6, 10, .55) 34%, rgba(8, 6, 10, 0) 62%); }
.menu-col { padding: clamp(18px, 5vh, 56px) clamp(18px, 4vw, 64px); display: flex; flex-direction: column; min-height: 0; }
/* Marca do jogo: GTS · Grand Theft Samurai (MEMORIA/MARCA-GTS.md). Cores das letras iguais às da tela de carga e do menu. */
:root { --gts-1: #e3241b; --gts-2: #ff5a12; --gts-3: #ffa51f; --gts-4: #ffe07a; --gts-5: #fff6d0; }
.gts-c1 { stop-color: var(--gts-1); }
.gts-c2 { stop-color: var(--gts-2); }
.gts-c3 { stop-color: var(--gts-3); }
.gts-c4 { stop-color: var(--gts-4); }
.gts-c5 { stop-color: var(--gts-5); }
.gts-letras { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 1vh rgba(255, 90, 16, .85)) drop-shadow(0 2px 2px #000); }
.gts-letras > g { stroke: #050304; stroke-width: 1.5; paint-order: stroke fill; }
.gts-corte { fill: #fff6e0; }
.gts-kanji { display: block; width: 100%; height: auto; margin-top: .4vh; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85)); }
.logo { position: relative; display: flex; align-items: flex-start; line-height: 1.1; margin-bottom: clamp(10px, 3.2vh, 34px); }
.gts-col { flex: none; width: clamp(170px, 33vh, 340px); }
.gts-titulo { margin: 0; font-size: inherit; font-weight: inherit; }
.gts-info { flex: none; margin-left: clamp(30px, 6.4vh, 62px); padding: .9vh 1.6vh 1vh; background: linear-gradient(90deg, rgba(8, 5, 6, .74), rgba(8, 5, 6, .46)); border-left: 2px solid var(--verm); color: var(--papel); text-shadow: 0 1px 3px #000; }
.gts-placa { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(10px, 1.55vh, 14px); line-height: 1.15; letter-spacing: .02em; }
.gts-placa svg { flex: none; height: clamp(18px, 3.4vh, 32px); width: auto; fill: currentColor; filter: drop-shadow(0 1px 3px #000); }
.gts-nome { margin-top: 1vh; font-weight: 800; font-size: clamp(14px, 2.5vh, 24px); line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.gts-modo { margin-top: 1.2vh; display: flex; flex-wrap: wrap; gap: 0 .45em; align-items: baseline; font-weight: 800; font-size: clamp(20px, 3.8vh, 36px); line-height: 1.05; letter-spacing: .06em; }
.gts-modo [lang="zh"] { font-weight: 600; font-size: .58em; letter-spacing: .04em; color: var(--papel2); }
.gts-modo small { flex-basis: 100%; font-weight: 600; font-size: .42em; letter-spacing: .02em; color: var(--papel2); }
.opcoes { display: flex; flex-direction: column; gap: clamp(0px, .5vh, 6px); margin-top: auto; margin-bottom: auto; padding-top: clamp(12px, 4vh, 40px); align-items: flex-start; }
.opcao { position: relative; text-align: left; font-weight: 800; font-style: italic; font-size: clamp(22px, 4.3vh, 40px); letter-spacing: .02em; padding: clamp(2px, .7vh, 8px) 34px clamp(2px, .7vh, 8px) 18px; color: var(--papel); transition: transform .12s ease, color .12s; text-transform: uppercase; }
.opcao::before { content: ""; position: absolute; inset: 0 0 0 0; background: var(--verm); transform: skewX(-14deg) scaleX(0); transform-origin: left; transition: transform .14s cubic-bezier(.2, .8, .2, 1); z-index: -1; }
.opcao:hover, .opcao:focus-visible, .opcao.foco { transform: translateX(10px); color: #fff; outline: none; }
.opcao:hover::before, .opcao:focus-visible::before, .opcao.foco::before { transform: skewX(-14deg) scaleX(1); }
.opcao small { display: inline-block; margin-left: 12px; font: 500 clamp(11px, 1.9vh, 15px) var(--fonte); font-style: normal; letter-spacing: .05em; opacity: .78; text-transform: none; vertical-align: middle; }
.opcao[disabled] { opacity: .35; pointer-events: none; }
.menu-rodape { display: flex; gap: 18px; color: var(--papel2); font-size: clamp(11px, 1.7vh, 15px); align-items: center; }
.menu-rodape kbd { font: 700 .92em var(--fonte); background: rgba(255, 255, 255, .13); padding: 0 6px; border-radius: 2px; }
.volta-lrv { position: absolute; right: clamp(14px, 3vw, 40px); bottom: clamp(12px, 3vh, 30px); pointer-events: auto; padding: 10px 18px; font-weight: 700; letter-spacing: .05em; background: rgba(10, 8, 12, .7); border-left: 3px solid var(--ouro); }
.volta-lrv:hover { background: var(--ouro); color: #111; }
.vem-do-lrv { position: absolute; right: clamp(14px, 3vw, 40px); top: clamp(12px, 3vh, 30px); text-align: right; font-size: clamp(13px, 2vh, 17px); color: var(--papel2); background: rgba(10, 8, 12, .6); padding: 8px 14px; border-right: 3px solid var(--verm); max-width: 44vw; }

/* Painéis genéricos */
.janela { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(14px, 4vh, 44px) clamp(16px, 5vw, 80px); background: rgba(8, 6, 10, .86); overflow: auto; touch-action: pan-y; }
.janela h2 { margin: 0 0 clamp(8px, 2vh, 18px); font: 400 clamp(26px, 5.6vh, 52px) var(--fonte-titulo); }
.janela h2 span { font-family: var(--fonte-kanji); color: var(--verm); margin-right: 14px; }
.btn { display: inline-block; font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; padding: 8px 28px; font-size: clamp(16px, 2.6vh, 22px); position: relative; color: var(--papel); }
.btn::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .12); transform: skewX(-12deg); z-index: -1; transition: background .12s; }
.btn:hover::before, .btn:focus-visible::before { background: var(--verm); }
.btn.prim::before { background: var(--verm); }
.btn.prim:hover::before { background: var(--verm2); }
.linha-btn { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; align-items: center; }

/* Escolha de personagem */
#t-escolha { display: flex; flex-direction: column; background: linear-gradient(90deg, rgba(8, 6, 10, .78) 0, rgba(8, 6, 10, .3) 34%, rgba(8, 6, 10, 0) 52%), linear-gradient(180deg, rgba(8, 6, 10, .7) 0, rgba(8, 6, 10, 0) 18%, rgba(8, 6, 10, 0) 62%, rgba(8, 6, 10, .94) 100%); }
.esc-meio { flex: 1; min-height: 0; display: flex; align-items: center; padding: 0 clamp(16px, 4vw, 60px); overflow: hidden; }
.esc-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: clamp(4px, 1vh, 10px) clamp(10px, 3vw, 40px) 0; }
.esc-extra > .seletor { flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.esc-topo { display: flex; justify-content: space-between; align-items: flex-end; padding: clamp(10px, 3vh, 30px) clamp(16px, 4vw, 60px) 0; }
.esc-topo h2 { margin: 0; font: 400 clamp(22px, 4.6vh, 44px) var(--fonte-titulo); }
.esc-info { width: min(380px, 42vw); }
.esc-info .k { font-family: var(--fonte-kanji); color: var(--cor, var(--verm)); font-size: clamp(60px, 15vh, 130px); line-height: 1; }
.esc-info h3 { margin: 0; font: 400 clamp(24px, 5vh, 46px) var(--fonte-titulo); line-height: 1; }
.esc-info .tit { color: var(--cor, var(--ouro)); font-weight: 700; font-style: italic; letter-spacing: .05em; font-size: clamp(14px, 2.5vh, 21px); margin: 3px 0 8px; }
.esc-info p { margin: 0 0 10px; font-size: clamp(14px, 2.3vh, 19px); line-height: 1.25; color: var(--papel); text-shadow: 0 1px 3px #000; }
.atrib { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: clamp(12px, 1.9vh, 15px); font-weight: 600; align-items: center; }
.atrib .p { display: flex; gap: 3px; }
.atrib .p i { width: 22px; height: 7px; background: rgba(255, 255, 255, .17); transform: skewX(-18deg); }
.atrib .p i.c { background: var(--cor, var(--verm)); }
.esc-arte { margin-top: 10px; padding: 6px 10px; border-left: 3px solid var(--cor, var(--verm)); background: rgba(0, 0, 0, .45); font-size: clamp(13px, 2vh, 16px); }
.esc-arte b { color: var(--cor); }
.esc-grade { display: flex; justify-content: center; gap: clamp(6px, 1.2vw, 14px); padding: 0 clamp(10px, 3vw, 40px); flex-wrap: wrap; }
.esc-item { position: relative; width: clamp(54px, 13vh, 118px); aspect-ratio: 3 / 4; overflow: hidden; background: #1b1820; transform: skewX(-7deg); border: 2px solid rgba(255, 255, 255, .18); transition: transform .12s, border-color .12s; }
.esc-item img { width: 130%; height: 100%; object-fit: cover; margin-left: -15%; transform: skewX(7deg) scale(1.05); }
.esc-item .kk { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(30px, 6vh, 60px) var(--fonte-kanji); color: rgba(255, 255, 255, .78); transform: skewX(7deg); }
.esc-item span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .72); text-align: center; font-size: clamp(11px, 1.7vh, 14px); font-weight: 700; padding: 1px 0; transform: skewX(7deg) scaleX(1.1); }
.esc-item.foco { border-color: var(--cor, var(--verm)); transform: skewX(-7deg) translateY(-8px); box-shadow: 0 0 22px color-mix(in srgb, var(--cor, #e0301e) 55%, transparent); }
.esc-item.preso { filter: grayscale(1) brightness(.5); }
.esc-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(4px, 1.4vh, 14px) clamp(16px, 4vw, 60px); }
.seletor { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(13px, 2vh, 17px); }
.seletor button { padding: 3px 10px; background: rgba(255, 255, 255, .1); }
.seletor button.sel { background: var(--verm); }

/* História */
#t-historia { background: #000; z-index: 18; }
#t-historia.vivo { background: linear-gradient(180deg, #000 0, #000 7%, transparent 7.1%, transparent 92.9%, #000 93%); }
.painel-arte { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .55s; animation: panorama 12s ease-out both; }
.painel-arte.ativo { opacity: 1; }
.painel-arte.com-video { animation: none; }
.painel-arte video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
.painel-arte video.tocando { opacity: 1; }
@keyframes panorama { from { transform: scale(1.1) translateX(-1.2%); } to { transform: scale(1) translateX(0); } }
.painel-sem-arte { background: radial-gradient(ellipse at 50% 40%, #47161a 0, #120a10 62%, #050406 100%); display: grid; place-items: center; font: 400 42vh var(--fonte-kanji); color: rgba(224, 48, 30, .34); }
.painel-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(40px, 12vh, 110px) clamp(20px, 10vw, 160px) clamp(22px, 7vh, 66px); background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .88) 60%); font-size: clamp(18px, 3.5vh, 32px); font-weight: 500; line-height: 1.22; text-align: center; text-shadow: 0 2px 6px #000; }
.pular { position: absolute; right: clamp(12px, 2.5vw, 32px); top: clamp(10px, 2.5vh, 26px); z-index: 3; padding: 6px 16px; background: rgba(0, 0, 0, .55); font-weight: 700; letter-spacing: .06em; }
.pular:hover { background: var(--verm); }

/* Fala em cena */
#t-fala { z-index: 12; }
.tarja { position: absolute; left: 0; right: 0; height: clamp(26px, 9vh, 76px); background: #000; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tarja.c { top: 0; transform: translateY(-100%); } .tarja.b { bottom: 0; transform: translateY(100%); }
#t-fala.ativa .tarja { transform: none; }
.caixa-fala { position: absolute; left: 50%; bottom: clamp(30px, 11vh, 92px); transform: translateX(-50%); width: min(980px, 92vw); display: flex; gap: clamp(8px, 1.6vw, 18px); align-items: flex-end; }
.fala-retrato { width: clamp(70px, 17vh, 150px); aspect-ratio: 1; flex: none; background: #1a161c; border: 2px solid var(--cor, var(--papel)); overflow: hidden; display: grid; place-items: center; font: 400 clamp(36px, 9vh, 80px) var(--fonte-kanji); color: var(--cor); transform: skewX(-4deg); }
.fala-retrato img { width: 100%; height: 100%; object-fit: cover; transform: skewX(4deg) scale(1.06); }
.fala-corpo { flex: 1; background: rgba(8, 6, 10, .86); padding: clamp(8px, 1.6vh, 16px) clamp(12px, 2vw, 24px); border-left: 4px solid var(--cor, var(--papel)); min-height: clamp(70px, 14vh, 120px); }
.fala-nome { font-weight: 800; font-style: italic; color: var(--cor); letter-spacing: .05em; font-size: clamp(15px, 2.6vh, 22px); text-transform: uppercase; }
.fala-txt { font-size: clamp(16px, 3vh, 26px); line-height: 1.2; font-weight: 500; margin-top: 2px; }
.fala-seta { float: right; color: var(--papel2); font-size: clamp(11px, 1.8vh, 14px); margin-top: 2px; animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: .3; } }

/* HUD */
#t-hud { z-index: 6; pointer-events: none; }
.hud-jog { position: absolute; left: clamp(10px, 1.8vw, 28px); top: clamp(8px, 2vh, 22px); display: flex; gap: clamp(6px, 1vw, 12px); align-items: flex-start; }
.hud-ret { width: clamp(50px, 10.5vh, 92px); aspect-ratio: 1; overflow: hidden; background: #171318; border: 2px solid var(--cor, var(--papel)); transform: skewX(-8deg); display: grid; place-items: center; font: 400 clamp(26px, 6vh, 54px) var(--fonte-kanji); color: var(--cor); }
.hud-ret img { width: 118%; height: 118%; object-fit: cover; transform: skewX(8deg); }
.hud-bars { width: clamp(180px, 29vw, 400px); }
.hud-nome { font-weight: 800; font-style: italic; font-size: clamp(14px, 2.5vh, 21px); letter-spacing: .03em; text-shadow: 0 2px 3px #000; line-height: 1; margin-bottom: 3px; }
.barra { position: relative; height: clamp(9px, 1.9vh, 15px); background: rgba(10, 8, 12, .72); transform: skewX(-22deg); overflow: hidden; outline: 1px solid rgba(255, 255, 255, .22); margin-bottom: 3px; }
.barra i { position: absolute; inset: 0; transform-origin: left; display: block; }
.b-vida .fant { background: #fff; } .b-vida .ch { background: linear-gradient(180deg, #ff6a4a, #d9271a 60%, #a01a12); }
.b-postura { height: clamp(4px, .9vh, 7px); opacity: .95; } .b-postura .ch { background: var(--ouro); }
.b-ki { height: clamp(6px, 1.3vh, 10px); width: 82%; } .b-ki .ch { background: linear-gradient(90deg, var(--cor, #5fc7e8), #fff 140%); }
.b-ki.cheia { animation: kicheia .5s steps(2) infinite; outline-color: #fff; }
@keyframes kicheia { 50% { filter: brightness(1.55); } }
.hud-aliados { position: absolute; left: clamp(10px, 1.8vw, 28px); top: calc(clamp(8px, 2vh, 22px) + clamp(50px, 10.5vh, 92px) + 8px); display: flex; flex-direction: column; gap: 5px; }
.hud-aliados .al { display: flex; align-items: center; gap: 6px; }
.hud-aliados .ret { width: clamp(22px, 4.2vh, 34px); aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: #171318; border: 1px solid var(--cor); transform: skewX(-8deg); font-size: 12px; }
.hud-aliados .ret img { width: 118%; height: 118%; object-fit: cover; transform: skewX(8deg); }
.hud-aliados b { display: block; font-weight: 800; font-style: italic; font-size: clamp(10px, 1.7vh, 13px); line-height: 1.1; color: var(--papel); text-shadow: 0 1px 2px #000; }
.hud-aliados .barra { width: clamp(70px, 11vw, 140px); height: clamp(4px, .8vh, 6px); }
.hud-aliados .barra .ch { background: var(--cor); }
.hud-arte { font-size: clamp(11px, 1.8vh, 14px); font-weight: 700; color: var(--cor); opacity: 0; transition: opacity .2s; text-shadow: 0 1px 3px #000; }
.hud-arte.vis { opacity: 1; }
.hud-arte kbd { background: var(--cor); color: #000; padding: 0 5px; font: inherit; }
.hud-est { position: absolute; right: clamp(10px, 1.8vw, 28px); bottom: clamp(10px, 2.2vh, 24px); display: flex; gap: 6px; align-items: flex-end; flex-direction: column; }
.hud-est .ic { display: flex; gap: 5px; }
.hud-est .e { width: clamp(34px, 6.4vh, 54px); aspect-ratio: 1; display: grid; place-items: center; font: 400 clamp(19px, 4vh, 34px) var(--fonte-kanji); background: rgba(10, 8, 12, .7); transform: skewX(-8deg); color: rgba(255, 255, 255, .5); border-bottom: 3px solid transparent; }
.hud-est .e.on { color: #fff; background: rgba(224, 48, 30, .9); border-color: #fff; }
.hud-mun { font-weight: 800; font-style: italic; font-size: clamp(18px, 3.8vh, 33px); text-shadow: 0 2px 3px #000; line-height: 1; }
.hud-mun small { font-size: .55em; font-weight: 600; color: var(--papel2); }
.hud-mun .nome-arma { display: block; font-size: .45em; font-style: normal; font-weight: 600; text-align: right; color: var(--papel2); letter-spacing: .05em; }
.hud-mun.rec { color: var(--ouro); }
.hud-chefe { position: absolute; left: 50%; top: clamp(8px, 2vh, 22px); transform: translateX(-50%); width: min(620px, 56vw); text-align: center; opacity: 0; transition: opacity .25s; }
.hud-chefe.vis { opacity: 1; }
.hud-chefe .nm { font: 400 clamp(13px, 2.5vh, 21px) var(--fonte-titulo); text-shadow: 0 2px 3px #000; margin-bottom: 2px; }
.hud-chefe .b-vida { height: clamp(11px, 2.3vh, 17px); }
.hud-chefe .b-vida .ch { background: linear-gradient(180deg, #f6bd5a, #e0301e 55%, #8a120c); }
.hud-combo { position: absolute; right: clamp(14px, 3vw, 44px); top: 24vh; text-align: right; opacity: 0; transform: translateX(8px); transition: opacity .12s, transform .12s; }
.hud-combo.vis { opacity: 1; transform: none; }
.hud-combo b { display: block; font: italic 800 clamp(40px, 10vh, 92px)/.9 var(--fonte); color: #fff; text-shadow: 0 0 2px #000, 4px 4px 0 var(--verm); }
.hud-combo.pop b { animation: comboPop .14s ease-out; }
@keyframes comboPop { from { transform: scale(1.32); } }
.hud-combo span { font-weight: 800; font-style: italic; letter-spacing: .15em; color: var(--ouro); text-shadow: 0 1px 3px #000; font-size: clamp(13px, 2.2vh, 19px); }
.hud-obj { position: absolute; left: clamp(10px, 1.8vw, 28px); top: clamp(82px, 18vh, 148px); font-size: clamp(12px, 2vh, 16px); font-weight: 600; text-shadow: 0 1px 3px #000; color: var(--papel); border-left: 3px solid var(--ouro); padding-left: 8px; max-width: 34vw; }
.hud-seta { position: absolute; left: 50%; top: 22vh; transform: translateX(-50%); font: 800 italic clamp(19px, 3.6vh, 32px) var(--fonte); color: var(--ouro); text-shadow: 0 2px 4px #000; opacity: 0; letter-spacing: .05em; transition: opacity .2s; }
.hud-seta.vis { opacity: 1; animation: pisca 1.1s steps(2) infinite; }
#mira { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0; transition: opacity .1s; }
#mira.vis { opacity: 1; }
#mira i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
#mira i:nth-child(1) { left: 14px; top: 0; width: 2px; height: 8px; } #mira i:nth-child(2) { left: 14px; bottom: 0; width: 2px; height: 8px; } #mira i:nth-child(3) { left: 0; top: 14px; width: 8px; height: 2px; } #mira i:nth-child(4) { right: 0; top: 14px; width: 8px; height: 2px; }
#mira.tocou i { background: var(--verm2); }
#trava { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: 0; border: 2px solid var(--verm2); transform: rotate(45deg); box-shadow: 0 0 8px rgba(255, 90, 60, .7); }
#trava.vis { opacity: 1; }
.barrinha { position: absolute; width: 62px; margin-left: -31px; opacity: 0; transition: opacity .12s; }
.barrinha.vis { opacity: 1; }
.barrinha .bb { height: 5px; background: rgba(0, 0, 0, .7); transform: skewX(-24deg); overflow: hidden; outline: 1px solid rgba(255, 255, 255, .25); }
.barrinha .bb i { display: block; height: 100%; background: var(--verm2); transform-origin: left; }
.barrinha .pp { height: 2px; margin-top: 1px; background: rgba(0, 0, 0, .7); }
.barrinha .pp i { display: block; height: 100%; background: var(--ouro); transform-origin: left; }
.barrinha .mark { position: absolute; left: 50%; top: -30px; margin-left: -9px; font: 800 italic 28px var(--fonte); color: var(--verm2); text-shadow: 0 0 6px #000; display: none; }
.barrinha.perigo .mark { display: block; animation: perigo .28s steps(2) infinite; }
.barrinha.quebrada .mark { display: block; color: var(--ouro); animation: perigo .5s steps(2) infinite; }
@keyframes perigo { 50% { transform: scale(1.28); } }
#numeros { position: absolute; inset: 0; overflow: hidden; }
.num { position: absolute; font: italic 800 clamp(16px, 3vh, 26px) var(--fonte); color: #fff; text-shadow: 2px 2px 0 #000; animation: subirN .7s ease-out forwards; will-change: transform, opacity; }
.num.forte { color: #ffd34a; font-size: clamp(24px, 4.8vh, 42px); }
@keyframes subirN { 0% { transform: translateY(0) scale(1.5); opacity: 1; } 30% { transform: translateY(-14px) scale(1); opacity: 1; } 100% { transform: translateY(-56px); opacity: 0; } }
#avisos { position: absolute; left: 0; right: 0; top: 33vh; text-align: center; }
.aviso { font: 400 clamp(26px, 6.5vh, 58px) var(--fonte-titulo); color: #fff; text-shadow: 3px 3px 0 #000, 0 0 16px var(--c, var(--ouro)); animation: avisoIn .75s ease-out forwards; }
@keyframes avisoIn { 0% { transform: scale(1.8) skewX(-10deg); opacity: 0; } 15% { transform: skewX(-10deg); opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) skewX(-10deg); } }
#faixa { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; padding: 10px 0 14px; background: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .78) 25%, rgba(0, 0, 0, .78) 75%, transparent 100%); opacity: 0; transition: opacity .3s; }
#faixa.vis { opacity: 1; }
#faixa h3 { margin: 0; font: 400 clamp(22px, 5.4vh, 50px) var(--fonte-titulo); }
#faixa p { margin: 0; font-weight: 700; font-style: italic; letter-spacing: .28em; color: var(--ouro); font-size: clamp(11px, 2vh, 17px); text-transform: uppercase; }
#corte { position: absolute; inset: 0; overflow: hidden; display: none; z-index: 2; }
#corte.vis { display: block; }
#corte .bg { position: absolute; left: -10%; right: -10%; top: 26%; height: 48%; background: var(--c, #e0301e); transform: skewY(-5deg) scaleX(0); transform-origin: left; animation: corteBg .85s cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes corteBg { 0% { transform: skewY(-5deg) scaleX(0); } 16%, 84% { transform: skewY(-5deg) scaleX(1); } 100% { transform: skewY(-5deg) scaleX(1); transform-origin: right; opacity: 0; } }
#corte .r { position: absolute; right: 2%; top: 14%; height: 72%; aspect-ratio: 1; animation: corteRet .85s cubic-bezier(.2, .9, .2, 1) forwards; }
#corte .r img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(10px 0 0 rgba(0, 0, 0, .45)); }
#corte .r img[src^="data:"] { border-radius: 50%; }
@keyframes corteRet { 0% { transform: translateX(46vw); } 18%, 86% { transform: translateX(0); } 100% { transform: translateX(-3vw); opacity: 0; } }
#corte .t { position: absolute; left: 5%; top: 37%; font: 400 clamp(32px, 9vh, 84px)/1 var(--fonte-titulo); color: #fff; text-shadow: 4px 4px 0 #000; animation: corteT .85s ease-out forwards; }
#corte .t small { display: block; font: 400 clamp(46px, 14vh, 130px)/1 var(--fonte-kanji); color: #0b0a0e; opacity: .85; margin-bottom: -.1em; }
@keyframes corteT { 0% { transform: translateX(-40vw) skewX(-12deg); } 22%, 86% { transform: skewX(-12deg); } 100% { opacity: 0; transform: skewX(-12deg) translateX(3vw); } }
#final-kanji { position: absolute; inset: 0; display: none; place-items: center; font: 400 56vh var(--fonte-kanji); color: var(--verm); text-shadow: 0 0 60px rgba(0, 0, 0, .8); }
#final-kanji.vis { display: grid; animation: kanjiB 1.6s ease-out forwards; }
@keyframes kanjiB { 0% { transform: scale(1.5); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Pausa, ajustes, comandos, ranking, resultado */
#t-comandos, #t-ajustes { z-index: 21; }
#t-pausa { z-index: 20; background: rgba(5, 4, 8, .76); display: flex; align-items: center; justify-content: flex-start; padding-left: clamp(20px, 8vw, 120px); }
#t-pausa .opcoes { margin: 0; }
#t-pausa h2 { font: 400 clamp(34px, 8vh, 74px) var(--fonte-titulo); margin: 0 0 clamp(8px, 2vh, 18px); }
#t-resultado { z-index: 16; display: grid; grid-template-columns: 1fr minmax(320px, 44vw); background: linear-gradient(90deg, rgba(5, 4, 8, 0) 0, rgba(5, 4, 8, .22) 40%, rgba(5, 4, 8, .92) 66%); overflow: auto; touch-action: pan-y; }
.res-col { grid-column: 2; padding: clamp(12px, 4vh, 46px) clamp(14px, 3vw, 56px); display: flex; flex-direction: column; min-height: 0; }
.res-cap { font-weight: 700; font-style: italic; letter-spacing: .24em; color: var(--ouro); font-size: clamp(12px, 2.1vh, 17px); text-transform: uppercase; }
.res-tit { font: 400 clamp(24px, 5.6vh, 50px)/1.02 var(--fonte-titulo); margin: 2px 0 clamp(4px, 1.2vh, 12px); }
.res-rank { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(4px, 1.2vh, 12px); }
.res-rank b { font: 400 clamp(60px, 15vh, 140px)/1 var(--fonte-kanji); color: var(--verm); text-shadow: 0 0 30px rgba(224, 48, 30, .5); animation: rankIn .5s .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rankIn { from { transform: scale(2.2) rotate(-14deg); opacity: 0; } }
.res-rank span { font-size: clamp(13px, 2.2vh, 18px); color: var(--papel2); }
.res-rank em { display: block; font: italic 800 clamp(24px, 5vh, 44px)/1 var(--fonte); color: var(--papel); }
.res-lista { display: grid; grid-template-columns: 1fr auto; gap: 1px 14px; font-size: clamp(14px, 2.4vh, 20px); font-weight: 600; }
.res-lista div:nth-child(even) { text-align: right; font-weight: 800; font-style: italic; }
.res-lista div { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 2px 0; }
.nota { color: var(--papel2); font-size: clamp(13px, 2.2vh, 18px); line-height: 1.3; }
.grade-aj { display: grid; grid-template-columns: minmax(150px, 280px) minmax(150px, 320px); gap: clamp(6px, 1.4vh, 14px) 22px; align-items: center; font-size: clamp(15px, 2.6vh, 21px); font-weight: 600; max-width: 660px; }
input[type=range] { width: 100%; accent-color: var(--verm); touch-action: none; }
.grade-aj .seletor button { padding: 3px 12px; }
.lista-cmd { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(8px, 1.6vh, 16px) clamp(16px, 3vw, 40px); }
.lista-cmd h3 { margin: 0 0 3px; color: var(--ouro); font-weight: 800; font-style: italic; letter-spacing: .05em; font-size: clamp(15px, 2.6vh, 21px); text-transform: uppercase; }
.lista-cmd p { margin: 0 0 2px; font-size: clamp(14px, 2.3vh, 18px); line-height: 1.22; }
kbd { font: 700 .9em var(--fonte); background: rgba(255, 255, 255, .13); padding: 0 6px; margin-right: 3px; border-bottom: 2px solid rgba(255, 255, 255, .28); }
.rank-tab { width: 100%; border-collapse: collapse; font-size: clamp(14px, 2.4vh, 19px); max-width: 780px; }
.rank-tab td, .rank-tab th { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rank-tab th { color: var(--ouro); font-style: italic; }
.cap-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cap { position: relative; text-align: left; padding: 10px 14px 10px 66px; min-height: 76px; background: linear-gradient(90deg, rgba(12, 9, 14, .94) 20%, rgba(12, 9, 14, .62)), var(--arte, none) center 30% / cover no-repeat, rgba(255, 255, 255, .06); border-left: 3px solid rgba(255, 255, 255, .22); transition: background .12s; }
.cap:hover, .cap:focus-visible { background: linear-gradient(90deg, rgba(120, 22, 14, .92) 20%, rgba(224, 48, 30, .34)), var(--arte, none) center 30% / cover no-repeat, rgba(224, 48, 30, .36); border-color: var(--verm); }
.cap[disabled] { opacity: .42; pointer-events: none; }
.cap .k { position: absolute; left: 12px; top: 8px; font: 400 44px var(--fonte-kanji); color: var(--verm); }
.cap b { display: block; font-weight: 800; font-style: italic; color: var(--ouro); font-size: clamp(12px, 1.9vh, 15px); letter-spacing: .07em; text-transform: uppercase; }
.cap strong { display: block; font-size: clamp(16px, 2.8vh, 23px); font-weight: 700; line-height: 1.05; }
.cap em { display: block; font-size: clamp(12px, 1.9vh, 15px); font-style: normal; color: var(--papel2); line-height: 1.15; margin-top: 2px; }
.cap .rk { position: absolute; right: 10px; top: 8px; font: 400 26px var(--fonte-kanji); color: var(--ouro); }

/* Cortina de tinta: a transição entre telas */
#cortina { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .32s; z-index: 40; }
#cortina.fecha { opacity: 1; pointer-events: auto; }

/* Toque */
#t-toque { display: none; z-index: 7; touch-action: none; }
body.toque #t-toque.ativa { display: block; }
body.toque .hud-est .ic { display: none; }
body.toque .hud-est { bottom: auto; top: 38vh; right: 8px; }
.alavanca { position: absolute; left: 12vw; bottom: 22vh; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); background: rgba(10, 8, 12, .25); }
.alavanca i { position: absolute; left: 33px; top: 33px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.tq { position: absolute; width: clamp(50px, 14.5vh, 74px); aspect-ratio: 1; border-radius: 50%; background: rgba(10, 8, 12, .5); border: 2px solid rgba(255, 255, 255, .34); color: #fff; font-weight: 800; font-size: clamp(13px, 3.3vh, 16px); touch-action: none; display: grid; place-items: center; line-height: 1; }
.tq.apertado { background: rgba(224, 48, 30, .8); }
.tq[data-toque=leve] { right: 15%; bottom: 7vh; width: clamp(62px, 19vh, 92px); }
.tq[data-toque=pesado] { right: 5%; bottom: 25vh; }
.tq[data-toque=esquiva] { right: 24%; bottom: 29vh; }
.tq[data-toque=pulo] { right: 3%; bottom: 3vh; }
.tq[data-toque=guarda] { right: 13%; bottom: 44vh; }
.tq[data-toque=arte] { right: 2%; top: 22vh; }
.tq[data-toque=trocar] { right: 11%; top: 22vh; }
.tq[data-toque=trava] { right: 20%; top: 22vh; }
.tq[data-toque=pausa] { right: 50%; margin-right: -22px; top: 8px; width: 44px; }
.tq[data-toque=recarregar] { right: 28%; bottom: 6vh; width: clamp(38px, 11vh, 54px); font-size: 12px; }

@media (max-width: 760px) {
  #t-menu { grid-template-columns: 1fr; background: linear-gradient(90deg, rgba(8, 6, 10, .8), rgba(8, 6, 10, .25)); }
  .esc-info { top: 14vh; transform: none; width: 56vw; } .esc-info p { display: none; }
  .hud-obj { display: none; }
  #t-resultado { grid-template-columns: 1fr; background: rgba(5, 4, 8, .84); } .res-col { grid-column: 1; }
  .vem-do-lrv { display: none; }
}
/* Até 820 px de altura as nove opções cabem sem cortar a última nem o rodapé. */
@media (max-height: 820px) {
  .menu-col { padding-top: 2.4vh; padding-bottom: 2vh; }
  .logo { margin-bottom: 1vh; }
  .opcoes { padding-top: 1vh; gap: 0; }
  .opcao { font-size: 3.6vh; padding-top: .2vh; padding-bottom: .2vh; }
  .opcao small { font-size: 1.7vh; }
}
@media (max-height: 560px) {
  .esc-info p, .atrib { display: none; }
  .esc-info .k { font-size: 46px; }
  .esc-info h3 { font-size: 22px; }
  .esc-info .tit { font-size: 13px; margin-bottom: 3px; }
  .esc-arte { margin-top: 3px; padding: 2px 8px; }
  .esc-topo { padding-top: 6px; }
  .esc-topo h2 { font-size: 18px; }
  .esc-item { width: 44px; }
  .esc-item span { font-size: 10px; }
  .seletor { font-size: 12px; gap: 5px; }
  .seletor button { padding: 1px 7px; }
  .btn { padding: 3px 18px; font-size: 14px; }
  .esc-extra { gap: 3px 12px; }
}
@media (max-height: 460px) {
  .opcao small { display: none; }
  .menu-rodape { display: none; }
  .hud-combo { top: 18vh; }
}
@media (prefers-reduced-motion: reduce) { .painel-arte { animation: none; } }