/* Menu de modos, tela de preparação (personagens, armamento, séries) e prêmio do fim da partida */

/* ---------- menu principal (modos) ---------- */
#tela-menu { display: grid; grid-template-columns: auto minmax(0, 580px); grid-template-areas: "logo topo" "logo aviso" "logo modos" "logo preparo" "logo dica"; column-gap: 4vw; row-gap: .7em; align-items: center; align-content: center; width: 100%; max-width: 1100px; margin: auto; }
#tela-menu .logo { grid-area: logo; }
#tela-menu .aviso-menu { grid-area: aviso; }
#tela-menu > .dica { grid-area: dica; }
.menu-topo { grid-area: topo; display: flex; align-items: flex-end; gap: .7em; }
.campo-nome { flex: 1; display: flex; flex-direction: column; gap: .2em; font-family: var(--fonte-t); font-size: 1.05em; }
.campo-nome #nome { width: 100%; }
.chip-medalhas { display: flex; align-items: center; gap: .3em; background: rgba(16,20,31,.75); border: 3px solid #10141f; border-radius: 2em; padding: .2em .8em .2em .35em; box-shadow: 0 3px 0 rgba(0,0,0,.3); flex: none; }
.chip-medalhas svg { font-size: 1.9em; }
.chip-medalhas b { font-family: var(--fonte-t); font-size: 1.5em; color: #ffd98a; text-shadow: var(--contorno); min-width: 1.5em; }
.chip-medalhas.ganhou b { animation: saltar .5s; }
.modos { grid-area: modos; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.modo { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3em; padding: 1em .6em; min-height: 9em; border-radius: 1em; border: 4px solid #10141f; background: linear-gradient(#36456b, #232c45); box-shadow: inset 0 4px 0 rgba(255,255,255,.15), 0 6px 0 #10141f; transition: transform .08s; }
.modo:hover:not(:disabled) { transform: translateY(-3px); }
.modo:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 4px 0 rgba(255,255,255,.15), 0 2px 0 #10141f; }
.modo > svg { font-size: 2.8em; color: var(--amarelo); filter: drop-shadow(0 3px 0 #10141f); }
.modo b { font-family: var(--fonte-t); font-weight: 400; font-size: 1.3em; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.modo small { font-family: var(--fonte); font-weight: 800; font-size: .8em; color: #e6ecff; opacity: .85; }
.modo[data-modo="online"] { background: linear-gradient(#4f8fe0, #2a5aa8); }
.modo[data-modo="robo"] { background: linear-gradient(#e0794f, #a83f2a); }
.modo.bloqueado { background: linear-gradient(#3a4256, #2a3142); cursor: default; opacity: .85; }
.modo.bloqueado > svg { color: #8a93a8; }
.selo-dev { display: inline-flex; align-items: center; gap: .3em; background: #10141f; color: #ffd23f; border-radius: 1em; padding: .15em .6em; }
.selo-dev svg { font-size: 1em; }

/* seção Preparação no menu principal, abaixo dos modos */
.preparo { grid-area: preparo; background: rgba(16,20,31,.6); border: 3px solid #10141f; border-radius: 1em; padding: .45em .55em .55em; }
.preparo-titulo { font-family: var(--fonte-t); font-size: 1.05em; margin: 0 0 .35em .2em; color: #c9d4ee; }
.preparo-titulo small { font-family: var(--fonte); font-weight: 800; font-size: .75em; opacity: .7; margin-left: .4em; }
.preparo-bts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; }
.preparo-bt { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .7em; background: linear-gradient(#36435f, #222b40); border: 3px solid #10141f; box-shadow: inset 0 3px 0 rgba(255,255,255,.12), 0 3px 0 #10141f; text-align: left; min-width: 0; }
.preparo-bt:active { transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.12), 0 1px 0 #10141f; }
.preparo-bt > svg { font-size: 1.7em; color: var(--amarelo); }
.preparo-bt span { display: flex; flex-direction: column; min-width: 0; }
.preparo-bt b { font-family: var(--fonte-t); font-weight: 400; font-size: 1.05em; }
.preparo-bt small { font-family: var(--fonte); font-weight: 800; font-size: .75em; color: #93a2c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: .15em; align-items: center; }
.preparo-bt small svg { font-size: 1.3em; color: #e6ecff; }
/* um botão só para a Preparação (as 5 partes ficam em abas lá dentro) */
.preparo { padding: .45em; }
.preparo-bt.unico { width: 100%; padding: .55em .8em; }
.preparo-bt.unico > svg { font-size: 2em; }
.preparo-bt.unico b { font-size: 1.3em; }
.preparo-bt.unico small { font-size: .82em; }
.preparo-bt.unico .seta { margin-left: auto; font-size: 1.3em; color: #93a2c8; transform: scaleX(-1); }
/* aba Torres */
.torre-vitrine { display: grid; grid-template-columns: 200px 1fr; gap: .7em; align-items: start; }
.torre-vitrine .tela { position: relative; background: radial-gradient(circle at 50% 70%, #3c4a6e, #1a2133 75%); border: 3px solid #10141f; border-radius: .9em; overflow: hidden; }
.torre-vitrine canvas { display: block; width: 100%; height: auto; }
.niveis-torre { position: absolute; left: 0; right: 0; bottom: .35em; display: flex; justify-content: center; gap: .3em; }
.niveis-torre button { min-width: 2.6em; padding: .15em .45em; border-radius: .5em; border: 2px solid #10141f; background: #2a3450; color: #c9d4ee; font-weight: 900; font-size: .85em; }
.niveis-torre button.sel { background: var(--amarelo); color: #10141f; }
.efeito-torre { background: #10141f; border-radius: .7em; padding: .45em .65em; font-weight: 700; color: #bcc6e0; font-size: .9em; }
.efeito-torre b { color: var(--amarelo); display: flex; align-items: center; gap: .3em; }
.tabela-torre { width: 100%; border-collapse: collapse; font-weight: 800; font-size: .85em; }
.tabela-torre th, .tabela-torre td { padding: .2em .4em; text-align: right; border-bottom: 1px solid rgba(255,255,255,.08); }
.tabela-torre th:first-child, .tabela-torre td:first-child { text-align: left; color: #93a2c8; }
.tabela-torre th { color: #93a2c8; font-size: .9em; }
.tabela-torre td.sel, .tabela-torre th.sel { color: #fff; background: rgba(255,201,60,.12); }
.tabela-torre small { color: #7ee08a; font-size: .8em; margin-left: .2em; }
@media (max-width: 760px) { .torre-vitrine { grid-template-columns: 1fr; } .torre-vitrine .tela { max-width: 220px; margin: auto; } }

/* ---------- preparação ---------- */
#tela-prep { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgba(18,23,37,.94); padding: max(.5em, env(safe-area-inset-top)) max(.8em, env(safe-area-inset-right)) max(.5em, env(safe-area-inset-bottom)) max(.8em, env(safe-area-inset-left)); gap: .5em; font-size: clamp(11px, 1.5vw, 16px); }
.prep-topo { display: flex; align-items: center; gap: .6em; }
.prep-titulo { font-family: var(--fonte-t); font-size: 1.5em; text-shadow: var(--contorno); white-space: nowrap; }
.prep-abas { max-width: 780px; margin: 0 auto; }
#prep-corpo { flex: 1; overflow-y: auto; touch-action: pan-y; min-height: 0; padding: .2em; }
.prep-rodape { display: flex; align-items: center; gap: .8em; justify-content: flex-end; }
#prep-resumo { flex: 1; display: flex; align-items: center; gap: .5em; font-weight: 800; color: #c9d4ee; flex-wrap: wrap; }
#prep-resumo .resumo-item { display: flex; align-items: center; gap: .3em; background: #10141f; border-radius: .6em; padding: .25em .6em; }
#prep-resumo svg { font-size: 1.3em; color: var(--amarelo); }
#prep-pronto { font-size: 1.3em; padding: .4em 1.8em; }

/* personagens */
.personagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(22em, 1fr)); gap: .8em; }
.pers { display: grid; grid-template-columns: 8.6em 1fr; gap: .5em .8em; align-items: start; background: linear-gradient(#2f3a5a, #252e48); border: 4px solid #10141f; border-radius: 1em; padding: .6em; }
.pers.sel { border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(255,210,63,.25); }
.pers .vitrine { position: relative; }
.pers canvas { width: 8.6em; height: 10.95em; border-radius: .7em; background: radial-gradient(circle at 50% 70%, #4b5c86, #1c2338); display: block; }
.pers h3 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.5em; }
.pers .papel { font-weight: 900; color: var(--amarelo); font-size: .85em; text-transform: uppercase; letter-spacing: .05em; padding-right: 6.6em; }
.pers { position: relative; }
.bt-caminho { position: absolute; top: .55em; right: .55em; display: flex; align-items: center; gap: .3em; padding: .25em .6em; border-radius: .7em; border: 2px solid #10141f; background: linear-gradient(#3e4d75, #2a3452); color: #e6ecff; font-weight: 900; font-size: .8em; box-shadow: 0 2px 0 #10141f; }
.bt-caminho svg { font-size: 1.25em; color: var(--amarelo); }
.bt-caminho:active { transform: translateY(1px); box-shadow: none; }

/* ---------- prestígio ---------- */
.selo-prest { display: inline-flex; align-items: center; gap: .1em; margin-top: .15em; color: #d7a6ff; font-weight: 900; font-size: .78em; }
.selo-prest svg { width: 1.1em; height: 1.1em; }
.selo-prest span { margin-left: .3em; }
.prest-mais { color: #d7a6ff; font-weight: 900; }
.bt-compra.roxo { background: linear-gradient(#b16cff, #7b3fd1); color: #fff; }
.cam-prestigio { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center; background: linear-gradient(90deg, rgba(123,63,209,.22), rgba(29,37,64,.9)); border: 3px solid #10141f; border-radius: .9em; padding: .5em .8em; }
.cam-prestigio.pronto { border-color: #b16cff; box-shadow: 0 0 0 3px rgba(177,108,255,.25), 0 0 22px rgba(177,108,255,.35); }
.estrelas-prest { display: flex; align-items: center; gap: .15em; }
.estrelas-prest span { color: #3b3456; } .estrelas-prest span.on { color: #d7a6ff; filter: drop-shadow(0 0 4px rgba(215,166,255,.7)); }
.estrelas-prest svg { width: 1.5em; height: 1.5em; }
.estrelas-prest small { margin-left: .35em; font-weight: 900; color: #b9a6d8; }
.cam-prestigio .txt { font-weight: 700; color: #c9d4ee; font-size: .8em; line-height: 1.35; }
.cam-prestigio .txt > b { color: #d7a6ff; font-family: var(--fonte-t); font-weight: 400; font-size: 1.25em; margin-right: .3em; }
.cam-prestigio .txt small { display: block; color: #b9a6d8; font-weight: 800; margin-top: .15em; }
.ganhos { display: inline-flex; gap: .6em; flex-wrap: wrap; }
.ganhos span { background: #10141f; border-radius: .5em; padding: 0 .45em; }
.ganhos span.destaque { color: #d7a6ff; box-shadow: inset 0 0 0 2px rgba(215,166,255,.5); }
.cam-prestigio .acao { display: flex; flex-direction: column; gap: .3em; }
.cam-prestigio .acao .bt-compra { white-space: nowrap; }

/* ---------- tela do caminho de níveis ---------- */
#caminho-tela { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: .6em; background: radial-gradient(ellipse at 50% 0%, #1d2744, #0f1424 70%); padding: max(.6em, env(safe-area-inset-top)) max(.9em, env(safe-area-inset-right)) max(.6em, env(safe-area-inset-bottom)) max(.9em, env(safe-area-inset-left)); overflow: auto; }
.cam-topo { display: grid; grid-template-columns: auto auto 1fr; gap: .9em; align-items: center; }
.cam-retrato canvas { width: 5.2em; height: 6.6em; border-radius: .7em; background: radial-gradient(circle at 50% 70%, #4b5c86, #1c2338); display: block; border: 3px solid #10141f; }
.cam-nome .papel { font-weight: 900; color: var(--amarelo); font-size: .8em; text-transform: uppercase; letter-spacing: .05em; }
.cam-nome h2 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.9em; line-height: 1.05; }
.cam-nome .grande { display: inline-flex; align-items: center; gap: .3em; margin-top: .2em; font-family: var(--fonte-t); color: #1b2233; background: var(--amarelo); border-radius: .5em; padding: .05em .55em; }
.cam-xp { background: #1d2540; border: 3px solid #10141f; border-radius: .9em; padding: .55em .8em; display: flex; flex-direction: column; gap: .35em; }
.cam-xp .linha { display: flex; justify-content: space-between; font-weight: 900; color: #c9d4ee; font-size: .9em; gap: .5em; }
.cam-xp .linha b { color: #fff; }
.cam-xp .barra { height: .75em; background: #10141f; border-radius: .5em; overflow: hidden; }
.cam-xp .barra i { display: block; height: 100%; background: linear-gradient(90deg, #ffe066, var(--amarelo)); border-radius: .5em; }
.cam-xp small { font-weight: 800; color: #8a95b4; font-size: .78em; }
.cam-fechar { justify-self: end; align-self: start; }
.cam-legenda { display: flex; gap: .9em; flex-wrap: wrap; font-weight: 800; font-size: .8em; color: #93a2c8; }
.cam-legenda span { display: flex; align-items: center; gap: .35em; }
.cam-legenda i { width: .8em; height: .8em; border-radius: .25em; display: inline-block; }

.trilha { position: relative; flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .5em; padding: 2.6em .2em .4em; align-content: start; }
.trilha-linha { position: absolute; left: 5%; right: 5%; top: 1.25em; height: .5em; background: #10141f; border-radius: .3em; }
.trilha-linha i { display: block; height: 100%; border-radius: .3em; background: linear-gradient(90deg, #ffb52e, #ffe066); box-shadow: 0 0 10px rgba(255,210,63,.5); }
.etapa { position: relative; align-self: start; display: flex; flex-direction: column; align-items: stretch; gap: .45em; padding: .35em .3em .5em; border-radius: .9em; }
.etapa.atual { background: rgba(255,210,63,.07); box-shadow: inset 0 0 0 2px rgba(255,210,63,.35); }
.etapa .no { position: absolute; top: -2.55em; left: 50%; transform: translateX(-50%); width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font-family: var(--fonte-t); font-size: 1.05em; background: #2a3350; color: #8a93a8; border: 3px solid #10141f; z-index: 1; }
.etapa .no svg { width: 1.1em; height: 1.1em; }
.etapa.feita .no { background: var(--amarelo); color: #1b2233; }
.etapa.atual .no { background: #fff; color: #1b2233; box-shadow: 0 0 0 4px rgba(255,210,63,.55), 0 0 18px rgba(255,210,63,.7); animation: pulsoNo 1.4s ease-in-out infinite; }
@keyframes pulsoNo { 50% { box-shadow: 0 0 0 7px rgba(255,210,63,.25), 0 0 24px rgba(255,210,63,.8); } }
.etapa .xp-req { text-align: center; font-weight: 900; font-size: .72em; color: #8a95b4; white-space: nowrap; }
.etapa.feita .xp-req { color: #ffd34d; }
.etapa .aqui { align-self: center; font-weight: 900; font-size: .62em; color: #1b2233; background: var(--amarelo); border-radius: .5em; padding: .1em .5em; letter-spacing: .04em; white-space: nowrap; }
.lib { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15em; background: #1f2740; border: 3px solid #10141f; border-top-width: .4em; border-radius: .7em; padding: .45em .25em .4em; }
.lib > svg { font-size: 1.9em; color: #6f7a96; }
.lib b { font-weight: 900; font-size: .74em; line-height: 1.1; color: #9aa4bf; }
.lib small { font-weight: 800; font-size: .58em; text-transform: uppercase; letter-spacing: .05em; color: #6f7a96; }
.lib.arma { border-top-color: #e0803a; } .lib.serie { border-top-color: #4f9bff; } .lib.acessorio { border-top-color: #43c47a; } .lib.torre { border-top-color: #ff6b8b; } .lib.equip { border-top-color: #ffa040; }
.etapa.feita .lib, .etapa.atual .lib { background: linear-gradient(#3a4a72, #283350); }
.etapa.feita .lib > svg, .etapa.atual .lib > svg { color: var(--amarelo); }
.etapa.feita .lib b, .etapa.atual .lib b { color: #fff; }
.etapa.feita .lib small, .etapa.atual .lib small { color: #a9b6d8; }
.lib .tranca, .lib .ok { position: absolute; top: .2em; right: .25em; display: flex; }
.lib .tranca { color: #6f7a96; } .lib .ok { color: #7ee08a; }
.lib .tranca svg, .lib .ok svg { width: .85em; height: .85em; }
.etapa.bloqueada .lib { opacity: .8; }
@media (max-width: 900px) { .trilha { overflow-x: auto; grid-template-columns: repeat(10, 6.6em); } }
.cam-dica { font-weight: 800; color: #8a95b4; font-size: .8em; }
.pers p { margin: .2em 0 .4em; font-weight: 700; color: #bcc6e0; font-size: .88em; line-height: 1.3; }
/* faixa de baixo igual em todos os cartões: vantagem e botão com o mesmo tamanho, sempre no fundo do cartão */
.pers { grid-template-rows: 1fr auto; }
.pers-rodape { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 9.5em; gap: .6em; height: 4.4em; }
.pers-rodape .vantagem { height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.pers-rodape .bt-compra { width: 100%; height: 100%; min-width: 0; white-space: nowrap; }
.barra-stat { display: grid; grid-template-columns: 6.5em 1fr 3em; align-items: center; gap: .4em; font-weight: 800; font-size: .85em; margin: .15em 0; }
.barra-stat .trilho-s { height: .6em; background: #10141f; border-radius: .4em; overflow: hidden; }
.barra-stat .trilho-s i { display: block; height: 100%; background: linear-gradient(90deg, #7be38f, #4fd36b); border-radius: .4em; }
.barra-stat span:last-child { text-align: right; color: #e6ecff; }
.vantagem { background: rgba(255,210,63,.12); border: 2px solid rgba(255,210,63,.5); border-radius: .6em; padding: .35em .5em; font-weight: 800; font-size: .78em; line-height: 1.25; }
.vantagem b { color: var(--amarelo); display: flex; align-items: center; gap: .3em; }
.vantagem b svg { font-size: 1.1em; }

/* armamento e séries: lista à esquerda, detalhe à direita */
.duas-colunas { display: grid; grid-template-columns: minmax(12em, 1fr) 2fr; gap: .7em; align-items: start; }
.lista-itens { display: flex; flex-direction: column; gap: .35em; }
.item-lista { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .7em; background: #283350; border: 3px solid #10141f; font-family: var(--fonte-t); font-size: 1.05em; text-align: left; }
.item-lista > svg { font-size: 1.4em; color: var(--amarelo); }
.item-lista span { flex: 1; }
.item-lista small { font-family: var(--fonte); font-weight: 900; font-size: .75em; color: #93a2c8; }
.item-lista.sel { border-color: var(--amarelo); background: #34416a; }
.item-lista.levando { box-shadow: inset 5px 0 0 var(--verde); }
.detalhe { background: linear-gradient(#2f3a5a, #252e48); border: 4px solid #10141f; border-radius: 1em; padding: .7em .9em; display: flex; flex-direction: column; gap: .5em; }
.detalhe h3 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.6em; display: flex; align-items: center; gap: .35em; }
.detalhe h3 svg { color: var(--amarelo); }
.detalhe > p { margin: 0; font-weight: 700; color: #bcc6e0; }
.resumo-stats { display: flex; gap: .4em; flex-wrap: wrap; }
.resumo-stats span { background: #10141f; border-radius: .5em; padding: .2em .55em; font-weight: 800; font-size: .85em; color: #c9d4ee; }
.resumo-stats b { color: #fff; }
.melhoria { display: grid; grid-template-columns: 7.5em 1fr auto; gap: .6em; align-items: center; background: rgba(16,20,31,.45); border-radius: .7em; padding: .45em .6em; }
.melhoria .nome-m { font-family: var(--fonte-t); font-size: 1.05em; }
.melhoria .nome-m small { display: block; font-family: var(--fonte); font-weight: 800; font-size: .68em; color: #93a2c8; }
.melhoria .meio { display: flex; flex-direction: column; gap: .25em; }
.melhoria .niveis i { height: .6em; }
.melhoria .valores { font-weight: 800; font-size: .82em; color: #c9d4ee; }
.melhoria .valores b { color: var(--verde); }
.melhoria .bt-compra { min-width: 7.5em; }
.melhoria .bt-compra svg { font-size: 1.4em; }
.nota { font-weight: 700; font-size: .8em; color: #93a2c8; }
.sec-titulo.vagas { display: flex; align-items: center; justify-content: flex-start; gap: .5em; margin-bottom: .5em; }
.vaga { width: 2.6em; height: 2.6em; border-radius: .6em; border: 3px dashed #4a536c; display: flex; align-items: center; justify-content: center; }
.vaga.cheia { border: 3px solid #10141f; background: linear-gradient(#36435f, #222b40); }
.vaga svg { font-size: 1.5em; color: #fff; }

/* prêmio no fim da partida */
.fim-premio { display: flex; flex-direction: column; align-items: center; gap: .2em; background: rgba(16,20,31,.75); border: 3px solid #10141f; border-radius: .9em; padding: .5em 1.4em; font-weight: 800; }
.fim-premio .total { display: flex; align-items: center; gap: .3em; font-family: var(--fonte-t); font-size: 2em; color: #ffd98a; text-shadow: var(--contorno); animation: saltar .6s; }
.fim-premio .total svg { font-size: 1.1em; }
.fim-premio .linhas { font-size: .85em; color: #c9d4ee; }

@media (max-height: 520px) {
  #tela-menu { row-gap: .45em; }
  .modo { min-height: 6em; padding: .45em .4em; }
  .preparo { padding: .3em .45em .45em; }
  .preparo-titulo { margin-bottom: .2em; }
  .preparo-bt.unico { padding: .35em .6em; }
  .preparo-bt.unico > svg { font-size: 1.5em; }
  .preparo-bt.unico b { font-size: 1.05em; }
  #tela-menu > .dica { display: none; }
  .modo > svg { font-size: 2.1em; }
  .modo b { font-size: 1.05em; }
  .pers { grid-template-columns: 8em 1fr; }
  .pers canvas { width: 8em; height: 10.5em; }
  .degrau small { display: none; }
  .prep-titulo { display: none; }
}
@media (max-aspect-ratio: 1/1) {
  #tela-menu { grid-template-columns: 1fr; grid-template-areas: "logo" "topo" "aviso" "modos" "preparo" "dica"; justify-items: stretch; }
  #tela-menu .logo { justify-self: center; }
  .duas-colunas { grid-template-columns: 1fr; }
}

/* configurações (volume dos efeitos e da música) */
#config { position: fixed; inset: 0; z-index: 11; background: rgba(10,14,24,.72); display: flex; align-items: center; justify-content: center; padding: 1em; }
.config-cartao { width: min(92vw, 440px); }
.config-titulo { display: flex; align-items: center; gap: .4em; }
.config-titulo svg { color: var(--amarelo); }
.volume { display: grid; grid-template-columns: 9em 1fr 3.2em; align-items: center; gap: .6em; font-weight: 800; }
.volume span { display: flex; align-items: center; gap: .4em; }
.volume span svg { font-size: 1.3em; color: var(--amarelo); }
.volume b { font-family: var(--fonte-t); font-weight: 400; text-align: right; }
.volume input { -webkit-appearance: none; appearance: none; width: 100%; height: .7em; border-radius: .5em; background: #10141f; border: 2px solid #10141f; outline: none; touch-action: none; }
.volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: linear-gradient(#ffe066, var(--amarelo)); border: 3px solid #10141f; cursor: pointer; }
.volume input::-moz-range-thumb { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--amarelo); border: 3px solid #10141f; cursor: pointer; }
.bt-config-menu { align-self: flex-end; flex: none; font-size: 1.05em; margin-bottom: .15em; }
.config-conta { display: flex; flex-direction: column; gap: .45em; padding: .7em .8em; border-radius: .6em; background: #10141f; }
.config-conta-tit { display: flex; align-items: center; gap: .4em; font-family: var(--fonte-t); }
.config-conta-tit svg { font-size: 1.2em; color: var(--amarelo); }
.config-conta small { opacity: .75; line-height: 1.3; }
.config-conta .bt-compra { align-self: flex-start; }
#google-fora { display: flex; flex-direction: column; gap: .45em; }
#bt-google { min-height: 40px; }
#google-dentro { display: flex; align-items: center; gap: .4em; opacity: 1; }
.ok-google { width: 1.1em; height: 1.1em; flex: none; color: #5fd36a; }
.conta-mais summary { cursor: pointer; opacity: .7; font-size: .9em; }
.conta-mais > button, .conta-mais > small { display: block; margin-top: .55em; }
.bt-apagar-conta { align-self: flex-start; background: none; border: 0; padding: .2em 0; color: #ff7b72; font: inherit; font-size: .9em; text-decoration: underline; cursor: pointer; }
.bt-apagar-conta.confirmar { color: #fff; background: #b3261e; border-radius: .4em; padding: .35em .7em; text-decoration: none; font-weight: 700; }
.config-mudo { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.fim-premio .subiu { display: flex; align-items: center; gap: .3em; font-family: var(--fonte-t); font-size: 1.2em; color: var(--amarelo); text-shadow: var(--contorno); animation: saltar .6s; }
.fim-premio .linhas b { color: #fff; }

/* níveis de personagem */
.pers.trancado canvas { filter: grayscale(.7) brightness(.6); }
.selo-preco { position: absolute; left: 50%; bottom: .5em; transform: translateX(-50%); display: flex; align-items: center; gap: .3em; background: #10141f; border: 2px solid #ffd98a; color: #ffd98a; font-family: var(--fonte-t); border-radius: 1em; padding: .1em .7em; white-space: nowrap; }
.nivel-pers { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5em; margin: .25em 0 .1em; font-weight: 800; font-size: .85em; }
.nivel-pers b { font-family: var(--fonte-t); font-weight: 400; color: #1b2233; background: var(--amarelo); border-radius: .5em; padding: .05em .5em; }
.nivel-pers .trilho-s { height: .55em; background: #10141f; border-radius: .4em; overflow: hidden; }
.nivel-pers .trilho-s i { display: block; height: 100%; background: linear-gradient(90deg, #ffe066, var(--amarelo)); }
.nivel-pers span { color: #c9d4ee; }
/* caminho antigo (grade de degraus) saiu da aba Personagens: agora é a tela #caminho-tela */
.caminho-titulo { margin-top: .8em; }
.caminho { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .3em; margin-top: .4em; }
.degrau { background: #1f2740; border: 3px solid #10141f; border-radius: .7em; padding: .3em .25em; display: flex; flex-direction: column; align-items: center; gap: .25em; min-height: 6em; }
.degrau > b { font-family: var(--fonte-t); font-weight: 400; font-size: 1.1em; color: #8a93a8; }
.degrau span { display: flex; flex-direction: column; align-items: center; text-align: center; color: #8a93a8; }
.degrau span svg { font-size: 1.4em; }
.degrau small { font-weight: 800; font-size: .62em; line-height: 1.1; }
.degrau.feito { background: linear-gradient(#36456b, #283350); }
.degrau.feito > b, .degrau.feito span { color: var(--amarelo); }
.degrau.feito small { color: #e6ecff; }
.degrau.proximo { border-color: var(--amarelo); border-style: dashed; }
.lista-sub { font-family: var(--fonte-t); color: #c9d4ee; margin-top: .4em; }
.lista-sub small { font-family: var(--fonte); font-weight: 800; font-size: .7em; opacity: .7; margin-left: .3em; }
.item-lista.trancado { opacity: .6; }
.item-lista .tranca { display: flex; align-items: center; gap: .2em; color: #ffd98a; }
.item-lista .tranca svg { font-size: 1em; }
.detalhe .aviso-menu { display: flex; align-items: center; gap: .4em; }

/* campanha */
#tela-campanha { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgba(18,23,37,.94); padding: max(.5em, env(safe-area-inset-top)) max(.8em, env(safe-area-inset-right)) max(.5em, env(safe-area-inset-bottom)) max(.8em, env(safe-area-inset-left)); gap: .6em; font-size: clamp(11px, 1.5vw, 16px); }
.camp-sub { flex: 1; font-weight: 800; color: #c9d4ee; font-size: .9em; }
#camp-corpo { flex: 1; overflow-y: auto; touch-action: pan-y; min-height: 0; padding: .2em; }
.fases { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: .7em; }
.fase { position: relative; display: flex; flex-direction: column; gap: .35em; padding: .8em .8em .7em; border-radius: 1em; border: 4px solid #10141f; background: linear-gradient(#36456b, #232c45); box-shadow: 0 5px 0 #10141f; min-height: 11em; overflow: hidden; }
.fase.tema-cidade { background: linear-gradient(160deg, #4f8fe0 0%, #2a3f6a 60%); }
.fase.tema-porto { background: linear-gradient(160deg, #1f9a9a 0%, #1d3a5a 60%); }
.fase.tema-feira { background: linear-gradient(160deg, #e2482f 0%, #4a2a5a 60%); }
#camp-dev { margin-left: auto; }
.bt-compra.bt-fase-dev { background: #5a3fb0; color: #e2d9ff; border: 2px dashed #b9a6ff; }
.fase.tema-estadio { background: linear-gradient(160deg, #5cb045 0%, #2f7fe0 50%, #e0403a 100%); }
.fase.tema-parque { background: linear-gradient(160deg, #ec407a 0%, #8e24aa 45%, #1e3a8a 100%); }
.fase.tema-industrial { background: linear-gradient(160deg, #f2c230 0%, #5f6a73 50%, #22252b 100%); }
.fase.tema-patio { background: linear-gradient(160deg, #c8762a 0%, #4a3a30 55%, #22252b 100%); }
.fase.tema-orla { background: linear-gradient(160deg, #22b4c8 0%, #c98a3a 55%, #3a2a4a 100%); }
.fase.tema-morro { background: linear-gradient(160deg, #e07a3a 0%, #5a2f3a 60%); }
.fase.trancada { filter: grayscale(.6) brightness(.75); }
.fase.embreve { background: repeating-linear-gradient(135deg, #252c40 0 12px, #2a3248 12px 24px); opacity: .75; }
.fase.proxima { border-color: var(--amarelo); }
.fase-num { position: absolute; right: .3em; top: -.15em; font-family: var(--fonte-t); font-size: 3.6em; color: rgba(255,255,255,.18); }
.fase h3 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.45em; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.fase p { margin: 0; font-weight: 700; color: #dfe6f7; font-size: .88em; line-height: 1.3; flex: 1; }
.fase-info { display: flex; gap: .4em; flex-wrap: wrap; }
.fase-info span { display: inline-flex; align-items: center; gap: .2em; background: rgba(16,20,31,.6); border-radius: .5em; padding: .1em .5em; font-weight: 800; font-size: .8em; }
.selo-fase { align-self: flex-start; display: inline-flex; align-items: center; gap: .3em; background: #10141f; color: #c9d4ee; border-radius: 1em; padding: .15em .7em; font-weight: 900; font-size: .8em; }
.selo-fase.feita { color: var(--amarelo); }
.selo-fase.proxima { background: var(--amarelo); color: #3b2a00; }

/* sorteio da arena */
#sorteio { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; background: radial-gradient(rgba(27,34,51,.9), rgba(10,14,24,.97)); padding: 1em; }
.sorteio-titulo { font-family: var(--fonte-t); font-size: clamp(22px, 4vw, 40px); color: var(--amarelo); text-shadow: var(--contorno); }
.sorteio-janela { position: relative; width: min(96vw, 900px); height: 170px; overflow: hidden; border-radius: 1em; border: 4px solid #10141f; background: #161c2c; box-shadow: inset 0 0 40px rgba(0,0,0,.6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.sorteio-fita { position: absolute; top: 12px; left: 0; display: flex; gap: 10px; will-change: transform; }
.arena-carta { width: 220px; flex: none; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 8px; border-radius: .8em; border: 3px solid #10141f; background: linear-gradient(#36456b, #232c45); transition: transform .3s, box-shadow .3s; }
.arena-carta.tema-porto { background: linear-gradient(#1f8a8a, #1d3a5a); }
.arena-carta.tema-feira { background: linear-gradient(#d84a30, #4a2a5a); }
.arena-carta.tema-estadio { background: linear-gradient(#4f9e3a, #1d3a5a); }
.arena-carta.tema-parque { background: linear-gradient(#e0408a, #2a2a7a); }
.arena-carta.tema-industrial { background: linear-gradient(#d8a820, #2a2f36); }
.arena-carta.tema-patio { background: linear-gradient(#b8662a, #2a2622); }
.arena-carta.tema-orla { background: linear-gradient(#22a4c0, #1d3a5a); }
.arena-carta.tema-morro { background: linear-gradient(#d0703a, #5a2f3a); }
.arena-carta.tema-cidade { background: linear-gradient(#4f8fe0, #2a3f6a); }
.arena-carta canvas { width: 200px; height: 90px; border-radius: .4em; border: 2px solid #10141f; display: block; }
.arena-carta b { font-family: var(--fonte-t); font-weight: 400; font-size: 1.15em; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.arena-carta.escolhida { transform: scale(1.06); box-shadow: 0 0 0 4px var(--amarelo), 0 0 30px rgba(255,210,63,.6); }
.sorteio-seta { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--amarelo); box-shadow: 0 0 12px rgba(255,210,63,.8); }
.sorteio-seta::before, .sorteio-seta::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 10px solid transparent; }
.sorteio-seta::before { top: 0; border-top-color: var(--amarelo); }
.sorteio-seta::after { bottom: 0; border-bottom-color: var(--amarelo); }
.sorteio-resultado { display: flex; flex-direction: column; align-items: center; gap: .2em; min-height: 4em; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; text-align: center; }
.sorteio-resultado.mostra { opacity: 1; transform: none; }
.sorteio-resultado b { font-family: var(--fonte-t); font-weight: 400; font-size: clamp(26px, 5vw, 52px); text-shadow: var(--contorno); }
.sorteio-resultado span { font-weight: 800; color: #c9d4ee; }
@media (max-height: 420px) { .sorteio-janela { height: 150px; } #sorteio { gap: .5em; } }

/* reparo de torre (Mecânico Tião) */
.bt-compra.azul { background: linear-gradient(#6ab6ff, var(--azul)); color: #fff; }
.rot-reparo { display: none; align-items: center; gap: 3px; margin-top: 2px; background: rgba(16,20,31,.8); border-radius: 6px; padding: 1px 5px; }
.rot-reparo svg { width: 11px; height: 11px; color: #7be38f; animation: girarChave .6s infinite alternate ease-in-out; }
.rot-reparo-barra { width: 38px; height: 6px; background: #10141f; border-radius: 3px; overflow: hidden; }
.rot-reparo-barra i { display: block; height: 100%; background: linear-gradient(90deg, #7be38f, #4fd36b); transition: width .2s; }
.rot-reparo span { font-family: var(--fonte); font-weight: 900; font-size: 9px; color: #c8ffd2; min-width: 22px; }
.rot-reparo.pausado svg { animation: none; color: #ffcb2e; }
.rot-reparo.pausado span { color: #ffcb2e; }
@keyframes girarChave { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }

/* aba Acessórios */
.acessorios { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: .7em; margin: .5em 0; }
.acess { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; padding: .8em; border-radius: 1em; border: 4px solid #10141f; background: linear-gradient(#2f3a5a, #252e48); box-shadow: 0 4px 0 #10141f; }
.acess.equipado { border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(255,210,63,.25), 0 4px 0 #10141f; }
.acess.trancado { filter: grayscale(.5) brightness(.8); }
.acess-ico { width: 3em; height: 3em; border-radius: .8em; background: #10141f; display: flex; align-items: center; justify-content: center; }
.acess-ico svg { font-size: 1.9em; color: var(--amarelo); }
.acess h3 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.25em; }
.acess p { margin: 0; font-weight: 700; color: #bcc6e0; font-size: .88em; line-height: 1.3; flex: 1; }
.acess .bt-compra { align-self: stretch; }

/* ---------- aba Base (QG e soldados) ---------- */
.sub-abas { display: flex; gap: .4em; margin-bottom: .6em; }
.sub-abas button { display: flex; align-items: center; gap: .4em; padding: .4em 1em; border-radius: .7em; border: 3px solid #10141f; background: #283350; color: #c9d4ee; font-family: var(--fonte-t); font-size: 1.05em; }
.sub-abas button svg { font-size: 1.3em; color: #93a2c8; }
.sub-abas button.sel { background: #34416a; color: #fff; border-color: var(--amarelo); }
.sub-abas button.sel svg { color: var(--amarelo); }
.lista-titulo { font-weight: 900; font-size: .78em; color: #93a2c8; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .1em .3em; }
.item-lista .ok-equip { color: var(--verde); }
.item-lista .preco { display: flex; align-items: center; gap: .15em; color: #ffd98a; }
.item-lista .preco svg { font-size: 1.3em; }
.item-lista.a-comprar > svg { color: #8a93a8; }
.item-lista .mini-niv { font-style: normal; font-family: var(--fonte); font-weight: 900; font-size: .7em; color: var(--verde); }
.detalhe h3 .apelido { font-family: var(--fonte); font-weight: 800; font-size: .48em; color: #93a2c8; }
.vitrine-larga { grid-template-columns: minmax(0, 300px) 1fr; }
.vitrine-larga .tela { background: radial-gradient(circle at 50% 75%, #3c4a6e, #161c2c 78%); }
.info-modo { display: flex; flex-direction: column; gap: .45em; min-width: 0; }
.info-modo > p { margin: 0; font-weight: 700; color: #bcc6e0; }
.ponto-forte { display: inline-flex; align-self: flex-start; align-items: center; gap: .35em; background: #10141f; border-radius: .6em; padding: .2em .6em; font-weight: 900; font-size: .85em; color: var(--amarelo); }
.como-age { background: #10141f; border-radius: .7em; padding: .45em .65em; font-weight: 700; color: #bcc6e0; font-size: .88em; line-height: 1.35; }
.como-age b { color: var(--amarelo); display: flex; align-items: center; gap: .3em; margin-bottom: .1em; }
.coluna-onda { display: flex; align-items: center; gap: .5em; font-weight: 800; color: #93a2c8; font-size: .8em; }
.coluna-onda > div { display: flex; gap: .25em; flex: 1; justify-content: center; background: rgba(16,20,31,.6); border-radius: .6em; padding: .25em .4em; }
.coluna-onda span { display: flex; width: 1.9em; height: 1.9em; align-items: center; justify-content: center; border-radius: .45em; color: #c9d4ee; }
.coluna-onda span svg { font-size: 1.35em; }
.coluna-onda span.fora { opacity: .3; }
.coluna-onda span.sel { background: var(--amarelo); color: #1b2233; opacity: 1; }
.coluna-onda .frente { color: #ff8a80; }
.barra-stat .trilho-s { position: relative; }
.barra-stat .trilho-s i.extra { position: absolute; top: 0; background: linear-gradient(90deg, #ffe066, var(--amarelo)); border-radius: 0 .4em .4em 0; }
.ruas { display: flex; align-items: center; gap: .35em; font-weight: 800; color: #93a2c8; font-size: .9em; }
.ruas button { padding: .3em .8em; border-radius: .55em; border: 2px solid #10141f; background: #2a3450; color: #c9d4ee; font-weight: 900; }
.ruas button.sel { background: var(--amarelo); color: #1b2233; }
.sec-titulo.escalacao { flex-wrap: wrap; }
.escalacao .vaga.fixa { opacity: .8; }
.escalacao button.vaga { cursor: pointer; }
.escalacao .sep { width: 2px; height: 2em; background: #3a4560; border-radius: 1px; margin: 0 .2em; }
.escalacao small { margin-left: .3em; }
@media (max-width: 760px) { .vitrine-larga { grid-template-columns: 1fr; } .vitrine-larga .tela { max-width: 300px; margin: auto; } }
.info-modo .barra-stat { grid-template-columns: 6.2em 1fr 4.2em; }
.coluna-onda small { white-space: nowrap; }
.barra-stat .trilho-s i:has(+ i.extra) { border-radius: .4em 0 0 .4em; }

/* ---------- cartões de personagem (11/10/2026: refeitos — barras largas, texto em largura total) ---------- */
.personagens { grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); gap: 1em; align-items: stretch; }
.pers { display: grid; grid-template-columns: 7.2em 1fr; grid-template-areas: "ret id" "desc desc" "stats stats" "rod rod"; grid-template-rows: auto auto auto 1fr; align-items: stretch; gap: .65em .85em; padding: .8em .85em .85em; border: 3px solid #10141f; border-radius: 1.15em;
  background: linear-gradient(165deg, #35426a 0%, #283255 45%, #1f2742 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.03), 0 6px 0 #10141f, 0 10px 22px rgba(0,0,0,.28); }
.pers.sel { border-color: var(--amarelo); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 3px rgba(255,210,63,.22), 0 6px 0 #10141f, 0 0 26px rgba(255,210,63,.18); }
.pers.trancado { background: linear-gradient(165deg, #2c3550 0%, #232a40 100%); }
.pers-retrato { grid-area: ret; align-self: start; } .pers-id { grid-area: id; } .pers-desc { grid-area: desc; } .pers-stats { grid-area: stats; } .pers-rodape { grid-area: rod; align-self: end; }
.pers-retrato { position: relative; border-radius: .85em; border: 3px solid #10141f; overflow: hidden;
  background: radial-gradient(ellipse 70% 22% at 50% 88%, rgba(0,0,0,.45), transparent 70%), radial-gradient(circle at 50% 38%, #5a6da0 0%, #2f3b5e 55%, #1a2034 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
.pers .pers-retrato canvas { width: 100%; height: auto; aspect-ratio: 220 / 280; background: none; border-radius: 0; display: block; }
.pers.sel .pers-retrato { border-color: #b8901e; }
.pers.trancado .pers-retrato canvas { filter: grayscale(.75) brightness(.55); }
.em-campo { position: absolute; top: .45em; left: 50%; transform: translateX(-50%); background: var(--amarelo); color: #2a1f00; font-family: var(--fonte-t); font-size: .62em; letter-spacing: .08em; padding: .1em .6em; border-radius: .5em; box-shadow: 0 2px 0 #10141f; white-space: nowrap; }
.pers .selo-preco { bottom: .45em; font-size: .9em; }
.pers-id { display: flex; flex-direction: column; min-width: 0; gap: .2em; }
.pers-linha1 { display: flex; align-items: center; gap: .4em; }
.pers .papel { flex: 1; min-width: 0; padding: 0; font-size: .78em; letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pers .bt-caminho { position: static; flex: none; font-size: .74em; padding: .2em .55em; }
.pers h3 { font-size: 1.65em; line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pers .nivel-pers { grid-template-columns: auto 1fr; margin: .3em 0 0; }
.pers .nivel-pers .trilho-s { height: .62em; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.pers-xp { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: auto; font-weight: 800; font-size: .75em; color: #93a2c8; }
.estrelas-pers { display: flex; gap: .12em; font-size: 1.3em; }
.estrelas-pers span { color: #3a3f5c; display: flex; }
.estrelas-pers span.on { color: #d7a6ff; filter: drop-shadow(0 0 4px rgba(215,166,255,.6)); }
.estrelas-pers svg { width: 1.15em; height: 1.15em; }
.pers p.pers-desc { margin: 0; font-weight: 700; color: #c3cce4; font-size: .88em; line-height: 1.35; min-height: 2.7em; }
.pers-stats { display: flex; flex-direction: column; gap: .42em; background: rgba(12,16,28,.45); border-radius: .8em; padding: .55em .7em; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.stat-pers { display: grid; grid-template-columns: 6.1em 1fr 3.4em; align-items: center; gap: .6em; }
.stat-pers .rot-stat { font-weight: 800; font-size: .84em; color: #c9d4ee; }
.stat-pers b { font-family: var(--fonte-t); font-weight: 400; font-size: 1.02em; text-align: right; color: #fff; }
.trilho-p { position: relative; height: .78em; border-radius: .18em; background: #0d111d; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.trilho-p i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: .18em; background: linear-gradient(180deg, #8ff0a0 0%, #4fd36b 55%, #36b455 100%); }
.trilho-p i:has(+ i.extra) { border-radius: .18em 0 0 .18em; }
.trilho-p i.extra { background: linear-gradient(180deg, #ffe680 0%, var(--amarelo) 55%, #e0a91a 100%); border-radius: 0 .18em .18em 0; }
.trilho-p u { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: 0; background: #0d111d; opacity: .6; pointer-events: none; }
.pers-rodape { display: grid; grid-template-columns: 1fr 9em; gap: .6em; height: auto; min-height: 3.8em; margin-top: auto; }
.pers-rodape .vantagem { background: linear-gradient(90deg, rgba(255,210,63,.14), rgba(255,210,63,.05)); border: 2px solid rgba(255,210,63,.45); border-radius: .7em; padding: .4em .6em; }
.pers-rodape .bt-compra { font-size: 1.05em; }

/* celular deitado (tela baixa): descrição sobe para o lado do retrato, tudo mais compacto (pedido do Saulo, 11/10/2026) */
@media (max-height: 560px) {
  #tela-prep { gap: .35em; padding-bottom: max(.35em, env(safe-area-inset-bottom)); }
  .personagens { gap: .6em; grid-template-columns: repeat(auto-fill, minmax(26em, 1fr)); }
  .pers { grid-template-columns: 6.6em 1fr; grid-template-areas: "ret id" "ret desc" "stats stats" "rod rod"; grid-template-rows: auto 1fr auto auto; gap: .35em .7em; padding: .55em .65em .6em; border-radius: .95em; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 #10141f; }
  .pers.sel { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px rgba(255,210,63,.22), 0 4px 0 #10141f; }
  .pers .pers-retrato canvas { width: 100%; height: auto; }
  .pers h3 { font-size: 1.35em; }
  .pers .nivel-pers { margin-top: .1em; }
  .pers-xp { margin-top: .1em; }
  .pers p.pers-desc { font-size: .88em; line-height: 1.3; min-height: 0; align-self: end; }
  .pers-stats { gap: .28em; padding: .4em .6em; }
  .stat-pers { grid-template-columns: 5.6em 1fr 3em; gap: .5em; }
  .trilho-p { height: .66em; }
  .pers-rodape { grid-template-columns: 1fr 8em; min-height: 0; gap: .5em; }
  .pers-rodape .vantagem { padding: .3em .55em; font-size: .8em; }
  .pers-rodape .bt-compra { font-size: .95em; padding: .35em .4em; }
  .prep-rodape { gap: .5em; }
  #prep-resumo .resumo-item { padding: .15em .5em; }
  #prep-pronto { font-size: 1.05em; padding: .3em 1.4em; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 #10141f; }
}

/* ---------- painéis de detalhe (Armamento, Séries, Torres, Base) refeitos (11/10/2026) ----------
   Lista e detalhe rolam cada um por si: o item escolhido aparece sempre sem arrastar a tela. */
#prep-corpo { display: flex; flex-direction: column; }
#prep-corpo > .duas-colunas { flex: 1; min-height: 0; align-items: stretch; grid-template-columns: minmax(11em, 15em) 1fr; }
.duas-colunas > .lista-itens, .duas-colunas > .detalhe { min-height: 0; overflow-y: auto; touch-action: pan-y; }
.duas-colunas > .lista-itens { padding: 2px 4px 6px 2px; }
.detalhe { gap: .6em; padding: .75em .85em .85em; border: 3px solid #10141f; border-radius: 1.15em;
  background: linear-gradient(165deg, #35426a 0%, #283255 45%, #1f2742 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 0 #10141f, 0 10px 22px rgba(0,0,0,.28); }
.det-topo { display: grid; grid-template-columns: auto 1fr auto; gap: .7em; align-items: center; }
.det-ico { width: 2.6em; height: 2.6em; border-radius: .8em; display: flex; align-items: center; justify-content: center; border: 3px solid #10141f;
  background: radial-gradient(circle at 35% 30%, #4d5f92, #233050); box-shadow: inset 0 2px 0 rgba(255,255,255,.15); }
.det-ico svg { font-size: 1.55em; color: var(--amarelo); filter: drop-shadow(0 2px 0 #10141f); }
.det-tit { min-width: 0; }
.det-tit h3 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.5em; line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.det-tit small { display: block; margin-top: .15em; font-weight: 700; font-size: .82em; color: #b7c2de; line-height: 1.3; }
.det-acao .bt-compra { white-space: nowrap; padding: .45em 1em; font-size: 1em; }
.selo-tranca { display: inline-flex; align-items: center; gap: .3em; background: #10141f; color: #ffd98a; border: 2px solid rgba(255,217,138,.5); border-radius: .6em; padding: .25em .65em; font-weight: 900; font-size: .85em; white-space: nowrap; }
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr)); gap: .4em; }
.ficha { background: rgba(12,16,28,.5); border-radius: .65em; padding: .3em .6em .35em; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); min-width: 0; }
.ficha small { display: block; font-weight: 900; font-size: .64em; letter-spacing: .07em; text-transform: uppercase; color: #8f9cc0; }
.ficha b { display: block; font-family: var(--fonte-t); font-weight: 400; font-size: 1.05em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.melhorias { display: flex; flex-direction: column; gap: .35em; }
.mel-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; font-family: var(--fonte-t); font-size: 1em; color: #c9d4ee; }
.mel-titulo small { font-family: var(--fonte); font-weight: 800; font-size: .72em; color: #8f9cc0; }
.melhoria { grid-template-columns: minmax(6.5em, 9em) auto 1fr 5.6em; gap: .7em; padding: .4em .5em .4em .7em; border-radius: .7em; background: rgba(12,16,28,.45); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.melhoria .nome-m { font-size: .98em; line-height: 1.1; }
.melhoria .niveis { display: flex; gap: .2em; }
.melhoria .niveis i { width: .75em; height: .75em; border-radius: .2em; background: #0d111d; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.melhoria .niveis i.on { background: linear-gradient(180deg, #8ff0a0, #36b455); box-shadow: none; }
.melhoria .valores { font-size: .84em; line-height: 1.25; }
.melhoria .bt-compra { min-width: 0; padding: .35em .4em; }
.det-corpo { display: grid; grid-template-columns: 11em 1fr; gap: .8em; align-items: start; }
.det-vit { position: relative; display: flex; flex-direction: column; gap: .4em; }
.det-vit canvas { width: 100%; height: auto; display: block; border-radius: .85em; border: 3px solid #10141f;
  background: radial-gradient(ellipse 70% 20% at 50% 88%, rgba(0,0,0,.4), transparent 70%), radial-gradient(circle at 50% 40%, #4a5b8a, #1a2034 80%); }
.det-vit .niveis-torre { position: static; }
.det-vit.larga { grid-column: auto; }
.det-corpo:has(.det-vit.larga) { grid-template-columns: 13em 1fr; }
.det-vit .ponto-forte { align-self: stretch; justify-content: center; text-align: center; font-size: .78em; }
.det-col { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.det-col .efeito-torre { font-size: .85em; }
.det-col .como-age { font-size: .82em; }
.det-col .pers-stats { padding: .45em .65em; gap: .3em; }
.det-vit .coluna-onda > div { padding: .2em .25em; gap: .1em; }
.det-vit .coluna-onda span { width: 1.5em; height: 1.5em; }
.det-vit .coluna-onda span svg { font-size: 1.1em; }
.det-vit .ruas { flex-wrap: wrap; justify-content: center; gap: .25em; }
.det-vit .ruas button { padding: .2em .55em; font-size: .85em; }
.det-vit .ruas span { font-size: .85em; }
/* celular deitado */
@media (max-height: 560px) {
  #prep-corpo > .duas-colunas { grid-template-columns: 13em 1fr; gap: .5em; }
  .item-lista { padding: .3em .5em; font-size: .95em; gap: .4em; border-width: 2px; border-radius: .6em; }
  .lista-itens { gap: .25em; }
  .detalhe { padding: .5em .65em .6em; gap: .4em; border-radius: .95em; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 #10141f; }
  .det-ico { width: 2.2em; height: 2.2em; border-radius: .65em; }
  .det-tit h3 { font-size: 1.25em; }
  .det-tit small { font-size: .76em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .melhoria { padding: .28em .45em .28em .6em; gap: .55em; grid-template-columns: minmax(5.5em, 7.5em) auto 1fr 5em; }
  .melhoria .nome-m small { display: none; }
  .melhoria .bt-compra { padding: .25em .35em; }
  .melhorias { gap: .25em; }
  .ficha { padding: .2em .5em .25em; }
  .det-corpo { grid-template-columns: 8.5em 1fr; gap: .6em; }
  .det-corpo:has(.det-vit.larga) { grid-template-columns: 10em 1fr; }
  .sec-titulo.vagas { margin-bottom: .2em; }
  .sec-titulo.vagas .vaga { width: 2.1em; height: 2.1em; }
  .sub-abas { margin-bottom: .3em; } .sub-abas button { padding: .25em .8em; font-size: .95em; }
}
@media (max-aspect-ratio: 1/1) { #prep-corpo > .duas-colunas { grid-template-columns: 1fr; flex: none; } .duas-colunas > .lista-itens, .duas-colunas > .detalhe { overflow: visible; } .det-corpo { grid-template-columns: 1fr; } }
.duas-colunas .item-lista span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.det-vit .niveis-torre { display: flex; gap: .25em; justify-content: center; }
.det-vit .niveis-torre button { flex: 1; min-width: 0; white-space: nowrap; padding: .15em .2em; font-size: .8em; }
@media (max-height: 560px) {
  .melhoria { padding-top: .18em; padding-bottom: .18em; }
  .melhoria .bt-compra { padding: .12em .3em; font-size: .92em; }
  .melhoria .bt-compra svg { font-size: 1.15em; }
  .melhoria .nome-m { font-size: .92em; }
  .fichas { gap: .3em; }
}
/* barra de rolagem discreta nas colunas */
.duas-colunas > .lista-itens, .duas-colunas > .detalhe { scrollbar-width: thin; scrollbar-color: #4a5578 transparent; }
/* aba Base > Soldados: escalação na linha das sub-abas e barras em duas colunas */
.sub-abas { flex-wrap: wrap; align-items: center; }
.sub-abas .escalacao { margin: 0 0 0 auto; font-size: .9em; }
.pers-stats.duas { display: grid; grid-template-columns: 1fr 1fr; gap: .3em 1em; }
.pers-stats.duas .stat-pers { grid-template-columns: 5em 1fr 2.6em; gap: .4em; }
@media (max-height: 560px) { .sub-abas .escalacao small { display: none; } .det-col .como-age { line-height: 1.25; padding: .3em .55em; } }
@media (max-height: 560px) { .det-col .mel-titulo { display: none; } }
@media (max-height: 560px) { .detalhe { padding-bottom: .45em; } }
.duas-colunas > .lista-itens, .duas-colunas > .detalhe { align-self: start; max-height: 100%; }
/* 15 níveis de melhoria: quadradinhos menores, em grupos de 5 */
.melhoria .niveis { gap: .14em; flex-wrap: nowrap; }
.melhoria .niveis i { width: .52em; height: .78em; border-radius: .14em; }
.melhoria .niveis i:nth-child(5n):not(:last-child) { margin-right: .32em; }
.det-vit .niveis-torre button { padding: .15em 0; }

/* ---------- séries: nível visual 1–3 (11/10/2026) ---------- */
.nv-serie { display: inline-flex; align-items: center; gap: .1em; margin-left: .45em; padding: .08em .45em .1em; border-radius: .5em; vertical-align: middle;
  font-family: var(--fonte); font-weight: 900; font-size: .5em; letter-spacing: .02em; text-shadow: none; border: 2px solid #10141f;
  background: #2a3450; color: #c9d4ee; }
.nv-serie svg { width: 1em; height: 1em; }
.nv-serie.nv2 { background: linear-gradient(180deg, #ffb35a, #e0701e); color: #1d1206; }
.nv-serie.nv3 { background: linear-gradient(180deg, #ff6a50, #b81d1d); color: #fff; box-shadow: 0 0 .6em rgba(255,70,40,.45); }
.item-lista.nv2 > svg { color: #ffa040; }
.item-lista.nv3 > svg { color: #ff5a3a; filter: drop-shadow(0 0 .25em rgba(255,70,40,.6)); }
/* blocos das melhorias de série: cada grupo de 5 com a cor do nível que ele libera */
.melhorias.grupos .niveis i.on:nth-child(n+6) { background: linear-gradient(180deg, #ffc070, #e0701e); }
.melhorias.grupos .niveis i.on:nth-child(n+11) { background: linear-gradient(180deg, #ff7a5c, #c0201c); }
.legenda-nv { text-align: center; font-weight: 900; font-size: .72em; color: #8fe0a0; }
.legenda-nv.futuro { color: #ffb35a; }
.niveis-torre button.futuro { opacity: .7; }
.niveis-torre button svg { width: .85em; height: .85em; margin-right: .15em; vertical-align: -.05em; }
.bt-compra.sobe-nv { position: relative; }
.selo-sobe { position: absolute; top: -.7em; right: -.35em; padding: .05em .35em; border-radius: .45em; border: 2px solid #10141f; font-size: .62em; font-weight: 900; line-height: 1.2;
  background: linear-gradient(180deg, #ffb35a, #e0701e); color: #1d1206; animation: selo-pula 1.2s ease-in-out infinite; }
.selo-sobe.nv3 { background: linear-gradient(180deg, #ff6a50, #b81d1d); color: #fff; }
@keyframes selo-pula { 50% { transform: translateY(-.15em); } }

/* ---------- prestígio: estrelas clicáveis mostram o visual de cada prestígio (11/10/2026) ---------- */
.estrelas-pers button { display: flex; padding: 0; border: 0; background: none; color: #3a3f5c; cursor: pointer; border-radius: .3em; transition: transform .12s; }
.estrelas-pers button:hover { transform: scale(1.18); color: #6b5a8a; }
.estrelas-pers button.on { color: #d7a6ff; filter: drop-shadow(0 0 4px rgba(215,166,255,.6)); }
.estrelas-pers button.ver { outline: 2px solid #d7a6ff; outline-offset: 1px; color: #f0dcff; }
.previa-prest { position: absolute; top: .45em; left: 50%; transform: translateX(-50%); background: #5a2f8a; color: #f0dcff; font-family: var(--fonte-t);
  font-size: .56em; letter-spacing: .06em; padding: .1em .55em; border-radius: .5em; box-shadow: 0 2px 0 #10141f; white-space: nowrap; }
.em-campo + .previa-prest { top: 1.9em; }
.config-conta a { color: #8cc8ff; }
.bt-google-app { display: inline-flex; align-items: center; gap: .6em; padding: .55em 1.1em; border-radius: 999px; border: 1px solid #5f6368; background: #fff; color: #1f1f1f; font: 600 .95em system-ui, sans-serif; cursor: pointer; }
.bt-google-app .g { font: 700 1.1em Arial, sans-serif; color: #4285f4; }