/* =====================================================================
   Fluxo do passe — telas do passe.js (FE2, docs/spec-passe-fluxo)
   - modal do motivo da reprovacao, opcao B "antes e depois"
     (docs/mock-passe-reprovacao.html): .passe-motivo / .pmv-*
   - selo "Ajustada / Ainda igual" no card: .passe-ajuste-tag
   - homologacao: faixa "tema escolhido x nome final" + balanca do nome:
     .passe-tema-nome / .ptn-*
   - jogador: card "Em breve" ao lado da trilha (opcao C do
     docs/mock-passe-temas.html, tipagem a vista): .passe-em-breve / .peb-*
   Celular = ate' 600px (e html[data-viewport="mobile"]); tablet = 601-1024px.
   ===================================================================== */

/* ---------- selo no card (editor e re-homologacao) ---------- */
.passe-tier-card.ppf-com-selo .tier-img-wrap { position: relative; }
.passe-ajuste-tag {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 3;
    max-width: calc(100% - 6px); box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    font: 700 .6rem 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: auto;
}
.passe-ajuste-tag small {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font: 600 .56rem 'Lora', serif; letter-spacing: 0; text-transform: none; opacity: .9;
}
.passe-ajuste-tag.igual { background: rgba(120,20,26,.92); color: #ffd2cc; border: 1px solid rgba(255,120,120,.8); }
.passe-ajuste-tag.ok    { background: rgba(20,80,40,.92);  color: #c9f7d8; border: 1px solid rgba(125,240,168,.8); }
.passe-ajuste-tag.ok:has(small) { border-radius: 8px; }

/* "Ir ate' la'": o card (ou o ✖ do nome) pisca algumas vezes */
.passe-tier-card.ppf-foco, .ppf-nome-rep.ppf-foco { animation: ppf-foco .9s ease-in-out 4; z-index: 6; }
@keyframes ppf-foco { 50% { box-shadow: 0 0 0 3px #ff8a8a, 0 0 26px rgba(255,120,120,.75); } }

/* ---------- nome reprovado no cabecalho do editor ---------- */
.ppf-nome-rep-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ppf-nome-rep-row .passe-ajuste-tag { position: static; transform: none; }
.ppf-nome-rep {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; cursor: pointer;
    font: 700 .74rem 'Cinzel', serif; letter-spacing: .04em;
    background: rgba(160,40,40,.3); color: #ffd2cc; border: 1px solid rgba(255,120,120,.7);
}
.ppf-nome-rep:hover { filter: brightness(1.2); }
html[data-pointer="coarse"] .ppf-nome-rep { min-height: 36px; }

/* ---------- modal do motivo (opcao B) ---------- */
.alternart-modal.passe-motivo { width: min(640px, 94vw); max-height: 90vh; }
.pmv-b-corpo { padding: 14px 22px 4px; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.pmv-b-motivo { margin: 0; padding: 12px 14px 12px 16px; border-left: 4px solid #e05044; background: rgba(200,50,60,.1); border-radius: 0 8px 8px 0; }
.pmv-b-motivo > b { font: 700 .78rem 'Cinzel', serif; color: #ff9a92; letter-spacing: .05em; }
.pmv-b-motivo > b small { font: italic .76rem 'Lora', serif; color: rgba(232,216,184,.6); letter-spacing: 0; }
.pmv-b-motivo p { margin: 6px 0 0; font: 1.02rem/1.55 'Lora', serif; color: #f4e4c1; white-space: pre-wrap; overflow-wrap: anywhere; }
.pmv-b-par { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; justify-items: center; }
.pmv-b-par.so-agora { grid-template-columns: 1fr; }
.pmv-b-par figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pmv-b-par figcaption { font: 700 .64rem 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,216,184,.7); text-align: center; }
.pmv-b-seta { font: 700 1.4rem 'Cinzel', serif; color: rgba(201,168,76,.7); }
.pmv-b-igual .passe-tier-card, .pmv-b-igual .ppf-nome-card { outline: 2px dashed rgba(255,138,138,.7); outline-offset: 3px; filter: saturate(.55) brightness(.8); }
/* card como o jogador ve (L5), menor e parado */
.pmv-card-wrap { width: 124px; flex: none; }
.pmv-card-wrap .passe-tier-card,
.pmv-card-wrap .passe-tier-card:hover { height: 186px; transform: none !important; cursor: default; z-index: auto !important; }
.pmv-card-wrap .tier-claim-btn { pointer-events: none; }
.ppf-nome-card {
    width: 200px; max-width: 100%; box-sizing: border-box; padding: 12px 12px 14px; border-radius: 10px; text-align: center;
    background: linear-gradient(180deg, rgba(40,30,18,.75), rgba(15,10,6,.9));
    border: 1px solid var(--passe-primary, #c9a84c); box-shadow: 0 0 14px var(--passe-glow, rgba(201,168,76,.4));
}
.ppf-nome-card small { display: block; font: 700 .58rem 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(232,216,184,.6); }
.ppf-nome-card b { display: block; margin-top: 6px; font: italic 700 1.05rem 'Cinzel', serif; color: var(--gold-light, #f3da9c); overflow-wrap: anywhere; }
.pmv-situacao { padding: 8px 10px; border-radius: 8px; font: .82rem/1.4 'Lora', serif; }
.pmv-situacao b { font-family: 'Cinzel', serif; letter-spacing: .03em; }
.pmv-situacao .mud { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.pmv-situacao.igual  { background: rgba(200,50,60,.12); border: 1px solid rgba(200,50,60,.45); color: #ffd2cc; }
.pmv-situacao.ok     { background: rgba(125,240,168,.1); border: 1px solid rgba(125,240,168,.45); color: #c9f7d8; }
.pmv-situacao.neutra { background: rgba(255,224,102,.07); border: 1px solid rgba(255,224,102,.3); color: #f3e2a6; }
.pmv-b-check-tit { font: 700 .7rem 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; color: #f3da9c; }
.pmv-b-check { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.pmv-b-check li { display: flex; gap: 7px; align-items: flex-start; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(201,168,76,.22); background: rgba(0,0,0,.25); font: .78rem/1.3 'Lora', serif; color: rgba(232,216,184,.8); min-width: 0; }
.pmv-b-check li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pmv-b-check li .cx { flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 3px; border: 1.5px solid rgba(201,168,76,.5); display: grid; place-items: center; font-size: .66rem; }
.pmv-b-check li.mudou { border-color: rgba(125,240,168,.5); background: rgba(125,240,168,.08); color: #d8f8e2; }
.pmv-b-check li.mudou .cx { background: #4cb86b; border-color: #7df0a8; color: #062a17; }
.pmv-b-check li small { display: block; color: #9fe6b6; }
.pmv-b-igual-txt { font-style: normal; opacity: .6; }
.pmv-b-corpo .alternart-modal-check { margin-top: 0; }
.passe-motivo .alternart-modal-btn.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.5); }

/* ---------- homologacao: tema escolhido x nome final ---------- */
.passe-tema-nome {
    position: relative; z-index: 1; flex-shrink: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
    margin: 0 22px 8px; padding: 10px 14px; border-radius: 10px;
    background: rgba(8,6,4,.78); border: 1px solid rgba(201,168,76,.4);
    border-color: color-mix(in srgb, var(--passe-primary) 45%, transparent);
}
.ptn-box { min-width: 0; }
.ptn-box small { display: block; font: 700 .6rem 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(232,216,184,.55); }
.ptn-box b { display: block; font: 700 1rem 'Cinzel', serif; color: var(--gold-light, #f3da9c); overflow-wrap: anywhere; }
.ptn-box span { display: block; font: .78rem/1.35 'Lora', serif; color: rgba(232,216,184,.7); }
.ptn-x { font: 700 1.2rem 'Cinzel', serif; color: var(--passe-primary, #c9a84c); }
.ptn-x.igual { color: #7df0a8; }
.ptn-x.vazio { opacity: .4; }
.ptn-decisao {
    justify-self: end; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 8px 14px; border-radius: 8px; cursor: pointer; font: 700 .8rem 'Cinzel', serif; letter-spacing: .03em;
    background: rgba(20,15,10,.85); color: #f3da9c; border: 1.5px solid rgba(201,168,76,.6);
}
.ptn-decisao:hover { transform: translateY(-1px); }
.ptn-decisao.is-pendente  { box-shadow: 0 0 10px rgba(255,224,102,.35); }
.ptn-decisao.is-aprovado  { color: #c0f5d4; border-color: rgba(125,240,168,.9); background: rgba(125,240,168,.15); }
.ptn-decisao.is-reprovado { color: #ffb0b8; border-color: rgba(255,100,110,.9); background: rgba(200,50,60,.2); }
.ptn-ajuste, .ptn-prazo { grid-column: 1 / -1; font: .8rem/1.4 'Lora', serif; padding: 6px 10px; border-radius: 8px; }
.ptn-ajuste { color: #c9f7d8; background: rgba(125,240,168,.08); border: 1px solid rgba(125,240,168,.35); overflow-wrap: anywhere; }
.ptn-prazo { display: flex; gap: 8px; align-items: flex-start; color: #f3e2a6; background: rgba(255,224,102,.08); border: 1px solid rgba(255,224,102,.3); }
.ptn-prazo b { color: #ffe066; }
html[data-pointer="coarse"] .ptn-decisao { min-height: 44px; }
.passe-homol-decision-btn.ppf-pendente { border-color: rgba(255,224,102,.5); color: rgba(255,224,102,.9); }
.passe-homol-decision-btn.ppf-pendente.is-active { background: rgba(255,224,102,.15); border-color: rgba(255,224,102,1); color: #fff2b0; }

/* ---------- jogador: card "Em breve" ao lado da trilha ---------- */
/* a trilha e o card dividem a altura que sobra: a trilha rola, o card fica parado */
/* sem z-index: nao abre contexto de empilhamento proprio (o papel de parede ja' da' z 1 aos filhos do modal) */
.passe-corpo-jogador { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.passe-corpo-jogador > .passe-grid { flex: 1 1 auto; min-width: 0; }
.passe-em-breve { flex: none; align-self: center; display: flex; }
.passe-em-breve:empty { display: none; }
.peb-card {
    --peb-c: #c9a84c; --peb-s: #2a2014; --peb-g: rgba(201,168,76,.35);
    width: 172px; box-sizing: border-box; margin: 0 18px 0 4px; padding: 14px 12px 12px;
    border-radius: 12px; text-align: center; border: 1.5px dashed var(--peb-c);
    background: linear-gradient(180deg, rgba(20,15,10,.92), rgba(8,6,4,.94));
    background: linear-gradient(180deg, color-mix(in srgb, var(--peb-s) 80%, #000), rgba(8,6,4,.94));
    box-shadow: 0 0 22px var(--peb-g);
}
.peb-card small { display: block; font: 700 .6rem 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,216,184,.7); }
.peb-ic { display: block; width: 96px; height: 96px; margin: 10px auto 8px; object-fit: contain; filter: drop-shadow(0 0 10px var(--peb-g)); }
.peb-card b { display: block; font: 700 1rem 'Cinzel', serif; color: var(--peb-c); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.peb-mes { display: block; font: .76rem 'Lora', serif; color: rgba(232,216,184,.78); margin-top: 3px; }
.peb-falta {
    display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(201,168,76,.45); border-color: color-mix(in srgb, var(--peb-c) 50%, transparent);
    font: 700 .7rem 'Cinzel', serif; color: var(--gold-light, #f3da9c);
}
.peb-card.sem-tipo { border-color: rgba(201,168,76,.5); box-shadow: none; }
.peb-card.sem-tipo b { color: var(--gold-light, #f3da9c); margin-top: 10px; }

/* ---------- tablet (601-1024px) ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
    .alternart-modal.passe-motivo { width: min(620px, 92vw); }
    .passe-tema-nome { margin: 0 14px 8px; }
}
/* tablet deitado: card ao lado da trilha, mais estreito */
@media (min-width: 901px) and (max-width: 1024px) {
    .peb-card { width: 140px; margin: 0 10px 0 2px; padding: 12px 10px 10px; }
    .peb-ic { width: 72px; height: 72px; }
}
@media (max-width: 860px) {
    .passe-tema-nome { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .ptn-decisao { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
}

/* ---------- celular (ate' 600px) ---------- */
@media (max-width: 600px) {
    .alternart-modal.passe-motivo { width: 96vw; max-height: 92dvh; }
    .pmv-b-corpo { padding: 14px 12px 4px; gap: 10px; }
    .pmv-b-par { gap: 4px; }
    .pmv-card-wrap { width: 108px; }
    .pmv-card-wrap .passe-tier-card, .pmv-card-wrap .passe-tier-card:hover { height: 168px; }
    .ppf-nome-card { width: 130px; padding: 10px 8px 12px; }
    .pmv-b-check { grid-template-columns: 1fr 1fr; }
    .passe-motivo .alternart-modal-footer { flex-wrap: wrap; padding: 10px 12px 14px; }
    .passe-motivo .alternart-modal-footer .alternart-modal-btn { flex: 1 1 auto; }

    .passe-tema-nome { grid-template-columns: 1fr; margin: 0 8px 6px; padding: 8px 10px; gap: 6px; }
    .ptn-x { display: none; }
    .ptn-box b { font-size: .92rem; }
}
/* Celular e tablet em pe': "Em breve" vira uma faixa curta acima da trilha (a
   largura fica toda para as etapas). */
@media (max-width: 900px) {
    .passe-corpo-jogador { flex-direction: column; }
    .passe-em-breve { order: -1; align-self: stretch; }
    .peb-card {
        width: auto; flex: 1 1 auto; margin: 0 8px 6px; padding: 6px 12px; text-align: left;
        display: grid; grid-template-columns: 40px 1fr auto; column-gap: 10px; align-items: center;
    }
    .peb-card small { grid-column: 2; letter-spacing: .14em; }
    .peb-ic { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }
    .peb-card b { grid-column: 2; font-size: .9rem; }
    .peb-mes { grid-column: 2; margin-top: 0; }
    .peb-falta { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; align-self: center; white-space: nowrap; }
    .peb-card.sem-tipo { grid-template-columns: 1fr auto; }
    .peb-card.sem-tipo small, .peb-card.sem-tipo b, .peb-card.sem-tipo .peb-mes { grid-column: 1; }
    .peb-card.sem-tipo b { margin-top: 0; }
    .peb-card.sem-tipo .peb-falta { grid-column: 2; }
}
/* Celular deitado / viewport marcado como mobile pelo jogo (mesma faixa curta) */
html[data-viewport="mobile"] .alternart-modal.passe-motivo { max-height: 92dvh; }
html[data-viewport="mobile"] .passe-corpo-jogador { flex-direction: column; }
html[data-viewport="mobile"] .passe-em-breve { order: -1; align-self: stretch; }
html[data-viewport="mobile"] .peb-card {
    width: auto; flex: 1 1 auto; margin: 0 8px 6px; padding: 6px 12px; text-align: left;
    display: grid; grid-template-columns: 40px 1fr auto; column-gap: 10px; align-items: center;
}
html[data-viewport="mobile"] .peb-card small { grid-column: 2; letter-spacing: .14em; }
html[data-viewport="mobile"] .peb-ic { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }
html[data-viewport="mobile"] .peb-card b { grid-column: 2; font-size: .9rem; }
html[data-viewport="mobile"] .peb-mes { grid-column: 2; margin-top: 0; }
html[data-viewport="mobile"] .peb-falta { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; align-self: center; white-space: nowrap; }
html[data-viewport="mobile"] .peb-card.sem-tipo { grid-template-columns: 1fr auto; }
html[data-viewport="mobile"] .peb-card.sem-tipo small,
html[data-viewport="mobile"] .peb-card.sem-tipo b,
html[data-viewport="mobile"] .peb-card.sem-tipo .peb-mes { grid-column: 1; }
html[data-viewport="mobile"] .peb-card.sem-tipo b { margin-top: 0; }
html[data-viewport="mobile"] .peb-card.sem-tipo .peb-falta { grid-column: 2; }