/* ============================================================================
   ENCONTROS COM NPCs · V1 (core/encontros_npc.js + ganchos no mapa_npcs.js)
   Spec: techterra-online-backend/docs/spec-npcs-encontros/ · mock aprovado:
   techterra-online-backend/docs/mock-encontros-npc.html (visual e classes de la').
   Reaproveita: .char-modal (+ secao 8 do mobile.css = gaveta de baixo no celular),
   .tt-seg-switch, .cpfx-chip, .raid-util, .tt-info-btn, AlternartSeletorFonte (.sf-*).
   Scrollbar: a global do style.css (estilo medieval), sem regra propria.
   ============================================================================ */
:root { --enc-npc: #5fb3a1; --enc-npc-claro: #bfe9df; }

/* ---------- selo de oferta no pino (no lugar do selo de kills, que NPC nao tem) ---------- */
.pp-npc-selo {
    position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; pointer-events: none;
    font: 700 10.5px/16px 'Cinzel', serif; color: #e6fff8; background: rgba(10, 30, 26, .92);
    border: 1.5px solid var(--enc-npc); border-radius: 9px; padding: 0 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.pp-npc-selo[hidden] { display: none; }
.pp-npc-selo i { font-style: normal; font-size: 12px; line-height: 1; }
.pp-npc-selo b { font: 700 9.5px/1 system-ui, sans-serif; color: var(--enc-npc-claro); }
.pp-npc-selo.novo { animation: encSeloNovo .6s ease-in-out 3; }
@keyframes encSeloNovo { 50% { box-shadow: 0 0 0 3px rgba(95, 179, 161, .5), 0 1px 4px rgba(0, 0, 0, .6); } }
/* com o selo a vista o balao de emoji sobe (irma do `.pp-kill:not([hidden]) ~ .pp-emo`) */
.pp-npc-selo:not([hidden]) ~ .pp-emo { top: -62px; }

/* ---------- convite ativo (balao saindo do pino, 12 s) ---------- */
.enc-convite {
    position: absolute; top: -4px; left: 58px; z-index: 6; display: flex; align-items: center; gap: 7px;
    padding: 5px 6px 7px 10px; white-space: nowrap; overflow: hidden; cursor: default;
    background: rgba(14, 18, 24, .95); border: 1px solid var(--enc-npc); border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .7); font: 600 12px 'Lora', serif; color: #e6fff8;
    animation: encConviteEntra .25s ease-out both, encConviteSai .4s ease-in 12s forwards;
}
.enc-convite.esq { left: auto; right: 58px; }
.enc-convite b { font-family: 'Cinzel', serif; color: var(--enc-npc-claro); }
.enc-convite .ver {
    border: 1px solid var(--gold, #c9a84c); background: rgba(201, 168, 76, .18); color: var(--gold-light, #e8d38a);
    border-radius: 7px; padding: 3px 10px; cursor: pointer; font: 700 11px 'Cinzel', serif; min-height: 26px;
}
.enc-convite .x { border: 0; background: none; color: #9fb5ae; cursor: pointer; width: 22px; height: 22px; padding: 0; font-size: 13px; }
.enc-convite .barra {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--enc-npc);
    transform-origin: 0 0; animation: encConviteBarra 12s linear forwards;
}
html[data-pointer="coarse"] .enc-convite .ver { min-height: 34px; padding: 4px 12px; }
html[data-pointer="coarse"] .enc-convite .x { width: 34px; height: 34px; }
@keyframes encConviteEntra { from { opacity: 0; transform: translateX(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes encConviteSai { to { opacity: 0; visibility: hidden; } }
@keyframes encConviteBarra { to { transform: scaleX(0); } }

/* ---------- Cartao do NPC ---------- */
/* PC/tablet: fundo leve (o mapa continua a vista); ancorado = modal pequeno ao lado do pino */
.char-modal-backdrop.enc-bd { background: rgba(6, 4, 2, .28); }
.char-modal-backdrop.enc-bd.ancorado { display: block; }
.char-modal-backdrop.enc-res-bd { background: rgba(6, 4, 2, .6); }
.char-modal.enc-cartao {
    position: relative; width: 372px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
    padding: 0; display: flex; flex-direction: column; overflow: visible;
}
@supports (height: 100dvh) { .char-modal.enc-cartao { max-height: calc(100dvh - 24px); } }
.enc-bd.ancorado .char-modal.enc-cartao { position: absolute; }
.enc-dentro { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; border-radius: inherit; }
.enc-seta { display: none; position: absolute; top: var(--seta-y, 40px); width: 14px; height: 14px; background: #211a12; border: 2px solid var(--gold-dark, #8b6914); transform: rotate(45deg); }
.enc-bd.ancorado .enc-seta { display: block; }
.enc-seta.l { left: -9px; border-top: 0; border-right: 0; }
.enc-seta.r { right: -9px; border-bottom: 0; border-left: 0; }
.enc-pega { display: none; width: 44px; height: 4px; border-radius: 2px; background: rgba(232, 211, 138, .35); margin: 7px auto 0; flex: none; }
.enc-cab { position: relative; flex: none; display: grid; grid-template-columns: 58px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 12px 12px 6px; }
.enc-cab-txt { min-width: 0; }
.enc-ret {
    width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--enc-npc); object-fit: cover;
    object-position: 50% var(--face-focus-y, 18%); background: #0b0907; display: block; box-shadow: 0 0 10px rgba(95, 179, 161, .35);
}
.enc-ret-vazio { display: grid; place-items: center; font-size: 26px; box-sizing: border-box; }
.enc-nome { font: 700 1.02rem/1.15 'Cinzel', serif; color: var(--gold-light, #e8d38a); overflow-wrap: anywhere; }
.enc-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px; font-size: .72rem; color: var(--text-muted, #a09080); }
.enc-oficio { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(95, 179, 161, .6); color: var(--enc-npc-claro); background: rgba(95, 179, 161, .12); font: 600 .66rem 'Cinzel', serif; letter-spacing: .04em; }
.enc-onde b { color: #e6fff8; font-weight: 600; }
.enc-onde.longe b { color: #ffcf9a; }
.enc-cab .char-modal-close { align-self: start; }
.enc-corpo { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 12px 10px; }
.enc-fala {
    position: relative; margin: 4px 0 10px; padding: 8px 11px; background: #f4ecd8; color: #2a1d0c;
    border: 1.5px solid var(--gold, #c9a84c); border-radius: 10px; font: italic .82rem/1.42 'Lora', serif; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    overflow-wrap: anywhere;
}
.enc-fala::before { content: ""; position: absolute; left: 22px; top: -7px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--gold, #c9a84c); }
.enc-pergunta { position: relative; padding: 9px 10px; border: 1px dashed rgba(201, 168, 76, .45); border-radius: 10px; background: rgba(0, 0, 0, .25); margin-bottom: 10px; }
.enc-pergunta p { margin: 0 0 7px; font-size: .76rem; color: var(--text-muted, #a09080); line-height: 1.4; }
.enc-pergunta p b { color: var(--parchment, #f4e4c1); }
.enc-pergunta.fixo { padding: 6px 8px; border-style: solid; border-color: rgba(201, 168, 76, .2); margin-bottom: 9px; }
.enc-pergunta.fixo p { margin: 0 0 5px; }
.enc-abas { position: relative; margin-bottom: 8px; }
.enc-abas .tt-seg-switch { display: flex; width: 100%; }
.enc-abas .tt-seg-btn { flex: 1 1 0; min-height: 36px; padding: 6px; font-size: .8rem; }
.enc-oferta { position: relative; display: grid; gap: 9px; padding: 10px; border: 1px solid rgba(201, 168, 76, .3); border-radius: 10px; background: rgba(0, 0, 0, .28); }
.enc-of-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.enc-of-tit { font: 700 .82rem 'Cinzel', serif; color: var(--gold-light, #e8d38a); margin-right: auto; }
.enc-of-top .cpfx-chip { font-size: .6rem; padding: 4px 8px; --cpfx-cor: 255, 132, 110; }
.enc-of-top .cpfx-chip.fmt { --cpfx-cor: 243, 218, 156; }
.enc-of-tit { display: inline-flex; align-items: center; gap: 2px; }
.enc-of-tit .tt-info-btn.enc-info { margin-left: 4px; }
.enc-of-tit .tt-info-btn.enc-info svg { width: 18px; height: 18px; }
.enc-tier { margin: 0; font-size: .76rem; color: var(--parchment, #f4e4c1); display: flex; align-items: center; gap: 6px; }
.enc-tier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold, #c9a84c); flex: none; }
.enc-tier b { color: var(--gold-light, #e8d38a); }
.enc-rot { font: 700 .62rem 'Cinzel', serif; letter-spacing: .08em; color: var(--text-muted, #a09080); text-transform: uppercase; margin-bottom: 4px; }
.enc-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.enc-mon { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.enc-mon-arte { position: relative; width: 52px; height: 52px; border-radius: 9px; border: 1px solid rgba(201, 168, 76, .35); background: radial-gradient(circle at 50% 40%, #3a2d1c, #120d07); display: block; }
.enc-mon-arte > :not(b) { width: 100%; height: 100%; display: block; }
.enc-mon-arte img { width: 100%; height: 100%; object-fit: contain; display: block; }
.enc-mon-arte > b { position: absolute; right: -5px; bottom: -5px; z-index: 2; padding: 0 5px; border-radius: 6px; background: linear-gradient(180deg, #4a3a18, #1a1208); border: 1px solid var(--gold, #c9a84c); font: 700 .62rem/1.45 'Cinzel', serif; color: #fff2c4; }
.enc-mon-nome { font-size: .64rem; color: var(--parchment, #f4e4c1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.enc-mon small { font-size: .6rem; color: var(--text-muted, #a09080); }
.enc-rende { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border-radius: 9px; background: rgba(95, 179, 161, .08); border: 1px solid rgba(95, 179, 161, .3); }
.enc-tipo-ic { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; }
.enc-rende b { color: #e6fff8; font-size: .8rem; }
.enc-rende small { display: block; margin-top: 2px; font-size: .68rem; color: #9fb5ae; }
.enc-valor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 8px; border-radius: 9px; background: rgba(201, 168, 76, .08); border: 1px solid rgba(201, 168, 76, .3); }
.enc-valor .v { font: 700 1rem 'Cinzel', serif; color: var(--gold-light, #e8d38a); text-align: right; white-space: nowrap; }
.enc-valor .t { font: 700 .7rem 'Cinzel', serif; color: var(--parchment, #f4e4c1); letter-spacing: .04em; text-transform: uppercase; }
.enc-valor small { grid-column: 1 / -1; font-size: .66rem; color: var(--text-muted, #a09080); line-height: 1.35; margin-top: -3px; }
.enc-saldo { grid-column: 1 / -1; font-size: .68rem; padding: 3px 8px; border-radius: 6px; display: flex; justify-content: space-between; gap: 6px; }
.enc-saldo.ok { background: rgba(76, 175, 125, .12); color: #b6e6cd; }
.enc-saldo.falta { background: rgba(192, 57, 43, .2); color: #ffb9ae; border: 1px solid rgba(231, 76, 60, .5); font-weight: 600; }
.enc-aviso { position: relative; display: grid; gap: 7px; padding: 9px 10px; border-radius: 10px; font-size: .76rem; line-height: 1.45; margin-bottom: 10px; }
.enc-aviso b { color: #fff; }
.enc-aviso.bloq { background: rgba(192, 57, 43, .15); border: 1px solid rgba(231, 76, 60, .5); color: #ffd9d3; }
.enc-aviso.longe { background: rgba(95, 179, 161, .1); border: 1px solid rgba(95, 179, 161, .45); color: #d4f1ea; }
.enc-aviso.neutro { background: rgba(0, 0, 0, .28); border: 1px dashed rgba(201, 168, 76, .35); color: var(--text-muted, #a09080); }
.enc-aviso .raid-util { justify-self: start; min-height: 34px; }
.enc-pe { position: relative; flex: none; display: grid; gap: 6px; padding: 9px 12px 11px; border-top: 1px solid rgba(201, 168, 76, .25); background: rgba(10, 7, 4, .55); border-radius: 0 0 10px 10px; }
.enc-pe-bt { display: flex; gap: 6px; }
.enc-pe-bt .raid-util { min-height: 38px; flex: 1 1 auto; }
.enc-pe-bt .enc-aceitar { flex: 1.4 1 auto; background: linear-gradient(180deg, #f0d27a 0%, #c9a84c 55%, #9c7a26 100%); color: #1a1206; border-color: #f3dc8e; font-weight: 700; }
/* o `.raid-util:hover:not(:disabled)` generico apagaria o dourado (e o texto escuro sumiria) */
.enc-pe-bt .enc-aceitar:hover:not(:disabled) { background: linear-gradient(180deg, #f6dc8c 0%, #d4b45a 55%, #a8842c 100%); border-color: #fff0b8; color: #1a1206; }
.enc-pe-bt .enc-aceitar:disabled { background: rgba(0, 0, 0, .5); color: var(--text-muted, #a09080); border-color: rgba(201, 168, 76, .3); }
.enc-pe-dica { font-size: .66rem; color: var(--text-muted, #a09080); line-height: 1.35; }
.enc-pe-dica b { color: #ffb9ae; font-weight: 600; }

/* ---------- resultado do encontro ---------- */
.char-modal.enc-resultado { position: relative; width: 380px; max-width: calc(100vw - 24px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.enc-res-cab { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; align-items: center; padding: 16px 14px 8px; }
.enc-res-cab small { display: block; font: 600 .64rem 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #a09080); }
.enc-res-tit { font: 700 1.15rem/1.15 'Cinzel', serif; color: var(--gold-light, #e8d38a); margin: 2px 0 3px; overflow-wrap: anywhere; }
.enc-res-tit.der { color: #ffb9ae; }
.enc-res-tit.neu { color: var(--parchment, #f4e4c1); }
.enc-res-resumo { font-size: .78rem; color: #e6fff8; }
.enc-res-resumo.der { color: #ffd9d3; }
.enc-res-resumo.neu { color: var(--text-muted, #a09080); }
.enc-res-c { padding: 0 14px 6px; overflow-y: auto; min-height: 0; }
.enc-res-l { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(201, 168, 76, .15); font-size: .76rem; color: var(--parchment, #f4e4c1); line-height: 1.35; }
.enc-res-l .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(201, 168, 76, .18); border: 1px solid var(--gold, #c9a84c); font: 700 .8rem 'Cinzel', serif; color: var(--gold-light, #e8d38a); }
.enc-res-l b { font: 700 1rem 'Cinzel', serif; white-space: nowrap; }
.enc-res-l.up b { color: #9be3a6; }
.enc-res-l.dn b { color: #ff9f92; }
.enc-res-l.eq b { color: var(--parchment, #f4e4c1); }
.enc-res-l small { display: block; font-size: .66rem; color: var(--text-muted, #a09080); margin-top: 1px; }
.enc-res-nota { margin: 4px 0 0; font-size: .66rem; color: var(--text-muted, #a09080); line-height: 1.4; }

/* ---------- celular: gaveta de baixo (o .char-modal ja' vira folha pela secao 8 do mobile.css) ---------- */
html[data-viewport="mobile"] .char-modal-backdrop.enc-bd { background: rgba(6, 4, 2, .55); }
html[data-viewport="mobile"] .char-modal.enc-cartao,
html[data-viewport="mobile"] .char-modal.enc-resultado {
    position: relative; width: 100%; max-width: none; padding: 0 0 var(--mob-safe-b, 0px);
    border-radius: 14px 14px 0 0; border-left: none; border-right: none; border-bottom: none;
}
/* 78%: sobra mapa em cima para o pino (o mapa desliza ate' ele ao abrir) */
html[data-viewport="mobile"] .char-modal.enc-cartao { max-height: 78vh; }
@supports (height: 100dvh) { html[data-viewport="mobile"] .char-modal.enc-cartao { max-height: 78dvh; } }
html[data-viewport="mobile"] .enc-pega { display: block; }
html[data-viewport="mobile"] .enc-seta { display: none !important; }
html[data-viewport="mobile"] .enc-pe { padding-bottom: 16px; border-radius: 0; }
html[data-viewport="mobile"] .enc-pe-bt .raid-util { min-height: 44px; }
html[data-viewport="mobile"] .enc-abas .tt-seg-btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .pp-npc-selo.novo { animation: none; }
    .enc-convite { animation: encConviteSai .01s linear 12s forwards; }
    .enc-convite .barra { animation: none; }
}