/* =========================================================
   MYTHVERSE · Identidade "Sumi" (tinta, laca e papel)
   Tsukimori é uma cidade de lanternas, laca e papel washi: a interface usa a mesma matéria.
   · base de tinta índigo, texto cor de papel;
   · UM acento de ação (vermelho-laca 朱) e ouro-folha só para recompensa/valor;
   · linhas finas em vez de brilho; cantos discretos; títulos em serifa japonesa (Shippori Mincho B1);
   · ícones desenhados (assets/ui) no lugar de emoji.
   Carregado depois de styles.css: só redefine tokens e acabamentos.
   ========================================================= */
:root{
  --bg0:#0d0c12; --bg1:#14121b; --bg2:#1b1824; --bg3:#252130;
  --glass:rgba(17,15,24,.86); --glass-strong:rgba(13,12,18,.96);
  --line:rgba(236,226,208,.08); --line2:rgba(236,226,208,.15);
  --text:#efe7d8; --muted:#b4ab9c; --dim:#9b9284;
  --gold:#d8b062; --gold2:#b98c3c; --sakura:#c9472d; --cyan:#86b6c4; --green:#86c095; --red:#d9574b; --violet:#9d90c9;
  --shu:#c9472d; --shu2:#a8361f; --washi:#efe7d8; --ink:#0d0c12;
  --display:"Shippori Mincho B1","Shippori Mincho","Yu Mincho",serif; --ui:"Zen Kaku Gothic New","Segoe UI",system-ui,sans-serif;
  --radius:10px; --shadow:0 14px 34px rgba(0,0,0,.45);
  --card-bg:linear-gradient(180deg,#1a1723,#15131c);
}
body{background-color:var(--bg0);background-image:var(--grain),radial-gradient(1200px 700px at 50% -20%,rgba(216,176,98,.05),transparent 60%)}

/* Tipografia: títulos em serifa, números alinhados */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:.005em}
.eyebrow{letter-spacing:.1em;font-size:10.5px;font-weight:700;color:var(--dim)}
b,strong{font-variant-numeric:tabular-nums}

