/* legado corpo, linha 20207 do index.html original.
   Gerado pelo divisor. Nao editar a mao: quando esta tela
   for remodelada, este arquivo some inteiro. */

/* ═══════════════ QUEM É A CARTA? (BONOXS) ═══════════════
   3º modo da área BONOXS. Adivinha a carta escondida só por DICAS.
   A arte NUNCA aparece durante a charada — só no desfecho (acertou/perdeu/pulou),
   porque a própria arte traz o nome impresso, o over, a posição e a bandeira.
   Zero download novo: tudo sai do db.cards que o app já baixa.
   Progresso em db.configs['quizStats'] — o ingest do viewer faz put chave a chave
   (nunca clear), então sobrevive a toda publicação. */
#screen-quiz { align-items:flex-start; padding-top:20px; }
.qz-wrap { width:100%; max-width:620px; margin:0 auto; padding:0 14px 44px; box-sizing:border-box; }
.qz-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.qz-title { font-family:var(--font-title); color:var(--text-color); font-size:1.3rem; letter-spacing:.5px; margin:0; white-space:nowrap;
    flex:1 1 auto; min-width:0; }   /* pode encolher: sem isso o placar estoura o container no celular */
.qz-placar { margin-left:auto; font-family:var(--font-tech); font-weight:900; font-size:.95rem; color:#141200; white-space:nowrap;
    background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:10px; padding:7px 12px; box-shadow:0 4px 14px rgba(255,214,0,.28); }
.qz-view { display:none; }
.qz-view.on { display:block; }

