/* PRIMEIRA HORA (docs/PRIMEIRA_HORA.md): o prólogo de Sayo, as lições na hora, a cidade que abre aos poucos, a
   revelação da convocação por raridade e a raridade à vista na luta. Tudo o que é deste assunto mora aqui.
   Índice:  [prologo]  [fala]  [licao]  [cidade]  [revelacao]  [raridade]  [pocao]  [achar] */

/* ---------- [prologo] a tela só com o que o passo pede ---------- */
/* Menu: enquanto Sayo conduz, só os três lugares que o prólogo usa (equipe, heróis, bolsa). */
body.prologue .side-nav .nav:not([data-panel="party"]):not([data-panel="collection"]):not([data-panel="inventory"]){display:none!important}
body.prologue #more-sheet{display:none!important}
/* Saguão: o botão que leva à luta e, depois da primeira vitória, o objetivo. Atalhos entram quando o prólogo acaba. */
body.prologue .lobby-btn{display:none!important}
body.prologue .lobby-bar .lobby-cta{grid-template-columns:minmax(0,1fr)!important}       /* sozinho, o botão da luta ocupa a linha (celular) */
body.prologue-early .lobby-goal{visibility:hidden}
body.prologue-early #goal-chip{display:none!important}                 /* no celular e no tablet o objetivo é este cartão */
body.prologue #district-grid,body.prologue #journey-cta{display:none!important}
/* Primeira luta: só a luta. Comando, velocidade, preparar e voltar aparecem depois dela. */
body.prologue-early .stage-controls>:not(#bh-potion){display:none!important}
body.prologue-early #power-check{display:none!important}
/* O console de ordens fica apagado: no AUTO a equipe escolhe sozinha, e ele se apresenta depois (lição do comando). */
body.prologue-early .bh-mid{opacity:.28;pointer-events:none}

/* ---------- [fala] o balão de Sayo ---------- */
.coach-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px}
.coach-kicker b{letter-spacing:.16em;font-weight:800}
.coach-dots{display:inline-flex;gap:4px}
.coach-dots i{width:14px;height:3px;border-radius:1px;background:var(--line2)}
.coach-dots i.done{background:var(--gold2)}
.coach-dots i.on{background:var(--gold)}
.coach-bubble .coach-title{font-size:18px;line-height:1.2;margin:6px 0 6px}
.coach-bubble p{font-size:14px;line-height:1.5;margin:0 0 12px;color:var(--washi)}
.coach-bubble p b{color:var(--gold-hi,var(--gold))}
.coach-actions .action.ghost{margin-left:auto;font-size:11.5px;padding:6px 9px;opacity:.75}
/* Legenda da luta: fala sem parar nada, no alto do palco. */
#coach.caption .coach-bubble{padding:10px 14px;border-color:var(--line2);box-shadow:0 10px 26px rgba(0,0,0,.5)}
#coach.caption .coach-bubble p{margin:0 0 6px;font-size:13.5px}
#coach.caption .coach-title{font-size:16px;margin:4px 0}
/* A carta que fecha a convocação: o balão toma a cor da raridade dela. */
#coach[data-rarity="rare"] .coach-bubble{border-color:var(--rare)}
#coach[data-rarity="epic"] .coach-bubble{border-color:var(--epic)}
#coach[data-rarity="legendary"] .coach-bubble{border-color:var(--legendary)}
#coach[data-rarity="epic"] .coach-title{color:var(--epic)}
#coach[data-rarity="legendary"] .coach-title{color:var(--legendary)}

/* ---------- [licao] cartão pequeno de Sayo, que não para o jogo ---------- */
#lesson{position:fixed;z-index:58;right:18px;top:122px;width:min(318px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:12px 14px;background:var(--surf,#16141e);border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:3px;box-shadow:0 14px 34px rgba(0,0,0,.5);color:var(--washi);animation:lessonIn .28s ease-out both}
#lesson[hidden]{display:none}
#lesson.over-modal{z-index:8000}
#lesson.place{border-left-color:var(--shu,#c9472d)}
@keyframes lessonIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lesson-seal{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:3px;color:var(--gold)}
.lesson-seal .gl{width:18px;height:18px}
.lesson-body{min-width:0}
.lesson-body small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
#lesson.place .lesson-body small{color:var(--shu,#c9472d)}
.lesson-body b{display:block;font:700 16px/1.25 var(--display);margin:2px 0 4px;overflow-wrap:anywhere}
.lesson-body p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.lesson-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
@media (max-width:900px){
  /* Celular: uma faixa acima da barra de baixo, na largura da tela. */
  #lesson{left:10px;right:10px;top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));width:auto}
  #lesson.over-modal{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .lesson-actions .action{min-height:40px}
}