/* Botões: sólidos, sem brilho */
.action{border-radius:3px;background:rgba(236,226,208,.06);border:1px solid var(--line2);color:var(--text);box-shadow:none}
.action:hover:not(:disabled){background:rgba(236,226,208,.12);transform:none}
.action.primary{color:#1b1307;background:var(--gold);border-color:transparent;box-shadow:none}
.action.primary:hover:not(:disabled){background:#e6c47c;box-shadow:none}
.action.pink{color:#fff5ec;background:var(--shu);border-color:transparent;box-shadow:none}
.action.pink:hover:not(:disabled){background:#dc5738}
.action.red{background:var(--shu2);border-color:transparent}
.action.big{border-radius:4px}
.action.small{border-radius:3px}
.action.ghost{background:transparent;border-color:var(--line2);color:var(--muted)}

/* Superfícies */
.panel,.mat-card,.exp-card,.shop-card{background-image:none;background:var(--card-bg);border-color:var(--line)}
.modal-panel{background-image:var(--grain),linear-gradient(180deg,#16141e,#100e16);border-color:var(--line2);border-radius:4px}
.hud-top{background:rgba(13,12,18,.92);border-bottom:1px solid var(--line)}
.side-nav{background:rgba(13,12,18,.7);border-right:1px solid var(--line)}
.side-nav .nav.active,.side-nav .nav:hover{background:rgba(236,226,208,.06)}
.side-nav .nav.active{box-shadow:inset 3px 0 0 var(--shu)}
.side-panel{background:rgba(13,12,18,.72)}

/* Controles de batalha */
.ctl{border-radius:3px;background:rgba(13,12,18,.86);border:1px solid var(--line2);backdrop-filter:none}
.ctl span{color:var(--dim);letter-spacing:.06em}
.ctl.active{border-color:rgba(216,176,98,.55);box-shadow:none}.ctl.active b{color:var(--gold)}
.ctl.afk.active{background:#1c1830;border-color:#9d90c9;box-shadow:none}.ctl.afk.active b{color:#cfc5f2}
.ctl.boost.pulse{animation:none;border-color:var(--gold)}
.ctl .ic{font-size:17px;--icc:var(--washi)}
.ctl-dot{background:var(--shu);box-shadow:none}

/* Cidade: placas de madeira laqueada, pequenas, sem cobrir a ilustração */
.signpost{min-width:0;gap:7px;padding:5px 10px 5px 6px;border-radius:3px;background:rgba(13,12,18,.84);border:1px solid rgba(236,226,208,.14);border-left:3px solid var(--shu);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.signpost::after,.signpost::before{display:none}
.signpost .sp-icon{width:26px;height:26px;border-radius:5px;background:rgba(236,226,208,.07);border:0;font-size:15px}
.signpost .sp-icon .ic{--icc:var(--washi)}
.signpost b{font:700 13px var(--display);color:var(--washi)}
.signpost:hover{border-color:rgba(216,176,98,.5);border-left-color:var(--gold)}
.signpost.hot,.signpost.featured,.signpost.house,.signpost.bank{border-left-color:var(--gold)}
.sp-badge{background:var(--shu);box-shadow:none}
.village-hub{border-radius:4px;background:#15131b;backdrop-filter:none;border:1px solid var(--line2);box-shadow:var(--shadow)}
.village-hub h3{font-family:var(--display)}
.journey-cta{border-radius:4px;box-shadow:0 10px 26px rgba(0,0,0,.45)}

/* Objetivo, AFK e tutorial */
#goal-chip{border-radius:4px;background:rgba(15,13,21,.94);border:1px solid var(--line2);border-left:3px solid var(--gold);box-shadow:0 10px 24px rgba(0,0,0,.45);backdrop-filter:none}
#goal-chip.done{border-left-color:var(--green);animation:none;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.goal-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:3px;background:rgba(216,176,98,.12);font-size:16px}
.goal-ic .ic{--icc:var(--gold)}
.goal-txt small{color:var(--gold);letter-spacing:.1em}
.goal-txt b{font-family:var(--display);font-weight:800}
#afk-banner{border-radius:4px;background:rgba(20,17,34,.95);border:1px solid #6f6497;box-shadow:0 10px 26px rgba(0,0,0,.5)}
#afk-banner b{font-family:var(--display);font-weight:800;letter-spacing:.02em;color:#e3dbfb}
.afk-moon{animation:none}.afk-moon .ic{--icc:#cfc5f2;font-size:20px}
body.afk-on #viewport{box-shadow:inset 0 0 0 2px rgba(157,144,201,.55)}
.coach-bubble{border-radius:4px;background:#17141f;border:1px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.coach-title{font-family:var(--display);font-weight:800}
.coach-hole{border-radius:4px;box-shadow:0 0 0 9999px rgba(8,7,12,.66),0 0 0 2px var(--gold);animation:none}

/* Equipe (dock) */
.dock{background:rgba(13,12,18,.6)}
.toast{border-radius:3px}

/* Objetivo dentro do painel de boas-vindas da cidade */
.hub-goal{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:9px 10px;border-radius:3px;background:rgba(236,226,208,.05);border:1px solid var(--line);border-left:3px solid var(--gold)}
.hub-goal.done{border-left-color:var(--green)}
.hub-goal .ic{font-size:18px;--icc:var(--gold)}.hub-goal div{flex:1;min-width:0}
.hub-goal small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.hub-goal b{display:block;font:800 14px/1.2 var(--display);color:var(--washi)}

/* HUD de combate (body.in-combat) na mesma identidade */
body.in-combat .ctl.active{background:rgba(216,176,98,.1);box-shadow:inset 0 0 0 1px rgba(216,176,98,.35)}
body.in-combat .ctl.active b{color:var(--gold)}
body.in-combat .ctl.afk.active{background:rgba(157,144,201,.14);box-shadow:inset 0 0 0 1px rgba(157,144,201,.45)}
body.in-combat .stage-controls,body.in-combat .zone-chip,body.in-combat .boss-panel{background:rgba(13,12,18,.78);border-color:var(--line2);backdrop-filter:none}
body.in-combat .hero-slot{background:linear-gradient(180deg,rgba(26,23,35,.92),rgba(16,14,22,.9));border-color:var(--line)}
body.in-combat .zone-chip h1{font-family:var(--display);font-weight:800}
@keyframes combatReady{50%{border-color:var(--gold);box-shadow:0 0 0 1px rgba(216,176,98,.45)}}
.village-hub h3{font-size:22px;line-height:1.15}
.zone-chip h1{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.6vw,22px);line-height:1.15}
.signpost.featured{background:rgba(13,12,18,.84);border-color:rgba(236,226,208,.14);border-left-color:var(--gold)}
.action .ic{font-size:1.1em;--icc:currentColor}
.action.primary .ic{--icc:#1b1307}.action.pink .ic{--icc:#fff5ec}

/* ---------- Celular: distritos em grade, placas fora do cenário ---------- */
#district-grid{display:none}
@media (max-width:900px){
  #village-actions .signpost{display:none}
  #district-grid:not([hidden]){display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
  #district-grid button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:8px 4px;border-radius:3px;background:rgba(236,226,208,.05);border:1px solid var(--line);border-top:2px solid var(--shu);color:var(--washi);font:700 12px/1.15 var(--display);text-align:center}
  #district-grid button:active{background:rgba(236,226,208,.1)}
  #district-grid .ic{font-size:20px;--icc:var(--gold)}
  #district-grid em{position:absolute;top:4px;right:5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--shu);color:#fff;font:800 10px/18px var(--ui);font-style:normal}
}
@media (max-width:900px){
  body:not(.in-combat) .journey-cta{display:none}
  .zone-chip h1{font-size:17px;white-space:normal}
  .zone-meta span,#zone-difficulty,#wave-label{font-size:10.5px}
  .side-nav .nav b{font-size:11px}
  .dock .bar em{font-size:10.5px}
  .dock .ult-btn small{font-size:10px}
  .dock .cls{font-size:10.5px}
  #goal-chip{position:static;margin:0;width:100%}
}

/* =========================================================
   SEM DEGRADÊ: superfícies chapadas com linha fina; texto sólido.
   (Cenários e ilustrações com url() continuam intactos.)
   ========================================================= */
:root{--surf:#16141e;--surf2:#1c1926;--surf3:#231f2e}
/* texto em degradê → texto sólido */
.boot h1,.brand-copy strong,.result-card.win h2,.summon-reveal h2,.auth-brand h1,.auth-brand .auth-title h1,.cta-text b,.album-track li.done b{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--washi)!important;text-shadow:none!important}
.result-card.win h2,.summon-reveal h2{color:var(--gold)!important}
/* ícones: cor chapada (sem o dourado degradê) */
.ic{--icc:currentColor}
.ult-ic .ic,.modal-tabs button.active .ic,.tone-lantern .ic,.tone-dragon .ic{--icc:currentColor;filter:none}
.ult-ic,.kit-ico.ess{background:var(--surf3)!important;box-shadow:none!important}
/* superfícies */
.boot,.auth-card{background:var(--bg0)!important}
.hud-top{background:var(--bg0)!important}.hud-top::after{display:none!important}
.player-avatar{background:var(--surf3)!important}
.res.key,.res{background:var(--surf)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.nav.active::before{display:none!important}
.zone-chip,.guide-card,.event-card,.dialog-box,.warn-banner,.choice-option[data-choice=risk],.choice-option[data-choice=safe],.objective.done,
.modal-panel>header,.modal-back-nav,.panel:hover,.chapter,.map-back,.foe-card,.formation-slot.filled,.collection-card,.collection-card .art,.item,.item-head .item-art,
.city-overview,.building-list .building-head,.shop-card,.gem-hero,.record-banner,.job-badge.on,.tag.job,.tdetail,.socket.full,.card-mini,.rank-me,
.equip-target-bar,.build-hero,.advisor-head,.wallet-strip,.wallet-hero,.doll,.wb-hero,.bounty-active,.rk-pod,.rk-pod.p1,.rk-pod.p2,.rk-pod.p3,
.inv-tabs button.cards-tab,.gallery-frame,.eco-hero,.eco-hero.hot,.eco-gauge,.box-card,.bank-kpis span,.more-grid,.cons,.talent-tree,
.summon-reveal,.reveal-back,.reveal-face footer,.card-tile,.card-tile .card-art{background:var(--surf)!important;background-image:none!important;box-shadow:none!important}
.modal-panel>header{border-bottom:1px solid var(--line)}.modal-panel>header::after{display:none!important}
.dialog-box{border:1px solid var(--line2)!important;border-left:3px solid var(--gold)!important}
.warn-banner{background:var(--shu)!important;color:#fff!important}
.choice-option[data-choice=risk]{border-left:3px solid var(--shu)!important}.choice-option[data-choice=safe]{border-left:3px solid var(--green)!important}
.box-card{border:1px solid var(--line)!important;border-top:3px solid var(--bc)!important}
.rk-pod.p1{border-top:3px solid var(--gold)!important}.rk-pod.p2{border-top:3px solid #b9b3a8!important}.rk-pod.p3{border-top:3px solid #b07a4a!important}
.rk-medal,.rk-pod.p2 .rk-medal{background:var(--surf3)!important;box-shadow:none!important}
.hero-slot::before,.ult-btn::before,.village-hub::before,.card-tile::after,.journey-cta::before,.journey-cta::after,.sub-title::before,.sub-title::after{display:none!important}
.sub-title{border-bottom:1px solid var(--line);padding-bottom:6px}
/* barras e medidores */
.bar.hp .fill{background:var(--green)!important}.bar.hp.low .fill{background:var(--red)!important}
.meter span,.xp-mini span,.boot-bar span,.storage-hero .meter span,.wb-bar span,.rk-bar i{background:var(--gold)!important}
.done .meter span,.objective.done .meter span,.album-track li.done{background:var(--green)!important}
.skill-cd i,.ult-btn .nrg{background:var(--gold)!important}
.boss-fill{background:var(--red)!important}.boss-break span{background:var(--gold)!important}.boss-break.broken span{background:var(--washi)!important}
.sp-badge,.mat-listing .mat-dot{background:var(--shu)!important}
.hero-portrait .lv{background:var(--bg0)!important;border:1px solid var(--line2)}
/* botões de destaque */
.journey-cta{background:var(--surf)!important;border:1px solid var(--line2)!important;border-left:3px solid var(--shu)!important;box-shadow:0 10px 24px rgba(0,0,0,.4)!important}
.cta-arrow{background:var(--shu)!important;box-shadow:none!important}
.modal-tabs button.active{background:var(--surf3)!important;box-shadow:inset 0 -2px 0 var(--shu)!important}
.inv-tabs button.cards-tab.active{background:var(--surf3)!important}
.ctl.afk.active,.coach-bubble,body.in-combat .hero-slot{background-image:none!important}
.signpost.bank .sp-icon{background:rgba(236,226,208,.07)!important}
.modal-panel{background:var(--bg1)!important;background-image:none!important}
body{background-image:none}

/* ---------- Marca: nome em serifa + carimbo hanko 神話 ---------- */
.mark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.hanko{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:4px;background:var(--shu);color:#fff3e8;font:800 11px/1 "Shippori Mincho B1",serif;letter-spacing:-.02em;writing-mode:vertical-rl;text-orientation:upright;box-shadow:inset 0 0 0 1.5px rgba(255,243,232,.35)}
.wordmark{font:800 21px/1 var(--display);letter-spacing:.02em;color:var(--washi)}
.brand{display:flex;align-items:center}.brand img{display:block;height:50px;width:auto;filter:none;margin:-4px 0}
.boot-mark{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.boot-mark .hanko{width:48px;height:48px;font-size:17px;border-radius:3px}
.boot-mark .wordmark{font-size:44px}
.boot-mark small,.auth-mark small{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:700}
.auth-mark{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:6px}
.auth-mark .hanko{width:40px;height:40px;font-size:14px}.auth-mark .wordmark{font-size:34px}
.auth-hanko{width:40px;height:40px;font-size:14px}
.player-avatar .avatar-fallback.hanko{width:100%;height:100%;border-radius:inherit;font-size:16px;writing-mode:horizontal-tb}
.reveal-back{display:grid;place-items:center}.reveal-back .hanko{width:64px;height:64px;font-size:22px;border-radius:3px}
.cta-emblem{display:grid;place-items:center;background:var(--surf3)!important;border-radius:3px}.cta-emblem .ic{font-size:26px;--icc:var(--washi)}
@media (max-width:900px){.wordmark{font-size:17px}.hanko{width:26px;height:26px;font-size:10px}.boot-mark .wordmark{font-size:34px}}
@media (max-width:900px){
  #district-grid:not([hidden]){grid-template-columns:repeat(2,1fr)}
  #district-grid button{flex-direction:row;justify-content:flex-start;text-align:left;gap:10px;min-height:48px;padding:8px 12px;border-top:1px solid var(--line);border-left:3px solid var(--shu);font-size:13px}
  #district-grid .ic{font-size:18px;flex:none}
  #district-grid em{top:50%;transform:translateY(-50%);right:8px}
}
/* Selo de nível na borda do retrato (não cobre o rosto) */
.hero-portrait{overflow:visible!important}
.hero-portrait .lv{position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:-7px!important;transform:translateX(-50%);width:auto!important;height:auto!important;padding:0 5px!important;border-radius:3px!important;font:700 10px/14px var(--ui)!important;background:var(--bg0)!important;border:1px solid var(--line2)!important;color:var(--washi)!important;white-space:nowrap}
@media (max-width:900px){.brand{display:none!important}}

@media (max-width:900px){.village-hub{display:none!important}}
@media (min-width:561px) and (max-width:900px){#district-grid:not([hidden]){grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  #goal-chip{max-width:none!important;box-sizing:border-box}
  #district-grid button:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:561px) and (max-width:900px){#district-grid button:last-child:nth-child(odd){grid-column:auto}#district-grid button:last-child:nth-child(3n+1){grid-column:1/-1}}
/* HUD de combate compacto: tamanhos mínimos legíveis */
body.in-combat .ctl span{font-size:9px!important;letter-spacing:.06em}
body.in-combat .ctl b{font-size:13px}
body.in-combat .hero-info header b{font-size:13px}
body.in-combat .hero-info header small,body.in-combat .ult-btn small{font-size:10px!important}
body.in-combat .ult-btn b{font-size:11.5px}
body.in-combat .bar em{font-size:10px!important}
body.in-combat .zone-meta span{font-size:11px!important}
@media (max-width:860px){body.in-combat .ctl span{font-size:8px!important}body.in-combat .ctl b{font-size:11px!important}}
/* Abas do painel: ativa legível */
.modal-tabs button{color:var(--muted)}
.modal-tabs button.active{color:var(--washi)!important;border-color:transparent!important}
/* Convocação: uma cor de acento, ícones desenhados */
.box-card header b{color:var(--washi)!important;font-family:var(--display)}
.box-ico{background:var(--surf3)!important}.box-ico .ic{font-size:18px;--icc:var(--bc)}
.box-card .box-actions .action{flex-direction:column;gap:0;line-height:1.1;min-height:44px}
.box-card .box-actions .action small{font-size:10.5px;font-weight:600;opacity:.8}
.box-card .box-actions .action:not(.pink){color:var(--muted)}
.box-card .meter span{background:var(--bc)!important}
.season-faces img{border:1px solid var(--line2)!important;border-radius:3px!important}
.season-faces span{color:var(--muted)}
/* Bolsa no celular: ficha compacta, itens logo na primeira tela */
@media (max-width:760px){
  .hero-strip{padding:8px!important}
  .hero-strip .etb-label{display:none}
  .hero-strip .etb-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;scrollbar-width:none}
  .hero-strip .target-chip{flex:none}
  .doll{padding:10px!important}
  .doll-head small.dim,.doll-stats,.doll>.action{display:none!important}
  .doll-head img{width:44px!important;height:44px!important}
  .doll-slots{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}
  .doll-slot{min-height:0!important;padding:6px 8px!important}
  .doll-slot small{display:none}
  .doll-slot b{font-size:12px}
}
@media (max-width:760px){
  .doll-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .doll-slot{min-width:0;overflow:hidden}
  .doll-slot b,.doll-slot .name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .inv-tabs,.filter-tabs,.modal-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .inv-tabs button,.filter-tabs button,.modal-tabs button{flex:none;white-space:nowrap}
  .inv-tools{gap:6px}
}
.salvage-box{flex-basis:100%}.salvage-box summary{cursor:pointer;color:var(--muted);font-weight:700;font-size:13px;padding:4px 0}
.salvage-box[open] summary{color:var(--washi)}.salvage-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
@media (max-width:760px){
  .doll-slots{grid-template-columns:1fr!important}
  .doll-slot img,.doll-slot .slot-art{width:28px!important;height:28px!important}
}

/* Recuperação da caçada ao voltar do segundo plano */
#catchup{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:90;display:grid;gap:6px;min-width:220px;padding:10px 14px;background:var(--sumi-panel,#191722);border:1px solid rgba(216,176,98,.35);border-radius:3px;font:600 13px/1.2 var(--ui);color:#efe6d4}
#catchup i{display:block;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#catchup s{display:block;height:100%;width:0;background:#d8b062;text-decoration:none}

/* Árvore de classes: base → caminho (nv 30) → transcendência (nv 60) */
.class-path{flex:1 1 100%;display:grid;gap:10px;padding:12px 14px;border:1px solid rgba(216,176,98,.22);border-radius:4px;background:rgba(255,255,255,.02)}
.class-path ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;counter-reset:cp}
.class-path li{position:relative;padding:8px 10px 8px 34px;border-radius:3px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);counter-increment:cp;min-width:0}
.class-path li::before{content:counter(cp);position:absolute;left:10px;top:9px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--ui);color:#a79f90;border:1px solid rgba(255,255,255,.18)}
.class-path li.on{border-color:rgba(216,176,98,.45)}
.class-path li.on::before{background:#d8b062;color:#1b1712;border-color:#d8b062}
.class-path li b{display:block;font:700 14px/1.2 "Shippori Mincho B1",serif;color:#efe6d4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.class-path li small{display:block;font-size:11.5px;color:#a79f90;margin-top:2px}
.branch-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.branch{display:grid;gap:4px;padding:10px 12px;border-radius:3px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
.branch.ready{border-color:rgba(216,176,98,.4)}
.branch small{font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#d8b062}
.branch b{font:700 16px/1.2 "Shippori Mincho B1",serif;color:#efe6d4}
.branch p{margin:0;font-size:12.5px;color:#cfc6b6}
.branch em{font-style:normal;font-size:11.5px;color:#a79f90}
.branch .action{justify-self:start;margin-top:4px}
.branch-note{font-size:11.5px;color:#a79f90}
.tnode.other-branch{opacity:.35}
@media (max-width:760px){.class-path ol,.branch-pick{grid-template-columns:1fr}}

/* Mapa: destino vindo do "Ir →" de um objetivo */
.map-pin.focus{z-index:6;outline:2px solid #c9472d;outline-offset:3px;animation:pinFocus 1.6s ease-in-out 3}
@keyframes pinFocus{0%,100%{outline-offset:3px;outline-color:#c9472d}50%{outline-offset:9px;outline-color:rgba(201,71,45,.25)}}
.journey-card.focus{box-shadow:0 0 0 2px #c9472d,0 0 0 6px rgba(201,71,45,.18)}
@media (prefers-reduced-motion:reduce){.map-pin.focus{animation:none}}

/* Mapa no celular: bloqueados viram um ponto; rotas de cada capítulo empilhadas */
@media (max-width:760px){
  .illustrated-map .map-pin{font:600 10.5px/1.1 var(--ui);padding:3px 6px;min-width:0;white-space:nowrap}
  .illustrated-map .map-pin small{display:none}
  .illustrated-map .map-pin.locked{width:9px;height:9px;padding:0;font-size:0;border-radius:50%;background:rgba(20,18,26,.85);border:1.5px solid rgba(239,230,212,.45)}
  .illustrated-map .map-pin.focus small,.illustrated-map .map-pin.current small{display:none}
  .chapters{grid-template-columns:1fr}
  .chapter-steps{flex-direction:column;align-items:stretch;gap:6px}
  .chapter-steps .arrow{display:none}
  .chapter-steps .journey-card,.chapter-side .journey-card{width:100%;min-height:74px}
  .journey-card b{font-size:15px;white-space:normal}
}


/* Camada 3D (three.js) */
.stage canvas.atmos-canvas{pointer-events:none}
.illustrated-map .map3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;opacity:0;transition:opacity .5s}
.illustrated-map.map3d-ready .map3d-canvas{opacity:1}
.illustrated-map.map3d-ready > img{visibility:hidden}
.illustrated-map.map3d .map-pin{z-index:2;transition:none}
.illustrated-map.map3d .map-pin.focus{z-index:6}
.illustrated-map .map3d-canvas:active{cursor:grabbing}
.dlg-mark{font:800 40px/1 "Shippori Mincho B1",serif;color:#c9472d}
.dlg-portrait.small .dlg-mark{font-size:24px}
.pow-big .ic{--icc:var(--gold,#d8b062)}
/* Selos kanji (elementos, classes, eventos, efeitos): tinta colorida em vez de emoji */
.kj{font:800 1.05em/1 "Shippori Mincho B1","Shippori Mincho","Yu Mincho",serif;font-style:normal;color:var(--ec,var(--cc,currentColor))}
.el-tag .kj,.cls-tag .kj{margin-right:1px}

/* Logo original refinado (tools/build_logo2.py): sem halo, sem estrelas; sombra de tinta já embutida */
.boot-logo{width:min(440px,82vw);height:auto;filter:none;animation:none;margin:0 auto 14px}
.auth-logo{width:min(340px,100%);height:auto;filter:none;margin:0 auto 4px}
.auth-logo.small{width:72px}
.auth-brand picture{display:block;text-align:center}

/* ===== Mapa do mundo (redesenho): menos ruído, hierarquia clara ===== */
.illustrated-map{border:1px solid rgba(216,176,98,.28);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.map-pin{gap:1px;padding:5px 11px 6px;border-radius:3px;background:rgba(16,14,22,.9);border:1px solid rgba(216,176,98,.45);box-shadow:0 4px 12px rgba(0,0,0,.5);color:#efe6d4;animation:none}
.map-pin .pin-name{font:800 14px/1.1 "Shippori Mincho B1",serif}
.map-pin small{font:600 10.5px/1.2 var(--ui);color:#b9b0a0;letter-spacing:.01em}
.map-pin:hover{transform:translate(-50%,-50%) scale(1.05)}
.map-pin.done{border-color:rgba(127,190,140,.6)}
.map-pin.done small{color:#9fd3a8}
.map-pin.boss:not(.locked){border-color:rgba(201,71,45,.75)}
.map-pin.current{background:#d8b062;border-color:#f3dfae;color:#1b1712;animation:none}
.map-pin.current .pin-name{color:#1b1712}.map-pin.current small{color:#3b2f1c;font-weight:700}
.map-pin.next{border:1.5px solid #c9472d;box-shadow:0 0 0 4px rgba(201,71,45,.18),0 4px 12px rgba(0,0,0,.5)}
.map-pin.next small{color:#f0a894;font-weight:700}
/* Bloqueados: só um ponto; o nome aparece ao passar o mouse (title) */
.map-pin.locked{width:12px;height:12px;min-width:0;padding:0;border-radius:50%;background:rgba(14,12,20,.85);border:1.5px solid rgba(239,230,212,.4);box-shadow:none}
.map-pin.locked .pin-name,.map-pin.locked small{display:none}
.map-pin.locked:hover{transform:translate(-50%,-50%) scale(1.3)}
.map-pin.locked.focus .pin-name{display:block;position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:3px;background:rgba(16,14,22,.92);font-size:12px;white-space:nowrap}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-8px 2px 0;font:600 12px var(--ui);color:#a79f90}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;border:1.5px solid}
.lg.current{background:#d8b062;border-color:#d8b062}.lg.next{border-color:#c9472d;background:rgba(201,71,45,.3)}.lg.open{border-color:rgba(216,176,98,.6)}.lg.done{border-color:rgba(127,190,140,.8)}.lg.locked{border-radius:50%;border-color:rgba(239,230,212,.4)}
.chapter{background:rgba(255,255,255,.025);border-radius:4px}
.chapter.locked{opacity:.55}
.chapter-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chapter-head h4{margin:0;flex:1;min-width:0;font:800 16px "Shippori Mincho B1",serif;color:#efe6d4}
.chapter-prog{width:80px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.chapter-prog i{display:block;height:100%;background:#d8b062}
.chapter-head small{font:700 12px var(--ui);color:#a79f90;min-width:30px;text-align:right}
@media (max-width:760px){.map-legend{font-size:11px;gap:4px 10px;margin-top:-10px}.map-pin .pin-name{font-size:11px}.map-pin{padding:3px 7px}.map-pin.locked{width:9px;height:9px;padding:0}}

/* Legibilidade mínima no HUD (auditoria: nada abaixo de ~11 px, contraste AA). Prefixo body vence as regras antigas. */
body .stage-controls .ctl span,body.in-combat .stage-controls .ctl span{font-size:10.5px;letter-spacing:.06em;color:#cfc6b6}
body #key-caption{font-size:11px;color:#cfc6b6}
body .nav-badge,body #quest-badge{font-size:11px;min-width:18px;height:18px;line-height:18px;background:#b73a22;color:#fff}
body .hero-slot .bar em{font-size:11px;top:-3px}
body .hero-slot .ult-btn small{font-size:11px}
body .hero-portrait .lv{font-size:11px}
@media (max-width:900px){body .stage-controls .ctl span{font-size:9.5px}body .hero-slot .bar em,body .hero-slot .ult-btn small{font-size:10.5px}}
.action.pink{background:#b33b22}.action.pink:hover:not(:disabled){background:#c9472d}
.stars .off{color:#5d564c}
/* Rótulos em shu precisam de um tom mais claro para ler sobre a tinta (AA) */
.eyebrow,#modal-kicker{color:#e07a5f}
@media (max-width:900px){:root{--dim:#a39a8c}}

/* ===== Celular em combate: usar a tela inteira ===== */
@media (max-width:640px){
  body.in-combat .dock{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  body.in-combat .hero-slot{grid-template-columns:44px minmax(0,1fr);gap:6px 8px;padding:8px;border-radius:4px}
  body.in-combat .hero-portrait{width:44px;height:44px;border-radius:3px}
  body.in-combat .hero-portrait .lv{font-size:10.5px}
  body.in-combat .hero-info header b{font-size:13px}
  body.in-combat .bar{height:10px;margin-top:5px}
  body.in-combat .bar em{display:block;font-size:10.5px;top:-2px}
  body.in-combat .ult-btn{height:40px;padding:0 8px;justify-content:flex-start}
  body.in-combat .ult-btn>span:nth-of-type(2) b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.in-combat .ult-btn>span:nth-of-type(2){flex:1 1 auto;min-width:0}
  body.in-combat .ult-btn small{font-size:10.5px}
  body .stage-controls .ctl{min-width:40px;height:40px}
  body.in-combat .stage-controls .ctl b{font-size:12px}
  body .consumables .cons{width:40px;height:40px}
  body.in-combat #zone-title,#zone-title{font-size:14px}
  #afk-banner{position:static;inset:auto;margin:6px 0 0;width:auto;transform:none}
  #goal-chip{margin-top:8px}
}
@media (max-width:900px){
  #afk-banner{position:static;inset:auto;margin:6px 0 0;width:auto;max-width:none;transform:none}
  body.afk-on #goal-chip:not([hidden]){display:flex}
  .stage-controls.below-stage{position:static;width:100%;align-self:stretch;box-sizing:border-box;display:flex;justify-content:flex-end;gap:6px;margin:6px 0 0;padding:0;background:none;border:0;box-shadow:none;flex-wrap:nowrap}
  .stage-controls.below-stage .ctl{flex:1 1 0;min-width:0;height:44px;flex-direction:row;gap:6px;border-radius:3px}
  .stage-controls.below-stage .ctl span{display:inline-flex!important;align-items:center;gap:4px;font-size:11px}
  .stage-controls.below-stage .ctl b{font-size:13px}
}

/* Forja: escolha do material de refino (risco explícito) */
.forge-mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0}
.mat-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border-radius:3px;border:1px solid var(--line2);border-left:3px solid var(--mc,var(--line2));background:rgba(236,226,208,.04);color:var(--text);text-align:left;cursor:pointer}
.mat-pick small{color:var(--muted);font-size:11px}
.mat-pick.active{background:rgba(236,226,208,.1);border-color:var(--mc,var(--gold))}
.mat-pick:disabled{opacity:.4;cursor:not-allowed}
.forge-box .note.warn{color:#f0b1a4;border-left:2px solid var(--shu);padding-left:8px}

/* Painel da cidade abaixo dos controles do palco (antes cobria o botão FORÇA no canto superior direito) */
.village-hub{top:74px;max-height:calc(100% - 92px);overflow:auto}

/* Árvore de talentos legível: selo de rank maior, tinta escura com número claro; títulos dos círculos na serifa */
.talent-tree .band-lbl{font:800 15px var(--display);letter-spacing:.06em;fill:var(--muted)}
.tnode .rank-bg{fill:var(--ink);stroke:var(--line2);stroke-width:1.5}
.tnode .rank{font:800 13.5px var(--ui);fill:var(--text)}
.tnode.some .rank-bg,.tnode.max .rank-bg{fill:var(--ink);stroke:var(--gold);stroke-width:2}
.tnode.some .rank,.tnode.max .rank{fill:var(--gold)}
.tnode.avail .rank-bg{stroke:#b7c4d4}
.tnode .lbl{font:700 13.5px var(--ui);stroke-width:6px}
.tnode.some .ring{fill:#3a311d}.tnode.max .ring{fill:#4a3c1f}

/* Mapa: destino bloqueado mostra o nome (apagado, borda tracejada) em vez de uma bolinha sem explicação */
.map-pin.locked,.illustrated-map .map-pin.locked{width:auto;height:auto;min-width:0;padding:3px 8px;border-radius:3px;font-size:inherit;background:rgba(14,12,20,.78);border:1px dashed rgba(239,230,212,.28);box-shadow:none;opacity:.8}
.map-pin.locked .pin-name{display:block;position:static;transform:none;padding:0;background:none;font-size:11.5px;color:#9b9284}
.map-pin.locked small{display:none}
.map-pin.locked:hover{transform:translate(-50%,-50%) scale(1.06);opacity:1}

/* Cards de herói: selo de raridade/equipe sempre à frente, com faixa própria no topo (a cabeça não cobre mais o selo) */
.collection-card .art{height:172px;padding-top:26px;box-sizing:border-box}
.collection-card .art img{height:140px;position:relative;z-index:1}
.collection-card .badge,.collection-card .in-party{z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.collection-card .info small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collection-grid{align-items:stretch}

/* Caixas de convocação: cartões da mesma altura e botões sempre alinhados no rodapé; nota de chaves quebra linha */
.box-grid{align-items:stretch}
.box-card{height:100%;box-sizing:border-box}
.box-card .box-actions{margin-top:auto;margin-bottom:0;padding-top:8px}
.keys-note{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.45;max-width:100%}

/* ===== Árvore de talentos v2 (selos de tinta) ===== */
.talent-tree{background:var(--grain),#15131c}
.talent-tree .band{fill:rgba(239,231,216,.025);stroke:var(--line2);stroke-width:1}
.talent-tree .band.locked{fill:rgba(0,0,0,.22);stroke-dasharray:4 6}
.talent-tree .band-lbl{font:800 22px var(--display);fill:var(--shu);letter-spacing:0}
.talent-tree .band-lbl .band-sub{font:700 12.5px var(--ui);fill:var(--muted);letter-spacing:.08em}
.talent-tree .tlink{fill:none;stroke:#3a3645;stroke-width:4;stroke-linecap:round}
.talent-tree .tlink.avail{stroke:#8b8573;stroke-dasharray:1 8;stroke-width:4.5}
.talent-tree .tlink.on{stroke:var(--shu);stroke-width:5.5}
.tnode .seal{fill:#1c1a24;stroke:#4a4656;stroke-width:2.5;transition:fill .15s,stroke .15s}
.tnode .seal-inner{fill:none;stroke:#4a4656;stroke-width:1.5}
.tnode .glyph path{fill:none;stroke:#8d8779;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tnode .halo{fill:none;stroke:var(--washi);stroke-width:2;opacity:0}
.tnode .lbl{font:700 13px var(--ui);fill:#cfc6b6;text-anchor:middle;paint-order:stroke;stroke:#100e16;stroke-width:5px}
.tnode .pips circle{fill:#100e16;stroke:#5b5666;stroke-width:1.3}
.tnode .pips circle.on{fill:var(--shu);stroke:#f0b1a4}
/* disponível: papel à espera do carimbo */
.tnode.avail .seal{fill:#262330;stroke:#cdbf9f}
.tnode.avail .glyph path{stroke:#efe7d8}
.tnode.avail .lbl{fill:var(--washi)}
/* aprendido: carimbado em papel, tinta escura */
.tnode.some .seal,.tnode.max .seal{fill:#e9dfc9;stroke:#2a2130}
.tnode.some .seal-inner,.tnode.max .seal-inner{stroke:#8a2f1d}
.tnode.some .glyph path,.tnode.max .glyph path{stroke:#1d1822;stroke-width:2.4}
.tnode.max .lbl,.tnode.some .lbl{fill:#fff4e2}
.tnode.locked{opacity:.55}
.tnode.locked .lbl{fill:#8f877a}
/* tipos */
.tnode.k-keystone .seal{fill:#5a1c12;stroke:var(--shu);stroke-width:3}
.tnode.k-keystone .glyph path{stroke:#f6d9cf}
.tnode.k-keystone.some .seal,.tnode.k-keystone.max .seal{fill:var(--shu);stroke:#2a1410}
.tnode.k-keystone.some .glyph path,.tnode.k-keystone.max .glyph path{stroke:#fff4ea}
.tnode.k-notable .seal{stroke-width:3}
.tnode.k-capstone .seal{stroke:var(--gold);stroke-width:3}
.tnode.k-sig .seal{fill:#1c1a24;stroke:var(--gold);stroke-width:3}
.tnode.k-sig .sig-art{opacity:.9}
.tnode.k-sig .sig-ring{fill:none;stroke:rgba(0,0,0,.5);stroke-width:2}
.tnode.k-sig.locked .sig-art{opacity:.35;filter:grayscale(1)}
.tnode.k-sig.some .seal,.tnode.k-sig.max .seal{fill:#1c1a24;stroke:var(--shu);stroke-width:4}
.tnode:hover .seal{stroke:var(--washi)}
.tnode.selected .halo{opacity:1;stroke-dasharray:3 4}
.tnode.other-branch{opacity:.3}
/* legenda com os formatos */
.talent-legend .lg-shape{width:13px;height:13px;border:2px solid #cdbf9f;background:#262330;border-radius:50%}
.talent-legend .lg-shape.square{border-radius:3px}
.talent-legend .lg-shape.octo{border-radius:0;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#cdbf9f}
.talent-legend .lg-shape.key{border-radius:3px;background:var(--shu);border-color:var(--shu)}
.talent-legend .lg-learned{background:#e9dfc9;border-color:#2a2130}
.talent-tree .band-tag rect{fill:#15131c;stroke:var(--line2)}
.talent-tree .band-tag .band-num{font:800 17px var(--display);fill:var(--shu)}
.talent-tree .band-tag .band-sub{font:600 12px var(--ui);fill:var(--muted);letter-spacing:.06em}
.talent-tree .band-tag.locked .band-num{fill:#6d665b}
.tnode .lbl{font:600 13px var(--ui);letter-spacing:.01em}

/* Cabeçalho da árvore no celular: nada passa da largura da tela */
.tree-top>*{min-width:0;max-width:100%}
.class-path{min-width:0;max-width:100%;box-sizing:border-box}
.class-path .action{white-space:normal;height:auto;min-height:40px;line-height:1.3}
.talent-legend{min-width:0}
@media (max-width:760px){
  .tree-top{gap:8px}
  .tree-top>.action{margin-left:0;flex:1 1 45%}
  .talent-legend{gap:6px 12px}.talent-legend small{margin-left:0;flex-basis:100%}
  .talent-tree{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .talent-tree svg{width:820px;max-width:none}
}

/* =====================================================================
   CIDADE · LAYOUT v3 (consolida os ajustes anteriores; vem por último)
   Desktop: painel compacto no canto sem cobrir distritos; Mapa dentro do painel.
   Celular/tablet: FORÇA compacto, objetivo empilhado, distritos sem briga com selos,
   conteúdo nunca atrás da barra inferior. Telas grandes: interface escala.
   ===================================================================== */
body .stage-controls .journey-cta{position:static!important;display:flex!important;min-width:58px!important;height:48px!important;padding:0 9px!important;gap:1px!important;overflow:visible;background:rgba(13,12,18,.92)!important;border:1px solid rgba(216,176,98,.65)!important;border-radius:3px!important;box-shadow:none!important;transform:none!important}
.stage-controls .journey-cta[hidden]{display:none!important}
.stage-controls .journey-cta span{display:block!important;color:var(--gold)!important;line-height:1}
.stage-controls .journey-cta b{font:800 13px/1 var(--ui)!important;color:var(--gold)!important;letter-spacing:.08em}
/* Moedas: ouro, cristais e chaves juntos no centro do topo (padrão de jogos). O palco fica livre para a luta. */
.stage-wallet{display:none!important}
@media (max-width:900px){
  body .stage-controls .journey-cta{min-width:42px!important;height:40px!important;padding:0 5px!important}
}
.village-hub{top:72px;right:14px;width:clamp(280px,27%,340px);max-height:calc(58% - 20px);padding:12px 14px;overflow:auto}
.village-hub .eyebrow{font-size:10px}
.village-hub h3{font-size:clamp(17px,1.4vw,21px)!important;margin:2px 0 6px}
.village-hub p{font-size:12.5px;margin:0 0 10px}
.village-hub .hub-goal{margin-bottom:8px}
.village-hub .hub-actions{display:grid;gap:6px}
.village-hub .hub-actions>.action{width:100%;min-height:40px;justify-content:center;font-size:13px}
.village-hub .hub-actions>.action{height:auto;padding:8px 10px;line-height:1.25}
.village-hub .hub-actions>.action span{min-width:0;white-space:normal;text-align:left}
.village-hub .hub-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.village-hub .hub-row .action{min-height:36px;font-size:12.5px;justify-content:center;padding:0 8px;white-space:nowrap}
@media (max-width:1500px){.village-hub p{display:none}}
/* Placas de distrito: tamanho acompanha o palco, nunca quebram linha */
#village-actions .signpost{font-size:clamp(11px,.95vw,15px)}
#village-actions .signpost b{white-space:nowrap}
/* Barra de heróis: nome inteiro quando cabe; senão reticências limpas */
.dock .hero-info header b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Telas grandes: a interface cresce junto (antes em 4K tudo ficava minúsculo) */
@media (min-width:1900px){:root{--zf:1.18}html{zoom:1.18}}
@media (min-width:2300px){:root{--zf:1.4}html{zoom:1.4}}
@media (min-width:3000px){:root{--zf:1.8}html{zoom:1.8}}
/* com zoom, 100dvh continua em pixels da tela: divide pelo zoom para caber exatamente */
@media (min-width:901px){
  .app{height:calc(100dvh / var(--zf,1))}
  .stage-col{--stage-w:min(100%,calc((100dvh / var(--zf,1) - var(--top-h) - var(--dock-h) - 34px) * 16 / 9))}
}

/* Tablet e celular */
@media (max-width:900px){
  .app{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
  .stage-controls.below-stage{justify-content:stretch}
  .stage-controls.below-stage .ctl{height:40px}
  body:not(.in-combat) .stage-controls.below-stage #boost-btn{flex:0 1 auto;min-width:0;padding:0 16px;margin-left:auto}
  #goal-chip{flex-wrap:wrap;gap:8px 10px}
  #goal-chip .goal-txt{flex:1 1 150px;min-width:0}
  #goal-chip .goal-txt b,#goal-chip .goal-txt strong{overflow-wrap:anywhere}
  #goal-chip .goal-txt em{-webkit-line-clamp:2!important;white-space:normal}
  #district-grid:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  #district-grid button{min-width:0;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:8px;min-height:48px;padding:8px 34px 8px 10px!important;text-align:left;grid-column:auto!important;font-size:13px}
  #district-grid button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #district-grid em{top:50%!important;right:8px!important;transform:translateY(-50%)}
}
@media (min-width:600px) and (max-width:900px){#district-grid:not([hidden]){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:420px){
  #goal-chip{padding:10px}
  #goal-chip .goal-actions,#goal-chip>div:last-child{flex:1 1 100%;display:flex;gap:6px}
  #goal-chip .goal-actions .action,#goal-chip>div:last-child .action{flex:1 1 0}
  #district-grid button{font-size:12.5px;padding-left:8px!important;gap:6px}
}
#goal-chip .goal-actions{display:flex;gap:6px;flex:none}
@media (max-width:900px){
  #district-grid button span{white-space:normal!important;text-overflow:clip!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15;overflow:hidden}
}
@media (min-width:600px) and (max-width:900px){
  #district-grid:not([hidden]){grid-template-columns:repeat(5,minmax(0,1fr))!important}
  #district-grid button{flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:10px 6px!important;min-height:70px;gap:5px}
  #district-grid button span{text-align:center}
  #district-grid em{top:6px!important;right:6px!important;transform:none!important}
}
/* Botão "Continuar": destino numa linha, estágio como etiqueta (não quebra no meio) */
.village-hub .hub-actions>.action.primary{display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left}
.village-hub .hub-go{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.2}
.village-hub .hub-go small{font:700 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.village-hub .hub-go b{font:800 13.5px var(--ui);white-space:normal}
.village-hub .hub-stage{flex:none;min-width:28px;height:24px;padding:0 7px;border-radius:3px;display:grid;place-items:center;font:800 12px var(--ui);font-style:normal;background:rgba(27,19,7,.16);color:#1b1307}
/* História do herói */
.lore-card{max-width:760px;padding:18px 20px;border:1px solid var(--line2);border-radius:4px;background:var(--grain),#16141e}
.lore-card blockquote{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--shu);font:700 18px/1.4 var(--display);color:var(--washi)}
.lore-card p{line-height:1.6;color:#d9d0c1}
.lore-card h4{margin:18px 0 6px;font-family:var(--display);color:var(--gold)}
.lore-bonds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lore-bonds li{padding:8px 10px;border:1px solid var(--line);border-radius:3px}
.lore-bonds small{display:block;color:var(--muted);margin-top:2px}
.lore-art p{line-height:1.65;max-width:78ch}
/* Texto legível nos elementos que ganharam fundo escuro (antes texto marrom em fundo escuro, invisível) */
.modal-back-nav,.map-back{color:var(--washi)!important;border:1px solid var(--line2)!important}
.job-badge.on,.tag.job{color:var(--gold)!important;border:1px solid rgba(216,176,98,.35)!important}
.card-tile{color:var(--text)!important}
.boss-info .innate{margin:10px 0;padding:10px 12px;border:1px solid rgba(201,71,45,.45);border-left:3px solid var(--shu);border-radius:3px;background:rgba(201,71,45,.08)}
.boss-info .innate small{font:800 10.5px var(--ui);letter-spacing:.1em;color:#f0a894}
.boss-info .innate p{margin:4px 0 0;color:var(--washi);line-height:1.5}
/* Ordem dos Aventureiros */
.order-rank{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;padding:16px;margin:10px 0 14px;border:1px solid var(--line2);border-radius:4px;background:var(--grain),#17141f}
.order-seal{width:84px;height:84px;border-radius:4px;display:grid;place-items:center;align-content:center;background:var(--shu);color:#fff4ea;box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.order-seal b{font:800 44px/1 var(--display)}.order-seal small{font:800 9.5px var(--ui);letter-spacing:.2em;opacity:.85}
.order-main h3{margin:2px 0 8px}
.order-exam{margin-top:10px;padding:9px 12px;border:1px dashed rgba(216,176,98,.45);border-radius:3px}
.order-exam.ok{border-style:solid;border-color:rgba(127,190,140,.5)}
.order-exam small{font:700 10.5px var(--ui);letter-spacing:.06em;color:var(--muted)}
.order-exam p{margin:3px 0;color:var(--washi)}
.order-ladder{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.order-ladder li{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line);border-radius:3px;opacity:.55;min-width:0}
.order-ladder li.on{opacity:1;border-color:rgba(216,176,98,.35)}
.order-ladder li.cur{border-color:var(--shu);background:rgba(201,71,45,.08)}
.order-ladder b{font:800 20px var(--display);color:var(--gold)}
.order-ladder span{font:700 12px var(--ui);color:var(--washi)}.order-ladder small{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:2px}
.panel.legendary{border-color:var(--gold)!important;background:rgba(216,176,98,.06)!important}
@media (max-width:900px){.order-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.order-rank{grid-template-columns:1fr}.order-seal{width:64px;height:64px}.order-seal b{font-size:32px}}
.pw-toggle{font:700 11px var(--ui);width:auto;min-width:34px;padding:0 6px}
/* Mapa novo é mais detalhado: nomes bloqueados com fundo sólido e texto legível */
.map-pin.locked,.illustrated-map .map-pin.locked{background:rgba(12,10,18,.88);opacity:1;border-color:rgba(239,230,212,.35)}
.map-pin.locked .pin-name{color:#c9bfae}
.map-pin.locked small,.illustrated-map .map-pin.locked small{display:block!important;color:#a99f90!important}
.map-pin.locked,.illustrated-map .map-pin.locked{width:auto;height:auto;padding:4px 8px}
.illustrated-map>img{filter:saturate(.82) brightness(1.02)}
/* Combate essencial: AFK/AUTO/AVANÇO só com "Mais" aberto; objetivo some durante a luta */
body.in-combat .stage-controls:not(.adv-open) :is(#advance-btn,#afk-btn){display:none!important}
body.in-combat .stage-controls.adv-open :is(#advance-btn,#afk-btn){display:flex!important}
body:not(.in-combat) #adv-ctl-btn{display:none!important}
body.in-combat #adv-ctl-btn{display:flex!important}
body.in-combat #goal-chip{display:none!important}
.stage-controls.adv-open #adv-ctl-btn{background:rgba(236,226,208,.12)}
/* Chat global e perfil */
.chat{display:flex;flex-direction:column;gap:8px;height:min(64vh,620px)}
.chat-log{flex:1;overflow:auto;padding:10px;border:1px solid var(--line2);border-radius:4px;background:#141219;display:flex;flex-direction:column;gap:8px}
.chat-line{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.chat-line p{grid-column:1/-1;margin:0 0 0 38px;color:var(--washi);overflow-wrap:anywhere;line-height:1.4}
.chat-line small{justify-self:end;color:var(--dim);font-size:11px}
.chat-line.me .chat-who b{color:var(--gold)}
.chat-who{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--washi);font:700 13px var(--ui);cursor:pointer;padding:0}
.av{width:28px;height:28px;border-radius:3px;object-fit:cover;border:1px solid var(--line2);background:#1c1926;display:inline-grid;place-items:center;font:700 13px var(--display);color:var(--muted)}
.av.big{width:72px;height:72px;border-radius:4px;font-size:28px}
.chat-form{display:flex;gap:8px}.chat-form input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:3px;border:1px solid var(--line2);background:#16141e;color:var(--washi)}
.profile-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
.profile-card{padding:16px;border:1px solid var(--line2);border-radius:4px;background:var(--grain),#17141f}
.pc-head{display:flex;gap:14px;align-items:center}.pc-head h3{margin:0}.pc-title{display:block;color:var(--gold);font-weight:700}
.pc-bio{color:#d9d0c1;line-height:1.55}
.pc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:12px 0}
.pc-stats span{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--line);border-radius:3px}.pc-stats b{font:800 17px var(--display);color:var(--washi)}.pc-stats small{color:var(--muted)}
.pc-team{display:flex;gap:8px;flex-wrap:wrap}.pc-team span{display:flex;flex-direction:column;align-items:center}.pc-team .av{width:48px;height:48px}.pc-team small{color:var(--gold);font-size:10px}
.profile-form{display:flex;flex-direction:column;gap:6px}.profile-form h4{margin:10px 0 2px}
.profile-form input:not([type]),.profile-form input[name=title],.profile-form textarea{padding:9px 11px;border-radius:3px;border:1px solid var(--line2);background:#16141e;color:var(--washi);font:500 14px var(--ui)}
.avatar-pick{display:flex;flex-wrap:wrap;gap:6px;max-height:170px;overflow:auto}
.avatar-pick input{position:absolute;opacity:0}.avatar-pick .av{width:44px;height:44px;cursor:pointer}.avatar-pick input:checked+.av{outline:2px solid var(--shu);outline-offset:2px}
@media (max-width:900px){.profile-edit{grid-template-columns:1fr}.chat{height:min(70vh,560px)}}
.pc-stats b{text-transform:capitalize}

/* ===== HUB · painel lateral como rastreador de missão (seções, 1 linha, 1 botão) ===== */
.side-panel{gap:10px}
.guide-card,.event-card{gap:4px;padding:12px 14px;border-radius:4px;background:#16141e!important;border:1px solid var(--line2)!important;box-shadow:none!important;animation:none!important}
.guide-card.done{border-color:var(--gold)!important}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px}
.sec-h span{font:800 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--shu)}
.sec-h small{font:600 11px var(--ui);color:var(--dim)}
.guide-card strong,.event-card strong{font:800 16px/1.25 var(--display);color:var(--washi)}
.clamp1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--muted)}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;min-width:0}
.sec-row .guide-reward{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.sec-row .action{margin:0!important;flex:none}
.sec-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sec-foot .action{margin:0!important}
.ev-cal summary{cursor:pointer;font:600 11.5px var(--ui);color:var(--muted);list-style:none;margin-top:4px}
.ev-cal summary::before{content:"";display:inline-block;width:0;height:0;margin:0 6px 1px 1px;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}.ev-cal[open] summary::before{transform:rotate(90deg)}
.ev-cal .ev-next{margin:6px 0 0}
.right-pane .objective{padding:9px 11px;display:grid;gap:6px}
.right-pane .objective header{font-size:13px}.right-pane .objective header span{color:var(--muted);font-variant-numeric:tabular-nums}
.right-pane .objective .action{justify-self:start}
.right-pane .objective.done{border-color:rgba(216,176,98,.5);background:rgba(216,176,98,.06)}
.pane-more{width:100%;margin-top:6px}
@media (min-width:1101px){.app:not(.panel-hidden) .village-hub .hub-goal{display:none}}
.res[hidden]{display:none!important}
@media (max-width:1400px){#village-actions .signpost small{display:none}}
/* Mostrador de ouro/cristais no palco: some na luta contra chefe (a barra do chefe ocupa o topo) e no celular fica sob o título */
body.boss-combat .stage-wallet{display:none}
body.in-combat .stage-wallet{opacity:.9}
@media (max-width:900px){.stage-wallet{left:auto;right:8px;transform:none}}
/* Cartão da cidade: a linha de ações ocupa a largura toda quando sobra um botão só */
.village-hub .hub-row{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
/* Marcadores do mapa com nível e poder: texto menor para não se sobreporem */
.illustrated-map .map-pin small{white-space:nowrap;font-size:10px}

/* Ícones desenhados (src/icons.js) no lugar dos kanji: traço na cor do texto. */
.gl{display:inline-block;width:1.1em;height:1.1em;flex:none;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.kj .gl{width:1.15em;height:1.15em}
.hero-portrait .cls .gl{width:12px;height:12px;vertical-align:middle}
.dlg-mark .gl{width:46px;height:46px;stroke-width:1.8;color:var(--laca,#c9472d)}
/* Tecla do ultimate: selo pequeno no canto de cima do ícone, sem cobrir o desenho nem o texto. */
.hero-slot .ult-btn .ult-ic kbd{position:absolute;left:auto;right:-6px;top:-6px;bottom:auto;width:14px;height:14px;border-radius:4px;font:700 8.5px/1 var(--ui,sans-serif);color:#1b1512;background:var(--washi,#efe6d2);box-shadow:0 1px 2px rgba(0,0,0,.6);z-index:2}
.hero-slot .ult-btn{overflow:visible}
@media (hover:none),(max-width:700px){.hero-slot .ult-btn .ult-ic kbd{display:none}}
/* Botão MAPA: o destino principal fora da luta atual. Laca cheia, ícone de mapa e o maior alvo da barra do palco. */
body .stage-controls .journey-cta{min-width:76px!important;height:52px!important;padding:0 12px!important;background:var(--shu,#c9472d)!important;border:1px solid #e07a5f!important;border-radius:4px!important;box-shadow:0 6px 16px rgba(0,0,0,.45)!important}
body .stage-controls .journey-cta span,body .stage-controls .journey-cta b{color:#fff7ea!important}
body .stage-controls .journey-cta .gl{width:20px;height:20px;stroke-width:2}
body .stage-controls .journey-cta b{font:800 14px/1 var(--ui)!important;letter-spacing:.1em}
body .stage-controls .journey-cta:hover{background:#d9573b!important;transform:translateY(-1px)}
@media (max-width:900px){body .stage-controls .journey-cta{min-width:54px!important;height:44px!important;padding:0 7px!important}}

/* Marcadores da cidade: medalhão redondo sobre o prédio e placa com nome e nível logo abaixo (padrão de mapa de cidade
   de jogos). A descrição fica na dica; nada de caixas largas cobrindo a praça ou os heróis. */
#village-actions .signpost{flex-direction:row;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0;background:none!important;border:0!important;box-shadow:none!important;transform:translate(-50%,-50%)}
#village-actions .signpost::after,#village-actions .signpost::before{display:none!important}
#village-actions .signpost .sp-icon{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:rgba(14,12,18,.88)!important;border:1px solid rgba(239,230,210,.72)!important;box-shadow:0 2px 6px rgba(0,0,0,.35)!important;font-size:14px}
#village-actions .signpost .sp-icon .ic{--icc:var(--washi)}
#village-actions .signpost .sp-plate{display:flex;flex-direction:column;align-items:flex-start;padding:3px 6px;border-radius:5px;background:rgba(14,12,18,.78);border:1px solid rgba(239,230,210,.2);box-shadow:0 2px 5px rgba(0,0,0,.25)}
#village-actions .signpost b{font:600 11px/1.2 var(--ui);color:var(--washi);white-space:nowrap}
#village-actions .signpost .sp-lv{display:block!important;font:600 8px/1.2 var(--ui);color:var(--gold);letter-spacing:.02em}
#village-actions .signpost .sp-lv:empty{display:none!important}
#village-actions .signpost.ready .sp-icon,#village-actions .signpost.hot .sp-icon,#village-actions .signpost.featured .sp-icon{border-color:var(--gold)!important}
#village-actions .signpost .sp-badge{position:absolute;top:2px;left:18px;right:auto;z-index:2;min-width:14px;height:14px;font-size:8px;line-height:14px;padding:0 3px}
#village-actions .signpost:hover{transform:translate(-50%,-50%) translateY(-2px)}
#village-actions .signpost:hover .sp-icon{border-color:var(--gold)!important}
#village-actions .signpost:focus-visible .sp-icon{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:700px){#village-actions .signpost .sp-plate{padding:2px 6px}#village-actions .signpost .sp-lv{display:none!important}}
#village-actions .signpost{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#village-actions .signpost{opacity:1!important;visibility:visible!important}
#village-actions .signpost[data-badge="guild"]{left:23%!important;top:16%!important}
#village-actions .signpost[data-badge="dojo"]{left:11%!important;top:30%!important}
#village-actions .signpost[data-badge="collection"]{left:44%!important;top:15%!important}
#village-actions .signpost[data-badge="shrine"]{left:85%!important;top:49%!important}
#village-actions .signpost[data-badge="bank"]{left:13%!important;top:72%!important}
#village-actions .signpost[data-badge="house"]{left:32%!important;top:31%!important}
#village-actions .signpost[data-badge="workshop"]{left:55%!important;top:79%!important}
#village-actions .signpost[data-badge="expeditions"]{left:87%!important;top:74%!important}
#viewport{container-type:inline-size;container-name:city-stage}
@container city-stage (min-width:701px) and (max-width:1100px){
  body.city-focus .zone-chip{max-width:235px}body.city-focus .zone-chip .zone-meta{display:none}
  body.city-focus .village-hub{width:220px!important;padding:6px 8px!important}
  body.city-focus .village-hub .eyebrow,body.city-focus .hub-goal small{display:none}
  body.city-focus .village-hub .hub-goal{margin:0 0 3px!important;padding:4px 6px}
  body.city-focus .village-hub .hub-goal b{font-size:12px}
  body.city-focus .village-hub .hub-goal .action{min-height:26px;padding:0 6px}
  body.city-focus .village-hub .hub-actions>.action.primary{min-height:32px}
  body.city-focus .village-hub .hub-go b{font-size:12px}
  body.city-focus .village-hub .hub-row .action{min-height:24px}
}
body:not(.in-combat) .zone-chip{max-width:340px;padding:6px 10px 7px}
body:not(.in-combat) .zone-chip .zone-kicker{font-size:8px}
body:not(.in-combat) .zone-chip h1{margin:1px 0 3px;font-size:clamp(15px,1.35vw,19px)}
body:not(.in-combat) .zone-chip .zone-meta span{font-size:8px;padding:1px 6px}
/* Celular em pé: palco mais alto (a cena é recortada nas laterais em src/renderer.js), sem faixa vazia embaixo. */
body.stage-portrait .stage{aspect-ratio:var(--stage-vw,920)/720!important}
@media (max-width:700px){body .stage-controls #boost-btn{padding:0 4px!important;min-width:68px!important;flex-direction:column!important;justify-content:center!important;gap:2px!important}body .stage-controls #boost-btn b{font-size:10.5px!important;letter-spacing:0!important}}
/* Barra do palco: todos os controles na mesma altura e no mesmo eixo (PREPARAR e MAPA idênticos em tamanho). */
body .stage-controls{align-items:center!important}
body .stage-controls .ctl{height:50px!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;box-sizing:border-box;margin:0!important;vertical-align:middle}
body .stage-controls #boost-btn,body .stage-controls .journey-cta{min-width:84px!important;height:50px!important;padding:0 10px!important}
body .stage-controls .ctl>span,body .stage-controls .ctl>b{line-height:1!important;margin:0!important}
@media (max-width:900px){
  body .stage-controls .ctl{height:44px!important}
  body .stage-controls #boost-btn,body .stage-controls .journey-cta{min-width:68px!important;height:44px!important;padding:0 6px!important}
}
body .stage-controls .ctl,body .stage-controls .journey-cta{min-height:0!important}

/* O Livro do Véu: leitura de livro (serifa, coluna estreita, capitular em laca, canções centradas). */
.lore-book{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:18px;align-items:start}
.book-toc{position:sticky;top:0;display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line2);border-radius:4px;background:#15131b}
.book-toc header{padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.book-toc header small{font:700 10px var(--ui);letter-spacing:.14em;color:var(--gold)}
.book-toc header h3{margin:2px 0 0;font:700 18px var(--display);color:var(--washi)}
.toc-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:7px 9px;border-radius:3px;border:1px solid transparent;background:none;text-align:left;color:var(--washi);cursor:pointer}
.toc-item small{font:700 9.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toc-item b{font:600 13.5px/1.25 var(--display)}
.toc-item:hover{border-color:var(--line2)}
.toc-item.active{border-color:rgba(216,176,98,.55);background:rgba(216,176,98,.07)}
.toc-item.locked{opacity:.55;cursor:default}
.toc-item.locked em{font:600 10.5px/1.3 var(--ui);font-style:normal;color:var(--muted)}
.book-page{max-width:72ch;padding:26px clamp(16px,4vw,44px) 20px;border:1px solid var(--line2);border-radius:4px;background:var(--grain,none),#17151d;color:#e6dccb}
.book-page header{text-align:center;margin-bottom:18px}
.book-page header small{font:700 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.book-page h2{margin:6px 0 14px;font:700 clamp(22px,2.4vw,30px)/1.2 var(--display);color:var(--washi)}
.book-page .epigraph{margin:0 auto;max-width:52ch;font:italic 15px/1.6 var(--display);color:#cdbfa8}
.book-page .epigraph cite{display:block;margin-top:6px;font:600 11.5px var(--ui);font-style:normal;letter-spacing:.04em;color:var(--muted)}
.book-page p{margin:0 0 1.05em;font:400 16.5px/1.85 var(--display);text-align:justify;hyphens:auto;text-indent:1.4em}
.book-page p.drop{text-indent:0}
.book-page p.drop::first-letter{float:left;margin:.06em .12em 0 0;font:700 3.4em/.82 var(--display);color:var(--shu,#c9472d)}
.book-page .verse{display:flex;flex-direction:column;align-items:center;gap:2px;margin:1.4em auto;padding:14px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:italic 16px/1.7 var(--display);color:#efe3cc;text-align:center}
.book-page .verse cite{margin-top:8px;font:600 11.5px var(--ui);font-style:normal;color:var(--muted)}
.book-page .margin-note{margin:1em 0 1.3em;padding:8px 12px;border-left:2px solid var(--gold);font:500 13.5px/1.55 var(--ui);color:#cbbfa9;background:rgba(216,176,98,.05)}
.book-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.book-appendix{margin-top:16px}
.book-appendix summary{cursor:pointer;font:700 14px var(--display);color:var(--gold);padding:8px 0}
@media (max-width:760px){
  .lore-book{grid-template-columns:1fr}
  .book-toc{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding:8px}
  .book-toc header{display:none}
  .toc-item{flex:0 0 auto;width:auto;max-width:180px}
  .book-page p{font-size:15.5px;line-height:1.75;text-align:left}
}
.book-page p.epigraph{text-align:center;text-indent:0;font:italic 15px/1.6 var(--display);margin:0 auto}
.book-page{justify-self:center;width:100%}

/* Cidade viva: o painel de boas-vindas vira um cartão compacto no céu do canto de cima à direita (a arte deixa essa área
   livre), para a cidade e os moradores ocuparem o palco. */
body .village-hub{top:72px!important;bottom:auto!important;right:14px!important;width:clamp(240px,24%,300px)!important;max-height:none!important;padding:8px 11px!important;overflow:visible!important}
body .village-hub .eyebrow{display:block;margin-bottom:3px;font-size:10px}
body .village-hub .hub-goal{margin-bottom:4px;padding:7px 9px}
body .village-hub .hub-actions{gap:4px}
body .village-hub .hub-actions>.action.primary{min-height:42px}
body .village-hub .hub-row .action{min-height:30px}

.hero-tale{max-width:760px;margin:0 0 14px}
@media (min-width:901px){
  body.city-focus:not(.in-combat){--dock-h:0px}
  body.city-focus:not(.in-combat) #party-strip{display:none}
  body.city-focus:not(.in-combat) .stage-col{padding:6px;--stage-w:min(100%,calc((100dvh / var(--zf,1) - var(--top-h) - 14px) * 16 / 9))}
}
@media (max-width:900px){#city-focus-btn{display:none!important}}
.hero-tale h2{font-size:clamp(20px,2vw,26px)}

/* Enciclopédia: índice agrupado à esquerda (7 assuntos), conteúdo à direita. */
.wiki-layout{display:grid;grid-template-columns:minmax(170px,200px) minmax(0,1fr);gap:16px;align-items:start}
.wiki-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--line2);border-radius:4px;background:#15131b}
.wiki-nav section{display:flex;flex-direction:column;gap:2px}
.wiki-nav small{padding:0 8px 2px;font:700 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wiki-nav button{padding:6px 8px;border:1px solid transparent;border-radius:3px;background:none;color:#d9d0c1;font:600 13px var(--ui);text-align:left;cursor:pointer}
.wiki-nav button:hover{border-color:var(--line2)}
.wiki-nav button.active{background:rgba(216,176,98,.1);border-color:rgba(216,176,98,.5);color:var(--washi)}
.wiki-main{min-width:0}
@media (max-width:760px){
  .wiki-layout{grid-template-columns:1fr}
  .wiki-nav{position:static;flex-direction:row;overflow-x:auto;gap:12px;padding:8px}
  .wiki-nav section{flex:0 0 auto;flex-direction:row;align-items:center;gap:4px}
  .wiki-nav small{padding:0 2px}
  .wiki-nav button{white-space:nowrap}
}

/* Árvore de talentos: medalhões de tinta com anel e desenho na cor da família do atributo; aprendido = anel cheio. */
.tnode.fam-atk{--fc:#e0654a}.tnode.fam-def{--fc:#6f9fd8}.tnode.fam-hp{--fc:#6fbf86}.tnode.fam-spd{--fc:#5fc4b4}.tnode.fam-crit{--fc:#d8b062}.tnode.fam-arc{--fc:#a98be0}
.talent-tree .tnode:not(.k-sig):not(.k-keystone) .seal{fill:#17151e;stroke:color-mix(in srgb,var(--fc) 35%,#3a3644);stroke-width:2.5}
.talent-tree .tnode:not(.k-keystone) .glyph path{stroke:color-mix(in srgb,var(--fc) 45%,#6d6878);fill:color-mix(in srgb,var(--fc) 10%,transparent);stroke-width:2.1}
.talent-tree .tnode.avail:not(.k-sig):not(.k-keystone) .seal{fill:#1d1a26;stroke:color-mix(in srgb,var(--fc) 70%,#cdbf9f)}
.talent-tree .tnode.avail:not(.k-keystone) .glyph path{stroke:#efe7d8;fill:color-mix(in srgb,var(--fc) 18%,transparent)}
.talent-tree .tnode.some:not(.k-sig):not(.k-keystone) .seal,.talent-tree .tnode.max:not(.k-sig):not(.k-keystone) .seal{fill:color-mix(in srgb,var(--fc) 16%,#15131b);stroke:var(--fc);stroke-width:3.5}
.talent-tree .tnode.some:not(.k-keystone) .glyph path,.talent-tree .tnode.max:not(.k-keystone) .glyph path{stroke:var(--fc);fill:color-mix(in srgb,var(--fc) 28%,transparent);stroke-width:2.4}
.talent-tree .tnode.some .seal-inner,.talent-tree .tnode.max .seal-inner{stroke:var(--fc)}
.talent-tree .tnode.max:not(.k-sig):not(.k-keystone) .halo{opacity:.55;stroke:var(--fc);stroke-dasharray:none}
.talent-tree .band-tag .band-gem{fill:var(--shu);stroke:#f0b1a4;stroke-width:1}
.talent-tree .band-tag.locked .band-gem{fill:#4a4656;stroke:#6d665b}
.talent-tree .band-tag text{stroke:none!important;paint-order:normal}
.talent-tree .band-tag .band-sub{font:700 12px var(--ui)!important;fill:#cfc6b6!important;letter-spacing:.06em}

/* O selo do Festival identifica a cidade sem disputar atenção com a arte. */
body:not(.in-combat) .zone-chip{border-color:rgba(236,184,164,.36)}
body:not(.in-combat) .zone-kicker::before{content:"";display:inline-block;width:1.25em;height:1.25em;margin-right:5px;vertical-align:-.3em;background:#f0a7b2;-webkit-mask:var(--blossom) center/contain no-repeat;mask:var(--blossom) center/contain no-repeat;--blossom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 1 3 4 3 3 0 0 1 4 3 3 3 0 0 1-2 4 3 3 0 0 1-1 4 3 3 0 0 1-4-1 3 3 0 0 1-4 1 3 3 0 0 1-1-4 3 3 0 0 1-2-4 3 3 0 0 1 4-3 3 3 0 0 1 3-4zM12 11v2'/%3E%3C/svg%3E")}

.service-lock{max-width:850px;margin:auto;padding:18px}.service-lock h3{font:700 30px var(--display);margin:10px 0}.service-lock>p{line-height:1.65}
.service-roadmap{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}
.service-roadmap li{display:grid;grid-template-columns:32px 1fr;gap:4px 10px;padding:12px;border:1px solid var(--line2);border-radius:4px;background:rgba(21,18,25,.7)}
.service-roadmap li>span{grid-row:span 2;align-self:center;text-align:center;color:var(--gold)}.service-roadmap small{line-height:1.5;color:var(--dim)}.service-roadmap .unlocked{border-color:rgba(143,174,141,.4)}
.signpost.service-locked .sp-lv{color:#d1c8b5}.signpost.service-locked .sp-icon{border-color:#968873;background:#242128}.signpost.service-locked .sp-plate{border:1px solid rgba(180,164,143,.4)}
.chat-channel{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.chat-channel h3{font:700 24px var(--display);margin:6px 0}.chat-status{font-size:11px;color:#b4ae9f;line-height:1.6}
.chat-log,.guild-feed{overflow-wrap:anywhere;scrollbar-gutter:stable}.chat-event{border-left:2px solid #8b7757;padding-left:10px;color:#b9b09f}.chat-line p{white-space:pre-wrap;line-height:1.6}.chat-line .chat-who{max-width:100%;min-width:0}.chat-line .chat-who b{overflow:hidden;text-overflow:ellipsis}
.chat-form input{min-width:0;flex:1}.guild-feed{max-height:360px;display:flex;flex-direction:column;gap:10px;padding:12px}.foe-card .matchup{font-size:12px;margin:8px 0}.foe-card>small{display:block;min-height:36px;line-height:1.5}.companion-memory{padding:16px 0;border-top:1px solid var(--line2)}
.dlg-body [data-story-book]{margin:5px 0 8px}.dlg-body .dlg-next{display:block}
#district-grid .service-locked{border-color:rgba(180,164,143,.4)}#district-grid .service-locked small{display:block;font:600 10px/1.5 var(--ui);color:#c9baa4}
@media(max-width:600px){.service-roadmap{grid-template-columns:1fr}.service-lock{padding:8px}.chat-channel h3{font-size:20px}.chat-form{display:flex;gap:6px}.chat-form .action{padding:10px}.guild-feed{max-height:300px}.chat-log{min-height:230px}.chat-channel .chat-status{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.dlg-body p.typing{animation:none}}

/* =========================================================
   COMANDOS DE LUTA
   Cada herói tem dois botões lado a lado: HABILIDADE (A S D F) e ULTIMATE (Q W E R). A Guarda (Espaço) fica com as
   poções, no canto do palco, e o botão COMANDO troca entre AUTO · SEMI · MANUAL (tecla Z).
   ========================================================= */
.dock .hero-slot{container:hero/inline-size}
.hero-actions{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;min-width:0}
.hero-actions :is(.skill-btn,.ult-btn){grid-column:auto!important;width:100%;min-width:0;overflow:visible}
.skill-btn{position:relative;display:flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 4px;border-radius:4px;background:rgba(0,0,0,.4);border:1px solid var(--line2);text-align:left;transition:border-color .15s,background .15s}
.skill-btn>span:nth-of-type(2){position:relative;min-width:0;flex:1}
.skill-btn b{display:block;font-size:11.5px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-btn small{display:block;font-size:10px;line-height:1.15;color:var(--muted);letter-spacing:.05em;font-weight:700}
.hero-actions small{font-variant-numeric:tabular-nums}
/* recarga da habilidade: leque escuro sobre o ícone e um fio que enche embaixo do botão */
.skill-btn .sk-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(rgba(8,6,14,.8) calc(var(--cd,0)*1turn),transparent 0);pointer-events:none}
.skill-btn .cdw{position:absolute;left:1px;right:1px;bottom:0;height:3px;border-radius:0 0 8px 8px;background:var(--cyan);transform-origin:left;transform:scaleX(calc(1 - var(--cd,0)));opacity:.85;pointer-events:none}
.skill-btn:disabled{cursor:default}
.skill-btn.ready{border-color:var(--cyan);background:rgba(134,182,196,.12);animation:skillReady 1.5s ease-in-out infinite}
.skill-btn.ready small{color:#c4e7f0}
.skill-btn.ready:hover{background:rgba(134,182,196,.2)}
.skill-btn.fired{animation:fired .35s}
@keyframes skillReady{50%{box-shadow:0 0 0 1px rgba(134,182,196,.55)}}
.hero-slot .skill-btn .ult-ic kbd{position:absolute;left:auto;right:-6px;top:-6px;bottom:auto;width:14px;height:14px;border-radius:4px;font:700 8.5px/1 var(--ui,sans-serif);color:#1b1512;background:var(--washi,#efe6d2);box-shadow:0 1px 2px rgba(0,0,0,.5);display:grid;place-items:center}
.hero-slot.dead .hero-actions{opacity:.6}
@media (hover:none),(max-width:700px){.hero-slot .skill-btn .ult-ic kbd{display:none}}

/* Em luta: retrato e vida em cima, os dois botões na largura toda do cartão */
body.in-combat .dock .hero-slot{grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 8px;align-items:center}
body.in-combat .dock .hero-portrait{grid-row:1;width:46px;height:46px}
body.in-combat .dock .hero-actions{grid-column:1/-1}
body.in-combat .dock .hero-actions :is(.skill-btn,.ult-btn){height:30px;gap:6px;padding:0 7px 0 4px;border-radius:3px;background:rgba(0,0,0,.28)}
body.in-combat .dock .hero-actions b{font-size:11.5px}
body.in-combat .dock .hero-actions small{font-size:10px!important;letter-spacing:.04em}
@media (max-height:700px) and (min-width:861px){
  body.in-combat .dock .hero-portrait{width:40px;height:40px}
  body.in-combat .dock .hero-actions :is(.skill-btn,.ult-btn){height:26px}
}
/* Cartão estreito: some o nome do golpe, fica o ícone e o estado (PRONTA!, 4s, 80%) */
@container hero (max-width:236px){
  .hero-actions :is(.skill-btn,.ult-btn) b{display:none!important}
  .hero-actions :is(.skill-btn,.ult-btn){justify-content:center;padding:0 4px!important;gap:5px!important}
  .hero-actions :is(.skill-btn,.ult-btn)>span:nth-of-type(2){flex:0 1 auto!important}
  .hero-actions small{font-size:11px!important}
}
@media (max-width:640px){
  body.in-combat .dock .hero-slot{grid-template-columns:44px minmax(0,1fr)}
  body.in-combat .dock .hero-portrait{width:44px;height:44px}
  body.in-combat .dock .hero-actions{gap:6px}
  body.in-combat .dock .hero-actions :is(.skill-btn,.ult-btn){height:44px}
  body.in-combat .dock .hero-actions .ult-ic{width:26px;height:26px}
}

/* Guarda: botão largo junto das poções; acende quando erguida e chama quando um inimigo prepara um golpe */
body .consumables .cons.guard{width:auto;min-width:108px;display:flex;align-items:center;gap:7px;padding:0 10px 0 9px;color:var(--washi)}
.cons.guard .ic{flex:none;font-size:21px;--icc:var(--gold)}
.cons.guard b{position:static;font:800 12px/1 var(--ui);letter-spacing:.1em;text-shadow:none}
.cons.guard kbd{position:static;margin-left:auto;padding:3px 5px;border-radius:4px;background:rgba(236,226,208,.12);font:700 9px/1 var(--ui);color:var(--muted);letter-spacing:.04em}
.cons.guard .cd{background:linear-gradient(90deg,rgba(8,6,14,.76) calc(var(--cd,0)*100%),transparent 0)}
.cons.guard:disabled .ic{--icc:var(--dim)}
.cons.guard:disabled b{color:var(--dim)}
.cons.guard.up{border-color:var(--gold);background:rgba(216,176,98,.22);box-shadow:0 0 0 2px rgba(216,176,98,.4)}
.cons.guard.up b{color:#ffe9b0}
.cons.guard.alert{border-color:#ffe28a;animation:guardCall .45s ease-in-out infinite alternate}
.cons.guard.fired{animation:fired .3s}
@keyframes guardCall{to{background:rgba(216,176,98,.26);box-shadow:0 0 0 3px rgba(255,226,138,.5)}}
@media (hover:none),(max-width:860px){.cons.guard kbd{display:none}body .consumables .cons.guard{min-width:92px}}
@media (max-width:640px){body .consumables .cons.guard{min-width:96px;height:44px}body .consumables .cons{width:44px;height:44px}}
#guard-btn.afk-hide,#mode-btn.afk-hide{display:none!important}

/* Comando: AUTO (a equipe decide) · SEMI (ultimates suas) · MANUAL (tudo seu) */
.ctl.mode[data-mode="auto"] b{color:var(--green)}
.ctl.mode[data-mode="semi"] b{color:var(--cyan)}
.ctl.mode[data-mode="manual"] b{color:#f0a48f}
body.in-combat .ctl.mode.active{background:rgba(236,226,208,.07);box-shadow:inset 0 0 0 1px rgba(236,226,208,.25)}
@media(prefers-reduced-motion:reduce){.skill-btn.ready,.cons.guard.alert,.ult-btn.ready{animation:none}}
/* Luta em telas médias: PREPARAR e MAPA ficam só com o ícone, para o nome da região e a barra do chefe caberem */
@media (min-width:901px) and (max-width:1320px){
  body.in-combat .stage-controls #boost-btn,body.in-combat .stage-controls .journey-cta{min-width:46px!important;padding:0 8px!important}
  body.in-combat .stage-controls #boost-btn b,body.in-combat .stage-controls .journey-cta b{display:none}
  body.in-combat .zone-chip{flex:0 0 auto;max-width:230px}
  body.in-combat .boss-panel{min-width:0}
}
/* Celular: Guarda e poções numa faixa própria abaixo do palco */
.consumables.below-stage{position:static;display:grid;grid-template-columns:minmax(0,1fr) 52px 52px;gap:6px;width:100%;margin:6px 0 0;box-sizing:border-box}
.consumables.below-stage[hidden]{display:none}
body .consumables.below-stage .cons{width:auto;height:48px}
body .consumables.below-stage .cons.guard{min-width:0;justify-content:center;gap:9px}
body .consumables.below-stage .cons.guard b{font-size:14px}
body .consumables.below-stage .cons img{margin-top:8px}

/* =========================================================
   LUTA POR TURNOS: linha do tempo (quem age em seguida) e o comando da vez do herói
   ========================================================= */
.turn-bar{position:absolute;left:10px;top:86px;z-index:3;margin:0;padding:5px 4px 6px;list-style:none;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:4px;background:rgba(13,12,18,.74);border:1px solid var(--line2)}
.turn-bar[hidden]{display:none}
.turn-bar .tb-label{font:700 8.5px/1 var(--ui);letter-spacing:.14em;color:var(--dim);padding:2px 0 2px}
.turn-bar .tb{position:relative;width:34px;height:34px;border-radius:3px;overflow:hidden;border:2px solid color-mix(in srgb,var(--tc) 65%,#111);background:var(--bg2);opacity:.84}
.turn-bar .tb img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.turn-bar .tb.foe{border-radius:50%;border-color:#a8574c;background:#241a1c}
.turn-bar .tb.foe img{object-fit:contain;object-position:center;padding:2px;box-sizing:border-box}
.turn-bar .tb.now{width:46px;height:46px;opacity:1;border-color:var(--gold);box-shadow:0 0 0 2px rgba(216,176,98,.35)}
.turn-bar .tb.special{border-color:#ff6b6b;opacity:1;animation:tbWarn .7s ease-in-out infinite alternate}
.turn-bar .tb em{position:absolute;right:2px;top:0;font:800 13px/1 var(--ui);font-style:normal;color:#ff7a7a;text-shadow:0 1px 2px #000}
@keyframes tbWarn{to{box-shadow:0 0 0 3px rgba(255,107,107,.45)}}
@media (max-height:700px) and (min-width:901px){.turn-bar .tb{width:28px;height:28px}.turn-bar .tb.now{width:38px;height:38px}.turn-bar .tb:nth-child(n+8){display:none}}
@media (max-width:900px){
  .turn-bar{left:auto;right:4px;top:6px;flex-direction:row;padding:3px;gap:2px;border-radius:3px}
  body.boss-combat .turn-bar{top:86px}
  .turn-bar .tb-label{display:none}
  .turn-bar .tb{width:22px;height:22px;border-radius:3px;border-width:1.5px}
  .turn-bar .tb.now{width:30px;height:30px}
  .turn-bar .tb:nth-child(n+7){display:none}
}

.turn-cmd{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);z-index:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(320px,46%);padding:8px;border-radius:4px;background:rgba(13,12,18,.93);border:1px solid var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 3px rgba(216,176,98,.16);animation:turnIn .16s ease-out}
.turn-cmd[hidden]{display:none}
.tc-who{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-width:0;padding:0 2px 2px}
.tc-who img{flex:none;width:38px;height:38px;border-radius:4px;border:2px solid var(--hc,var(--gold));object-fit:cover;background:var(--bg2)}
.tc-who>span{min-width:0}
.tc-who small{display:block;font:700 9px/1.3 var(--ui);letter-spacing:.16em;color:var(--gold)}
.tc-who b{display:block;font:800 14px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-btn{position:relative;display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 30px 0 10px;border-radius:4px;background:rgba(236,226,208,.07);border:1px solid var(--line2);color:var(--text);text-align:left;transition:background .12s,border-color .12s}
.tc-btn .ic{flex:none;font-size:18px;--icc:var(--washi)}
.tc-btn b{min-width:0;font:700 12px/1.15 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-btn kbd{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:3px 5px;border-radius:4px;background:rgba(0,0,0,.35);font:700 9px/1 var(--ui);color:var(--muted);letter-spacing:.04em}
.tc-btn:hover:not(:disabled){background:rgba(236,226,208,.14);border-color:rgba(236,226,208,.4)}
.tc-btn.primary{background:var(--shu);border-color:transparent;color:#fff7ea}
.tc-btn.primary .ic{--icc:#fff7ea}
.tc-btn.primary kbd{background:rgba(0,0,0,.28);color:#ffe9dc}
.tc-btn.primary:hover:not(:disabled){background:#dc5738}
.tc-btn[data-act="skill"]:not(:disabled){border-color:var(--cyan);background:rgba(134,182,196,.14)}
.tc-btn[data-act="ult"]:not(:disabled){border-color:var(--gold);background:rgba(216,176,98,.16)}
.tc-btn:disabled{opacity:.36;cursor:default}
@keyframes turnIn{from{opacity:0;transform:translate(-50%,-44%)}}
/* celular: o comando fica numa faixa abaixo do palco, com botões grandes */
.turn-cmd.below-stage{position:static;transform:none;width:100%;box-sizing:border-box;margin:6px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));animation:none}
.turn-cmd.below-stage .tc-btn{height:48px}
@media (hover:none){.tc-btn kbd{display:none}.tc-btn{padding-right:10px}}
.hero-slot.turn{border-color:var(--gold)!important;box-shadow:0 0 0 2px rgba(216,176,98,.38)}
@media(prefers-reduced-motion:reduce){.turn-cmd,.turn-bar .tb.special{animation:none}}