/* ── barra de faixa/progresso ── */
.qz-faixa { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.qz-faixa-txt { font-family:var(--font-tech); font-size:.72rem; letter-spacing:1px; color:#9aa3b2; text-transform:uppercase; white-space:nowrap; }
.qz-faixa-bar { flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.qz-faixa-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),#ffe600); transition:width .45s ease; }

/* ── a carta virada ── */
.qz-carta { position:relative; width:100%; max-width:196px; aspect-ratio:3/4; margin:0 auto 16px; border-radius:14px; overflow:hidden;
    background:linear-gradient(150deg,#22262e,#12151a 55%,#191d24); border:1.5px solid rgba(255,214,0,.34);
    box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 0 44px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.qz-carta::after { content:''; position:absolute; top:-60%; left:-40%; width:36%; height:220%; transform:rotate(18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); animation:qzShine 3.6s ease-in-out infinite; }
@keyframes qzShine { 0%,72% { left:-40%; } 100% { left:120%; } }
@media (prefers-reduced-motion: reduce){ .qz-carta::after { animation:none; } }
.qz-carta-pos { position:absolute; top:11px; left:0; right:0; text-align:center; pointer-events:none; }
.qz-carta-pos small { display:block; font-family:var(--font-tech); font-size:.52rem; letter-spacing:2px; color:#8b93a2; text-transform:uppercase; margin-bottom:2px; }
.qz-carta-pos b { font-family:var(--font-title); font-size:1.3rem; letter-spacing:2px; color:var(--gold); text-shadow:0 2px 10px rgba(0,0,0,.8); }
.qz-carta-q { font-family:var(--font-title); font-size:4.4rem; color:rgba(255,214,0,.5); text-shadow:0 6px 24px rgba(0,0,0,.7); line-height:1; }
.qz-carta-mark { position:absolute; bottom:9px; left:0; right:0; display:flex; justify-content:center; }
.qz-carta-mark span { background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:6px; padding:4px 8px; box-shadow:0 3px 10px rgba(0,0,0,.45); }
.qz-carta-mark img { height:11px; display:block; }
.qz-carta.reveal { animation:qzPop .42s cubic-bezier(.2,1.5,.4,1); border-color:rgba(255,214,0,.75); background:#0d1015; }
@keyframes qzPop { from { transform:scale(.72) rotateY(38deg); } to { transform:scale(1) rotateY(0); } }
.qz-carta img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── banca ── */
.qz-banca { text-align:center; margin-bottom:6px; }
.qz-banca-n { font-family:var(--font-title); font-size:2.5rem; line-height:1; color:var(--gold); transition:color .25s; }
.qz-banca-n.mid { color:#ffb648; } .qz-banca-n.low { color:var(--danger); }
.qz-banca-lbl { font-family:var(--font-tech); font-size:.62rem; letter-spacing:2px; color:#8b93a2; text-transform:uppercase; margin-top:3px; }
.qz-banca-bar { height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin:9px auto 18px; max-width:260px; }
.qz-banca-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),#ffe600); transition:width .35s ease, background .25s; }
.qz-banca-fill.mid { background:linear-gradient(90deg,#ff9f43,#ffb648); }
.qz-banca-fill.low { background:linear-gradient(90deg,#ff4757,#ff7b86); }

/* ── dicas ── */
.qz-dicas { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.qz-dica { display:flex; align-items:flex-start; gap:9px; background:var(--glass); border:1px solid var(--glass-border); border-left:3px solid var(--gold);
    border-radius:10px; padding:10px 12px; font-family:var(--font-tech); font-size:.86rem; color:#dbe1ea; line-height:1.4; animation:qzIn .3s ease; }
@keyframes qzIn { from { transform:translateY(-7px) scale(.98); } to { transform:none; } }
.qz-dica-n { font-weight:900; color:var(--gold); font-size:.7rem; flex-shrink:0; margin-top:2px; }
.qz-dica.free { border-left-color:#4ade80; } .qz-dica.free .qz-dica-n { color:#4ade80; }
.qz-vazio { font-family:var(--font-tech); font-size:.84rem; color:#79808e; text-align:center; padding:14px 8px 18px; line-height:1.5; }

/* ── botões ── */
.qz-dica-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
    background:linear-gradient(135deg,rgba(255,214,0,.16),rgba(255,214,0,.06)); border:1px solid rgba(255,214,0,.42); border-radius:12px;
    padding:14px; font-family:var(--font-tech); font-weight:800; font-size:.9rem; letter-spacing:1px; color:#ffe600; transition:.16s; margin-bottom:16px; }
.qz-dica-btn:hover { background:rgba(255,214,0,.22); transform:translateY(-1px); }
.qz-dica-btn:disabled { opacity:.4; cursor:default; transform:none; }
.qz-dica-preco { font-size:.74rem; opacity:.85; }
.qz-acoes { display:grid; grid-template-columns:1fr auto; gap:10px; }
.qz-btn-ok { cursor:pointer; background:linear-gradient(135deg,#ffe600,#ffd200); color:#141200; border:none; border-radius:12px; padding:15px;
    font-family:var(--font-tech); font-weight:900; font-size:.94rem; letter-spacing:1.4px; transition:.16s; box-shadow:0 5px 18px rgba(255,214,0,.26); }
.qz-btn-ok:hover { filter:brightness(1.07); transform:translateY(-1px); }
.qz-btn-pular { cursor:pointer; background:none; border:1px solid var(--glass-border); border-radius:12px; padding:15px 18px; color:#8b93a2;
    font-family:var(--font-tech); font-weight:700; font-size:.84rem; letter-spacing:1px; transition:.16s; }
.qz-btn-pular:hover { border-color:var(--danger); color:var(--danger); }

/* ── campo de resposta + autocompletar ── */
.qz-resp { position:relative; margin-bottom:12px; }
.qz-input { width:100%; box-sizing:border-box; background:rgba(0,0,0,.32); border:1.5px solid var(--glass-border); border-radius:12px;
    padding:15px 16px; font-family:var(--font-tech); font-weight:700; font-size:1rem; letter-spacing:.6px; color:var(--text-color); transition:.16s; }
.qz-input:focus { outline:none; border-color:var(--gold); background:rgba(0,0,0,.45); }
.qz-input::placeholder { color:#6b7280; font-weight:500; letter-spacing:.3px; }
.qz-sug { position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:40; background:#171b22; border:1px solid var(--glass-border);
    border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.6); display:none; }
.qz-sug.on { display:block; }
.qz-sug-item { padding:12px 15px; font-family:var(--font-tech); font-weight:700; font-size:.9rem; color:#dbe1ea; cursor:pointer; transition:.12s;
    border-bottom:1px solid rgba(255,255,255,.05); }
.qz-sug-item:last-child { border-bottom:none; }
.qz-sug-item:hover { background:rgba(255,214,0,.14); color:#ffe600; }
.qz-sug-dica { padding:10px 15px; font-family:var(--font-tech); font-size:.74rem; color:#79808e; }

/* ── desfecho ── */
.qz-res-ttl { font-family:var(--font-title); font-size:1.5rem; text-align:center; letter-spacing:.5px; margin-bottom:4px; }
.qz-res-ttl.ok { color:#4ade80; } .qz-res-ttl.bad { color:var(--danger); } .qz-res-ttl.skip { color:#8b93a2; }
.qz-res-nome { font-family:var(--font-title); font-size:1.9rem; color:var(--gold); text-align:center; line-height:1.1; margin-bottom:6px; }
.qz-res-sub { font-family:var(--font-tech); font-size:.84rem; color:#9aa3b2; text-align:center; margin-bottom:16px; line-height:1.5; }
.qz-res-pts { font-family:var(--font-title); font-size:2.6rem; color:#4ade80; text-align:center; line-height:1; margin-bottom:4px; }
.qz-res-btns { display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; }
.qz-res-btns.duo { grid-template-columns:1fr 1fr; }
.qz-btn-2 { cursor:pointer; background:none; border:1px solid var(--glass-border); border-radius:12px; padding:14px; color:#c3cbd8;
    font-family:var(--font-tech); font-weight:700; font-size:.84rem; letter-spacing:1px; transition:.16s; }
.qz-btn-2:hover { border-color:var(--gold); color:#fff; }

/* ── publi Bonoxs ── */
.qz-promo { display:flex; align-items:center; gap:11px; background:linear-gradient(135deg,rgba(255,230,0,.15),rgba(255,210,0,.05));
    border:1px solid rgba(255,214,0,.42); border-radius:13px; padding:13px 15px; margin:16px 0; }
.qz-promo-badge { background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:8px; padding:7px 10px; flex-shrink:0; }
.qz-promo-badge img { height:14px; display:block; }
.qz-promo-txt { font-family:var(--font-tech); font-size:.78rem; color:#dbe1ea; line-height:1.45; }
.qz-promo-txt b { color:#ffe600; }
.qz-promo-cta { margin-left:auto; text-decoration:none; flex-shrink:0; background:linear-gradient(135deg,#ffe600,#ffd200); color:#141200;
    font-family:var(--font-tech); font-weight:800; font-size:.72rem; letter-spacing:.8px; padding:9px 13px; border-radius:9px; white-space:nowrap; }
.qz-rodape { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06);
    font-family:var(--font-tech); font-size:.68rem; letter-spacing:1px; color:#6b7280; text-transform:uppercase; }
.qz-rodape img { height:12px; display:block; opacity:.9; }
.qz-rodape .qz-rodape-chip { background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:5px; padding:3px 6px; }

/* ── home / stats ── */
.qz-hero { text-align:center; padding:6px 0 4px; }
.qz-hero-ic { font-size:3rem; line-height:1; margin-bottom:8px; }
.qz-hero-sub { font-family:var(--font-tech); font-size:.88rem; color:#9aa3b2; line-height:1.6; margin-bottom:20px; }
.qz-regras { display:flex; flex-direction:column; gap:9px; margin-bottom:22px; text-align:left; }
.qz-regra { display:flex; gap:10px; align-items:flex-start; background:var(--glass); border:1px solid var(--glass-border); border-radius:11px; padding:12px 14px;
    font-family:var(--font-tech); font-size:.84rem; color:#dbe1ea; line-height:1.45; }
.qz-regra-ic { flex-shrink:0; font-size:1.05rem; }
.qz-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.qz-stat { background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:13px 14px; }
.qz-stat-n { font-family:var(--font-title); font-size:1.6rem; color:var(--gold); line-height:1.1; }
.qz-stat-l { font-family:var(--font-tech); font-size:.66rem; letter-spacing:1px; color:#8b93a2; text-transform:uppercase; margin-top:3px; }
.qz-barras { display:flex; flex-direction:column; gap:11px; margin-bottom:20px; }
.qz-barra-top { display:flex; justify-content:space-between; font-family:var(--font-tech); font-size:.74rem; color:#c3cbd8; margin-bottom:5px; letter-spacing:.6px; }
.qz-barra-top b { color:var(--gold); }
.qz-novas { background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.42); border-radius:11px; padding:11px 14px; margin-bottom:14px;
    font-family:var(--font-tech); font-size:.82rem; color:#4ade80; line-height:1.45; text-align:center; }

/* ── som (divide volume/mudo com o Duelo e o Draft) ── */
.qz-som-wrap { position:relative; }
.qz-som { background:none; border:1px solid var(--glass-border); border-radius:9px; color:#c3cbd8; cursor:pointer; padding:8px 10px; font-size:.95rem; transition:.16s; }
.qz-som:hover { border-color:var(--gold); color:#fff; }
.qz-vol { position:absolute; right:0; top:calc(100% + 7px); z-index:60; width:186px; background:#171b22; border:1px solid var(--glass-border);
    border-radius:12px; padding:13px; box-shadow:0 14px 32px rgba(0,0,0,.6); display:none; }
.qz-vol.open { display:block; }
.qz-vol-lbl { font-family:var(--font-tech); font-size:.68rem; letter-spacing:1px; color:#8b93a2; text-transform:uppercase; display:flex; justify-content:space-between; }
#qz-volrange { width:100%; margin:8px 0 11px; accent-color:var(--gold); cursor:pointer; }
.qz-vol-mudo { width:100%; cursor:pointer; background:none; border:1px solid var(--glass-border); border-radius:8px; padding:9px; color:#c3cbd8;
    font-family:var(--font-tech); font-weight:700; font-size:.72rem; letter-spacing:.8px; transition:.16s; }
.qz-vol-mudo:hover { border-color:var(--gold); color:#fff; }

@media (max-width:420px){
    /* em 375px o cabecalho nao cabe numa linha so: o titulo encolhe e pode quebrar */
    .qz-title { font-size:.98rem; white-space:normal; line-height:1.06; }
    .qz-head { gap:8px; }
    .qz-placar { font-size:.82rem; padding:6px 9px; }
    .qz-carta { max-width:168px; }
    .qz-banca-n { font-size:2.1rem; }
    .qz-res-nome { font-size:1.6rem; }
    .qz-promo-cta { display:none; }
}