/* ============================================================================================================
   Interface de laca, papel, tinta e selo vermelho, no lugar do painel de aplicativo em modo escuro.
   (O tratamento de "estampa" aplicado à arte em 2026-10-02 foi desfeito no mesmo dia: tirava nitidez da pintura. A
   arte fica na resolução original; daqui vale só a interface.) Carta de cor:
     sumi #1e1b2c · ai #26345e · hanada #54688e · nezumi #96a0ac · washi #eee5d0 · shu #cb422c · kin #e2aa4e
     sakura #d696a0 · koke #62764e · murasaki #70588c
   Regras: canto quase reto (o arredondado de aplicativo saiu de todas as folhas de estilo); uma só cor de ação (o
   vermelhão do selo); ouro só para o que é valioso ou está escolhido; raridade em pigmento, como selo, não em pílula.
   Carregado por último: só o que muda de língua. Nada aqui mexe em posição ou tamanho.
   ============================================================================================================ */
:root{
  --bg0:#100f18; --bg1:#16141f; --bg2:#1d1a29; --bg3:#262235;
  --shu:#cb422c; --shu2:#a5321f; --shu-hi:#e0603f; --shu-lo:#872814; --sakura:#cb422c; --red:#d8553c;
  --gold:#e2aa4e; --gold2:#b98434; --gold-hi:#f2cf86; --gold-lo:#8a6426;
  --washi:#eee5d0; --text:#eee5d0; --ink:#1e1b2c;
  --cyan:#8fb0c6; --green:#8fb37a; --violet:#a98bd0;
  /* raridade em pigmento */
  --common:#a3acb8; --rare:#7f9fd0; --epic:#a98bd0; --legendary:#e2aa4e; --mythic:#d8553c; --set:#8fb37a;
}

/* ---- selos: raridade, classe, elemento, equipe. Retângulo de tinta com a letra vazada no papel, como carimbo. ---- */
.rar-tag,.el-tag,.cls-tag,.rar-chip,.tier-tag,.adv-flag,.collection-card .badge,.collection-card .in-party{border-radius:2px!important}
.rar-tag{color:var(--c);background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent)}
.collection-card .badge{color:var(--bg0);font-weight:800}
.collection-card .in-party{color:var(--washi);background:var(--shu);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* raridade do herói é contorno, como .rar-tag da ficha: o selo chapado fica para classe e elemento (decidido na tela da Equipe, único lugar do .rar-chip) */
.rar-chip,.rar-chip[class*="r-"]{--rc:var(--common);color:var(--rc);background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 65%,transparent)}
.rar-chip.r-rare{--rc:var(--rare)}.rar-chip.r-epic{--rc:var(--epic)}.rar-chip.r-legendary{--rc:var(--legendary)}
/* filtro de raridade e abas: tiras de papel, não pílulas */
.rar-pill,.modal-tabs button,.lobby-go em,.zone-chip .zone-meta span,.hud-top .zone-chip.in-top .zone-meta span,.zone-chip.in-head .zone-meta span{border-radius:3px!important}
.rar-pill.active{color:var(--bg0)}

