/* ============================================================================
   LIVRO DE HABILIDADE — a tela de leitura (engine/ui/livro_leitura.js)
   spec: techterra-online-backend/docs/spec-livro-habilidade/CONTRATO.md (Contrato D)
   Visual copiado do mock aprovado (docs/mock-livro-habilidade-fluxo.html, fluxo A):
     .a-time/.a-fila/.a-mc -> .livro-time/.livro-fila/.livro-mc
     .filtrando .regra     -> .livro-regras span
     .aviso                -> .livro-aviso        .res      -> .livro-res
     .conf-hab             -> .livro-conf-hab     .hab-w    -> .livro-hab
     .folha (confirmação)  -> .livro-bd / .livro-modal (casca .char-modal do jogo)
   Cores: as variáveis do jogo (style.css :root). A barra de rolagem é a global.
   Celular: no fim deste arquivo (atributo do <html>, como o mobile.css, + media
   query de reserva). Tudo com prefixo .livro- — nada daqui toca outra tela.
   ============================================================================ */

/* ------------------------- miolo do card do livro ------------------------- */
.livro-bloco {
    --livro-verde: #7fd08a;
    --livro-verm: #ff8f82;
    --livro-roxo: #c9a0ff;
    --livro-borda: rgba(201, 168, 76, 0.4);
    --livro-borda-fraca: rgba(201, 168, 76, 0.18);
    position: relative;
    min-width: 0;
    text-align: left;
    color: var(--text-light);
    font-size: 0.8rem;
}
.livro-carregando,
.livro-vazio,
.livro-erro {
    padding: 14px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.74rem;
}
.livro-erro { color: var(--livro-verm, #ff8f82); }

.livro-rot {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* o card REAL de habilidade (renderHabCardCompact) dentro de uma moldura nossa */
.livro-hab { position: relative; min-width: 0; }
.livro-hab .hab-card { cursor: pointer; width: 100%; }
.livro-bloco > .livro-hab { max-width: 320px; }
.livro-hab--nova {
    border-radius: 10px;
    box-shadow: 0 0 0 2px #c9a0ff, 0 0 16px rgba(201, 160, 255, 0.5);
}
.livro-hab-selo {
    position: absolute;
    right: -4px;
    top: -6px;
    z-index: 3;
    padding: 0 6px;
    border-radius: 999px;
    background: #2b1a45;
    border: 1px solid #c9a0ff;
    color: #c9a0ff;
    font: 700 0.6rem system-ui, sans-serif;
}
.livro-hab-simples {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(201, 168, 76, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
}
.livro-ti { width: 17px; height: 17px; border-radius: 50%; vertical-align: -3px; }

/* a regra escrita, em chips tracejados (= chips "regra do ritual" do Seletor) */
.livro-regras {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin: 10px 0 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.livro-regras span {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px dashed var(--livro-borda, rgba(201, 168, 76, 0.4));
    background: rgba(0, 0, 0, 0.35);
    color: #b5aa95;
}

.livro-tt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 12px 0 6px;
    font: 700 0.68rem 'Cinzel', serif;
    letter-spacing: 0.08em;
    color: var(--gold-light);
}
.livro-tt small {
    font: 400 0.66rem 'Lora', serif;
    letter-spacing: 0;
    color: var(--text-muted);
    white-space: nowrap;
}
.livro-ok { color: #7fd08a; }
.livro-no { color: #ff8f82; }

/* NO SEU TIME: ‹ cards pequenos só de imagem › */
.livro-time {
    --livro-mc: 56px;
    --livro-seta: 40px;
    position: relative;
    display: grid;
    grid-template-columns: var(--livro-seta) minmax(0, 1fr) var(--livro-seta);
    gap: 8px;
    align-items: center;
    padding: 7px;
    border-radius: 11px;
    border: 1px solid var(--livro-borda-fraca, rgba(201, 168, 76, 0.18));
    background: rgba(0, 0, 0, 0.28);
    min-width: 0;
}
.livro-time--uma { grid-template-columns: minmax(0, 1fr); }
.livro-fila { display: flex; gap: 6px; justify-content: center; min-width: 0; overflow: hidden; }
.livro-seta {
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--livro-borda, rgba(201, 168, 76, 0.4));
    background: rgba(0, 0, 0, 0.35);
    color: var(--gold-light);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.livro-seta:disabled { opacity: 0.35; cursor: not-allowed; }
.livro-mc {
    flex: none;
    width: var(--livro-mc);
    height: var(--livro-mc);
    padding: 0;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid rgba(127, 208, 138, 0.7);
    background: radial-gradient(circle at 50% 40%, #3a3324 0%, #1d1810 60%, #0e0b06 100%);
    cursor: pointer;
}
.livro-mc img { width: 100%; height: 100%; object-fit: contain; display: block; }
.livro-mc--no { border-color: var(--livro-borda-fraca, rgba(201, 168, 76, 0.18)); }
.livro-mc--no img { opacity: 0.3; filter: grayscale(1); }
.livro-mc--foco { box-shadow: 0 0 0 2px var(--gold); }
.livro-mc-vazio { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-muted); }

.livro-motivo {
    min-height: 1.4em;
    margin-top: 5px;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.livro-motivo b { color: var(--text-light); }
.livro-motivo--ok { color: #7fd08a; }
.livro-motivo--no { color: #ff8f82; }
.livro-fora { margin-top: 4px; text-align: center; font-size: 0.68rem; color: var(--text-muted); }
.livro-fora b { color: var(--text-light); }

.livro-aviso {
    margin: 8px 0 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(201, 160, 255, 0.1);
    border: 1px solid rgba(201, 160, 255, 0.4);
    color: #e6d8ff;
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: left;
}
.livro-aviso b { color: #fff; }

/* ---------------- "Ensina" genérico do card de item (item_detail.js) ---------------- */
/* Fora da mochila (Painel do Mestre, vitrine do gatcha, prêmio): só o que o livro
   ensina, no topo do miolo do card (.idtl-extra), acima das abas de conteúdo. */
.livro-ensina { margin: 0 0 14px; }
.livro-ensina-id {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px dashed var(--livro-borda, rgba(201, 168, 76, 0.4));
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}
.livro-ensina-id b { color: var(--gold-light); font-weight: 600; }

/* ------------------------- confirmação e resultado ------------------------- */
/* Acima do card do item (14000) e do Seletor (14650); abaixo do GameModal e do
   detalhe de habilidade (15500). O `body.is-ficha-admin` do style.css rebaixa todo
   .char-modal-backdrop para 9900 — por isso o seletor composto e o !important. */
.char-modal-backdrop.livro-bd { z-index: 15200 !important; background: rgba(6, 4, 2, 0.72); }
.char-modal.livro-modal {
    display: flex;
    flex-direction: column;
    width: min(480px, 94vw);
    max-width: 480px;
    max-height: 88vh;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--gold);
    background: linear-gradient(180deg, #2a2218, #1a140b);
}
.livro-modal .livro-modal-h {
    flex: none;
    margin: 0;
    padding: 11px 14px 8px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}
.livro-modal .livro-modal-h h3 { margin: 0; font-size: 0.92rem; min-width: 0; }
.livro-modal-h h3 small {
    display: block;
    margin-top: 2px;
    font: 400 0.7rem 'Lora', serif;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.livro-modal-c { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; }
.livro-modal-p {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid rgba(201, 168, 76, 0.18);
}
.livro-cta {
    flex: 1;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid #f3dc8e;
    background: linear-gradient(180deg, #f0d27a 0%, #c9a84c 55%, #9c7a26 100%);
    color: #1a1206;
    font: 700 0.82rem 'Cinzel', serif;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.livro-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.livro-cta--sec { background: rgba(0, 0, 0, 0.4); color: var(--gold-light); border-color: rgba(201, 168, 76, 0.4); }

.livro-cab { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.livro-cab-t { min-width: 0; }
.livro-art {
    position: relative;
    flex: none;
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.18);
    background: radial-gradient(circle at 50% 40%, #3a3324 0%, #1d1810 60%, #0e0b06 100%);
}
.livro-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.livro-nome {
    font: 700 0.9rem 'Cinzel', serif;
    color: var(--gold-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.livro-nome small { font: 400 0.72rem 'Lora', serif; color: var(--text-muted); }
.livro-sub { font-size: 0.7rem; color: var(--text-muted); line-height: 1.5; }

/* o livro (arte do próprio item) ao lado do que ele ensina */
/* Só o card da habilidade (a capa saiu por decisão do dono): bloco único, centralizado. */
.livro-conf { display: block; }
.livro-conf-hab { min-width: 0; max-width: 300px; margin: 0 auto; }
.livro-capa { position: relative; display: block; aspect-ratio: 1; }
.livro-capa-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* ícone da tipagem por cima do medalhão da capa (centro em 48,8% × 40%, = mock) */
.livro-capa-ti {
    position: absolute;
    left: 48.8%;
    top: 40%;
    width: 17%;
    height: auto;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-10deg) scaleY(0.86);
}

.livro-res {
    position: relative;
    border: 1px solid rgba(201, 160, 255, 0.6);
    border-radius: 12px;
    background: rgba(40, 22, 70, 0.3);
    padding: 12px;
    text-align: center;
}
.livro-res .livro-art { width: 112px; margin: 0 auto 8px; }
.livro-res-h { font: 700 1rem 'Cinzel', serif; color: #e9d9ff; }
.livro-res .livro-hab { max-width: 260px; margin: 12px auto 0; text-align: left; }
.livro-res-n { margin-top: 10px; }

/* ------------------------------- celular ------------------------------- */
/* Folha de baixo (como no mock): a confirmação sobe do pé da tela e os botões
   ficam no alcance do polegar. Duas portas para a mesma regra: o atributo que o
   index.html carimba no <html> (padrão do mobile.css) e a largura da janela. */
html[data-viewport="mobile"] .char-modal-backdrop.livro-bd { align-items: flex-end; }
html[data-viewport="mobile"] .char-modal.livro-modal {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
}
html[data-viewport="mobile"] .livro-modal-p { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
html[data-viewport="mobile"] .livro-time { --livro-mc: 52px; gap: 6px; }
html[data-viewport="mobile"] .livro-bloco > .livro-hab { max-width: none; }

@media (max-width: 600px) {
    .char-modal-backdrop.livro-bd { align-items: flex-end; }
    .char-modal.livro-modal {
        width: 100%;
        max-width: 100%;
        max-height: 88dvh;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
    }
    .livro-modal-p { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .livro-time { --livro-mc: 52px; gap: 6px; }
    .livro-bloco > .livro-hab { max-width: none; }
}