/* ---------- [cidade] a placa que acabou de abrir ---------- */
#village-actions .signpost[hidden]{display:none!important}
#village-actions .signpost.fresh .sp-plate::after{content:attr(data-fresh);margin-left:6px;padding:1px 5px;border-radius:2px;background:var(--shu,#c9472d);color:var(--washi);font:800 9.5px/1.4 var(--ui,inherit);letter-spacing:.1em;vertical-align:middle}

/* ---------- [revelacao] convocação: da carta comum à melhor ---------- */
/* A mesa cabe na tela sem rolar, em qualquer quantidade: as cartas encolhem pela largura e pela altura que sobram.
   --cols e --rows saem da quantidade (classe nN); --cw é a largura da carta e tudo dentro dela acompanha. */
.summon-reveal{padding:16px 12px}
.summon-reveal .reveal-box{position:relative;width:100%;max-width:1120px;--cols:5;--rows:2;--gap:12px;--cw:max(84px,min(168px,calc((100vw - 40px - (var(--cols) - 1) * var(--gap)) / var(--cols)),calc(((100vh - 236px) / var(--rows) - var(--gap)) * .672)))}
.reveal-box:has(.n1){--cols:1;--rows:1}.reveal-box:has(.n2){--cols:2;--rows:1}.reveal-box:has(.n3){--cols:3;--rows:1}.reveal-box:has(.n4){--cols:4;--rows:1}.reveal-box:has(.n5){--cols:5;--rows:1}.reveal-box:has(.n6){--cols:6;--rows:1}
.reveal-box:has(.n7),.reveal-box:has(.n8){--cols:4;--rows:2}
.summon-reveal .reveal-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));justify-content:center;gap:var(--gap);max-width:none;margin:0 auto}
.summon-reveal .reveal-card{position:relative;width:var(--cw);height:calc(var(--cw) / .672)}
.summon-reveal .reveal-card.single{--cw:min(260px,calc(100vw - 80px),calc((100vh - 250px) * .672))}
.summon-reveal .reveal-face img{bottom:calc(var(--cw) * .44);height:62%}
.summon-reveal .reveal-face footer{padding:calc(var(--cw) * .04) 6px calc(var(--cw) * .05)}
.summon-reveal .reveal-face footer b{font-size:clamp(11px,calc(var(--cw) * .098),16px);line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.summon-reveal .reveal-card.single .reveal-face footer b{font-size:22px}
.summon-reveal .reveal-face footer small{font-size:clamp(8.5px,calc(var(--cw) * .062),10.5px);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summon-reveal .reveal-face footer em{font-size:clamp(8.5px,calc(var(--cw) * .06),10px)}
.summon-reveal h2{font-size:clamp(24px,5.2vw,40px);margin:0 0 2px}
.summon-reveal>.reveal-box>p.reveal-sub{margin:0 0 14px}
@media (max-width:700px){
  .summon-reveal .reveal-box{--gap:8px}
  .reveal-box:has(.n4){--cols:2;--rows:2}.reveal-box:has(.n5),.reveal-box:has(.n6){--cols:3;--rows:2}
  .reveal-box:has(.n7),.reveal-box:has(.n8),.reveal-box:has(.n9){--cols:3;--rows:3}.reveal-box:has(.n10){--cols:3;--rows:4}
}
.reveal-card.tier-common{--c:var(--common)}.reveal-card.tier-rare{--c:var(--rare)}.reveal-card.tier-epic{--c:var(--epic)}.reveal-card.tier-legendary{--c:var(--legendary)}
/* Suspense: de Raro para cima o verso acende na cor da raridade enquanto a carta espera a vez. */
.reveal-card:not(.tier-common) .reveal-back{animation:revealCharge var(--d,0s) ease-in both}
@keyframes revealCharge{0%,45%{border-color:rgba(255,207,107,.4);box-shadow:none}100%{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}}
/* Carta comum: sem brilho. O brilho é de quem merece. */
.reveal-face.rarity-common{box-shadow:none;border-color:color-mix(in srgb,var(--common) 55%,transparent)}
.reveal-face.rarity-epic,.reveal-face.rarity-legendary{border-width:3px}
.reveal-face.rarity-legendary{box-shadow:0 0 0 1px var(--ink,#0d0c12),0 0 0 3px color-mix(in srgb,var(--legendary) 55%,transparent),0 0 38px color-mix(in srgb,var(--legendary) 60%,transparent)}
.reveal-face footer em.role{color:var(--washi);font-weight:800;letter-spacing:.12em}
/* Clarão ao virar: Épico e Lendário. */
.reveal-burst{position:absolute;inset:-6px;border:2px solid var(--c);border-radius:6px;opacity:0;pointer-events:none}
.reveal-card.tier-epic .reveal-burst,.reveal-card.tier-legendary .reveal-burst{animation:revealBurst .75s ease-out both;animation-delay:calc(var(--d,0s) + .32s)}
@keyframes revealBurst{0%{opacity:.95;transform:scale(.86)}100%{opacity:0;transform:scale(1.32)}}
/* Lendário: a tela lava de ouro e a mesa dá um tranco curto, só na vertical (uma pitada, não um terremoto). */
.reveal-wash{position:fixed;inset:0;pointer-events:none;opacity:0;background:var(--legendary)}
.best-legendary .reveal-wash{animation:revealWash .9s ease-out both;animation-delay:calc(var(--peak,0s) + .3s)}
@keyframes revealWash{0%{opacity:0}12%{opacity:.5}100%{opacity:0}}
.best-legendary .reveal-grid{animation:revealShake .26s linear both;animation-delay:calc(var(--peak,0s) + .34s)}
@keyframes revealShake{0%,100%{transform:none}25%{transform:translateY(-4px)}50%{transform:translateY(3px)}75%{transform:translateY(-2px)}}
/* O melhor resultado e o que ele vale só entram depois da última carta. */
.summon-reveal .late{animation:revealLate .45s ease-out both;animation-delay:var(--total,0s)}
@keyframes revealLate{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.reveal-sub{min-height:1.4em}
.summon-reveal .reveal-box>p.reveal-perk{max-width:560px;margin:16px auto 0;padding:9px 14px;border:1px solid var(--c);border-radius:3px;background:var(--surf,#16141e);color:var(--washi);font-size:14px;line-height:1.45;text-align:center}
.summon-reveal .reveal-box>p.reveal-hint{margin:14px 0 0}
/* Primeiro toque (ou quem pede menos movimento): tudo vira de uma vez. */
.summon-reveal.skip :is(.reveal-inner,.reveal-back,.reveal-burst,.reveal-wash,.reveal-grid,.late){animation-delay:0s!important;animation-duration:.01s!important}
@media (prefers-reduced-motion:reduce){
  .summon-reveal :is(.reveal-inner,.reveal-back,.reveal-burst,.reveal-wash,.reveal-grid,.late){animation-delay:0s!important;animation-duration:.01s!important}
  #lesson{animation:none}
}

/* ---------- [raridade] quem é raro aparece raro também na luta ---------- */
.bh-unit.rarity-rare{--rc:var(--rare)}.bh-unit.rarity-epic{--rc:var(--epic)}.bh-unit.rarity-legendary{--rc:var(--legendary)}
.bh-unit:is(.rarity-rare,.rarity-epic,.rarity-legendary){box-shadow:inset 0 2px 0 var(--rc)}
.bh-unit.rarity-legendary{box-shadow:inset 0 2px 0 var(--rc),inset 0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent)}
.rar-perk{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--muted)}

/* ---------- [pocao] a poção sai do MAIS quando a vida aperta ---------- */
.stage-controls:is(.need-potion,.low-hp) #bh-potion{display:inline-flex}
.stage-controls.low-hp:not(.adv-open) #bh-potion{border-color:var(--red,#d9574b)!important;animation:potionCall 1.2s steps(6,end) infinite}
@keyframes potionCall{50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--red,#d9574b) 55%,transparent)}}
@media (prefers-reduced-motion:reduce){.stage-controls.low-hp #bh-potion{animation:none}}
/* Celular: os controles moram na barra do topo, onde a poção não cabe na linha. Ela desce para logo abaixo da barra, no
   mesmo lugar em que o MAIS a mostra (theme-battle.css). */
body.in-combat .hud-top .stage-controls.in-top:is(.need-potion,.low-hp):not(.adv-open) #bh-potion{display:inline-flex!important;position:absolute;z-index:20;top:calc(100% + 9px);right:0;min-width:48px!important;width:48px;height:44px;padding:0!important;border:1px solid var(--line2);border-radius:3px;background:var(--surf,#16141e);box-shadow:0 3px 0 rgba(0,0,0,.55)}

/* ---------- [achar] "Onde fica?": a busca de lugares (src/finder.js) ---------- */
#finder{position:fixed;inset:0;z-index:8500;display:grid;justify-items:center;align-items:start;padding:11vh 12px 12px;background:rgba(8,7,12,.62)}
#finder[hidden]{display:none}
.finder-card{width:min(520px,100%);background:var(--surf,#16141e);border:1px solid var(--gold);border-radius:4px;box-shadow:0 22px 50px rgba(0,0,0,.6);overflow:hidden}
.finder-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2);color:var(--gold)}
.finder-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--washi);font:500 17px/1.3 var(--ui,inherit)}
.finder-in input::placeholder{color:var(--dim,#8a8494)}
.finder-in input::-webkit-search-cancel-button{display:none}
.finder-in kbd{font:700 10.5px/1 var(--ui,inherit);padding:4px 6px;border:1px solid var(--line2);border-radius:3px;color:var(--muted)}
.finder-list{list-style:none;margin:0;padding:6px;max-height:min(52vh,420px);overflow:auto}
.finder-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:baseline;padding:9px 10px;border-radius:3px;cursor:pointer;min-height:40px}
.finder-list li b{font:700 15px/1.25 var(--display);color:var(--washi);overflow-wrap:anywhere}
.finder-list li small{grid-column:1;font-size:12px;color:var(--muted)}
.finder-list li .lock{grid-column:2;grid-row:1/3;align-self:center;font:700 11px/1 var(--ui,inherit);font-style:normal;color:var(--muted);border:1px solid var(--line2);border-radius:2px;padding:4px 6px;white-space:nowrap}
.finder-list li[aria-selected="true"],.finder-list li:hover{background:var(--surf3,#231f2e);box-shadow:inset 3px 0 0 var(--shu,#c9472d)}
.finder-list li.none{cursor:default;color:var(--muted);font-size:14px}
.finder-foot{margin:0;padding:8px 14px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--dim,#8a8494)}
#find-btn svg{display:block}
.more-grid .more-find{grid-column:1/-1;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid var(--gold)!important;color:var(--gold)}
.more-grid .more-find span{font-weight:700}
body.prologue #find-btn{display:none}
@media (max-width:900px){#finder{padding-top:64px}.finder-foot{display:none}}

/* ---------- [usabilidade] confirmação, aviso de erro, configurações em grupos, tela de entrada, topo e Menu no celular ---------- */
/* Confirmação (askBox em src/main.js): o botão seguro à esquerda com o foco; ação que apaga em vermelho-laca. */
.ask-text{margin:0 0 16px;color:var(--muted);line-height:1.5;font-size:14px}
.ask-text>:last-child{margin-bottom:0}
.ask-card.danger{border-color:var(--shu,#c9472d)}
.ask-actions .action{min-height:40px}
.ask-actions .action:focus-visible{outline:2px solid var(--washi,#ece2d0);outline-offset:2px}
@media (max-width:600px){.ask-actions:has(>:nth-child(2):last-child){flex-wrap:nowrap}.ask-actions:has(>:nth-child(2):last-child) .action{flex:1 1 0;min-width:0;min-height:44px}}
/* Aviso de erro (ui.toastError): chapa vermelha, fica até o toque ou por 8 s no mínimo. */
.toast.red,.hn.red{background:#3b1610!important;border-color:var(--shu,#c9472d)!important;color:#fff1e8!important}
.toast.hold{pointer-events:auto;cursor:pointer;animation:toastIn .35s cubic-bezier(.2,1.4,.4,1)!important}
/* Conta e Configurações: as opções em quatro grupos, uma por linha. */
.set-groups{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.set-group{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2)}
.modal-body .set-group h4{margin:0 0 6px;font:700 12px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.set-list{display:grid;gap:2px}
.settings .set-list label{min-height:40px;gap:10px;font-size:14px;color:var(--washi,#ece2d0)}
.set-list label select{margin-left:auto;min-width:0;max-width:58%}
.set-group .vol-rows{grid-template-columns:minmax(0,1fr);margin-top:6px}
@media (max-width:760px){.set-groups{grid-template-columns:minmax(0,1fr)}}
/* Tela de entrada: boa notícia sem vermelho, e a caixa de manter conectado. */
.auth-msg.ok{background:rgba(216,176,98,.12);border-color:var(--gold,#d8b062);color:var(--washi,#ece2d0)}
.auth-keep{margin:0 0 14px;align-items:center;min-height:32px}
.auth-keep input{margin-top:0;width:18px;height:18px}
/* Menu: no computador o botão de ajuda já está no topo. */
@media (min-width:901px){.more-grid [data-more-panel="help"]{display:none}}
/* Menu no computador: em tela baixa (notebook de 657 px) a grade de duas colunas passava do pé da tela e as últimas
   entradas ficavam fora de alcance. Ganha colunas conforme a altura, e rola se ainda assim não couber. */
@media (min-width:901px){.more-grid{max-height:calc(100vh - 84px);overflow-y:auto}}
@media (min-width:901px) and (max-height:860px){.more-grid{grid-template-columns:repeat(3,112px)}}
@media (min-width:901px) and (max-height:700px){.more-grid{grid-template-columns:repeat(4,112px)}}
/* Topo no celular: alvos de toque de 40 px. A folga sai dos espaços entre os botões e da margem da barra. */
@media (max-width:860px){
  .hud-top{gap:4px;padding:0 6px}
  .hud-top .top-actions{gap:0}
  .hud-top .top-actions .icon-btn{width:40px;height:40px}
  .hud-top .save-status{height:40px}
}
@media (max-width:480px){.hud-top .save-status{width:40px;min-width:40px}}
/* Em 320 px os recursos apertam os próprios respiros para o número seguir legível. */
@media (max-width:360px){.hud-top .resources{gap:2px}.hud-top .res{padding:0 4px 0 2px;gap:2px}}
/* ---------- [usabilidade 2] fecho das heurísticas e dos tipos de diversão ---------- */
/* Selo de save no celular: o ponto vira o ícone pintado do estado (salvo, salvando, sem conexão). src/ui.js troca a
   pintura e o aria-label; no PC o selo segue com o ponto e a palavra. */
.save-status .save-ic{display:none;width:24px;height:24px;flex:none;clip-path:inset(1px)}
@media (max-width:480px){
  .hud-top .save-status>i{display:none}
  .hud-top .save-status .save-ic{display:block}
  .hud-top .save-status.sync .save-ic{animation:pulse 1s infinite}
  .hud-top .save-status.off .save-ic{filter:grayscale(.85) brightness(.82)}
  .hud-top .save-status.err{border-color:var(--shu-hi,#e0603f)}
}
/* Tela de resultado mais alta que o palco (celular): centra só quando cabe, para o alto do cartão não ficar cortado. */
.result-overlay{align-items:safe center}
/* Dica que explica um termo do jogo: a última linha aponta para o Glossário. */
.tooltip .tip-more{display:block;margin-top:5px;padding-top:5px;border-top:1px solid var(--line2);color:var(--muted);font-size:11px}
/* Mapa do PC: o marco trancado abre o nome e o que falta também com o foco do teclado (com o mouse já abria). O que
   falta pode ser comprido: quebra em até duas linhas em vez de esticar a plaqueta para fora do mapa. */
@media (min-width:901px){
  .illustrated-map:not(.compact) .map-pin.locked:focus-visible{padding:2px 10px 2px 2px;gap:6px;opacity:1;border-radius:3px;z-index:7;outline:2px solid var(--gold-hi);outline-offset:2px}
  .illustrated-map:not(.compact) .map-pin.locked:focus-visible .pin-txt{display:flex}
  .illustrated-map:not(.compact) .map-pin.locked.flip:focus-visible{flex-direction:row-reverse;padding:2px 2px 2px 10px;text-align:right}
  .illustrated-map .map-pin.locked small{max-width:190px;white-space:normal;line-height:1.2}
  .illustrated-map .map-pin.locked:hover,.illustrated-map .map-pin.locked.focus{z-index:7}
}
/* Lista do mapa no celular: a região trancada diz o que falta numa linha própria. */
.map-row small .why{display:block;font-style:normal;color:var(--washi)}
/* Enciclopédia no celular: o índice da página inicial. Todos os assuntos numa lista de duas colunas, por grupo. No PC a
   coluna da esquerda já é essa lista, então ele não aparece. */
.wiki-index{display:none}
@media (max-width:760px){
  .wiki-index{display:block;margin:0 0 14px;padding:10px 12px 12px;border-radius:4px;border:1px solid var(--line2);background:rgba(0,0,0,.18)}
  .wiki-index>b{display:block;margin-bottom:6px;font:800 16px/1.2 var(--display);color:var(--washi)}
  .wiki-index section{padding:6px 0 4px;border-top:1px solid var(--line)}
  .wiki-index section:first-of-type{border-top:0;padding-top:0}
  .wiki-index small{display:block;margin-bottom:2px;font:700 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .wiki-index ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;margin:0;padding:0;list-style:none}
  .wiki-index button{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:40px;padding:4px 2px;border:0;background:none;color:var(--text);font:600 14px/1.2 var(--ui);text-align:left;cursor:pointer}
  .wiki-index button::after{content:"\203A";color:var(--dim);font-size:18px;line-height:1}
  .wiki-index button:active{color:var(--gold-hi)}
}
/* Glossário: o termo à esquerda, a linha que o explica à direita. Em tela estreita, um embaixo do outro. */
.wiki-gloss{display:flex;flex-direction:column;margin:0 0 14px}
.wiki-gloss>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 14px;padding:9px 2px;border-top:1px solid var(--line)}
.wiki-gloss>div:first-child{border-top:0}
.wiki-gloss dt{margin:0}
.wiki-gloss dt b{font:800 15px/1.3 var(--display);color:var(--washi)}
.wiki-gloss dd{margin:0;color:var(--muted);line-height:1.45}
@media (max-width:600px){.wiki-gloss>div{grid-template-columns:minmax(0,1fr)}}
/* O motivo de história do lugar, numa linha, no alto do painel (Arena, Invasão Mundial, Guilda). */
.place-lore{margin:0 0 12px;padding:2px 0 2px 12px;border-left:2px solid var(--gold);font:500 14px/1.45 var(--display);color:var(--muted)}
/* Missões diárias: o prêmio de quem completa todas, ao lado da frase que o anuncia. */
.daily-all{margin:-6px 0 12px}
/* Cartão de retorno (volta do AFK, expedição): uma linha por coisa que voltou, ícone, nome e quantidade. */
.return-list{margin:0 0 16px;padding:0;list-style:none;border-top:1px solid var(--line)}
.return-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text)}
.return-list .pi{width:26px;height:26px}
.return-list b{font-variant-numeric:tabular-nums;color:var(--gold-hi,#f3d48b)}
.return-list small{grid-column:2/4;color:var(--muted);font-size:12px;line-height:1.35;overflow-wrap:anywhere}
/* ==== TRÊS METAS À VISTA (src/hud.js: metasHtml) ====
   AGORA é o cartão de objetivo. SESSÃO e SEMANA são duas linhas no mesmo cartão: rótulo, nome e progresso. A seta
   recolhe as duas. No PC ficam na faixa do saguão; no celular, no cartão abaixo do palco. Nada disto cobre a cena. */
.metas{flex:1 1 100%;display:grid;gap:0;min-width:0;margin-top:2px;padding-top:1px;border-top:1px solid var(--line2)}
.metas.closed{display:none}
.meta-row{appearance:none;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:baseline;gap:8px;min-width:0;min-height:15px;margin:0;padding:0;border:0;border-radius:2px;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.meta-row i,.lobby-goal:has(.metas)>span>small{font:700 9px/15px var(--ui);font-style:normal;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.meta-row span{min-width:0;font:600 11.5px/15px var(--ui);color:var(--washi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta-row em{font:700 11.5px/15px var(--ui);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.meta-row.done em{color:var(--gold)}
.meta-row:hover span{text-decoration:underline;text-decoration-color:var(--dim)}
.meta-row:focus-visible,.metas-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.metas-toggle{appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;padding:0;border:1px solid transparent;border-radius:3px;background:none;box-shadow:none;color:var(--muted);cursor:pointer}
.metas-toggle:hover{border-color:var(--line2);color:var(--washi)}
.metas-chev{display:block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.metas-toggle.open .metas-chev{transform:translateY(2px) rotate(-135deg)}
/* Faixa do saguão (PC): os três rótulos numa coluna só. O ícone do objetivo sai para o rótulo AGORA caber na linha. */
.lobby-goal:has(.metas){flex-wrap:wrap;gap:0 6px;align-content:center;padding:4px 6px 4px 12px}
.lobby-goal:has(.metas) .action{min-height:28px;padding:0 9px}
.lobby-goal:has(.metas) .metas-toggle{width:20px}
.lobby-goal:has(.metas)>.ic,.lobby-goal:has(.metas)>.lg-seal{display:none}
.lobby-goal:has(.metas)>span{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;min-height:32px}
.lobby-bar .lobby-goal:has(.metas)>span>small{display:block}
.lobby-bar .lobby-goal.done:has(.metas)>span>small{color:var(--gold)}
.lobby-goal:has(.metas)>span>b{font-size:13.5px}
.lobby-goal .lg-frac{flex:none;font:700 12px/1.3 var(--ui);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
/* As duas linhas somam 16 px à faixa: o palco da cidade cede essa altura (as contas de theme-game.css, com 16 a menos). */
@media (min-width:901px){
  body:not(.in-combat) .stage-col:has(.lobby-goal>.metas:not(.closed)){--stage-w:min(100%,calc((100dvh / var(--zf,1) - var(--top-h) - var(--dock-h) - 34px - 84px) * 16 / 9))}
  body.city-focus:not(.in-combat) .stage-col:has(.lobby-goal>.metas:not(.closed)){--stage-w:min(100%,calc((100dvh / var(--zf,1) - var(--top-h) - 104px) * 16 / 9))}
}
/* Cartão de objetivo (celular e tablet, abaixo do palco): linhas com alvo de toque de 40 px */
#goal-chip>div.metas{flex:1 1 100%;display:grid;gap:0;margin-top:0}
#goal-chip>div.metas.closed{display:none}
#goal-chip .metas-toggle{align-self:flex-start}
@media (max-width:900px){
  #goal-chip .meta-row{grid-template-columns:66px minmax(0,1fr) auto;align-items:center;min-height:40px;padding:0 2px}
  #goal-chip .meta-row+.meta-row{border-top:1px solid var(--line)}
  #goal-chip .meta-row i{font-size:10px}
  #goal-chip .meta-row span,#goal-chip .meta-row em{font-size:13.5px;line-height:1.3}
  #goal-chip .metas-toggle{width:40px;height:40px;margin:-4px -4px 0 0}
}
@media (max-width:420px){
  #goal-chip.has-metas .goal-actions{flex:1 1 100%}
  #goal-chip.has-metas .goal-actions .action{flex:1 1 0}
}
/* Garantia da convocação: a dica mora na linha inteira */
.box-pity[data-tip]{cursor:help}
/* Ficha do herói: "aguenta N golpes" ocupa a largura da tabela, logo abaixo de HP e DEF */
.stat-table .endure{grid-column:1/-1;border-left:2px solid var(--gold);cursor:help}
.stat-table .endure b{color:var(--washi);text-align:right;min-width:0}
/* Conta: "Seu começo", uma linha discreta no pé */
.begin-line{display:flex;flex-wrap:wrap;gap:2px 14px;margin:16px 0 0;font:500 12px/1.5 var(--ui);color:var(--dim)}
.begin-line b{font-weight:700;color:var(--muted)}
.begin-line span{white-space:nowrap}