/* ---- ação: uma só cor de comando, o vermelhão do selo, chapado (sem degradê de aplicativo) ---- */
.action{border-radius:3px}
.action.primary{color:#1d1206;background:var(--gold);border-color:var(--gold-lo);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.35)}
.action.primary:hover:not(:disabled){background:var(--gold-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 rgba(0,0,0,.35)}
.action.pink,.action.red{color:var(--washi);background:var(--shu);border-color:var(--shu-lo);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 rgba(0,0,0,.35)}
.action.pink:hover:not(:disabled),.action.red:hover:not(:disabled){background:var(--shu-hi)}

/* ---- cartão de herói: papel escuro com filete; quem está na equipe ganha o canto de selo, não uma borda verde ---- */
.collection-card{border-radius:3px!important}
.collection-card.active{border-color:var(--shu)!important;box-shadow:inset 0 0 0 1px rgba(203,66,44,.35)!important}

/* ---- campos: sem controle nativo do navegador ---- */
select{appearance:none;-webkit-appearance:none;padding-right:26px!important;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0 4px 0 0;border-radius:2px;border:1px solid rgba(238,229,208,.4);background:rgba(0,0,0,.3);vertical-align:-3px;cursor:pointer;position:relative}
input[type="checkbox"]:checked{background:var(--shu);border-color:var(--shu-lo)}
input[type="checkbox"]:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--washi);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type="checkbox"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.collection-card.active{outline:1px solid var(--shu)!important;outline-offset:-1px}

/* ---- barras e contadores: tinta, não verde-menta de aplicativo ---- */
.bh-hp{border-radius:2px!important}
.bh-hp .fill{background:#86a86e;border-radius:1px}
.bh-hp.low .fill{background:var(--shu)}
.bh-hp .sh{background:var(--hanada, #54688e)}
/* contadores viram selo quadrado vermelho (hanko), sem pulsar */
.nav em,body .side-nav .nav em,.sp-badge,body .nav-badge,body #quest-badge{border-radius:2px!important;background:var(--shu)!important;color:var(--washi)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)!important;animation:none!important}

/* ---- superfícies: fio de tinta e filete, sem brilho de vidro ---- */
.modal-panel{border-radius:4px!important;box-shadow:0 0 0 1px rgba(226,170,78,.22),0 24px 60px rgba(0,0,0,.6)!important}

/* ---- Enciclopédia ---- */
.wr-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:3px;background:rgba(238,229,208,.06);border:1px solid rgba(238,229,208,.14)}
.wr-ico .pi{width:26px;height:26px}
.wiki-hub{display:flex;flex-direction:column;gap:14px}
.wiki-hub h4{margin:0 0 8px;font:700 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wiki-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.wiki-hub-card,.wiki-hit{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:3px;background:rgba(238,229,208,.035);border:1px solid var(--line2);border-left:3px solid var(--shu);color:var(--text);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.wiki-hub-card:hover,.wiki-hit:hover{background:rgba(238,229,208,.07);border-color:rgba(226,170,78,.5);border-left-color:var(--gold)}
.wiki-hub-card>span:last-child,.wiki-hit>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.wiki-hub-card b,.wiki-hit b{font:700 15px/1.25 var(--display)}
.wiki-hub-card small{font:500 12px/1.4 var(--ui);color:var(--muted)}
.wiki-hits{display:flex;flex-direction:column;gap:6px}
.wiki-hit small{font:700 10px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.wiki-hit>span:last-child>span{font:500 12.5px/1.5 var(--ui);color:var(--muted)}
.wiki-hit mark,.wiki-body mark{background:rgba(226,170,78,.28);color:var(--washi);border-radius:2px;padding:0 1px}
.wiki-count{margin:0;font:600 13px var(--ui);color:var(--muted)}
.wiki-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px;margin:4px 0 6px}
.wiki-rule{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:3px;background:rgba(238,229,208,.035);border:1px solid var(--line)}
.wiki-rule>div{min-width:0}
.wiki-rule b{font:700 14px var(--ui);color:var(--washi)}
.wiki-rule p{margin:3px 0 0!important;font-size:13px!important;line-height:1.55!important;color:var(--muted)}
.wiki-rule .action{margin-top:8px}
.wk-lv{font:700 10px var(--ui);font-style:normal;letter-spacing:.06em;color:var(--gold);margin-left:4px}
.wiki-toc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-radius:3px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.wiki-toc small{font:700 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-right:4px}
.wiki-toc button,.wiki-filter button{padding:4px 9px;border-radius:3px;border:1px solid var(--line2);background:rgba(238,229,208,.04);color:var(--muted);font:600 12px var(--ui);cursor:pointer;white-space:nowrap}
.wiki-toc button:hover,.wiki-filter button:hover{color:var(--washi);border-color:rgba(226,170,78,.5)}
.wiki-filter{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:3px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.wiki-filter>div{display:flex;flex-wrap:wrap;gap:5px}
.wiki-filter button.active{background:var(--gold);border-color:var(--gold-lo);color:#1d1206}
.wiki-filter small{font:600 12px var(--ui);color:var(--dim)}
.wk-skill{display:flex;align-items:flex-start;gap:8px}
.wk-skill .pk{flex:none;width:30px;height:30px;border-radius:3px;margin-top:1px}
.wk-skill>span{min-width:0}
.wiki-quarter{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:center;margin:16px 0 8px;padding:10px;border-radius:3px;border:1px solid var(--line2);background:rgba(0,0,0,.2)}
.wiki-quarter img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.wiki-quarter h4{margin:0 0 4px!important;padding:0!important;border:0!important}
.wiki-quarter p{margin:0!important}
.wiki-found{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;transition:outline-color 1.6s}
@media (max-width:700px){.wiki-rules{grid-template-columns:minmax(0,1fr)}.wiki-quarter{grid-template-columns:minmax(0,1fr)}.wiki-hub-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- diálogo: o cursor de "continuar" é um glifo, como em todo JRPG; só a última fala diz "fechar" ---- */
.dlg-body{position:relative;padding-right:26px}
.dlg-next{position:absolute;right:2px;bottom:2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.dlg-next::after{content:"";display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--gold);margin-left:6px;vertical-align:1px}
.dlg-next.last::after{display:none}

/* ============================================================================================================
   Revisão de 2026-10-02 com o plugin Mythverse: o que ainda falava "aplicativo" (pílula, vidro, brilho, degradê)
   passa para a língua da estampa. theme-game.css já desliga todo backdrop-filter; aqui entra só o que chegava à tela.
   ============================================================================================================ */

/* ---- grupo: pilulas-vidro ---- */
/* ---- topo e carteira: fichas retangulares de laca, não pílulas de aplicativo (o retrato redondo fica dentro da ficha) ---- */
.player-chip{border-radius:3px}
.res{border-radius:3px}
/* "13,2 mil" é mais largo que "13.2K": abaixo de 360 px a ficha cede ícone e respiro, nunca o número */
@media (max-width:360px){.res{gap:3px;padding:0 5px 0 2px}.res .pi{width:18px;height:18px}}
.stage-res{border-radius:3px;background:rgba(13,12,18,.86);border-color:var(--line2);backdrop-filter:none}

/* ---- seletor de herói (talentos): tira de papel; o escolhido continua marcado em ouro ---- */
.hero-pick{border-radius:3px}

/* ---- arena: o brasão de patente é um selo quadrado; a cor da patente fica na borda e na letra, sem brilho nem reflexo de esfera ---- */
.arena-crest{border-radius:4px;background:rgba(13,12,18,.86);box-shadow:0 0 0 4px rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.35)}

/* ---- mapa: medalhão redondo sobre plaqueta reta (como a tabuleta dos distritos); o marco bloqueado em repouso é só o anel do cadeado,
        e no celular todos viram ponto ---- */
.illustrated-map .map-pin{border-radius:3px}
.illustrated-map .map-pin.locked:hover,.illustrated-map .map-pin.locked.focus{border-radius:3px}
@media (max-width:900px){.illustrated-map .map-pin,.illustrated-map .map-pin.locked,.illustrated-map .map-pin.locked:hover,.illustrated-map .map-pin.locked.focus{border-radius:50%}}

/* ---- grupo: glow ---- */
/* ---- brilho (glow): onde ainda sobrava um halo de cor, entra sombra preta curta; "pronto" e "escolhido" se dizem por
   borda de ouro ou vermelhão, nunca por luz. ---- */
/* topo e entrada */
.player-avatar{box-shadow:0 2px 0 rgba(0,0,0,.35)}
.auth-card{box-shadow:0 0 0 1px rgba(226,170,78,.22),0 24px 60px rgba(0,0,0,.6)}
/* chefe em perigo: a moldura fica vermelha (fio duplo) e treme (o shake de styles.css:144 continua), sem halo. Precisa
   vencer body.in-combat .boss-panel (styles.css:1686 e theme-sumi.css:101), que engole a borda e a sombra do estado.
   A postura quebrada é fio claro. */
body.in-combat .boss-panel.danger,.boss-panel.danger{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red),0 8px 24px rgba(0,0,0,.25)}
.boss-break.broken{border-color:var(--gold-hi);box-shadow:0 0 0 1px rgba(242,207,134,.5)}
/* resultado: derrota em vermelhão sólido, como a vitória é ouro sólido */
.result-card.lose h2{color:var(--red);text-shadow:none}
.result-card.win h2{filter:none}
/* escolhido: a fatia escolhida é laca de ouro com relevo, como .action.primary; a vaga escolhida ganha fio de ouro por
   outline. O !important é para a vaga ocupada: theme-sumi.css:155 põe box-shadow:none!important em .formation-slot.filled */
.stage-btn.selected{color:#1d1206;border-color:var(--gold-lo);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.35)}
.formation-slot.selected{box-shadow:0 2px 0 rgba(0,0,0,.35)!important;outline:2px solid var(--gold);outline-offset:-2px}
/* contadores, avisos e cartas: o MVP guarda a profundidade do .loot-pop e ganha a moldura de ouro */
.pts-big.has{color:var(--washi);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.login-card.ready{border-color:var(--shu);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.card-pop.mvp{border-color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.4)}
/* ranking e guerra de guildas: a guerra ao vivo guarda a profundidade do .war-hero e ganha o fio vermelho */
.rk-pod.p1 .rk-lead{box-shadow:0 2px 0 rgba(0,0,0,.35)}
.war-score em{text-shadow:0 2px 0 rgba(0,0,0,.5)}
.war-hero.live{box-shadow:0 0 0 1px rgba(216,85,60,.55),0 16px 40px rgba(0,0,0,.35)}

/* ---- grupo: degrade-a ---- */
/* ---- ficha do herói: papel tingido de leve com o pigmento do herói e um filete à esquerda, no lugar do degradê ---- */
.hero-head{background:color-mix(in srgb,var(--hc,#fff) 7%,var(--surf,#16141e));box-shadow:inset 3px 0 0 var(--hc,var(--gold))}

/* ---- kit do herói: a ultimate (quando não há ícone pintado) é um selo de ouro chapado com a letra em tinta ---- */
.kit-ico.ult{background:var(--gold);color:var(--ink)}

/* ---- grupo: degrade-b ---- */
/* ---- cabeçalhos de seção: cartas, banco e armazém. Papel escuro chapado com filete; cada casa guarda só o seu pigmento ---- */
/* coleção de cartas: laca com grão de papel e o filete vermelho do selo (a .house-hero usa a pintura da vila e fica como está) */
.cards-hero{background:var(--grain),var(--bg1);border:1px solid var(--line2);border-left:3px solid var(--shu)}
/* Banco Kogane: laca de musgo (o koke da carta, escurecido), chapada; o risco de papel de arroz (90deg) é textura, não degradê */
.bank-hero{background:repeating-linear-gradient(90deg,rgba(226,170,78,.05) 0 1px,transparent 1px 22px),#222c18}
/* Armazém do Tanuki: madeira escura chapada (o kin da carta, quase apagado); as tábuas (0deg) continuam */
.storage-hero{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 26px),#2b1d13}

/* ---- aba "Cartas" da bolsa: texto solto em repouso e no hover, sem fio; ouro só quando escolhida (como as outras abas), com tinta escura legível ---- */
.inv-tabs button.cards-tab{color:var(--muted);border-color:transparent}
.inv-tabs button.cards-tab:hover:not(.active){color:var(--washi)}
.inv-tabs button.cards-tab.active{color:#1d1206;background:var(--gold)!important;border-color:var(--gold-lo)}

/* ---- álbum de cartas: marco alcançado vira selo verde com o número em tinta, não um bloco verde com o texto apagado ---- */
.album-track li.done{background:rgba(143,179,122,.1)!important;border-color:rgba(143,179,122,.5)}
.album-track li.done b{background:var(--green)!important;color:var(--bg0)!important;border-color:transparent}

/* ---- selo "quente" da aventura: carimbo vermelhão chapado, como os contadores, sem brilho rosa ---- */
.adv-flag{color:var(--washi);background:var(--shu);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* ============================================================================================================
   Revisão tela a tela com o plugin Mythverse (34 telas, desktop e celular): o que ainda entregava aplicativo ou
   template em cada painel. Agrupado por componente; celular por último.
   ============================================================================================================ */

/* ============================================================================================================
   Revisão de 2026-10-03, tela a tela (34 capturas, PC e celular): o que cada tela ainda falava em "aplicativo".
   Só cor, fio, canto, tipografia, alvo de toque e o que aparece ou some; nada de grade, flex de contêiner ou posição.
   Mesma especificidade da regra de origem (vence pela ordem: esta folha carrega por último) ou um degrau acima quando a
   origem é mais específica. Não há backdrop-filter aqui: theme-game.css:342 já o desliga em tudo.
   ============================================================================================================ */

/* ---- topo: ficha do jogador chapada, sem o degradê de vidro de theme-game.css:28 ---- */
.player-chip{background:rgba(236,226,208,.045)}

/* ---- topo, saguão: a ação de continuar é laca vermelhão chapada, como .action.pink; sem degradê, sem sombra colorida e sem o brilho
        que varria o botão (theme-game.css:133, 138, 140-141) ---- */
.lobby-go{background:var(--shu);border-color:var(--shu-lo);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 rgba(0,0,0,.35)}
.lobby-go::after{display:none}
.lobby-go:hover{filter:none;background:var(--shu-hi)}
.lobby-go:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 1px 0 rgba(0,0,0,.35)}
/* objetivo cumprido: frase riscada e fio de ouro dizem "feito, resgate"; sai o verde-menta de theme-game.css:307 */
.lobby-goal.done{border-color:var(--gold)}
.lobby-goal.done b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--gold)}

/* ---- topo, diálogo: retrato em papel escuro com um fio no pigmento da personagem, sem halo radial; o título da personagem
        ("Guardiã do Véu") é texto ao lado do nome, não etiqueta em caixa alta ---- */
.dlg-portrait{background:var(--bg2);border-color:color-mix(in srgb,var(--sc) 45%,var(--line2))}
.dlg-name small{text-transform:none;letter-spacing:.02em}

/* ---- topo, placa da região: as três etiquetas no mesmo papel; só a tinta muda (onda em ouro, dificuldade em verde, ouro ou vermelho) ---- */
.zone-meta span,body.in-combat .zone-meta span,.zone-meta #wave-label,#power-check.ok,#power-check.warn,#power-check.bad{background:rgba(238,229,208,.06)}

/* ---- navegação: VOLTAR (sair da luta) leva o torii pintado (pi-cmd-city) no lugar da seta de volta ---- */
#retreat-btn b .pi{display:block;width:20px;height:20px;margin:0 auto}
body .hud-top .stage-controls.in-top #retreat-btn b .pi{width:24px;height:24px}

/* ---- cabeçalho de painel: a linha sob o cabeçalho é um fio vermelhão só, sem degradê; o losango do rótulo sem halo; o fechar é laca
        chapada; o filete dos títulos de seção e de cartão é vermelhão chapado (theme-game.css:67, 70, 71, 82) ---- */
.modal-panel>header::after{background:var(--shu)}
.modal-panel>header .eyebrow::before{box-shadow:none}
.modal-panel>header .icon-btn.close{background:rgba(13,12,18,.8)}
.modal-body>h3::before,.modal-body section>h3::before,.panel>h3::before{background:var(--shu)}

/* ---- abas do painel: tira de papel chapada; a escolhida é laca de ouro chapada, a mesma tinta de .action.primary (theme-game.css:76 e
        theme-sumi.css:176/228 usam !important, por isso aqui também). O ícone colorido sai: todas as abas falam só texto ---- */
.modal-tabs button{background:rgba(13,12,18,.8)!important;border-color:rgba(238,229,208,.16)}
.modal-tabs button.active{color:#1d1206!important;background:var(--gold)!important;border-color:var(--gold-lo)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.35)!important}
.modal-tabs button .ic{display:none}
/* abas da bolsa em repouso: Armazém sem letra de ouro (styles.css:1589); Cartas sem o fundo forçado de theme-sumi.css:154 */
.inv-tabs button.storage-tab:not(.active){color:var(--muted)}
.inv-tabs button.cards-tab:not(.active){background:transparent!important}

/* ---- cartões: papel chapado com sombra preta curta (theme-game.css:83 usa !important) ---- */
.panel,.mat-card,.exp-card,.shop-card{background:#1f1b29!important;box-shadow:0 2px 0 rgba(0,0,0,.35)}

/* ---- cartões, barras: traço de tinta com canto quase reto, não pílula (como .bh-hp na linha 51) ---- */
.meter,.bw-bar,.bt-hp{border-radius:2px}
.meter span,.bw-bar i,.bt-hp i{border-radius:1px}

/* ---- cartões, estado vazio: moldura de linha e fundo chapado, sem tracejado de zona de arrastar nem brilho radial (theme-game.css:86);
        a lanterna fica. A frase do .empty-state ganha medida de leitura e o botão respira ---- */
.empty-note{border:1px solid var(--line2);border-radius:3px;background:rgba(0,0,0,.18)}
.modal-body .empty-state p{max-width:48ch;margin-left:auto;margin-right:auto}
.modal-body .empty-state .action{margin-top:14px}

/* ---- cartões, aventuras: no modo Hoje a faixa perde o rótulo que repetia o cabeçalho (as abas .sub guardam o seu) ---- */
.adv-hero:not(.sub) .eyebrow{display:none}

/* ---- cartões, cidade: o número que pede ação leva o filete do selo; cabeçalho de construção com o nome na fonte de título e o nível
        como marca pequena (o traço de .wk-lv); caixa do ícone igual à da Enciclopédia (.wr-ico), sem o ouro antigo; o cartão não é
        clicável e não sobe no hover ---- */
.city-kpis span:first-child{border-left:3px solid var(--shu)}
.building-head b{font:800 16px/1.2 var(--display);letter-spacing:.005em;color:var(--washi)}
.building-head b .b-lv{font:700 11px var(--ui);font-style:normal;letter-spacing:.06em;color:var(--gold);margin-left:8px;vertical-align:2px;white-space:nowrap}
.building-head .b-icon{background:rgba(238,229,208,.06);border-color:rgba(238,229,208,.14);border-radius:3px}
.building-list .building-head:hover{transform:none}

/* ---- cartões, Guilda: a escada mostra letra e título; a vantagem só no rank atual (as outras ficam na dica e na prova) ---- */
.order-ladder li:not(.cur) small{display:none}

/* ---- cartões, convocação: a Caixa de Classe divide a classe .box-class com o seletor (panels.js:450/452) e herdava o recuo dele
        (styles.css:1555); volta ao recuo que .box-card declara, e o seletor recupera a seta que o atalho background apagava ---- */
.box-card.box-class{padding:14px}
select.box-class{background-color:rgba(0,0,0,.35);background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* texto do cartão em papel (saía lavanda #ddd6f3, da paleta antiga) */
.box-card p{color:var(--washi)}
/* nomes sob os retratos da temporada legíveis */
.season-faces span small{font-size:11px;line-height:1.2;color:var(--washi);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* contador de chaves: é valor, não botão. Sem fio nem fundo; o número em ouro */
.summon-counts .pill{padding:0 4px;background:none;border:0;font-size:13px;color:var(--muted)}
.summon-counts .pill b{font:700 16px/1 var(--ui);color:var(--gold)}
/* nota das chaves: a lista completa fica na dica, atrás de "Todas as fontes" */
.keys-note [data-tip]{color:var(--gold);border-bottom:1px dotted currentColor;cursor:help}

/* ---- cartões, destino: estágio vencido em verde-musgo (koke), estágio final e aviso em vermelhão; sai o verde-menta e o rosa da folha
        antiga. :not(.selected) para não passar por cima do ouro do estágio escolhido (linha 151) ---- */
.stage-btn.done:not(.selected){border-color:rgba(143,179,122,.5);background:rgba(143,179,122,.07)}
.stage-btn.final:not(.selected){border-color:rgba(216,85,60,.6)}
.stage-btn small{font-size:11px}
.power-compare.ok{border-color:rgba(143,179,122,.55)}
.power-compare.warn{border-color:rgba(226,170,78,.55)}
.power-compare.bad{border-color:rgba(216,85,60,.55)}
.power-compare.bad p{color:#eaa08a!important}
.warn-note{background:rgba(216,85,60,.1);border-color:rgba(216,85,60,.35);color:#ecc3b4!important}

/* ---- cartões, ficha do herói: retrato em placa chapada tingida pela raridade, sem halo radial; o nome grande é o do cabeçalho do
        painel, no cartão ele vira a linha das estrelas; o mundo de origem é nome próprio, em caixa normal ---- */
.hero-head .hero-art{background:color-mix(in srgb,var(--c,#a98bd0) 10%,var(--bg0));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#a98bd0) 35%,transparent)}
.hero-meta h3{font-size:22px!important;margin:0 0 6px!important;line-height:1.15}
.hero-meta h3 .stars{font-size:14px;vertical-align:2px}
.hero-head .eyebrow{text-transform:none;letter-spacing:.02em;font-size:12.5px}
.kit .kit-row small{letter-spacing:.06em}

/* ---- cartões, talentos: na ficha do herói a linha do retrato repete o cabeçalho e some; no painel Talentos sai só o nome (o título e
        o seletor já o dizem); o ícone da ficha de talento perde o halo colorido; o rótulo do caminho vai em caixa normal e o requisito
        vira linha de apoio sob o botão (small.branch-need, criado em panels.js) ---- */
#modal[data-panel="hero"][data-tab="talents"] .tree-hero{display:none}
#modal .tree-hero b{display:none}
.tdetail .tdetail-ico{box-shadow:0 2px 0 rgba(0,0,0,.35)}
.class-path .branch small{font:600 11.5px/1.2 var(--ui);letter-spacing:.02em;text-transform:none;color:var(--gold)}
.class-path .branch small.branch-need{font:600 11.5px/1.3 var(--ui);letter-spacing:0;color:#a79f90}

/* ---- cartões, bolsa: o parêntese com o tipo de arma em cada linha implícita repete o selo do cartão e sai da tela (fica no DOM);
        "Desmontar em massa" usa o triângulo de ouro do diálogo, não o marcador do navegador ---- */
.item .item-stats .implicit small{display:none}
.salvage-box summary{list-style:none}
.salvage-box summary::-webkit-details-marker{display:none}
.salvage-box summary::before{content:"";display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--gold);margin-right:7px;vertical-align:1px;transition:transform .15s}
.salvage-box[open] summary::before{transform:rotate(90deg)}

/* ---- cartões, Ajuda: atalhos em lista, uma tecla desenhada por item, no lugar da frase com ponto no meio (ul.key-list, criado em
        panels.js; a kbd só é estilizada aqui dentro, sem tocar nas teclas da HUD) ---- */
.key-list{list-style:none;margin:0;padding:0;color:var(--muted);font-size:13.5px;line-height:1.45}
.key-list li{margin:0 0 5px}
.key-list kbd{display:inline-block;min-width:1.7em;padding:0 5px;margin-right:3px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:3px;font:700 11.5px/1.7 var(--ui);color:var(--washi);background:var(--bg0);text-align:center;vertical-align:1px}

/* ---- cartões, equipe: o nome da vaga quebra em até 2 linhas antes das reticências; a classe vira pigmento sem caixa para caber ao lado
        do nível; a linha de quem está na equipe é tingida de vermelhão, como na Coleção; Poder total em fonte de título e ouro (é valor) ---- */
.formation-slot>span b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.2;overflow:hidden;overflow-wrap:anywhere}
.formation-slot>span small{white-space:normal}
.formation-slot .cls-tag{padding:0;background:none}
article.roster-row.in-team{background:rgba(203,66,44,.06)}
.roster-row.in-team:hover{background:rgba(255,255,255,.06)}
.section-title small b{font-family:var(--display);font-size:15px;color:var(--gold)}

/* ---- cartões, Enciclopédia: o negrito dentro do texto da regra volta ao tamanho da linha (a linha 80 dava 14 px dentro de 13 px) e fica
        um tom abaixo do nome; a busca fixa usa a laca do painel, não o azul-roxo da folha antiga (styles.css:687) ---- */
.wiki-rule p b{font:inherit;font-weight:700;color:#d9d0c1}
.wiki-search{background:linear-gradient(180deg,var(--bg1) 72%,transparent)}

/* ---- cartões, console de batalha: laca chapada nos quatro painéis; a fraqueza acertada ganha fio de ouro por dentro, não halo (a tinta
        dos Pontos de Técnica mora em [combate], no fim da folha) ---- */
.bh-panel{background:#17141e}
.bt-row.weak .pi.hit{filter:none;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--gold-hi)}
.bt-row .x2{font-weight:800}

/* ---- botões, ficha do herói: os da cabeça quebram linha dentro da célula (a grade de 2 colunas de theme-sumi.css:887 vale em toda
        largura) e o custo desce para uma segunda linha menor, como etiqueta de preço ---- */
.hero-head .hero-actions .action{flex-wrap:wrap;row-gap:0;padding:5px 10px;white-space:normal;line-height:1.2;text-align:center}
.hero-head .hero-actions .action small{flex-basis:100%;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1.3;opacity:.8}

/* ---- botões, convocação: um só comando forte por caixa, o 10× (que garante um Épico); o 1× é contorno vermelhão. Folga lateral menor
        para "Convocar 10×" caber a 320 px ---- */
.box-card .box-actions .action{padding:0 10px}
.box-card .box-actions .action.pink[data-n="1"]{color:var(--washi);background:rgba(203,66,44,.14);border-color:var(--shu);box-shadow:none}
.box-card .box-actions .action.pink[data-n="1"]:hover:not(:disabled){background:rgba(203,66,44,.3)}

/* ---- botões, equipe: fora da cidade "Preparar equipe" é o único comando da tela e fica em laca de ouro; na cidade quem manda é
        "Escalar" e ele volta a cinza (sem :has(), em navegador antigo, só fica cinza como antes) ---- */
.party-layout:not(:has([data-assign])) .team-quick .action[data-optimize]:not(:disabled){color:#1d1206;background:var(--gold);border-color:var(--gold-lo);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.35)}
.party-layout:not(:has([data-assign])) .team-quick .action[data-optimize]:hover:not(:disabled){background:var(--gold-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 rgba(0,0,0,.35)}

/* ---- botões, Empório: "Comprar · preço" pode quebrar em duas linhas no cartão de 210 px em vez de estourar ---- */
.shop-card .action{white-space:normal;line-height:1.25;padding-top:5px;padding-bottom:5px}

/* ---- botões, bolsa: os comandos só de ícone do cartão de item ficam quadrados e do mesmo tamanho ---- */
.item footer .action.small:not(.primary){min-width:34px;padding:0 9px}

/* ---- botões, console: na vez do herói, Atacar (a ação padrão, sem custo) carrega o vermelhão da moldura de quem age; mouse, foco,
        clique e o lampejo da tecla continuam em ouro ---- */
.bhud[data-state="turn"] .bh-bar .ab[data-ab="attack"]:not(:disabled):not(.flash):not(:hover):not(:focus-visible):not(:active) .ab-ic{border-color:var(--shu-hi);box-shadow:0 3px 0 rgba(0,0,0,.5),inset 0 0 0 1px var(--shu)}

/* ---- selos: .tag em canto reto como os outros; na ficha, o selo de posição ("Frente") com o mesmo fio dos vizinhos (.job fica);
        "na equipe" é o selo vermelhão da Coleção; recompensas em selo; estrelas sem brilho ---- */
.tag{border-radius:2px!important}
.hero-head .tags .tag:not(.job){background:none;box-shadow:inset 0 0 0 1px var(--line2);color:var(--muted);font-size:11px;letter-spacing:.04em}
.roster-row .tag.green{color:var(--washi);background:var(--shu);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rw{border-radius:2px}
span.stars{text-shadow:none}
.adv-flag{letter-spacing:.1em}
/* contador do saguão e contagens do console: selo quadrado, como os da navegação (linha 58) */
.lobby-btn.todo em{border-radius:2px;background:var(--shu);color:var(--washi);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ab-count,.ctl-dot{border-radius:2px}
.bh-face em,.bt-thumb em{border-top-left-radius:3px}
/* teclas: laca de ouro chapada, sem degradê (o relevo é a sombra interna, que fica) */
.bhud kbd,.toast kbd,.hn kbd{border-radius:2px;background:var(--gold)}

/* ---- rodapé do painel, "há mais abaixo": só a seta, como o cursor do diálogo (.dlg-next); a frase fica no aria-label do botão. A faixa
        cai de 74 para 44 px e deixa de engolir a última linha; seta em papel, porque ouro é valor ---- */
.scroll-hint{height:44px;gap:0;padding:0 0 8px;color:var(--washi);background:linear-gradient(180deg,transparent,rgba(13,12,18,.85))}
.scroll-hint span{display:none}

/* ---- celular: alvo de toque de 40 px (abas, ação de construção, comandos do cartão de item, filtros de herói e da bolsa).
        A fila de abas do painel rola de lado a partir de 860 px e a da bolsa a partir de 760 px: a borda direita some em meia-tinta para
        dizer que há mais, e o respiro no fim deixa a última inteira quando se chega lá ---- */
@media (max-width:900px){
  .modal-tabs button{min-height:40px}
  .building-head>.action{min-height:40px}
  .item footer .action.small{min-height:40px}
  .item footer .action.small:not(.primary){min-width:40px}
  .hero-filter input[type=search],.hero-filter select,.hero-filter .rar-pill{min-height:40px}
  .hero-filter .check,.inv-top .check{min-height:40px;padding:0 4px}
  .inv-top .check{font-size:13px}
  .inv-tabs button,.filter-tabs button{min-height:40px}
  .salvage-box summary{padding:12px 0}
  @media (max-width:860px){
    .modal-tabs{padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  }
  @media (max-width:760px){
    .inv-tabs{padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
    /* bolsa: cada vaga diz o que é (ARMA, FOCO, SELO, OMAMORI); theme-sumi.css:249 escondia o nome e sobrava "Vazio" quatro vezes */
    .doll-slot small{display:block}
    /* Enciclopédia: a faixa de assuntos fala a língua das abas (tira de papel; ouro chapado só no escolhido; grupo como rótulo apagado) */
    .wiki-nav small{color:var(--dim);letter-spacing:.1em}
    .wiki-nav button{min-height:40px;padding:8px 12px;border-color:var(--line2);background:rgba(13,12,18,.5);color:var(--muted);font-weight:700}
    .wiki-nav button.active{background:var(--gold);border-color:var(--gold-lo);color:#1d1206}
  }
}

/* ============================================================================================================
   Rodada estrutural (hierarquia e layout por tela). Cada tela escreve só entre os próprios marcadores.
   ============================================================================================================ */

/* [saguao] */
/* ---- saguão, faixa de baixo: um foco só. O botão de vermelhão vai para o canto direito (fim da leitura, onde o polegar está) e
        fala o verbo primeiro, em fonte de título ("Continuar", "Convocar"); o destino desce para uma linha menor e o número fica
        no selo. Os três atalhos (Explorar ou Resgatar, Mapa, Preparar) ficam juntos à esquerda dele, do mesmo tamanho (ui.js,
        renderLobby). As regras de theme-game.css:133-165 e 316-335 continuam valendo para tamanho e quebra; aqui vence pela
        especificidade (.lobby-bar na frente) ---- */
.lobby-bar .lobby-go{justify-content:space-between;gap:10px}
.lobby-bar .lobby-go>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lobby-bar .lobby-go b{display:block;font:800 18px/1.1 var(--display);letter-spacing:.01em;white-space:nowrap;overflow:visible;text-shadow:none}
.lobby-bar .lobby-go small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 11px/1.25 var(--ui);letter-spacing:0;text-transform:none;white-space:normal;color:#f4ddd2;opacity:1}
.lobby-go .lg-st{display:none;font-style:normal}
/* o número de Convocar e de Montar equipe mora no selo; a linha de baixo (.lg-n, ui.js) repete o número e só entra quando o selo sai */
.lobby-bar .lobby-go small.lg-n{display:none}
.lobby-bar .lobby-go em{flex:none;padding:4px 7px;border-radius:2px;background:rgba(0,0,0,.28);font:800 10.5px/1 var(--ui);letter-spacing:.02em;color:var(--washi)}
/* faixa larga: o botão principal é a peça maior da faixa (o objetivo cresce no que sobra) */
@container lobby (min-width:981px){
  .lobby-bar .lobby-go{min-width:300px}
}
/* faixa de notebook (898 px em 1366×657): os três atalhos e os vãos cedem alguns pixels para o destino caber numa linha só */
@container lobby (max-width:1180px){
  .lobby-bar .lobby-go{gap:8px;padding-left:12px}
  .lobby-bar .lobby-go b{font-size:17px}
  .lobby-bar .lobby-cta{gap:6px}
  .lobby-bar .lobby-btn{padding-left:5px;padding-right:5px}
}
/* faixa mais estreita que isso (notebook de 720 px de tela, com a barra do navegador; 1024×600, 1280×610): o selo sai nos três
   estados e o número desce para baixo do verbo (o estágio entra no fim do destino; "10 grátis" e "2 vagas" viram a linha de baixo).
   Com o selo ao lado, o verbo passava por cima dele. Só no PC: no celular o botão ocupa o resto da faixa e o selo fica (abaixo do
   verbo até 560 px) */
@media (min-width:901px){
  @container lobby (max-width:860px){
    /* sem o selo, Convocar encolheria para 96 px; com o piso os três estados ficam do tamanho do Continuar e a faixa não pula */
    .lobby-bar .lobby-go{min-width:150px;padding-top:4px;padding-bottom:4px}
    .lobby-bar .lobby-go>span{gap:0}
    .lobby-bar .lobby-go em{display:none}
    .lobby-bar .lobby-go small.lg-n{display:-webkit-box}
    .lobby-go .lg-st{display:inline}
  }
  /* janela de PC baixa (960×540): sem os retratos da equipe, como no celular, o Continuar volta para dentro da faixa */
  @container lobby (max-width:790px){.lobby-bar .lobby-team{display:none}}
}
/* objetivo cumprido é registro de diário: selo de ouro com o visto no lugar do alvo, CUMPRIDO à vista em qualquer largura (a
   faixa de 900 px escondia o rótulo, theme-game.css:326) e a frase riscada (linha 213). O único botão é Resgatar */
.lobby-bar .lobby-goal.done small{display:block;color:var(--gold)}
.lg-seal{flex:none;position:relative;width:22px;height:22px;border-radius:2px;border:1.5px solid var(--gold);background:rgba(226,170,78,.1)}
.lg-seal::after{content:"";position:absolute;left:6px;top:1px;width:6px;height:12px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* vaga vazia da equipe: encaixe escuro com o + apagado, sem o tracejado de "solte aqui"; acende no mouse */
.lt-hero.empty{border:1px solid var(--line2);background:rgba(0,0,0,.3);box-shadow:inset 0 2px 5px rgba(0,0,0,.45);color:var(--dim);font:500 20px/1 var(--ui)}
.lt-hero.empty:hover{color:var(--gold);border-color:rgba(226,170,78,.5)}
/* retrato da equipe no mouse: sobe e ganha sombra preta, sem o anel colorido (theme-game.css:126) */
.lt-hero:hover{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 6px 12px rgba(0,0,0,.5)}
/* celular: a mesma ordem do PC, ação principal à direita (theme-game.css:332 e 335 punham o botão à esquerda e Explorar no fim) */
@media (max-width:900px){
  .lobby-bar .lobby-cta{grid-template-columns:62px 62px 62px minmax(0,1fr)}
  .lobby-bar .lobby-btn.todo{order:0}
  .lobby-bar .lobby-go b{font-size:17px}
}
@media (max-width:560px){
  .lobby-bar .lobby-cta{grid-template-columns:56px 56px 56px minmax(0,1fr)}
  .lobby-bar .lobby-go{row-gap:4px}
  /* em 320 o botão tem 96 px de texto: "Montar equipe" quebra entre as palavras em vez de passar da borda */
  .lobby-bar .lobby-go b{white-space:normal;line-height:1.12}
}
/* com a fala na tela, a faixa recua: a fala é a única coisa a ler (sem :has() o navegador antigo só não apaga) */
#lobby-bar,#goal-chip{transition:opacity .25s}
body:has(#dialog-box:not([hidden])) #lobby-bar:not(:hover):not(:focus-within),body:has(#dialog-box:not([hidden])) #goal-chip:not(:focus-within){opacity:.42}

/* ---- saguão no celular, cartão do objetivo: cumprido é fio de ouro e frase riscada, como na faixa do PC; sem o verde-menta que
        pulsava (styles.css:1647, theme-sumi.css:73) ---- */
#goal-chip.done{border-color:rgba(226,170,78,.45);border-left-color:var(--gold);box-shadow:0 2px 0 rgba(0,0,0,.35);animation:none}
#goal-chip.done .goal-txt b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--gold)}
@media (max-width:900px){
  #goal-chip .goal-actions .action{min-height:40px}
  /* sem o Ir (equipe incompleta: o botão principal já é o passo), o Presente fica sozinho. Continua botão pequeno no canto, não a
     largura inteira de theme-sumi.css:577, que o fazia ler como o passo do objetivo */
  #goal-chip .goal-actions>[data-claim-login]:only-child{flex:0 0 auto;margin-left:auto;padding-left:14px;padding-right:14px}
}

/* ---- celular, distritos da cidade abaixo do cenário: o selo de contagem é quadrado, como na navegação e nas placas (theme-sumi.css:119
        fazia pílula de raio 9) ---- */
#district-grid em{border-radius:2px;background:var(--shu);color:var(--washi);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* ---- navegação: no saguão, Cidade é o lugar onde se está e leva o fio de vermelhão da aba aberta, sem fundo (ui.js, renderZone);
        com um painel aberto só ele fica marcado. A aba aberta perde o degradê de theme-game.css:33 (precisa de !important) ---- */
.side-nav .nav.active{background:rgba(203,66,44,.12)!important}
.side-nav .nav.here{color:var(--washi);box-shadow:inset 3px 0 0 var(--shu)!important}
/* o fio é reto: o canto do lado dele fica vivo (com os 4 px de raio o fio virava parêntese) */
.side-nav .nav.active,.side-nav .nav.here{border-radius:0 4px 4px 0}
.side-nav .nav.here .pi{filter:none}
.side-nav:has(.nav.active) .nav.here:not(.active){color:inherit;box-shadow:none!important}
.side-nav:has(.nav.active) .nav.here:not(.active) .pi{filter:saturate(.8) brightness(.9)}
/* celular: a navegação é a barra de baixo, e o fio do lugar atual vai por cima do botão, não do lado */
@media (max-width:860px){
  .side-nav .nav.active,.side-nav .nav.here{box-shadow:inset 0 3px 0 var(--shu)!important;border-radius:0 0 4px 4px}
}

/* ---- diálogo: o retrato pequeno da Sayo (conselho, panels.js:1049) usa o mesmo papel escuro e o fio sakura do retrato grande, sem o
        rosa de styles.css:1072 ---- */
.dlg-portrait.small{--sc:#d696a0;background:var(--bg2);border:1px solid color-mix(in srgb,var(--sc) 45%,var(--line2))}
/* [/saguao] */

/* [aventuras] */
/* ---- Aventuras, aba Hoje: um foco e uma lista, no lugar da grade de nove cartões iguais (a .adv-card, que
        saiu das folhas). O cartão principal é o que está pronto, ou o Treino livre: leva a pintura do lugar, o
        título grande e o único botão de ouro. O resto vira linha de registro (ícone, nome, uma linha, verbo), o pronto em cima com o
        selo vermelhão e o botão em contorno vermelhão. Conselheiro sai da lista e vira link de rodapé. Pintura: o véu de tinta só
        embaixo, onde está o texto (o mesmo da .journey-card), sem brilho ---- */
.adv-today{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:stretch}
.adv-lead{position:relative;display:flex;align-items:flex-end;min-height:340px;border:1px solid var(--line2);border-radius:3px;overflow:hidden;background:linear-gradient(0deg,var(--bg0) 0%,color-mix(in srgb,var(--bg0) 90%,transparent) 30%,color-mix(in srgb,var(--bg0) 35%,transparent) 58%,transparent 76%),var(--art) center/cover no-repeat,var(--bg0);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.adv-lead.hot{border-color:var(--shu)}
.adv-lead-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:22px 24px 24px}
.adv-kicker{display:flex;align-items:center;gap:8px;font:700 12.5px/1.2 var(--ui);letter-spacing:.03em;color:var(--washi)}
.adv-kicker .ic{font-size:24px}
.adv-kicker .adv-flag{position:static;margin-left:4px;padding:3px 7px;font-size:10px;line-height:1.1}
.modal-body .adv-lead h3{margin:2px 0 0;padding:0;font:700 31px/1.08 var(--display);color:var(--washi);text-shadow:0 2px 0 rgba(0,0,0,.55);overflow-wrap:anywhere}
.modal-body .adv-lead p{max-width:44ch;margin:0;font:500 14px/1.5 var(--ui);color:#d9d0c1;text-wrap:pretty}
.adv-lead small{font:700 12.5px/1.3 var(--ui);color:var(--gold);font-variant-numeric:tabular-nums}
.adv-lead .action{margin-top:12px;min-height:46px;padding:0 34px;font-size:15px}
.adv-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.adv-list{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:3px;background:var(--bg2);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.adv-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 14px;border-top:1px solid rgba(238,229,208,.08)}
.adv-row:first-child{border-top:0}
.adv-row.hot{background:rgba(203,66,44,.07);box-shadow:inset 3px 0 0 var(--shu)}
.adv-glyph .ic{display:block;font-size:30px}
.adv-row-copy{min-width:0}
.adv-row-copy b{font:700 15.5px/1.25 var(--display);color:var(--washi)}
.adv-row-copy small{margin-top:2px;font:500 12.5px/1.4 var(--ui);color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.adv-row .adv-flag{position:static;display:inline-block;margin:0 7px 0 0;padding:2px 5px;font-size:9.5px;line-height:1.2;vertical-align:1px}
.adv-row .action{min-width:104px;min-height:34px;padding:0 14px}
.adv-row.hot .action:not(:disabled){color:var(--washi);background:rgba(203,66,44,.14);border-color:var(--shu)}
.adv-row.hot .action:not(:disabled):hover{background:rgba(203,66,44,.3)}
.adv-advisor{align-self:flex-start;min-height:36px;padding:2px 2px 2px 14px;border:0;background:none;color:var(--muted);font:500 13px/1.4 var(--ui);text-align:left;cursor:pointer}
.adv-advisor b{font-weight:700;color:var(--washi);border-bottom:1px solid rgba(238,229,208,.35)}
.adv-advisor:hover b,.adv-advisor:focus-visible b{border-bottom-color:var(--gold)}
/* computador: o cartão principal ocupa a altura do corpo do painel (sem faixa morta embaixo em tela alta); a lista e o Conselheiro
   ficam no alto à direita. Em 1366×657 a altura já é a do conteúdo, então nada passa a rolar */
@media (min-width:901px){.adv-today{min-height:100%}}
/* notebook alto e monitor: a lista respira um pouco e o cartão cresce junto (em 1366×657 tudo cabe sem rolar com 56 px) */
@media (min-width:901px) and (min-height:760px){
  .adv-lead{min-height:400px}
  .adv-row{min-height:64px}
}
/* celular e tablet: uma coluna; a pintura vira faixa no alto do cartão e o texto fica em tinta chapada, legível sobre qualquer cena */
@media (max-width:900px){
  .adv-today{grid-template-columns:minmax(0,1fr);gap:12px}
  .adv-lead{display:block;min-height:0;background:var(--bg0)}
  .adv-lead::before{content:"";display:block;height:136px;background:linear-gradient(0deg,var(--bg0) 0%,color-mix(in srgb,var(--bg0) 60%,transparent) 30%,transparent 62%),var(--art) center 42%/cover no-repeat}
  .adv-lead-copy{position:relative;margin-top:-30px;padding:0 16px 18px}
  .modal-body .adv-lead h3{font-size:26px}
  .adv-lead .action{min-height:46px;padding:0 30px}
  .adv-row{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;min-height:64px;padding:10px 10px 10px 12px}
  .adv-glyph .ic{font-size:28px}
  .adv-row .action{min-width:88px;min-height:40px;padding:0 12px}
  .adv-advisor{min-height:44px;padding-left:12px}
}
/* celular estreito (abaixo de 375): ao lado do botão a linha ficava com 130 px e quase toda frase caía na reticência; ela passa a
   correr por baixo do nome e do botão, com a largura toda, e cabe em 2 linhas */
@media (max-width:374px){
  .adv-row{grid-template-areas:"g t b" "g s s";row-gap:3px}
  .adv-glyph{grid-area:g}
  .adv-row-copy{display:contents}
  .adv-row-copy b{grid-area:t;align-self:end}
  .adv-row-copy small{grid-area:s;margin-top:0}
  .adv-row .action{grid-area:b}
}
/* [/aventuras] */

/* [convocacao] */
/* ---- aba Convocar: tamanho diz importância. A caixa principal (.box-lead: a da Temporada enquanto ela dura, a dos Mundos depois) vem
        primeiro e larga, com os retratos e o único botão cheio da aba; as outras numa fileira menor, de grade explícita (sai a quinta
        coluna vazia do auto-fill). Com convocações grátis a faixa de entrada é o foco e todas as caixas ficam pequenas (panels.js,
        collectionPanel). ---- */
.summon-banner{margin-bottom:12px}
/* nomes de caixa e de temporada em caixa normal: três palavras não são rótulo */
.summon-banner .eyebrow,.box-lead .eyebrow{font:700 12px/1.2 var(--ui);letter-spacing:.02em;text-transform:none;color:#e07a5f}
.box-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:0 24px;height:auto!important;margin:0 0 12px;padding:18px 20px 20px!important;background:var(--surf2)!important}
.box-lead .lead-info{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;width:100%;container:lead/inline-size}
.box-lead header{gap:12px}
.box-lead header b{font-size:28px;line-height:1.1}
.box-lead header small{font-size:12.5px}
.box-lead .box-ico{width:48px;height:48px}
.box-lead .box-ico .ic{font-size:24px}
.box-lead p{font-size:13.5px;line-height:1.5}
.lead-cap{margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.lead-cap b{font-weight:700;color:var(--washi)}
/* retratos: seis por linha; todos numa linha só quando a coluna passa de 760 px */
.box-lead .season-faces{display:grid;grid-template-columns:repeat(6,minmax(0,64px));gap:8px;width:100%}
@container lead (min-width:760px){.box-lead .season-faces{grid-template-columns:repeat(12,minmax(0,1fr))}}
.box-lead .season-faces span{width:auto;min-width:0;gap:3px}
.box-lead .season-faces img{width:100%;height:auto;aspect-ratio:1}
/* coluna de comando: as chaves no alto; chances, garantia e botões juntos no pé, alinhados com a base dos retratos */
.box-lead .lead-side{display:flex;flex-direction:column;gap:12px;min-width:0;padding-left:24px;border-left:1px solid var(--line2)}
.box-lead .summon-counts{flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 auto}
.box-lead .summon-counts .pill{padding:0}
.box-lead .box-odds{margin-top:6px}
.box-lead .box-odds dt{font-size:12.5px}
.box-lead .box-odds dd{font-size:15px}
.box-lead .box-pity small{font-size:12.5px}
.box-lead .box-actions{margin-top:2px}
.box-lead .box-actions .action{min-height:50px}
.box-lead .box-actions .action[data-n="10"]{flex:1.5}
.box-lead .box-actions .action small{font-size:11px}

/* chances em tabela de duas colunas, com o pigmento da raridade como selo; sem "·" pendurado no fim da linha */
.box-odds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;max-width:320px;margin:2px 0 0}
.box-odds>div{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.box-odds dt{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:var(--muted)}
.box-odds dt::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--c)}
.box-odds dd{margin:0;font:700 12.5px/1.3 var(--ui);color:var(--washi);font-variant-numeric:tabular-nums}
.box-odds .r-legendary{--c:var(--legendary)}.box-odds .r-epic{--c:var(--epic)}.box-odds .r-rare{--c:var(--rare)}.box-odds .r-common{--c:var(--common)}
/* garantia: frase e barra na mesma linha; sem espaço, a barra desce inteira */
.box-pity{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;min-width:0}
.box-pity small{flex:0 1 auto;font-size:11.5px;line-height:1.3;color:var(--muted)}
.box-pity small b{font-weight:700;color:var(--washi);font-variant-numeric:tabular-nums}
.box-pity .meter{flex:1 1 80px;background:rgba(238,229,208,.1)}

/* fileira menor: a grade tem o número de colunas das caixas que sobram */
.box-grid{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;margin-bottom:12px}
.box-grid .box-card{gap:8px;container:box/inline-size}
/* caixa estreita (tablet, quatro na fileira): as chances viram uma coluna só, para o número não colar no nome */
@container box (max-width:250px){.box-odds{grid-template-columns:minmax(0,1fr)}}
.box-grid .box-card header{flex-wrap:wrap;row-gap:8px}
.box-grid .box-card header b{font-size:17px}
.box-grid .box-ico{width:36px;height:36px}
/* o seletor da Caixa de Classe sobe para a linha do nome (a caixa deixa de ser a mais alta da fileira); sem espaço, desce inteiro */
.box-grid .box-card header select.box-class{flex:1 1 150px;min-width:0;margin-left:auto}
/* nas caixas menores nenhum botão é cheio: o 10× em fio vermelhão, o 1× em fio de papel. Os dois dividem a linha e empilham quando
   a caixa fica estreita */
.box-grid .box-card .box-actions{flex-wrap:wrap}
.box-grid .box-card .box-actions .action{flex:1 1 120px}
.box-grid .box-card .box-actions .action.pink[data-n="10"]{color:var(--washi);background:rgba(203,66,44,.14);border-color:var(--shu);box-shadow:none}
.box-grid .box-card .box-actions .action.pink[data-n="10"]:hover:not(:disabled){background:rgba(203,66,44,.3)}
.box-grid .box-card .box-actions .action.pink[data-n="1"]{color:var(--washi);background:transparent;border-color:var(--line2)}
.box-grid .box-card .box-actions .action.pink[data-n="1"]:hover:not(:disabled){background:rgba(238,229,208,.07);border-color:rgba(238,229,208,.36)}
.keys-note{margin-top:2px}
.keys-note [data-tip]{position:relative}
.keys-note [data-tip]::after{content:"";position:absolute;inset:-12px -4px}
@media (max-width:1180px){.box-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tela estreita: a caixa principal vira uma coluna (texto, retratos, chances, garantia, chaves logo acima dos botões); as menores em
   lista, cada uma com os dois botões lado a lado; alvos de 40 px */
@media (max-width:900px){
  .box-lead{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px!important}
  .box-lead .lead-info{gap:6px}
  .box-lead .lead-side{gap:10px;padding:12px 0 0;border-left:0;border-top:1px solid var(--line2)}
  .box-lead .box-odds{order:1;margin-top:0}.box-lead .box-pity{order:2}.box-lead .summon-counts{order:3;margin:0}.box-lead .box-actions{order:4}
  .box-lead header b{font-size:23px}
  .box-lead .box-ico{width:40px;height:40px}
  .box-lead p{font-size:13px;line-height:1.45}
  .lead-cap{margin-top:4px}
  .box-lead .box-actions .action{min-height:46px}
  .box-lead .summon-counts .action,select.box-class{min-height:40px}
}
@media (max-width:700px){
  .box-grid,.box-grid.four{grid-template-columns:minmax(0,1fr);gap:10px}
  .box-grid .box-card header select.box-class{flex-basis:100%}
  .box-odds{max-width:none}
}
/* celular: os retratos da temporada numa fila só, que rola de lado; a borda direita some em meia-tinta (como a fila de abas) e o respiro no
   fim deixa o último inteiro. Assim o botão da caixa principal aparece sem rolar mesmo com 650 px de altura */
@media (max-width:560px){
  .box-lead .season-faces{display:flex;flex-wrap:nowrap;gap:6px;width:calc(100% + 14px);margin-right:-14px;padding-right:30px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .box-lead .season-faces::-webkit-scrollbar{display:none}
  .box-lead .season-faces span{flex:none;width:54px}
  .box-lead .season-faces span small{font-size:10.5px}
}
/* [/convocacao] */

/* [destino] */
/* ---- Destino: o painel tem uma pergunta ("qual estágio?") e uma resposta ("Partir"), e as duas cabem na primeira tela. O nome do
        lugar vive só no cabeçalho do painel; a faixa de pintura encolhe para capítulo, lore e aposta, com o véu de tinta à esquerda
        e a pintura respirando à direita (panels.js manda a pintura em --art-hd, para o computador, e --art, a miniatura do celular).
        Poder contra recomendado e Partir dividem uma faixa:
        Partir é o único bloco chapado em ouro da tela, por isso o estágio escolhido passa de laca de ouro para fio de ouro (continua
        ouro, continua "escolhido"). A nota técnica de nível e EXP vira rodapé. Dicas e Caderno de campo vão para a coluna direita ---- */
/* a faixa mostra uma fatia de ~18% da altura da pintura. As cenas são arenas, com chão na metade de baixo, por isso a fatia sobe
   para 30%: o horizonte, onde ficam lanterna, torii, coluna e água */
#modal .destination-banner{min-height:0;padding:16px 20px 15px;border-radius:3px;border-color:var(--line2);background-image:linear-gradient(90deg,rgba(16,15,24,.95) 0%,rgba(16,15,24,.86) 38%,rgba(16,15,24,.35) 68%,rgba(16,15,24,.06)),var(--art-hd,var(--art));background-size:cover;background-position:center 30%}
#modal .destination-banner>div{max-width:620px}
#modal .destination-banner p{margin:5px 0 0!important;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--washi) 94%,var(--bg0))!important;max-width:none}
#modal .destination-banner .story-stake{max-width:none;margin-top:9px;padding:1px 0 1px 10px;border-left:2px solid var(--gold);background:none;font-size:13px;line-height:1.45;color:var(--washi)}
#modal .destination-banner .story-stake b{color:var(--gold-hi)}
#modal .destination-banner+.destination-actions{margin:14px 0 0}
/* requisito: musgo quando cumprido, vermelhão quando falta; selo retangular. Só no destino: o chefe mundial (Aventuras) usa a mesma
   classe e cuida do selo dele no bloco [aventuras] */
#modal[data-panel="destination"] .zone-requirements{margin-top:10px}
#modal[data-panel="destination"] .zone-requirements span{padding:4px 10px;border-radius:2px}
#modal[data-panel="destination"] .zone-requirements .met{color:color-mix(in srgb,var(--green) 75%,var(--washi));background:rgba(143,179,122,.08);border-color:rgba(143,179,122,.35)}
#modal[data-panel="destination"] .zone-requirements .missing{color:#eaa08a;background:rgba(216,85,60,.1);border-color:rgba(216,85,60,.42)}

#modal .dest-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px 30px;margin-top:16px;align-items:start}
#modal .dest-grid .sub-title{margin:0 0 10px!important}
/* estágio: botão mais baixo; o escolhido em fio de ouro; dificuldade do chefe em pigmento da carta (some o violeta de aplicativo) */
#modal .stage-btn{padding:6px 4px 5px;border-radius:3px}
#modal .stage-btn b{line-height:1.3}
#modal .stage-btn.selected{color:var(--washi);background:rgba(226,170,78,.13);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
#modal .stage-btn.selected b{color:var(--gold-hi)}
#modal .stage-btn.selected small{color:var(--gold)}
#modal .stage-btn.tier-1:not(:disabled):not(.selected){border-color:rgba(169,139,208,.55)}
#modal .stage-btn.tier-2:not(:disabled):not(.selected){border-color:rgba(216,85,60,.6)}
/* a faixa da partida: veredito à esquerda (fio da cor do veredito), Partir à direita. No "apertado" o fio fica neutro e só o texto
   fala em ouro: com o estágio escolhido e o Partir já em ouro, um quarto ouro diluía o foco */
#modal .dest-launch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;margin-top:12px;border:1px solid var(--line2);border-left:3px solid var(--dim);border-radius:3px;background:rgba(13,12,18,.6)}
#modal .dest-launch.ok{border-left-color:var(--green)}
#modal .dest-launch.bad{border-left-color:var(--red)}
#modal .dest-launch .power-compare{grid-template-columns:auto auto auto;justify-content:start;align-items:end;gap:2px 16px;margin:0;padding:10px 16px 11px;border:0;border-radius:0;background:none;text-align:left}
#modal .dest-launch .power-compare small{margin-bottom:1px;font:600 12px/1.3 var(--ui);letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--muted)}
#modal .dest-launch .power-compare b{font:800 22px/1.1 var(--ui);font-variant-numeric:tabular-nums}
#modal .dest-launch .power-compare .vs{padding-bottom:3px;font:600 12px var(--ui);color:var(--dim)}
#modal .dest-launch .power-compare p{margin-top:5px!important;font-size:13px;line-height:1.4}
#modal .dest-launch .destination-actions{margin:0;padding:9px 9px 9px 0}
#modal .dest-launch .destination-actions .action{width:auto;height:100%;min-width:176px;min-height:52px;font-size:17px;letter-spacing:.02em}
/* nota técnica (nível dos inimigos, EXP, espólio do dia, aviso de chefe): rodapé da escolha */
#modal .dest-main>.note{margin:8px 0 0!important;font-size:12.5px!important;line-height:1.5;color:var(--dim)}
#modal .dest-main>.note b{color:var(--muted)}
#modal .dest-main>.warn-note{padding:8px 12px;border-radius:3px}
#modal .dest-main>.warn-note b{color:inherit}
/* dicas: ficha de rótulo e valor, uma linha por assunto */
#modal .dest-facts{margin:0}
#modal .dest-facts>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
#modal .dest-facts>div:first-child{padding-top:2px}
#modal .dest-facts>div:last-child{border-bottom:0}
#modal .dest-facts dt{font:600 12.5px/1.6 var(--ui);color:var(--dim)}
#modal .dest-facts dd{min-width:0;margin:0;font:500 13.5px/1.55 var(--ui);color:var(--text)}
#modal .dest-facts dd small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
#modal .dest-facts .bad dt,#modal .dest-facts .bad dd{color:#eaa08a}
#modal .dest-els{display:flex;flex-wrap:wrap;gap:5px}
#modal .dest-els .el-tag{border-radius:2px}
/* Caderno de campo: página de diário com o nome de quem escreveu em linha própria; rótulo em caixa normal, na serifa */
#modal .dest-notes{margin:16px 0 0;padding:11px 14px 12px;border-radius:3px;border-left-color:var(--shu)}
#modal .dest-notes .eyebrow{font:700 14px/1.2 var(--display);letter-spacing:.01em;text-transform:none;color:var(--gold)}
#modal .dest-notes p{margin:6px 0 10px!important;font-size:13px;line-height:1.55}
/* monstros: só o guardião (ouro, deixa item) e o chefe do andar (vermelhão) ganham o fio de cima; o resto fica em tinta */
#modal[data-panel="destination"] .foe-card{border-color:var(--line2);border-top:3px solid var(--line2)}
#modal[data-panel="destination"] .foe-card.elite{border-top-color:var(--gold)}
#modal[data-panel="destination"] .foe-card.mini{border-top-color:var(--shu)}
#modal[data-panel="destination"] .foe-card small.skill{color:color-mix(in srgb,var(--washi) 90%,var(--bg0))}
/* a altura mínima de theme-sumi.css:875 fica só na descrição (alinha as habilidades da fileira); papel e habilidade perdem o vão */
#modal[data-panel="destination"] .foe-card>small:not(.desc){min-height:0}
/* abaixo de 1100 px a escolha e as dicas empilham (como em styles.css), com a escolha primeiro */
@media (max-width:1100px){
  #modal .dest-grid{grid-template-columns:minmax(0,1fr)}
}
/* celular: no cabeçalho do destino, "← Mapa" e o fechar dividem a primeira linha e o nome do lugar ganha a largura toda (antes o
   fechar caía numa terceira linha em 320 px e empurrava o Partir para baixo da dobra) */
@media (max-width:860px){
  #modal[data-panel="destination"] .modal-panel>header>div:first-of-type{order:2;flex:1 1 100%;min-width:0}
  #modal[data-panel="destination"] .modal-panel>header h2{white-space:normal;line-height:1.12}
  #modal[data-panel="destination"] .modal-panel>header .close{margin-left:auto}
  #modal .dest-notes .action{min-height:40px}
  /* a lore ocupa quase toda a largura da faixa e o véu de lado deixava o fim das linhas sobre pintura clara: aqui o véu vem de baixo.
     A miniatura basta nessa largura */
  #modal .destination-banner{background-image:linear-gradient(0deg,rgba(16,15,24,.95),rgba(16,15,24,.8) 60%,rgba(16,15,24,.5)),var(--art)}
  /* capital: "Entrar na capital" e "Ler o Livro do Véu" ficam em linhas próprias (as duas na largura toda estouravam a tela) */
  #modal .destination-banner+.destination-actions{flex-wrap:wrap;gap:10px}
}
/* celular: a faixa da partida vira duas linhas, os números em cima e, embaixo, o veredito com o Partir à direita, ao alcance do
   polegar (a caixa do comparativo some com display:contents e as peças dela entram na grade da faixa). Cabe em 320 e deixa o Partir
   na dobra em 360×650. O monstro vira linha (retrato à esquerda) */
@media (max-width:560px){
  #modal .destination-banner{padding:12px 14px 13px}
  #modal .destination-banner p{font-size:13.5px}
  #modal .dest-grid{margin-top:12px}
  #modal .stage-btn{min-height:44px;padding:4px 4px 3px}
  #modal .stage-btn b{line-height:1.15}
  #modal .dest-launch{grid-template-columns:auto auto minmax(0,1fr) auto;align-items:end;gap:6px 10px;padding:9px 8px 8px 11px}
  #modal .dest-launch .power-compare{display:contents}
  #modal .dest-launch .power-compare>div:nth-child(3){grid-column:3/-1}
  #modal .dest-launch .power-compare b{font-size:20px}
  #modal .dest-launch .power-compare p{grid-column:1/4;align-self:center;margin:0!important;font-size:12.5px}
  #modal .dest-launch .destination-actions{grid-column:4;padding:0}
  #modal .dest-launch .destination-actions .action{width:auto;min-width:104px;min-height:52px;padding:0 16px;font-size:16px}
  #modal .dest-facts>div{grid-template-columns:92px minmax(0,1fr);gap:10px}
  #modal[data-panel="destination"] .foe-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  #modal[data-panel="destination"] .foe-card{position:relative;gap:3px;min-height:104px;padding:10px 12px 11px 108px}
  #modal[data-panel="destination"] .foe-card canvas{position:absolute;left:12px;top:12px;width:84px;margin:0}
  #modal[data-panel="destination"] .foe-card b{text-align:left}
  #modal[data-panel="destination"] .foe-card>small{min-height:0}
}
/* celular baixo (perto de 360×650 com a barra do navegador): a lore para em 2 linhas e o requisito já cumprido sai (é passado; o
   que falta continua à vista), e o Partir entra na dobra mesmo quando o nome do lugar quebra em duas linhas */
@media (max-width:560px) and (max-height:740px){
  #modal .destination-banner p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  #modal[data-panel="destination"] .zone-requirements:not(:has(.missing)){display:none}
}
/* [/destino] */

/* [ficha] */
/* Ficha do herói. O nome mora no título do painel (não rola); a cabeça guarda origem, estrelas, selos e poder. Na aba Atributos ela é
   o cartão inteiro em faixas (identidade e poder, progresso lado a lado, comandos em fila) e não passa de ~215 px; nas outras abas vira
   uma tira de ~74 px (66 no celular) com o rosto, e o conteúdo da aba sobe para a primeira dobra. A fila de comandos é flex com vão de 8 px: a grade de
   2 colunas de theme-sumi.css:887 é do dock de luta e deixa de valer aqui. Poder em ouro (é valor); o vermelhão fica só no comando. */
div.hero-head{grid-template-columns:164px minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"art id pow" "art prog prog" "art act act";gap:12px 22px;padding:14px 18px 14px 14px;margin-bottom:14px}
.hero-head .hero-art{grid-area:art;height:172px}
.hero-head .hero-art img{max-height:164px}
.hero-head .hero-meta{grid-area:id;min-width:0}
.hero-head .hero-origin{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 8px;font-size:13px;line-height:1.2;color:var(--muted)}
.hero-head .hero-world{font:600 15px/1.2 var(--display);color:var(--muted)}
.hero-head .hero-origin .stars{font-size:15px;letter-spacing:.08em}
.hero-head .tags{margin:0}
.hero-head .pow-big{grid-area:pow;display:flex;flex-direction:column;align-items:flex-end;margin:0;line-height:1;white-space:nowrap}
.hero-head .pow-big small{margin:0 0 5px;font:700 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero-head .pow-big>span{font:28px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.hero-head .pow-big .ic{width:.8em;height:.8em;vertical-align:-1px}
.hero-prog{grid-area:prog;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;max-width:720px}
.hero-prog>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;align-content:start;gap:4px 6px;min-width:0}
.hero-prog b{font:18px/1.1 var(--display)}
.hero-prog small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hero-prog .meter,.hero-prog .meter+small{grid-column:1/-1}
.hero-head .hero-actions{grid-area:act;align-self:end;display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0;min-width:0}
.hero-head .hero-actions .action{flex-direction:column;flex-wrap:nowrap;gap:1px;min-height:40px;padding:5px 14px}
.hero-head .hero-actions .action>span .ic{margin-right:4px}
.hero-head .hero-actions .action small{flex-basis:auto}
.hero-head .hero-actions .action:disabled{opacity:.55}
.hero-head .hero-sub{display:flex;align-items:stretch;gap:8px;min-width:0}
/* a tira das outras abas: rosto; estrelas e nível numa linha, selos na outra; poder à direita */
div.hero-head.slim{grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:auto;grid-template-areas:"art id pow";align-items:center;gap:0 14px;padding:8px 18px 8px 8px}
.hero-face{grid-area:art;display:block;width:56px;height:56px;border-radius:2px;object-fit:cover;background:color-mix(in srgb,var(--c,#a98bd0) 12%,var(--bg0));box-shadow:0 0 0 1px color-mix(in srgb,var(--c,#a98bd0) 45%,transparent)}
.hero-head.slim .hero-origin{margin:0 0 6px}
.hero-head.slim .hero-origin b{font:16px/1.1 var(--display);color:var(--washi)}
.hero-head.slim .pow-big>span{font-size:24px}
@media (min-width:601px) and (max-width:1100px){
  /* tablet e notebook estreito: na coluna ao lado do retrato os comandos empilhavam (um por linha entre 601 e 740 px, com larguras
     diferentes). Eles descem para a largura toda do cartão, sob um retrato menor, e cada fila se completa. */
  div.hero-head{grid-template-columns:120px minmax(0,1fr) auto;grid-template-areas:"art id pow" "art prog prog" "act act act"}
  .hero-head .hero-art{height:128px;align-self:start}
  .hero-head .hero-art img{max-height:120px}
  .hero-head .hero-actions>*,.hero-head .hero-sub>.action{flex:1 1 auto}
}
@media (max-width:600px){
  /* celular: retrato ao lado da identidade; progresso e comandos na largura toda; os comandos que levam aos talentos ocupam a linha inteira */
  div.hero-head{grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"art id" "art pow" "prog prog" "act act";gap:10px 14px;padding:12px}
  .hero-head .hero-art{height:112px;align-self:start}
  .hero-head .hero-art img{max-height:106px}
  .hero-head .hero-world{flex-basis:100%;font-size:15px}
  .hero-head .pow-big{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;align-self:end}
  .hero-head .pow-big small{margin:0}
  .hero-head .pow-big>span{font-size:24px}
  .hero-prog{gap:10px 18px}
  .hero-prog b{font-size:16px}
  .hero-head .hero-actions .action{flex:1 1 0;min-height:44px;padding:5px 8px}
  .hero-head .hero-actions .action[data-tab-go],.hero-head .hero-sub{flex:1 1 100%}
  .hero-head .hero-actions .action>span .ic{display:none}
  /* tira no celular: o poder sobe para a linha das estrelas e os selos ganham a largura toda; o selo de posição fica só em Atributos */
  div.hero-head.slim{grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"art id pow" "art tags tags";align-items:center;gap:6px 10px;padding:8px 12px 8px 8px}
  .hero-head.slim .hero-meta{display:contents}
  .hero-head.slim .hero-origin{grid-area:id;gap:2px 8px;margin:0}
  .hero-head.slim .hero-origin .stars{font-size:13px;letter-spacing:.04em}
  .hero-head.slim .hero-origin small{display:none}
  .hero-head.slim .tags{grid-area:tags;gap:4px}
  .hero-head.slim .tags>.tag:not(.job){display:none}
  .hero-head.slim .hero-face{width:48px;height:48px}
  .hero-head.slim .pow-big{align-self:center}
  .hero-head.slim .pow-big small{display:none}
  .hero-head.slim .pow-big>span{font-size:20px}
}
/* [/ficha] */

/* [talentos] */
/* ---- talentos: a árvore é a pergunta do painel e começa logo no alto. Faixa 1: os pontos e o que fazer com eles (Aplicar
        build e Redefinir juntos, colados ao número; a conta de investidos fica apagada no fim da linha). Na ficha, "← Equipe"
        divide essa linha. Faixa 2: a árvore de classes numa linha só, recolhida enquanto o herói não pode avançar (abre
        sozinha quando pode; o passo seguinte ganha o selo vermelho). A legenda perde a caixa. ---- */
#modal[data-panel="hero"][data-tab="talents"] .map-back{float:left;margin:0 14px 10px 0}
.tree-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:40px;margin:0 0 10px}
.tree-top .tree-points{display:contents}
.tree-top .pts-big{order:1;display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-right:6px;padding:0;background:none;box-shadow:none;font:700 14px var(--ui);color:var(--muted);white-space:nowrap}
.tree-top .pts-big b{min-width:32px;height:32px;padding:0 6px;box-sizing:border-box;display:grid;place-items:center;border-radius:2px;border:1px solid var(--line2);background:rgba(238,229,208,.06);font:800 17px/1 var(--ui);color:var(--muted)}
.tree-top .pts-big.has{color:var(--washi)}
.tree-top .pts-big.has b{background:var(--shu);border-color:var(--shu-lo);color:var(--washi);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.tree-act{order:2;display:flex;gap:6px}
.tree-act .action{min-height:32px;padding:0 14px;font-size:12.5px}
.tree-top .tree-points small{order:3;margin-left:auto;font:500 12px/1.3 var(--ui);color:var(--muted)}

.class-path{clear:both;display:block;gap:0;margin:0 0 12px;padding:0;border:1px solid var(--line2);border-radius:3px;background:rgba(0,0,0,.2);container:cpath / inline-size}
.class-path.ready{border-color:rgba(203,66,44,.55);box-shadow:inset 3px 0 0 var(--shu)}
.cp-line{display:flex;align-items:center;gap:8px 16px;min-height:42px;padding:7px 12px;box-sizing:border-box}
summary.cp-line{cursor:pointer;list-style:none}
summary.cp-line::-webkit-details-marker{display:none}
summary.cp-line:hover{background:rgba(238,229,208,.035)}
summary.cp-line:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cp-steps{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}
.cp-step{display:flex;align-items:center;gap:8px;min-width:0}
.cp-step+.cp-step::before{content:"";flex:none;width:22px;height:1px;margin:0 0 0 8px;background:rgba(238,229,208,.24)}
.cp-step>i{flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:2px;border:1px solid rgba(238,229,208,.28);font:700 10.5px/1 var(--ui);font-style:normal;color:var(--muted)}
.cp-step.on>i{background:var(--gold);border-color:var(--gold-lo);color:#1d1206}
.class-path.ready .cp-step.on+.cp-step:not(.on)>i{background:var(--shu);border-color:var(--shu-lo);color:var(--washi)}
.cp-step>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;min-width:0}
.cp-step b{font:700 14px/1.25 var(--display);color:#cfc6b6}
.cp-step.on b{color:var(--washi)}
.cp-step small{font:500 12px/1.25 var(--ui);color:var(--dim)}
.cp-gain{display:none;flex-basis:100%;font:500 12px/1.35 var(--ui);font-style:normal;color:var(--muted)}
.class-path[open] .cp-gain{display:block}
.class-path[open] summary.cp-line{align-items:flex-start}
.class-path[open] .cp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;align-items:start;gap:8px 40px}
.class-path[open] .cp-step{align-items:flex-start}
.class-path[open] .cp-step+.cp-step::before{display:none}
.class-path[open] .cp-more{min-height:20px}
.cp-more{flex:none;display:inline-flex;align-items:center;gap:7px;font:600 12.5px var(--ui);color:var(--gold);white-space:nowrap}
.cp-more::before{content:"";border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;transition:transform .15s}
.class-path[open] .cp-more::before{transform:rotate(90deg)}
.cp-hide,.class-path[open] .cp-show{display:none}
.class-path[open] .cp-hide{display:inline}
.cp-body{display:grid;gap:8px;padding:2px 12px 12px}
.cp-trans{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.cp-trans small.branch-need{font:600 11.5px/1.3 var(--ui);color:#a79f90}

.talent-legend{margin:0 0 8px;padding:0 2px;gap:4px 16px;background:none;border:0}
.talent-legend span{font:600 12px var(--ui);color:var(--muted)}

/* celular: pontos e conta numa linha, os dois botões na seguinte (alvo de 42 px); a faixa de classes abre e fecha só pelo
   triângulo, sem o rótulo; no painel Talentos, os heróis viram uma fila que rola de lado em vez de quatro linhas */
@media (max-width:760px){
  .tree-top{gap:6px 10px}
  .tree-top .tree-points small{margin-left:0}
  .tree-act{order:4;flex:1 1 100%}
  .tree-act .action{flex:1 1 0;min-height:42px;padding:0 10px}
  .cp-line{gap:8px 10px}
  .hero-picker{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .hero-picker::-webkit-scrollbar{display:none}
  .hero-picker>*,.hero-picker>.action{flex:none;min-height:44px}
  .cp-more{min-height:26px}
  .cp-more>span,.class-path[open] .cp-more>span{display:none}
  .talent-legend{gap:4px 12px}
}
/* tela de toque de qualquer largura (tablet): os botões do cabeçalho com alvo de 42 px */
@media (pointer:coarse){
  .tree-act .action{min-height:42px}
  .hero-picker>*,.hero-picker>.action{min-height:44px}
}
/* faixa estreita (tablet e celular): recolhida, vira marcador de passos com o nome da classe atual; aberta, empilha os passos.
   O texto vazio dos passos sai do fluxo (senão soma o vão de 8 px ao número) e o filete fica com 8 px dos dois lados. */
@container cpath (max-width:1040px){
  .class-path:not([open]) .cp-steps{flex-wrap:nowrap}
  .class-path:not([open]) .cp-step b,.class-path:not([open]) .cp-step small{display:none}
  .class-path:not([open]) .cp-step:not(.on)>span,.class-path:not([open]) .cp-step.on:has(+ .cp-step.on)>span{display:none}
  .class-path:not([open]) .cp-step.on:not(:has(+ .cp-step.on)) b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .class-path:not([open]) .cp-step+.cp-step::before{width:12px;margin:0 0 0 8px}
  .class-path[open] .cp-steps{display:flex;flex-direction:column;align-items:stretch;gap:8px}
}
/* [/talentos] */

/* [cidade] */
/* ---- cabeça do prédio em três tamanhos (src/panels.js, bHead). Grade em vez do flex de styles.css:631, para o botão poder descer
        para baixo do nome no celular sem esticar (theme-game.css:468 o deixava em 100%) ---- */
.building-head.strip,.building-head.main,.building-head.minor{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px}
.building-head.strip>div,.building-head.main>div,.building-head.minor>div{min-width:0}
.building-head.strip>.action,.building-head.minor>.action{white-space:nowrap}
/* a descrição quebra em até 2 linhas antes das reticências */
.building-head.strip small,.building-head.minor small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* faixa da aba do serviço: a ação da aba é Refinar, Treinar, Resgatar; o prédio fica numa linha curta e o Melhorar é secundário */
.building-head.strip{padding:8px 12px;margin-bottom:14px}
.building-head.strip .b-icon{width:38px;height:38px}
.building-head.strip .b-icon .pi{width:30px;height:30px}
.building-head.strip b{font-size:15px}
/* Construções: a próxima obra em largura cheia, com o único botão de ouro; filete vermelhão de foco, como .city-kpis */
.building-head.main{padding:16px 18px;margin:0 0 10px;column-gap:16px;background:var(--bg3);border-color:var(--line2);border-left:3px solid var(--shu);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.building-head.main .eyebrow{display:block;margin-bottom:3px}
.building-head.main .b-icon{width:64px;height:64px}
.building-head.main .b-icon .pi{width:52px;height:52px}
.building-head.main b{font-size:22px}
.building-head.main small{margin-top:3px;font-size:13px;line-height:1.45}
.building-head.main>.action{min-height:44px;padding:0 22px;font-size:14px}
/* as outras seis em 2×3: menores, botão do tamanho do texto */
.building-list .building-head.minor{padding:10px 12px}
.building-head.minor .b-icon{width:40px;height:40px}
.building-head.minor .b-icon .pi{width:32px;height:32px}
.building-head.minor b{font-size:15px}
.building-head.minor small{line-height:1.4}

/* ---- Construções: o resumo da capital vira faixa (texto à esquerda, contagens à direita); as contagens ficam em linha também no
        celular, em vez de três caixas empilhadas (styles.css:760) ---- */
.city-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:12px 16px;margin-bottom:10px}
.city-overview>*:not(.city-kpis){grid-column:1}
.city-overview h3{margin:2px 0 3px;font-size:21px}
.city-overview .city-kpis{grid-column:2;grid-row:1/4;margin:0;grid-template-columns:repeat(3,minmax(0,142px))}
.city-kpis span{padding:6px 10px;line-height:1.25}
.city-kpis b{font-size:17px}
/* o filete vermelhão passa para a próxima obra (a ação); a contagem fica em papel */
.city-kpis span:first-child{border-left:1px solid var(--line)}
@media (min-width:861px){.city-overview .city-kpis{grid-template-columns:repeat(3,auto)}.city-overview .city-kpis span{white-space:nowrap}}
.building-list+.note{margin-top:10px}

/* ---- Forja e Oficina: a ficha do item escolhido em duas colunas (o item à esquerda, a bancada à direita) quando cada uma tem 300 px;
        abaixo disso, uma embaixo da outra. Os 4 materiais em 2×2, sem um sozinho na segunda linha ---- */
.forge-sheet{min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px;align-items:start}
.forge-sheet>*{min-width:0}
.forge-sheet .forge-box{margin-top:0}
.forge-sheet .forge-box>p:first-of-type{font-size:13px;margin-bottom:6px}
.forge-sheet .item{margin:0}
.forge-sheet .forge-mats{grid-template-columns:repeat(2,minmax(0,1fr))}
/* PC: a lista fica estreita (um quarto da largura, até 300 px) e acompanha a altura da ficha, rolando por dentro (contain:size tira a
   lista do cálculo da linha da grade). Assim o Refinar cabe em 1366×657 com a bolsa cheia e um Lendário de 2 slots na bigorna */
@media (min-width:861px){
  #modal[data-panel="city"]:is([data-tab="forge"],[data-tab="workshop"]) .split{grid-template-columns:minmax(210px,min(300px,24%)) minmax(0,1fr)}
  #modal[data-panel="city"]:is([data-tab="forge"],[data-tab="workshop"]) .split>.pick-list{contain:size;max-height:none}
}
/* Forja: o aviso de risco vem antes do Refinar (é lido antes do clique); custo e Refinar na mesma linha, o botão no canto de baixo.
   Na coluna estreita o custo quebra em linhas juntas, como etiqueta de preço ao lado do botão */
#modal[data-panel="city"][data-tab="forge"] .forge-box{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
#modal[data-panel="city"][data-tab="forge"] .forge-box>*{grid-column:1/-1}
#modal[data-panel="city"][data-tab="forge"] .forge-box>.note{grid-row:4;margin:0 0 4px}
#modal[data-panel="city"][data-tab="forge"] .forge-box>.cost-line{grid-column:1;grid-row:5;margin:4px 0 0;row-gap:4px}
#modal[data-panel="city"][data-tab="forge"] .forge-box>.action{grid-column:2;grid-row:5;margin-top:4px}

/* ---- Dojo: livro de treino. Um papel só, uma linha por treino (nome, nível e bônus, botão na coluna do preço), fio de tinta entre
        as linhas. A regra do teto e da metade fica no alto, uma vez ---- */
.train-book{border:1px solid var(--line);border-radius:4px;background:#1f1b29;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.train-book>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding:10px 16px;border-bottom:1px solid var(--line2)}
.tb-cap{font:700 12px var(--ui);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.tb-cap b{font:800 20px/1 var(--display);color:var(--gold);margin:0 1px 0 4px}
.train-book>header small{font-size:12.5px;color:var(--muted)}
.train-book>.note{margin:0;padding:8px 16px;border-bottom:1px solid var(--line)}
.train-book ol{list-style:none;margin:0;padding:0}
/* colunas do livro: treino | barra do nível até o teto (liga o nome ao valor) | o que já rende | preço */
.train-row{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr) minmax(96px,auto) auto;align-items:center;gap:8px 28px;padding:12px 16px}
.train-row+.train-row{border-top:1px solid var(--line)}
.tr-name{min-width:0}
.tr-name b{display:block;font:700 17px/1.2 var(--display);color:var(--washi)}
.tr-name small{font-size:12px;color:var(--muted)}
.tr-lv{display:flex;align-items:center;gap:10px;min-width:0}
.tr-lv .meter{flex:1;min-width:0}
.tr-lv small{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tr-val{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.tr-val b{font:700 15px var(--ui);color:var(--washi);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-val small{font-size:11px;color:var(--dim)}
.train-row .meter{height:6px;border-radius:2px;background:rgba(238,229,208,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.train-row .meter span{border-radius:1px}
.train-row>.action{justify-self:end;white-space:nowrap}
.train-row.full .tr-val b{color:var(--gold)}

/* ---- Guilda: a Ordem vira faixa (selo menor, prova à direita do título, escada de letras numa linha); os contratos sobem e cabem
        na primeira dobra de 1366×657. A escada guarda título e vantagem na dica (data-tip) ---- */
.order-rank{grid-template-columns:auto minmax(0,1fr);gap:10px 16px;padding:12px 16px;margin:0 0 4px;align-items:start}
.order-seal{width:56px;height:56px;grid-row:1/3}
.order-seal b{font-size:30px}
.order-seal small{font-size:8px;letter-spacing:.16em}
.order-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:18px;align-items:start}
.order-main>*:not(.order-exam){grid-column:1}
.order-main .eyebrow{text-transform:none;letter-spacing:.02em;font-size:12px}
.order-main h3{margin:1px 0 6px;font-size:20px}
.order-main>small{display:block;margin-top:4px;font-size:12.5px}
.order-main .order-exam{grid-column:2;grid-row:1/5;margin:0;padding:7px 11px}
.order-exam p{font-size:13px;line-height:1.4}
.order-ladder{grid-column:2;display:flex;flex-wrap:wrap;gap:4px}
.order-ladder li{flex:none;width:34px;height:30px;padding:0;align-items:center;justify-content:center;gap:0;opacity:1;border-color:var(--line);background:rgba(0,0,0,.18)}
.order-ladder li>span{display:none}
.order-ladder b{font-size:16px;line-height:1;color:var(--dim)}
.order-ladder li.on{border-color:rgba(226,170,78,.4);background:none}
.order-ladder li.on b{color:var(--gold)}
.order-ladder li.cur{border-color:var(--shu-lo);background:var(--shu)}
.order-ladder li.cur b{color:var(--washi)}
/* contratos da Guilda (só nesta aba; o mesmo cartão das Missões fica como está): número no canto do rótulo, título, texto e barra em
   largura cheia (o título não quebra no cartão estreito de 4 por linha), recompensa e botão na mesma linha. A linha do texto absorve a
   sobra de altura, então barra, recompensa e Resgatar ficam na mesma altura em todos os cartões da fileira */
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto auto;align-items:center;column-gap:12px;padding:12px 14px}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>*{grid-column:1/-1;margin-top:0}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>.eyebrow{grid-row:1;padding-right:52px}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>h3{grid-row:2;margin:1px 0 2px;font-size:19px}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>p:first-of-type{grid-row:3;align-self:start;margin:0 0 8px;font-size:13px}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>p:nth-of-type(2){grid-column:2;grid-row:1;justify-self:end;margin:0;font:700 15px var(--ui);color:var(--washi);font-variant-numeric:tabular-nums}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>.meter{grid-row:4;margin-bottom:10px}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>.guide-reward{grid-column:1;grid-row:5;margin:0;min-width:0}
#modal[data-panel="city"][data-tab="guild"] .grid2>.panel>.action{grid-column:2;grid-row:5}
/* três contratos (o começo) numa linha só; quatro em 2×2 e, a partir de 1200 px, numa linha (cada cartão com ~310 px, onde cabem a
   recompensa e o Resgatar; em 1366×657 a segunda linha do 2×2 ficava cortada); cinco em 3 + 2. Sem cartão sozinho na última linha */
@media (min-width:1000px){
  #modal[data-panel="city"][data-tab="guild"] .grid2{grid-template-columns:repeat(3,minmax(0,1fr))}
  #modal[data-panel="city"][data-tab="guild"] .grid2:has(>.panel:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){
  #modal[data-panel="city"][data-tab="guild"] .grid2:has(>.panel:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:860px){
  .city-overview{grid-template-columns:minmax(0,1fr)}
  .city-overview .city-kpis{grid-column:1;grid-row:auto;margin-top:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-main{grid-template-columns:minmax(0,1fr)}
  .order-main .order-exam{grid-column:1;grid-row:auto;margin-top:8px}
  /* Dojo: nome e o que já rende na primeira linha; barra do nível e botão na segunda */
  .train-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:12px}
  .tr-name{grid-column:1;grid-row:1}
  .tr-val{grid-column:2;grid-row:1}
  .tr-lv{grid-column:1;grid-row:2}
  .train-row>.action{grid-column:2;grid-row:2;min-height:40px;padding:0 12px}
  .train-book>header{padding:10px 12px}
  .tr-name b{font-size:16px}
  /* Sortear da Oficina com alvo de toque de 40 px (as linhas de slot de Bolsa > Cartas usam a mesma .ench-row e ficam como estão) */
  #modal[data-panel="city"][data-tab="workshop"] .ench-row .action{min-height:40px}
  #modal[data-panel="city"][data-tab="shrine"] .roster-row .action{min-height:40px}
  /* Forja e Oficina no tablet e no telefone (a .split já é uma coluna, styles.css:727): a lista vira uma fileira de ícones que rola
     de lado (o nome do escolhido está na ficha logo abaixo), para a ficha não ficar embaixo de uma lista de até 520 px. O nome
     continua no botão para leitor de tela. Só na cidade: Bolsa > Cartas usa a mesma .split>.pick-list */
  #modal[data-panel="city"] .split>.pick-list{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;gap:6px;padding:0 40px 2px 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  #modal[data-panel="city"] .split>.pick-list::-webkit-scrollbar{display:none}
  #modal[data-panel="city"] .split>.pick-list .pick-item{position:relative;flex:none;width:56px;height:56px;padding:0;justify-content:center;border-left-width:1px;border-bottom:3px solid var(--c)}
  #modal[data-panel="city"] .split>.pick-list .pick-item .item-art{width:42px;height:42px}
  #modal[data-panel="city"] .split>.pick-list .pick-item>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* telefone estreito (320): treino em três linhas, a barra ganha a largura toda; contagens da capital em linha, número e rótulo lado a lado */
@media (max-width:400px){
  .tr-name{grid-column:1/-1}
  .tr-lv{grid-column:1/-1;grid-row:2}
  .tr-val{grid-column:1;grid-row:3;flex-direction:row;align-items:baseline;gap:6px;justify-self:start}
  .train-row>.action{grid-column:2;grid-row:3}
}
@media (max-width:340px){
  .city-overview .city-kpis{grid-template-columns:minmax(0,1fr);gap:4px}
  .city-overview .city-kpis span{display:flex;align-items:baseline;gap:8px;padding:4px 10px}
  .city-overview .city-kpis b{display:inline}
}
@media (max-width:560px){
  /* faixa do serviço: só nome e nível (a ficha inteira está em Construções); o Melhorar desce para baixo do nome */
  .building-head.strip{grid-template-columns:auto minmax(0,1fr);row-gap:6px;padding:8px 12px}
  .building-head.strip small{display:none}
  .building-head.strip>.action,.building-head.minor>.action{grid-column:2;justify-self:start;min-height:40px}
  .building-head.minor{grid-template-columns:auto minmax(0,1fr);row-gap:8px;align-items:start}
  .building-head.minor small{-webkit-line-clamp:3}
  .forge-sheet{gap:8px}
  /* no telefone o custo ocupa a linha, o aviso de risco vem embaixo e o Refinar desce em largura cheia, como a ação principal das
     outras abas */
  #modal[data-panel="city"][data-tab="forge"] .forge-box{display:block}
  #modal[data-panel="city"][data-tab="forge"] .forge-box>.note{margin:8px 0 0}
  #modal[data-panel="city"][data-tab="forge"] .forge-box>.action{width:100%;margin-top:8px}
  .building-head.main{grid-template-columns:auto minmax(0,1fr);row-gap:12px;padding:14px;align-items:start}
  .building-head.main .b-icon{width:48px;height:48px}
  .building-head.main .b-icon .pi{width:40px;height:40px}
  .building-head.main b{font-size:19px}
  .building-head.main>.action{grid-column:1/-1;min-height:46px}
  .city-overview h3{font-size:19px}
  .city-kpis span{padding:6px 8px;font-size:10.5px}
  /* Guilda: selo ao lado do nome do rank; barra, prova e escada em largura cheia (a coluna da Ordem se desfaz na grade da faixa) */
  .order-rank{gap:0 12px;padding:12px}
  .order-main{display:contents}
  .order-rank>.order-seal{width:48px;height:48px;grid-column:1;grid-row:1/3}
  .order-seal b{font-size:26px}
  .order-rank>.order-main>.eyebrow{grid-column:2;grid-row:1;align-self:end}
  .order-rank>.order-main>h3{grid-column:2;grid-row:2;align-self:start;margin:0}
  .order-rank>.order-main>.meter,.order-rank>.order-main>small,.order-rank>.order-main>.order-exam{grid-column:1/-1;grid-row:auto}
  .order-rank>.order-main>.meter{margin-top:12px}
  .order-rank>.order-main>.order-exam{margin-top:10px}
  .order-ladder{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:12px}
  .order-ladder li{width:auto;height:40px}
}
/* [/cidade] */

/* [emporio] */
/* Empório: o item do balcão é o maior e tem o único botão de ouro; o resto vem em grupos de cartões deitados, com
   botão de papel. Preço é número com a moeda pintada da barra do topo; o que o jogador já tem é selo no canto. */
.emp{display:flex;flex-direction:column;gap:20px}
.emp-pic{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px}
.emp-pic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.emp-pic .pi{font-size:46px;vertical-align:0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.emp-pic.big{width:104px;height:104px}
.emp-pic.big .pi{font-size:90px}
.emp-have{position:absolute;right:-5px;bottom:-3px;min-width:20px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:2px;background:var(--bg0);border:1px solid rgba(238,229,208,.32);color:var(--washi);font:800 11px/1 var(--ui);font-style:normal;font-variant-numeric:tabular-nums;box-shadow:0 1px 0 rgba(0,0,0,.5)}
.emp-pic.big .emp-have{right:2px;bottom:4px;min-width:26px;height:23px;font-size:13px}
/* o frasco do elixir é estreito: um pouco maior para pesar o mesmo que a cabaça e a marmita ao lado */
.emp-pic .pi-elixir{transform:scale(1.14)}
/* sem pintura ainda: o kanji do cardápio numa plaquinha de madeira, como as da parede de uma casa de ramen. O tom
   fica no valor das pinturas vizinhas, para não competir com o botão de ouro */
.emp-kj{display:grid;place-items:center;width:34px;height:42px;border-radius:2px;background:color-mix(in srgb,var(--gold-lo) 58%,var(--washi));color:var(--ink);font:800 25px/1 var(--display);font-style:normal;box-shadow:inset 0 0 0 2px rgba(16,15,24,.75),0 2px 0 rgba(0,0,0,.45)}

/* balcão */
.emp-lead{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(280px,auto);align-items:center;gap:24px;padding:18px 24px 18px 20px;border-radius:3px;background:var(--bg3);border:1px solid rgba(226,170,78,.3);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.emp-lead .emp-txt{min-width:0}
.modal-body .emp-lead h3{margin:0 0 6px;padding:0;font:700 26px/1.15 var(--display);color:var(--washi)}
.emp-lead p{margin:0;max-width:50ch;font:500 14px/1.5 var(--ui);color:var(--muted)}
.emp-lead .emp-meta{margin-top:6px}
.emp-deals{display:flex;flex-direction:column}
.emp-deal{display:flex;align-items:center;gap:12px;min-width:0}
.emp-deals .emp-deal{padding:8px 0}
.emp-deals .emp-deal+.emp-deal{border-top:1px solid var(--line2)}
/* o preço encosta no botão que ele paga (número alinhado à direita). A sobra fica entre a quantidade e o preço */
.emp-deals .emp-price{margin-left:auto}
.emp-deals .action{min-width:128px}
.emp-qty{display:inline-flex;align-items:baseline;gap:6px;min-width:76px;font:700 15px/1 var(--display);color:var(--washi)}
.emp-qty small{font:800 11px/1 var(--ui);color:var(--gold);letter-spacing:.02em}
.emp-price{display:inline-flex;align-items:center;gap:6px;font:700 17px/1 var(--display);color:var(--gold-hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.emp-price .pi{font-size:19px;vertical-align:0}
.emp-price.short{color:var(--dim)}
.emp-price.short .pi{opacity:.55}

/* grupos */
.emp-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 18px;align-items:start}
/* duas colunas: o segundo grupo (o mais longo) fica sozinho na da direita, sem buraco embaixo do primeiro */
@media (min-width:600px){
  .emp-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .emp-group:nth-child(2){grid-column:2;grid-row:1/span 2}
}
.emp-group{display:flex;flex-direction:column;gap:8px;min-width:0;container:emp-group/inline-size}
.emp-group h4{display:flex;align-items:center;gap:10px;margin:0 0 2px;font:700 15px/1.2 var(--display);color:var(--gold)}
.emp-group h4::after{content:"";flex:1;height:1px;background:var(--line2)}
/* cartão deitado: pintura, texto e, à direita, preço sobre o botão; em coluna estreita o preço desce para baixo do texto */
.emp-card{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"pic txt" "pic buy";gap:8px 12px;padding:12px 12px 10px;border-radius:3px;background:#1f1b29;border:1px solid var(--line);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.emp-card .emp-pic{grid-area:pic;align-self:start}
.emp-card .emp-txt{grid-area:txt;min-width:0;display:flex;flex-direction:column;gap:3px}
.emp-card .emp-deal{grid-area:buy;justify-content:space-between}
.emp-card .action{min-width:96px;margin-left:auto}
@container emp-group (min-width:340px){
  .emp-card{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"pic txt buy";align-items:center;padding:10px 12px}
  .emp-card .emp-pic{width:48px;height:48px;align-self:center}
  .emp-card .emp-pic .pi{font-size:42px}
  .emp-card .emp-deal{flex-direction:column;align-items:flex-end;justify-content:center;gap:7px}
  .emp-card .action{min-width:90px}
}
.emp-txt b{font:700 15px/1.25 var(--display);color:var(--washi)}
.emp-txt small{font:500 12.5px/1.45 var(--ui);color:var(--muted)}
.emp-txt .emp-meta{font-weight:700;color:var(--dim)}
.emp-txt .emp-on{font:inherit;color:var(--green)}
.emp-note{margin:0}

/* tela larga: o balcão vira a peça alta da esquerda; os grupos em duas colunas, o segundo (o mais longo) sozinho na
   da direita. Assim a aba inteira cabe em 1366×657 sem rolar. */
@media (min-width:1100px){
  .emp{display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr);gap:12px 22px}
  .emp-lead{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start;gap:14px;padding:20px 20px 12px}
  .emp-pic.big{width:116px;height:116px;justify-self:start}
  .emp-pic.big .pi{font-size:100px}
  .emp-lead p{max-width:none}
  .emp-deals{align-self:end}
  .emp-deals .action{min-width:118px}
  .emp-qty{min-width:60px}
  .emp-groups{gap:12px 18px}
  .emp-group{gap:6px}
  .emp-card{padding-top:8px;padding-bottom:8px}
  .emp-note{grid-column:1/-1}
}

@media (max-width:860px){
  .emp{gap:16px}
  .emp-pic.big{width:72px;height:72px}
  .emp-pic.big .pi{font-size:62px}
  .emp-pic.big .emp-have{right:-4px;bottom:-2px;min-width:22px;height:21px;font-size:12px}
  .modal-body .emp-lead h3{font-size:21px}
  .emp-lead p{font-size:13px}
  .emp-deals .action{min-width:118px}
  .emp .action{min-height:40px}
  .emp-groups{gap:14px}
}
/* tablet: o balcão continua uma faixa de três colunas (pintura, texto, compras), com as compras do tamanho do que
   têm dentro. O preço não se afasta do botão */
@media (min-width:600px) and (max-width:860px){
  .emp-lead{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 18px;padding:8px 16px 8px 14px}
  .emp-qty{min-width:60px}
}
/* celular: as compras descem para uma linha inteira embaixo da pintura e do texto */
@media (max-width:599.98px){
  .emp-lead{grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:14px 14px 6px}
  .emp-deals{grid-column:1/-1;margin-top:6px}
}
/* 320 a 360: a quantidade empilha (×10 em cima, −10% embaixo) para a linha caber. Os dois botões guardam a mesma borda */
@media (max-width:360px){
  .emp-qty{flex-direction:column;align-items:flex-start;gap:2px;min-width:0;width:40px}
}
/* [/emporio] */

/* [enciclopedia] */
/* ---- Enciclopédia, índice: no computador ele rola sozinho dentro da altura do corpo do painel (unidade do contêiner, que acompanha
        1366×657, 800 e o zoom das telas grandes) e termina acima da seta de "há mais"; o pé some em meia-tinta para dizer que continua.
        Sem suporte a contêiner, 100cqh vira altura da tela e fica como antes ---- */
#modal[data-panel="wiki"] .modal-body{container-type:size}
@media (min-width:761px){
  .wiki-nav{max-height:calc(100cqh - 22px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:30px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)}
}
/* a busca fixa encosta no alto do corpo do painel (o recuo do corpo é 18 px no computador e 12 px no celular) */
@media (max-width:860px){.wiki-search{top:-12px}}
#wiki-search{text-overflow:ellipsis}
/* o salto de "Nesta página" para o subtítulo abaixo da busca fixa, não atrás dela */
.wiki-body [data-wiki-h]{scroll-margin-top:66px}
.wiki-body .wiki-more [data-wiki-h]{scroll-margin-top:78px}
/* "Nesta página" no celular: uma fileira que rola de lado, como a dos assuntos, em vez de três linhas de botões */
@media (max-width:760px){.wiki-toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}.wiki-toc::-webkit-scrollbar{display:none}.wiki-toc small,.wiki-toc button{flex:none}}

/* ---- Enciclopédia, Combate: o nome da regra em serifa de título; a vez (a regra-mãe) ocupa a linha toda, maior, com o filete
        vermelhão de onde se começa; as outras doze ficam em "Mais regras", uma faixa recolhida com os nomes à mostra.
        O nome fica em linha (não em bloco): na página Cidade o selo "Conta nível N" vem logo depois dele e tem de ficar ao lado ---- */
.wiki-rule>div>b{font:700 16px/1.3 var(--display);color:var(--washi)}
.wiki-rules.basic{grid-template-columns:repeat(auto-fill,minmax(max(340px,calc(50% - 4px)),1fr))}
.wiki-rules.basic .wiki-rule:first-child{grid-column:1/-1;padding:14px 16px;border-left:3px solid var(--shu)}
.wiki-rules.basic .wiki-rule:first-child>div>b{font-size:19px}
.wiki-rules.basic .wiki-rule:first-child p{font-size:14.5px!important;color:#d9d0c1}
.wiki-rules.basic .wiki-rule:first-child .wr-ico{width:46px;height:46px}
.wiki-rules.basic .wiki-rule:first-child .wr-ico .pi{width:32px;height:32px}
.wiki-more{margin:4px 0 6px}
.wiki-more>summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:11px 14px;border-radius:3px;border:1px solid var(--line2);background:rgba(238,229,208,.035);cursor:pointer;list-style:none}
.wiki-more>summary::-webkit-details-marker{display:none}
.wiki-more>summary::before{content:"";flex:none;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--gold);transition:transform .15s}
.wiki-more[open]>summary::before{transform:rotate(90deg)}
.wiki-more>summary:hover{border-color:rgba(226,170,78,.5)}
.wiki-more>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wiki-art .wiki-more>summary h4{margin:0!important;padding:0;border:0;font:700 16px/1.3 var(--display);color:var(--washi)}
.wiki-more>summary em{font:700 12px/1 var(--ui);font-style:normal;padding:3px 5px;border-radius:2px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.wiki-more>summary span{flex-basis:100%;min-width:0;padding-left:17px;font:500 13px/1.5 var(--ui);color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* os nomes das doze, em até duas linhas; somem quando a faixa abre */
.wiki-more[open]>summary span{display:none}
.wiki-more[open]>summary{margin-bottom:8px}

/* ---- Enciclopédia, celular: as regras leem como linhas de livro (fio entre elas, sem caixa dentro da caixa) e o artigo cede o respiro
        lateral para o texto ---- */
@media (max-width:700px){
  .wiki-art{padding:14px 12px}
  .wiki-rules,.wiki-rules.basic{grid-template-columns:minmax(0,1fr);gap:0}
  .wiki-rule{padding:12px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
  .wiki-rules .wiki-rule:first-child{border-top:0}
  .wiki-rules.basic .wiki-rule:first-child{padding:12px;border:0;border-left:3px solid var(--shu);background:rgba(238,229,208,.035)}
  .wiki-rules.basic .wiki-rule:first-child>div>b{font-size:18px}
  .wiki-rules.basic .wiki-rule:first-child p{font-size:14px!important}
  .wiki-rule .wr-ico{width:32px;height:32px}
  .wiki-rule .wr-ico .pi{width:22px;height:22px}
  .wiki-rules.basic .wiki-rule:first-child .wr-ico{width:38px;height:38px}
  .wiki-rules.basic .wiki-rule:first-child .wr-ico .pi{width:26px;height:26px}
  .wiki-more>summary{min-height:48px}
}

/* no toque (e no celular), todo alvo da Enciclopédia com 40 px: índice, "Nesta página", filtros de Heróis, "Abrir" da Cidade, o pé do
   livro, "Ver região" do caderno de campo e os resumos dos apêndices (estes ganham o respiro em cima e embaixo, para o texto ficar no meio,
   e o recuo pendente: em 320 o resumo quebra em duas linhas e a segunda começa sob o texto, não sob a seta) */
@media (max-width:900px),(pointer:coarse){
  .wiki-toc button,.wiki-nav button,.wiki-filter button{min-height:40px}
  .wiki-toc button{padding:0 12px}
  #modal[data-panel="wiki"] .wiki-rule .action,#modal[data-panel="wiki"] .wiki-grid .action,#modal[data-panel="wiki"] .book-nav .action{min-height:40px}
  #modal[data-panel="wiki"] .book-appendix>summary{min-height:40px;padding:12px 0 12px 1.07em;text-indent:-1.07em}
}

/* ---- Ajuda: um foco (o próximo passo, com o comando em ouro na ponta direita), os temas em uma linha cada, com os botões na mesma
        coluna do comando, e os atalhos de teclado numa coluna à parte, que some no toque. Cor chapada, fio de tinta entre as linhas ---- */
.hp-layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:20px;align-items:start}
.hp-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.hp-next{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:16px 18px 16px 16px;border-radius:3px;border:1px solid var(--line2);border-left:3px solid var(--shu);background:#1f1b29;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.hp-next.done{border-left-color:var(--gold)}
.hp-ico{width:58px;height:58px;display:grid;place-items:center;border-radius:3px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px var(--line2)}
.hp-ico .pi{width:42px;height:42px}
.hp-txt{min-width:0}
.hp-txt small{display:block;font:700 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hp-txt small em{font-style:normal;letter-spacing:.04em;color:var(--muted);margin-left:6px}
.hp-next h3{margin:4px 0 3px;font:800 25px/1.15 var(--display);color:var(--washi)}
.hp-next p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.hp-reward{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.hp-act{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.hp-act .action{min-width:164px}
.hp-act .action.ghost{min-width:0}
.hp-topics{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.hp-topics li{display:grid;grid-template-columns:32px 168px minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:8px 18px 8px 8px;border-top:1px solid var(--line)}
.hp-tico{width:32px;height:32px;display:grid;place-items:center}
.hp-tico .pi{width:28px;height:28px}
.hp-topics b{font:700 16px/1.25 var(--display);color:var(--washi)}
.hp-topics li>span:not(.hp-tico){min-width:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.hp-topics .action{min-width:164px;align-self:end}
.hp-keys{padding:14px 16px 10px;border-radius:3px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.modal-body .hp-keys h4{margin:0 0 10px;font:700 16px/1.25 var(--display);color:var(--washi)}
.hp-keys .key-list{font-size:13px}
.hp-keys .key-list li{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:baseline;gap:10px;margin:0 0 5px}
.hp-keys .key-list li>span:first-child{display:flex;flex-wrap:wrap;gap:3px}
.hp-keys .key-list kbd{margin:0;min-width:1.75em;padding:0 4px}
@media (max-width:1180px){
  .hp-next{grid-template-columns:58px minmax(0,1fr)}
  .hp-act{grid-column:2;margin-top:6px}
  .hp-topics li{grid-template-columns:32px minmax(0,1fr) auto}
  .hp-topics b{grid-column:2}
  .hp-topics li>span:not(.hp-tico){grid-column:2}
  .hp-tico{grid-row:1/3;align-self:start;margin-top:2px}
  .hp-topics .action{grid-column:3;grid-row:1/3}
}
@media (max-width:1100px){.hp-layout{grid-template-columns:minmax(0,1fr)}}
/* sem teclado (toque), os atalhos saem */
@media (hover:none) and (pointer:coarse){.hp-keys{display:none}.hp-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .hp-main{gap:12px}
  .hp-next{grid-template-columns:44px minmax(0,1fr);gap:8px 12px;padding:14px 12px}
  .hp-ico{width:44px;height:44px;align-self:start}
  .hp-ico .pi{width:32px;height:32px}
  .hp-next h3{font-size:22px}
  .hp-act{grid-column:1/-1;justify-content:stretch}
  .hp-act .action{flex:1 1 0;min-width:0;min-height:44px}
  .hp-topics li{grid-template-columns:32px minmax(0,1fr);padding:12px 4px}
  .hp-topics .action{grid-column:2;grid-row:3;justify-self:start;min-width:0;margin-top:6px}
}
/* [/enciclopedia] */

/* [equipe] */
/* Equipe em três blocos, na ordem de leitura: formação (o foco), sinergias e a lista. No computador as sinergias ocupam a coluna da
   direita ao lado dos dois; abaixo de 1100 px (uma coluna, styles.css:727) entram logo depois da formação, não no fim da página. */
.party-layout{grid-template-areas:"form syn" "bench syn";grid-template-rows:auto 1fr}
.party-form{grid-area:form;min-width:0}
.party-syn{grid-area:syn;min-width:0}
.party-bench{grid-area:bench;min-width:0;align-self:start}
@media (max-width:1100px){.party-layout{grid-template-areas:"form" "syn" "bench";grid-template-rows:auto}}

/* formação: o poder total é o número da tela (número grande em ouro, rótulo miúdo embaixo, como o poder de cada linha); o comando
   vem depois das vagas, com a dica na mesma linha quando cabe */
.party-form .section-title{align-items:flex-end}
.section-title .party-power{display:flex;flex-direction:column;align-items:flex-end;font:700 9.5px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.section-title .party-power b{font:700 24px/1 var(--display);letter-spacing:0;color:var(--gold);margin-bottom:3px}
.party-form .note{margin:8px 0 0}
.party-form .team-quick{margin:12px 0 0;gap:6px 14px}
.party-form .team-quick small{flex:1 1 220px;min-width:0;font-size:12.5px;line-height:1.4}

/* sinergias: um título só com a contagem do que está ligado; cada grupo com rótulo miúdo; uma linha por sinergia (contagem do
   nível, nome, o bônus que vale em ouro e o próximo apagado); o que não tem ninguém na equipe vira uma linha que abre ao toque */
.party-syn .syn-panel>.sub-title{margin:4px 0 12px!important}
.party-syn .sub-title small{margin-left:auto;font:600 12px var(--ui);letter-spacing:0;color:var(--dim)}
.party-syn .sub-title small b{font:700 16px var(--display);color:var(--gold)}
.syn-group{margin:0 0 14px}
.syn-group>h5{margin:0 0 6px;font:700 10px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.syn-line{display:grid;grid-template-columns:34px 108px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:7px 10px 7px 4px;margin:0 0 3px;border-radius:2px;border-left:3px solid var(--line2);background:rgba(238,229,208,.03)}
.syn-line.on{border-left-color:var(--gold);background:rgba(226,170,78,.08)}
.syn-n{font:700 17px/1 var(--display);color:var(--muted);text-align:right;white-space:nowrap}
.syn-n i{font:600 11px var(--ui);font-style:normal;color:var(--dim)}
.syn-line.on .syn-n{color:var(--gold)}
.syn-name{display:flex;align-items:center;gap:5px;min-width:0;font:700 13px/1.3 var(--ui);color:var(--washi);white-space:nowrap}
.syn-name .pi{flex:none;width:16px;height:16px}
.syn-gain{display:flex;flex-direction:column;gap:2px;min-width:0;font:500 12.5px/1.4 var(--ui);color:var(--washi)}
.syn-line.on .syn-gain>span:first-child{color:var(--gold-hi)}
.syn-gain .next{font-size:12px;color:var(--dim)}
.syn-line.near .syn-gain .next{font-size:12.5px;color:var(--muted)}
.syn-els,.syn-line.tier{grid-template-columns:34px minmax(0,1fr)}
.syn-els .syn-name{flex-wrap:wrap;gap:3px 12px;white-space:normal}
.syn-els .syn-name>span{display:inline-flex;align-items:center;gap:5px}
.syn-els .syn-gain{grid-column:2;margin-top:3px}
.syn-line.off{margin:0;padding-top:4px;padding-bottom:4px;background:none;border-left-color:transparent}
.syn-line.off .syn-n{font-size:14px;color:var(--dim)}
.syn-line.off .syn-name{color:var(--muted)}
.syn-line.tier.got .syn-n,.syn-line.tier.got .next{color:var(--gold)}
.syn-rest>summary{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 10px 4px 13px;list-style:none;cursor:pointer;font:600 12.5px/1.35 var(--ui);color:var(--dim)}
.syn-rest>summary::-webkit-details-marker{display:none}
.syn-rest>summary::before{content:"";flex:none;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.syn-rest[open]>summary::before{transform:rotate(90deg)}
.syn-rest>summary:hover{color:var(--muted)}
.syn-rest>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.syn-rest>div{padding:0 0 6px}
.syn-none{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0;font-size:12.5px;color:var(--muted)}
.party-syn .bond{gap:12px;padding:7px 10px 7px 8px;margin:0 0 3px;border:0;border-left:3px solid var(--line2);border-radius:2px;background:rgba(238,229,208,.03)}
.party-syn .bond.on{border-left-color:var(--gold);background:rgba(226,170,78,.08)}
.party-syn .bond-faces{flex:none;padding-right:8px}
.party-syn .bond-faces img{width:30px;height:30px;border-radius:2px;margin-right:-8px;border:2px solid var(--bg1)}
.party-syn .bond b{font:700 13px/1.3 var(--ui);color:var(--washi)}
.party-syn .bond.on b{color:var(--gold-hi)}
.party-syn .bond small{font-size:12px;color:var(--muted)}
.party-syn .bond>em{flex:none;font:700 10px var(--ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.party-syn .bond.on>em{padding:2px 6px;border-radius:2px;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(226,170,78,.6)}

/* lista: a barra cresce com a coleção (só a busca, sem caixa, até 8); raridade como selo de pigmento vazado, igual aos itens, no lugar
   do bloco roxo chapado; os comandos da linha ficam juntos */
.party-bench .section-title{flex-wrap:wrap;row-gap:2px;margin:0 0 10px}
.party-bench .section-title h3{white-space:nowrap}
.party-filter input[type=search]{flex:1 1 160px}
.party-filter.only-q{padding:0;background:none;border:0}
.party-filter.only-q input[type=search]{flex-basis:100%}
.rr-act{display:flex;align-items:center;gap:8px;flex:none}
.party-empty{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0;padding:12px 14px;border:1px dashed var(--line2);border-radius:3px;font-size:13px;color:var(--muted)}
/* alvo de toque de 40 px: no celular e em tablet com toque (deitado ele passa de 1100 px e fica com a disposição do computador) */
@media (max-width:900px),(hover:none){
  .syn-rest>summary,.syn-none .action,.party-empty .action,.party-bench .rr-act .action{min-height:40px}
  .party-form .team-quick .action,.party-filter input[type=search],.party-filter select,.party-filter .rar-pill{min-height:40px}
}
/* celular: a linha do herói vira duas (retrato e nome com a largura toda em cima; poder e comandos embaixo) em vez de espremer o
   nome em três linhas entre o poder e os botões; a barra cheia vira grade de duas colunas; na sinergia o bônus desce para baixo do
   nome e ganha a largura toda */
@media (max-width:560px){
  .party-bench .roster-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"img info info" "img pow act";column-gap:10px;row-gap:6px;align-items:center}
  .party-bench .roster-row>img{grid-area:img;align-self:start}
  .party-bench .roster-row>div{grid-area:info}
  .party-bench .roster-row>.pow{grid-area:pow;min-width:0;text-align:left}
  .party-bench .roster-row .pow::after{display:inline;margin-left:5px}
  .party-bench .roster-row>.rr-act{grid-area:act;justify-content:flex-end}
  .party-filter:not(.only-q){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .party-filter:not(.only-q)>input,.party-filter .hf-rarity,.party-filter #hf-sort,.party-filter>small{grid-column:1/-1}
  .party-filter select{width:100%;min-width:0}
  .party-filter>small{margin-left:0}
  .syn-line,.syn-els,.syn-line.tier{grid-template-columns:30px minmax(0,1fr);column-gap:8px}
  .syn-line .syn-gain{grid-column:2;margin-top:3px}
}
/* de 1101 a 1279 px (inclui o iPad deitado) as quatro vagas dividem a coluna da esquerda com as sinergias ao lado: com o retrato de
   58 px a classe saía cortada no meio da palavra ("Vangua", "Execut") e o poder quebrava em duas linhas. Retrato de 40 px e selo
   de classe mais justo, como a 320 px. Na barra da lista a busca ganha a linha dela (espremida entre os seletores, perdia o fim do
   texto) e os seletores dividem a de baixo, sem um sobrando sozinho */
@media (min-width:1101px) and (max-width:1279px){
  .party-form .formation-slot{gap:6px;padding-left:7px;padding-right:7px}
  .party-form .formation-slot img{width:40px;height:40px}
  .party-form .formation-slot .cls-tag{gap:2px;font-size:10.5px}
  .party-form .formation-slot .cls-tag .pi{width:12px;height:12px}
  .party-filter:not(.only-q) input[type=search]{flex-basis:100%}
  .party-filter select{flex:1 1 auto}
}
/* 320 px: duas vagas por linha ainda cabem com retrato de 40 px; o nome e a classe deixam de ser cortados */
@media (max-width:360px){
  .party-form .formation-slot{gap:6px;padding:22px 7px 8px}
  .party-form .formation-slot img{width:40px;height:40px}
  .party-form .formation-slot b{font-size:13px}
  .party-form .formation-slot small{font-size:11px}
  .party-form .formation-slot .cls-tag{gap:2px;font-size:10.5px}
  .party-form .formation-slot .cls-tag .pi{width:12px;height:12px}
}
/* toque: o xis que tira o herói da vaga (styles.css:471) tinha 20 px. Vira alvo de 40 px no canto, alinhado ao rótulo FRENTE ou
   RETAGUARDA numa faixa de cabeçalho da vaga, para não cair em cima do nome. Fica depois da regra de 360 px, cujo atalho de
   padding desfaria o padding-top */
@media (max-width:900px),(hover:none){
  .party-form .formation-slot{padding-top:38px}
  .party-form .formation-slot .row-label{top:14px}
  .party-form .formation-slot .remove{top:0;right:0;width:40px;height:40px}
}
/* Ficha na vaga: a formação é onde o jogador procura quem está na equipe, então a ficha abre dali. Uma faixa no pé da
   vaga, com alvo de toque inteiro; a vaga continua sendo o botão de escolher a posição. */
.formation-slot.filled{flex-wrap:wrap;align-content:space-between}
.formation-slot.filled>img+span{flex:1 1 0}
.formation-slot .fs-sheet{flex:1 0 100%;display:flex;align-items:center;justify-content:center;min-height:28px;margin:4px -9px -9px;padding:0 9px;border-top:1px solid var(--line);font:700 11.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(13,12,18,.35);cursor:pointer}
.formation-slot .fs-sheet:hover{color:var(--washi);background:rgba(236,226,208,.08)}
.party-hint{margin:8px 0 0}
@media (min-width:1101px) and (max-width:1279px){ .party-form .formation-slot .fs-sheet{margin-left:-7px;margin-right:-7px} }
@media (max-width:360px){ .party-form .formation-slot .fs-sheet{margin:4px -7px -8px} }
@media (max-width:900px),(hover:none){ .party-form .formation-slot .fs-sheet{min-height:36px} }
/* [/equipe] */

/* [fontes] */
/* [/fontes] */

/* [combate] */
/* combate: o console, os controles do palco e o MAIS da luta moram em theme-battle.css (folha só da luta). Só uma troca de tinta
   precisa morar aqui: os Pontos de Técnica (número, contas de custo, "PT" da linha de informação e da dica) vão para o ciano da
   carta, porque o verde é a vida, no console e no palco */
.bh-sp b,.bh-info .pt,.tip-kit .meta span.cost{color:var(--cyan)}
.ab-cost i{background:var(--cyan)}
/* [/combate] */

/* [bolsa] */
/* ---- bolsa: a pergunta do painel é "o que tenho". As vagas da ficha são o único filtro por vaga (a fila Tudo/Arma/Foco…
        saiu de panels.js quando há herói); a vaga escolhida acende o nome em ouro e a linha .inv-scope, acima da grade, diz
        qual é, quantos há e "Ver tudo" ---- */
.doll-pick:hover{background:rgba(238,229,208,.045)}
.doll-slot.focus .doll-pick small{color:var(--gold)}
.inv-scope{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px;padding:0 2px 8px;border-bottom:1px solid var(--line)}
.inv-scope b{font:700 17px/1.2 var(--display);color:var(--washi)}
.inv-scope span{font:600 12.5px var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.inv-scope .action{align-self:center}
/* abas irmãs na mesma tira de papel: Armazém sem o baú (as abas do painel também só falam texto). Cartas sem fio fica na regra da aba Cartas, acima */
.inv-tabs .ic{display:none}
/* ferramentas: "Desmontar em massa" fechado fica na linha de "Guardar"; aberto, desce para a linha inteira (theme-sumi.css:260) */
.inv-tools .salvage-box:not([open]){flex-basis:auto;margin-left:6px}

/* ---- cartão de item da bolsa: o verbo (Equipar, Desequipar) ocupa a primeira linha inteira; os comandos de ícone dividem a
        segunda em partes iguais, numa fileira só. No Armazém "Trazer para a bolsa" também ganha a linha inteira, e cadeado e
        Refinar dividem a terceira. O nome do comando (.act-lbl) só aparece no toque, onde não há dica de mouse ---- */
.inv-main .item footer{gap:6px}
.inv-main .item footer>.action{flex:1 1 0;min-width:0;padding:0 6px}
.inv-main .item footer>.action:first-child{flex:1 1 100%;padding:0 10px}
.inv-main .item footer>.action[data-retrieve]{flex:1 1 100%;padding:0 10px}
.inv-main .item footer .ic{font-size:15px}
.inv-main .act-lbl{display:none}
/* o que decide se o nome cabe é a largura do cartão, não a da tela: a 768 e a 1024 a grade tem colunas mais estreitas que a do
   celular. Cada cartão vira contêiner e as regras abaixo medem o rodapé */
.inv-main .inventory-grid>.item{container:inv-card/inline-size}
@media (hover:none) and (pointer:coarse){
  .inv-main .item footer>.action{min-height:40px}
  .inv-main .item footer .ic{font-size:17px}
  .inv-main .item footer>.action[data-lock]{flex:0 0 40px;min-width:40px}
  /* "Desmontar" pede uns 65 px de botão: com o cadeado e mais três comandos, isso só existe a partir de 270 px de cartão */
  @container inv-card (min-width:270px){
    .inv-main .item footer>.action:has(.act-lbl){flex-direction:column;gap:3px;min-height:46px;padding:4px 2px}
    .inv-main .act-lbl{display:block;font:700 10.5px/1.1 var(--ui);letter-spacing:0;white-space:nowrap}
  }
  /* modo de troca (Vender entra): cinco comandos não cabem numa fileira de cartão estreito, então o cadeado sobe para a linha do
     verbo. Os quatro de baixo guardam o nome enquanto cada um tem esses 65 px. Abaixo de 300 px fica só o ícone */
  @container inv-card (max-width:339px){
    .inv-main .item footer:has(>[data-sell-item])>.action:first-child{flex-basis:calc(100% - 46px)}
  }
  @container inv-card (max-width:299px){
    .inv-main .item footer:has(>[data-sell-item]) .act-lbl{display:none}
    .inv-main .item footer:has(>[data-sell-item])>.action{min-height:40px}
  }
}

/* ---- celular: a ficha não toma a primeira tela. A tira vira a fileira de retratos da equipe (só o escolhido mostra nome, classe e
        nível); a cabeça da ficha, que repetia o escolhido, sai; as quatro vagas ficam numa fileira só, ícone e nome da vaga, com a
        raridade no pé. Desequipar passa ao cartão do item (a vaga escolhida o põe primeiro na grade); o xis de 28 px some ---- */
@media (max-width:760px){
  .hero-strip{margin-bottom:8px}
  .hero-strip .target-chip:not(.active){padding:4px}
  .hero-strip .target-chip:not(.active) span{display:none}
  .hero-strip .target-chip.active{padding-right:12px}
  .doll{padding:0!important;gap:0;background:transparent!important;border:0}
  .doll-head{display:none}
  .doll-slots{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
  .doll-slot{padding:0!important;border-left-width:1px;border-bottom:3px solid var(--c,var(--line2))}
  .doll-pick{flex-direction:column;justify-content:center;gap:3px;min-height:64px;padding:6px 2px;text-align:center}
  .doll-pick .item-art,.doll-pick i{width:32px!important;height:32px!important}
  .doll-pick span{max-width:100%}
  .doll-pick small{display:block;font-size:10px;letter-spacing:.06em}
  .doll-pick b,.doll-x{display:none}
  .doll-slot.empty .doll-pick i{opacity:.55}
  .inv-layout{gap:10px}
  .inv-tools{padding:6px 8px;gap:6px}
  .inv-tools>.action{flex:1 1 0;min-width:0;white-space:normal;line-height:1.2;padding:4px 8px;text-align:left;text-wrap:balance}
  .inv-tools .salvage-box:not([open]){flex:1 1 0;min-width:0;margin-left:0}
  .inv-tools .salvage-box summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:4px 0 4px 4px;line-height:1.2;text-wrap:balance}
  .inv-tools .salvage-box summary::before{flex:none;margin-right:0}
  .inv-scope .action{min-height:40px}
  .inv-tools .action,.inv-tools select,.hero-strip .picker-wrap>.action,.decor .action{min-height:40px}
}
/* a 320 px o quarto retrato não cabe: a fileira rola, a borda direita some em meia-tinta (como a das abas) e o respiro no fim deixa
   o último inteiro quando se chega lá */
@media (max-width:360px){
  .hero-strip .etb-chips{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
/* [/bolsa] */

/* [guia-perfil] */
/* ---- Guia do Viajante: tamanho diz importância. O passo atual é uma carta com a pintura do lugar onde ele acontece (as mesmas cenas
        das regiões e dos distritos, com o filete vermelhão do cabeçalho), título em serifa, recompensa e o comando logo abaixo do
        texto. Ao lado, a rota em linhas de agenda: o que já foi resgatado numa linha, o passo atual com fio de ouro e os seis
        próximos apagados, com a recompensa na margem. Tela larga: rota à esquerda e carta à direita, parada enquanto a rota rola;
        celular: carta em cima. (A lista de cartões iguais, .guide-list, deixou de ser gerada.) ---- */
.guide-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px 28px;align-items:start}
.guide-route{grid-column:1;grid-row:1;min-width:0}
.guide-now{grid-column:2;grid-row:1;position:sticky;top:0;min-width:0;border:1px solid var(--line2);border-radius:3px;background:var(--bg2);box-shadow:0 3px 0 rgba(0,0,0,.45);overflow:hidden}
.guide-now.ready{border-color:rgba(226,170,78,.6)}
.gn-art{position:relative;height:clamp(132px,27vh,230px);background:var(--bg0) var(--art) center 45%/cover no-repeat;border-bottom:2px solid var(--shu)}
.gn-place{position:absolute;left:0;bottom:0;padding:5px 12px 4px 22px;border-top-right-radius:3px;background:var(--bg2);font:700 12px/1.3 var(--ui);letter-spacing:.04em;color:var(--washi)}
.gn-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 22px 22px}
.gn-step{font:700 12px/1.3 var(--ui);letter-spacing:.06em;color:var(--gold)}
.guide-now h3{margin:0;font:700 26px/1.15 var(--display);color:var(--washi)}
.guide-now p{margin:0;max-width:56ch;font-size:14.5px;line-height:1.5;color:#d9d0c1}
.gn-body>.guide-reward{margin-top:6px;gap:6px}
.gn-body>.guide-reward .rw{padding:4px 9px;font-size:12.5px}
.gn-body>.action{margin-top:12px;min-height:42px;padding:0 26px;font-size:14.5px}
.gn-meter{align-self:stretch;max-width:56ch;display:flex;align-items:center;gap:12px;margin-top:4px}
.gn-meter .meter{flex:1;margin:0}
.gn-meter small{font:700 13px var(--ui);color:var(--washi);white-space:nowrap}
.gr-count{margin:2px 0 10px;font-size:13px;color:var(--muted)}
.gr-count b{margin-right:2px;font:700 16px var(--display);color:var(--washi)}
.gr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.gr-list li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:4px;min-height:40px;padding:7px 10px 7px 8px;border-bottom:1px solid var(--line)}
.gr-n{display:grid;place-items:center;width:26px;height:26px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line2);font:400 14px/1 var(--display);font-style:normal;color:var(--muted)}
.gr-list b{min-width:0;font:600 13.5px/1.3 var(--ui);color:#d9d0c1}
.gr-list .guide-reward{margin:0;justify-content:flex-end}
.gr-next .gr-n,.gr-next>b{opacity:.6}
.gr-next .guide-reward{opacity:.85}
.gr-cur{background:rgba(226,170,78,.08);box-shadow:inset 3px 0 0 var(--gold)}
.gr-cur .gr-n{background:var(--gold);box-shadow:none;color:#1d1206;font-weight:700}
.gr-cur b{font:700 15px/1.25 var(--display);color:var(--gold-hi)}
.gr-done .gr-n{background:#62764e;box-shadow:none;color:var(--washi);font:700 13px/1 var(--ui)}
.gr-done b{font-weight:500;color:var(--muted)}
.gr-list .gr-more{min-height:34px;border-bottom:0}
.gr-more b{grid-column:1/-1;padding-left:38px;font-weight:500;font-size:12.5px;color:var(--dim)}
/* celular: a carta em cima e, logo abaixo, a rota sem a linha do passo atual (seria o título da carta outra vez) */
@media (max-width:900px){
  .guide-board{grid-template-columns:minmax(0,1fr);gap:16px}
  .guide-now{grid-column:1;grid-row:1;position:static}
  .guide-route{grid-column:1;grid-row:2}
  .gr-list .gr-cur{display:none}
  .gn-art{height:clamp(116px,20vh,170px)}
  .gn-body{padding:14px 16px 18px}
  .guide-now h3{font-size:23px}
}
@media (max-width:600px){
  .gn-body>.action{align-self:stretch}
  .gr-list li{grid-template-columns:26px minmax(0,1fr)}
  .gr-list .guide-reward{grid-column:2;justify-content:flex-start}
}
/* Guia completo (estado de quem já joga há tempo): a Crônica ocupa a largura toda, pintura à esquerda e texto à direita, e a rota
   resumida desce para a linha de baixo. Sem isso a coluna da rota ficava com uma linha só e uns 400 px vazios ao lado da carta.
   A contagem "30/30" sai: a linha do selo verde já diz "30 passos resgatados". */
.guide-board.done{grid-template-columns:minmax(0,1fr)}
.guide-board.done .guide-now{grid-column:1;grid-row:1;position:static;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.guide-board.done .guide-route{grid-column:1;grid-row:2}
.guide-board.done .gr-count{display:none}
.guide-board.done .gn-art{height:auto;min-height:clamp(200px,40vh,300px);border-bottom:0;border-right:2px solid var(--shu)}
.guide-board.done .gn-body{justify-content:center}
@media (max-width:900px){
  .guide-board.done .guide-now{display:block}
  .guide-board.done .gn-art{min-height:0;height:clamp(116px,20vh,170px);border-right:0;border-bottom:2px solid var(--shu)}
}

/* ---- Ficha do viajante, offline: a ficha em silhueta no lugar de 550 px vazios. A cabeça é a de verdade, com "Viajante
        desconhecido" no nome, a linha do porquê e o único comando; os números em "?", a equipe em quatro vagas numeradas (como as
        vagas livres da formação) e os anúncios em molduras, tudo em meia-tinta ---- */
.pf-unknown .profile-head{align-items:center;border-radius:3px}
.pf-unknown .profile-head>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:52ch}
.pf-unknown .profile-head h3{margin:0;font:700 22px/1.2 var(--display);color:var(--washi)}
.pf-unknown .profile-head small{font-size:13.5px;line-height:1.45}
.pf-unknown .profile-head .action{margin-top:10px}
.pf-unknown .pf-stats span{border-radius:2px;color:var(--dim)}
.pf-unknown .pf-stats b{font:700 17px/1.2 var(--display);color:var(--dim)}
.pf-shade{opacity:.6}
.pf-shade .pf-team,.pf-lots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.pf-shade .pf-hero{align-items:center;border-radius:3px}
.pf-shade .pf-portrait{display:grid;place-items:center;border-radius:2px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line2);font:400 20px var(--display);color:var(--dim)}
.pf-shade .pf-hero b{display:block;font:700 17px/1.2 var(--display);color:var(--dim)}
.pf-shade .pf-hero small{margin:2px 0 0;color:var(--dim)}
.pf-lots span{display:grid;place-items:center;height:116px;border:1px solid var(--line);border-radius:3px;background:rgba(238,229,208,.025)}
.pf-lots .ic{width:30px;height:30px;font-size:30px;opacity:.35;filter:grayscale(1)}
@media (max-width:600px){
  .pf-unknown .pf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .pf-shade .pf-team,.pf-lots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-shade .pf-portrait{width:44px;height:44px}
  .pf-lots span{height:88px}
  .pf-lots span:nth-child(n+3){display:none}
}
/* [/guia-perfil] */

/* [compartilhado] */
/* ---- cabeçalho de painel, no celular e no tablet de pé: o fechar fica no canto da primeira linha e o título ocupa o resto, quebrando
        entre palavras (nunca no meio de uma; sem reticências, que cortariam o nome). Numa linha só, o título empurrava o fechar para uma
        linha própria (cabeçalho de 134 para 184 px) e, a 320 px, "Convocação e Coleção" passava da borda. Painel sem abas não guarda a
        linha vazia da tira. Até 420 px o título desce um degrau, de 28 para 24 px, e o cabeçalho usa a margem de 12 px do corpo.
        Medido: a 320 px os 21 nomes de painel e os títulos de região vão a duas linhas no máximo, e a partir de 360 os nomes de painel
        cabem numa. Com "Talentos · " e os 72 nomes do roster, 5 títulos vão a três linhas a 320 px ("Comandante Rokurō", "Rai, Armadura
        do Trovão Negro", "Akira, Dança da Brasa Solar", "Hiro, Lâmina da Lua Final" e "Tobimaru, Tambor da Maré Livre") e 1 a 360 e a
        375 ("Rai, Armadura do Trovão Negro"). Nesses casos o cabeçalho fica em 131 px, o fechar fica no canto e nada é cortado ---- */
@media (max-width:900px){
  .modal-panel>header{align-items:flex-start}
  .modal-panel>header>div:first-of-type{flex:1 1 0;min-width:0}
  .modal-panel>header h2{white-space:normal;overflow:visible;overflow-wrap:break-word;text-wrap:balance;line-height:1.14}
  .modal-panel>header .close{flex:none}
  .modal-tabs:empty{display:none}
}
@media (max-width:420px){
  .modal-panel>header{padding:12px 12px 10px!important}
  .modal-panel>header h2{font-size:24px}
}

/* ---- tira de abas: uma linha só, e a aba nunca quebra o nome ("Casa do Time" quebrava em 768). Quando não cabe, a tira rola
        de lado e só a borda que ainda esconde aba some em meia-tinta (.more-l e .more-r, postas por src/panels.js ao montar as abas e a
        cada rolagem). Sem rolagem, sem esmaecido: sai o esmaecido fixo da direita (e o respiro de 40 px) do bloco de celular. O
        scroll-padding deixa a aba escolhida fora do esmaecido quando o painel abre. No computador as abas seguem centradas enquanto
        cabem (margem automática no lugar do justify-content:center, que esconderia o começo da tira ao rolar); o respiro de 3 px em
        cima e embaixo, devolvido pela margem, é para a sombra da aba escolhida não ser cortada pela tira ---- */
.modal-tabs{flex-wrap:nowrap!important;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:32px;padding:3px 0 4px;margin:-3px 0 -4px;-webkit-mask-image:none;mask-image:none}
.modal-tabs::-webkit-scrollbar{display:none}
.modal-tabs button{flex:none;white-space:nowrap}
.modal-tabs button:focus-visible{outline-offset:-3px}
.modal-tabs.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.modal-tabs.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);mask-image:linear-gradient(90deg,transparent,#000 32px)}
.modal-tabs.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
@media (min-width:901px){
  .modal-tabs>button:first-child{margin-left:auto}
  .modal-tabs>button:last-child{margin-right:auto}
}

/* ---- tela de toque de qualquer largura (o tablet de 1024 deitado usa o layout do computador e ficava com aba de 37 px, filtro de 29 e
        botão pequeno de 28): abas, filtros, campos e botões dos painéis com alvo de 40 px. O celular já tinha 40 em quase tudo (bloco
        "celular: alvo de toque de 40 px"), menos o botão pequeno (36). O computador, com mouse, fica como está ---- */
@media (hover:none) and (pointer:coarse){
  .modal-tabs button,.inv-tabs button,.filter-tabs button,.rar-pill{min-height:40px}
  /* fora os comandos da árvore de talentos, que já têm 42 e 44 px no toque (.tree-act e .hero-picker, no bloco de talentos) */
  :where(#modal) .action.small:where(:not(.tree-act *):not(.hero-picker>*)){min-height:40px}
  #modal select,#modal input[type=search],#modal input[type=text],#modal input[type=number]{min-height:40px}
  .hero-filter .check,.inv-top .check{min-height:40px;padding:0 4px}
  .salvage-box summary{padding:12px 0}
  /* a pergunta ao Conselheiro em Aventuras: o mesmo alvo que tem no celular */
  .adv-advisor{min-height:44px}
}
@media (hover:none) and (pointer:coarse) and (min-width:901px){
  :where(#modal) .action{min-height:40px}
}
/* [/compartilhado] */

/* [limpeza] */
/* dados: o selo "1 chave" pegava --sakura, que nesta folha virou o vermelhão de ação (2,68:1 nas linhas apagadas do Guia).
   Volta ao sakura da carta: 5,11:1 com a linha a 85%, e o vermelhão fica só para a ação. */
.rw-key{color:#d696a0}
/* limpeza: o selo de pontos livres na fila de heróis dos Talentos era a última pílula de contagem (styles.css, .hero-pick em,
   raio de 9 px). Vira o selo quadrado vermelhão dos outros contadores ("barras e contadores", no topo), com o mesmo fio claro */
.hero-pick em{border-radius:2px;background:var(--shu);color:var(--washi);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* [/limpeza] */

/* [medio] */
/* ---- 861 a 900 px: a casca ainda é a do PC (navegação à esquerda, coluna do palco de altura fixa, sem rolagem), mas cidade e
        console já usam o desenho de tablet (até 900). A reserva de 76 px da barra de baixo (theme-sumi.css:562), que só existe até
        860, cortava a coluna: a faixa do saguão saía pela metade, objetivo e distritos sumiam e, na luta, a barra de ações ficava
        inteira fora da tela. A reserva sai e o palco cede a altura que falta ---- */
@media (min-width:861px) and (max-width:900px){
  .app{padding-bottom:0!important}
  /* cidade: palco, faixa e objetivo na primeira tela (título 19, faixa 58, objetivo 67, vãos e respiro); os distritos vêm logo
     abaixo e a coluna rola até eles. O palco não desce de 480 (celular deitado, 896 × 414): ali a faixa vem rolando */
  body:not(.in-combat) .stage-col{overflow-y:auto;--stage-w:min(100%,max(480px,calc((100dvh - var(--top-h) - 205px) * 16 / 9)))}
  /* luta: o console de uma coluna inteiro embaixo do palco (heróis, alvo e comando: 241; vãos e respiro: 35) */
  body.in-combat .stage-col{--stage-w:min(100%,calc((100dvh - var(--top-h) - 276px) * 16 / 9))}
}
/* tela baixa: o painel do alvo sai do console (theme-battle.css, max-height:690px) e o palco recupera os 50 px dele */
@media (min-width:861px) and (max-width:900px) and (max-height:690px){
  body.in-combat .stage-col{--stage-w:min(100%,calc((100dvh - var(--top-h) - 226px) * 16 / 9))}
}

/* ---- Bolsa de 761 a 1100 px (tablet e janela estreita): a ficha do celular ([bolsa], até 760) em vez da ficha inteira, que
        ficava acima da grade (cabeça, quatro vagas em linhas, atributos e "Ver ficha completa": 470 px) e empurrava o primeiro item
        para o pé da tela. As quatro vagas numa fileira, ícone e nome da vaga, raridade no pé; os atributos ficam na ficha do herói.
        A tira de heróis continua com os quatro nomes: aqui eles cabem ---- */
@media (min-width:761px) and (max-width:1100px){
  .doll{padding:0!important;gap:0;background:transparent!important;border:0}
  .doll-head,.doll-stats,.doll>.action{display:none!important}
  .doll-slots{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
  .doll-slot{min-width:0;min-height:0!important;padding:0!important;overflow:hidden;border-left-width:1px;border-bottom:3px solid var(--c,var(--line2))}
  .doll-pick{flex-direction:column;justify-content:center;gap:3px;min-height:64px;padding:6px 2px;text-align:center}
  .doll-pick .item-art,.doll-pick i{width:32px!important;height:32px!important}
  .doll-pick span{max-width:100%}
  .doll-pick small{display:block;font-size:10px;letter-spacing:.06em}
  .doll-pick b,.doll-x{display:none}
  .doll-slot.empty .doll-pick i{opacity:.55}
  .hero-strip{margin-bottom:8px}
  .inv-layout{gap:10px}
}
/* [/medio] */
/* [sem-kanji] Letra japonesa que o jogador não lê saiu da tela: inicial do nome no selo do avatar, lua desenhada no verso
   da carta convocada, lanterna no avatar vazio, tigela e xícara desenhadas no Empório, ícone de alerta nos avisos. */
.reveal-back .hanko{writing-mode:horizontal-tb}.reveal-back .hanko .gl{width:36px;height:36px;stroke-width:2}
.av.av-empty .gl{width:58%;height:58%;color:var(--gold)}
.emp-kj .gl{width:26px;height:26px;stroke-width:2.1}
/* [/sem-kanji] */

/* Botão de idioma (barra do topo e tela de entrada) e a lista que ele abre (src/i18n.js). A sigla diz o idioma de agora;
   a lista mostra cada idioma com o próprio nome e marca o escolhido com o vermelhão. */
.lang-btn b{font:800 11.5px/1 var(--ui);letter-spacing:.06em}
.auth-lang{position:fixed;top:max(16px,env(safe-area-inset-top));right:calc(max(16px,env(safe-area-inset-right)) + 52px);z-index:1;width:44px;height:44px;background:var(--bg0)}
.lang-menu{position:fixed;z-index:120;min-width:200px;max-width:calc(100vw - 16px);padding:5px;display:grid;gap:2px;background:var(--surf2,#1c1926);border:1px solid var(--line2);border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.lang-menu button{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px 6px 9px;border-left:3px solid transparent;border-radius:3px;text-align:left;font:500 14px/1.2 var(--ui);color:var(--text)}
.lang-menu button b{flex:none;width:24px;font:800 11px/1 var(--ui);letter-spacing:.06em;color:var(--dim)}
.lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(236,226,208,.07);outline:none}
.lang-menu button[aria-checked="true"]{border-left-color:var(--shu);background:rgba(203,66,44,.1);font-weight:700}
.lang-menu button[aria-checked="true"] b{color:var(--washi)}

/* Novidades (src/news.js): uma linha por novidade, com o ícone, o que é e o botão que leva até lá. */
.news-lead{margin:0 0 12px;color:var(--muted)}
.news-area{margin:0 0 16px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:8px}
.news-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px;border:1px solid var(--line);border-left:3px solid var(--shu);border-radius:3px;background:rgba(13,12,18,.4)}
.news-card .news-ic{grid-row:1 / span 2;width:44px;height:44px;display:grid;place-items:center}
.news-card .news-ic .pi{width:44px;height:44px}
.news-card b{display:block;font:700 15px/1.25 var(--display);color:var(--washi)}
.news-card p{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.news-card .action{grid-column:2;justify-self:start;margin-top:6px}
.hud-notice button.link{margin-left:6px;font-weight:700;color:var(--washi);text-decoration:underline;cursor:pointer}