/* ==========================================================================
   missions.css — pastilha de nível/missões ao lado do chat e o painel que
   abre acima dela (recompensa diária + missões diárias/semanais).
   Marcação em assets/js/missions.js. As cores ficam em variáveis; o bloco
   do fim aplica o tema novo (verde-ácido, cantos retos) em todas as telas.
   ========================================================================== */

#px-mbar.pxq {
    --q-bg: rgba(10, 14, 24, .94);
    --q-card: rgba(255, 255, 255, .04);
    --q-line: rgba(255, 255, 255, .08);
    --q-line2: rgba(255, 255, 255, .15);
    --q-text: #eaf2ff;
    --q-dim: #97a5c0;
    --q-faint: #66748f;
    --q-acc: #00d4ff;
    --q-acc-ink: #04121a;
    --q-acc-soft: rgba(0, 212, 255, .14);
    --q-ok: #37d47e;
    --q-ok-soft: rgba(55, 212, 126, .13);
    --q-gold: #ffd166;
    --q-gold-soft: rgba(255, 209, 102, .14);
    --q-r: 14px;
    --q-r2: 10px;
    --q-font: 'Ubuntu', sans-serif;
    --q-num: 'Ubuntu', sans-serif;
}

/* O contêiner fica invisível: pastilha e painel têm fundo próprio. */
html body #px-mbar.pxq {
    width: auto !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    font-family: var(--q-font);
    color: var(--q-text);
}
html body:not(.game-menu-open) #px-mbar.pxq.has-gift { opacity: .9; }
html body:not(.game-menu-open) #px-mbar.pxq.open { opacity: 1 !important; }

/* ---------- Pastilha (sempre visível em jogo) ------------------------------ */

.pxq-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 236px;
    box-sizing: border-box;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--q-line2);
    border-radius: 999px;
    background: var(--q-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s;
}
.pxq-head:hover { border-color: var(--q-acc); }

.pxq-lvl { position: relative; flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; }
.pxq-lvl svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pxq-lvl circle { fill: none; stroke-width: 3; }
.pxq-lvl-bg { stroke: var(--q-line2); }
.pxq-lvl-fg { stroke: var(--q-acc); stroke-linecap: round; stroke-dasharray: 97.39; stroke-dashoffset: 97.39; transition: stroke-dashoffset .4s ease; }
.pxq-lvl b { position: relative; font: 800 13px/1 var(--q-num); color: var(--q-text); font-variant-numeric: tabular-nums; }

.pxq-sum { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pxq-sum-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pxq-sum-t { font-size: 11px; font-weight: 700; color: var(--q-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxq-sum-top b { font: 800 11px var(--q-num); color: var(--q-text); font-variant-numeric: tabular-nums; }
#px-mbar.all-done .pxq-sum-t { color: var(--q-ok); }
.pxq-segs { display: flex; gap: 4px; height: 5px; }
.pxq-segs i { position: relative; flex: 1 1 0; border-radius: 3px; background: var(--q-line2); overflow: hidden; }
.pxq-segs i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--q-acc); transition: width .4s ease; }
.pxq-segs i.ok::after { width: 100%; background: var(--q-ok); }

/* #px-mbar na frente: o .fa-solid do Font Awesome também define display. */
#px-mbar .pxq-gift { display: none; flex: 0 0 auto; font-size: 14px; color: var(--q-gold); animation: pxqPulse 1.4s ease-in-out infinite; }
#px-mbar.has-gift .pxq-gift { display: inline-block; }
@keyframes pxqPulse { 50% { transform: scale(1.2); opacity: .7; } }
.pxq-chev { flex: 0 0 auto; font-size: 11px; color: var(--q-faint); transition: transform .2s; }
#px-mbar.open .pxq-chev { transform: rotate(180deg); color: var(--q-text); }

/* ---------- Painel --------------------------------------------------------- */

.pxq-body {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-height: min(580px, calc(100vh - 110px));
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    border: 1px solid var(--q-line2);
    border-radius: var(--q-r);
    background: var(--q-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    text-shadow: none;
    animation: pxqIn .18s ease-out;
}
#px-mbar.open .pxq-body { display: flex; }
@keyframes pxqIn { from { opacity: 0; transform: translateY(8px); } }
.pxq-body::-webkit-scrollbar { width: 5px; }
.pxq-body::-webkit-scrollbar-thumb { background: var(--q-line2); border-radius: 3px; }
.pxq-body button { font-family: inherit; }

.pxq-top { display: flex; align-items: center; gap: 6px; }
.pxq-ttl { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.pxq-ttl i { color: var(--q-acc); }
.pxq-ib {
    flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid var(--q-line); border-radius: 8px;
    background: transparent; color: var(--q-dim); cursor: pointer;
}
.pxq-ib:hover { color: var(--q-text); border-color: var(--q-line2); background: var(--q-card); }

/* Recompensa diária: trilha de 7 dias */
.pxq-dr {
    padding: 11px 11px 10px;
    border: 1px solid var(--q-line);
    border-radius: var(--q-r2);
    background: var(--q-card);
}
.pxq-dr.is-ready { border-color: rgba(255, 209, 102, .45); background: linear-gradient(135deg, var(--q-gold-soft), transparent 70%); }
.pxq-dr-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pxq-dr-h > i { color: var(--q-gold); }
.pxq-dr-h small { margin-left: auto; font-size: 11px; color: var(--q-dim); }
.pxq-dr-h small b { color: var(--q-text); font-family: var(--q-num); }
.pxq-dr-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 12px 0 10px;
    padding: 0;
    list-style: none;
}
/* Linha que liga os dias (fundo + parte já percorrida) */
.pxq-dr-track::before,
.pxq-dr-track::after {
    content: ''; position: absolute; top: 12px; height: 2px;
    left: calc(100% / 14); right: calc(100% / 14);
    background: var(--q-line2);
}
.pxq-dr-track::after { right: auto; width: calc((100% - 100% / 7) * var(--fill, 0)); background: var(--q-ok); }
.pxq-dr-track li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pxq-dr-dot {
    width: 26px; height: 26px; box-sizing: border-box;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid var(--q-line2);
    background: #121826;
    font: 800 11px var(--q-num); color: var(--q-dim);
}
.pxq-dr-track li.big .pxq-dr-dot { width: 30px; height: 30px; margin-top: -2px; color: var(--q-gold); border-color: rgba(255, 209, 102, .5); }
.pxq-dr-track li.got .pxq-dr-dot { background: var(--q-ok); border-color: var(--q-ok); color: #06210f; font-size: 11px; }
.pxq-dr-track li.now .pxq-dr-dot {
    background: var(--q-gold); border-color: var(--q-gold); color: #2a1d00;
    box-shadow: 0 0 0 4px var(--q-gold-soft);
    animation: pxqPulse 1.4s ease-in-out infinite;
}
.pxq-dr-track small { font: 700 9.5px var(--q-num); color: var(--q-faint); white-space: nowrap; }
.pxq-dr-track li.now small { color: var(--q-gold); }
.pxq-dr-track li.got small { color: var(--q-ok); }

.pxq-dr-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px;
    border: 0; border-radius: 9px;
    background: linear-gradient(90deg, #ffb84d, #ffd166);
    color: #2a1d00;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
}
.pxq-dr-btn small { font-size: 11px; font-weight: 700; opacity: .8; }
.pxq-dr-btn:hover { filter: brightness(1.06); }
.pxq-dr-btn[disabled] { cursor: default; opacity: .7; justify-content: center; }
.pxq-dr-done { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--q-dim); }
.pxq-dr-done > i { color: var(--q-ok); }
.pxq-dr-done b { color: var(--q-text); font-family: var(--q-num); font-variant-numeric: tabular-nums; }

/* Abas Diárias / Semanais */
.pxq-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: var(--q-r2); background: rgba(0, 0, 0, .25); border: 1px solid var(--q-line); }
.pxq-tab {
    padding: 7px 8px; border: 0; border-radius: 7px;
    background: transparent; color: var(--q-dim);
    font-size: 12px; font-weight: 700; cursor: pointer;
}
.pxq-tab b { margin-left: 4px; font-family: var(--q-num); font-variant-numeric: tabular-nums; color: var(--q-faint); }
.pxq-tab:hover:not(:disabled) { color: var(--q-text); }
.pxq-tab.is-on { background: var(--q-acc-soft); color: var(--q-text); box-shadow: inset 0 0 0 1px var(--q-acc); }
.pxq-tab.is-on b { color: var(--q-acc); }
.pxq-tab:disabled { opacity: .4; cursor: default; }
.pxq-reset { display: flex; align-items: center; gap: 6px; margin-top: -2px; font-size: 11px; color: var(--q-faint); }
.pxq-reset b { color: var(--q-dim); font-family: var(--q-num); font-variant-numeric: tabular-nums; }

/* Cartão de missão */
.pxq-m {
    display: flex; gap: 10px;
    padding: 10px;
    border: 1px solid var(--q-line);
    border-radius: var(--q-r2);
    background: var(--q-card);
}
.pxq-m-ic {
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 9px;
    color: var(--dc);
    background: color-mix(in srgb, var(--dc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dc) 35%, transparent);
    font-size: 14px;
}
.pxq-m-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pxq-m-row { display: flex; align-items: center; gap: 6px; }
.pxq-m-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; color: var(--q-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxq-m-diff {
    flex: 0 0 auto; padding: 1px 6px; border-radius: 5px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    color: var(--dc); border: 1px solid color-mix(in srgb, var(--dc) 55%, transparent);
}
.pxq-m-desc { font-size: 11.5px; line-height: 1.35; color: var(--q-dim); }
.pxq-m-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pxq-m-bar { flex: 1 1 auto; height: 6px; border-radius: 4px; background: var(--q-line2); overflow: hidden; }
.pxq-m-bar i { display: block; height: 100%; border-radius: 4px; background: var(--q-acc); transition: width .4s ease; }
.pxq-m-num { flex: 0 0 auto; font: 700 11px var(--q-num); color: var(--q-text); font-variant-numeric: tabular-nums; }
.pxq-m-rew { display: flex; flex-wrap: wrap; gap: 5px; }
.pxq-m-rew span {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 999px;
    background: rgba(0, 0, 0, .25); border: 1px solid var(--q-line);
    font: 700 10.5px var(--q-num); color: var(--q-dim);
}
.pxq-m-rew i { font-size: 9px; color: var(--q-gold); }
.pxq-m.done { border-color: rgba(55, 212, 126, .35); background: var(--q-ok-soft); }
.pxq-m.done .pxq-m-ic { color: #06210f; background: var(--q-ok); border-color: var(--q-ok); }
.pxq-m.done .pxq-m-bar i { background: var(--q-ok); }
.pxq-m.done .pxq-m-num { color: var(--q-ok); }
.pxq-m.done .pxq-m-desc { text-decoration: line-through; text-decoration-color: var(--q-faint); }

.pxq-alldone {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px;
    border: 1px solid rgba(55, 212, 126, .4);
    border-radius: var(--q-r2);
    background: linear-gradient(135deg, rgba(55, 212, 126, .2), transparent 75%);
}
.pxq-alldone > i { font-size: 22px; color: var(--q-gold); }
.pxq-alldone b { display: block; font-size: 13px; color: var(--q-text); }
.pxq-alldone span { font-size: 11px; color: var(--q-dim); }

.pxq-foot {
    padding-top: 8px;
    border-top: 1px solid var(--q-line);
    font-size: 11px; color: var(--q-faint); text-align: center;
}
.pxq-foot b { color: var(--q-ok); font-family: var(--q-num); }

.pxq-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 10px;
    text-align: center; font-size: 12px; color: var(--q-dim);
}
.pxq-empty > i { font-size: 20px; color: var(--q-acc); }
.pxq-empty b { font-size: 14px; color: var(--q-text); }
.pxq-empty .pxq-dr-btn { width: auto; margin-top: 6px; padding: 8px 22px; justify-content: center; }

/* ---------- Celular: pastilha compacta, painel maior que o antigo ---------- */
@media (max-width: 820px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    .pxq-head { width: auto; gap: 7px; padding: 3px 8px 3px 3px; }
    .pxq-lvl { width: 28px; height: 28px; }
    .pxq-lvl b { font-size: 11px; }
    .pxq-sum { width: 58px; flex: 0 0 auto; }
    .pxq-sum-top { display: none; }
    .pxq-chev { font-size: 9px; }
    html body #px-mbar.pxq.open { width: auto !important; }
    .pxq-body { width: min(330px, calc(100vw - 16px)); max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); padding: 10px; gap: 8px; }
    .pxq-m { padding: 8px; }
    .pxq-m-ic { width: 30px; height: 30px; font-size: 12px; }
}

/* Janela de PC entre 821 e 900 px: o hud.css prende a pastilha no alto à
   direita (top: 110px), então o painel abre para baixo. */
@media (min-width: 821px) and (max-width: 900px) and (pointer: fine) {
    html body #px-mbar.pxq { flex-direction: column-reverse; align-items: flex-end; }
    .pxq-body { max-height: calc(100vh - 190px); }
}

/* ---------- Tema novo (desde a 3.8.0 em todas as telas): verde-ácido, cantos retos */
#px-mbar.pxq {
    --q-bg: rgba(13, 16, 14, .95);
    --q-card: rgba(233, 239, 228, .03);
    --q-line: var(--pc-line);
    --q-line2: var(--pc-line-2);
    --q-text: var(--pc-text, #e9efe4);
    --q-dim: var(--pc-dim, #8b958c);
    --q-faint: var(--pc-faint, #59625a);
    --q-acc: var(--pc-acid, #d4ff3a);
    --q-acc-ink: var(--pc-acid-ink, #121a00);
    --q-acc-soft: var(--pc-acid-soft, rgba(212, 255, 58, .12));
    --q-r: 2px;
    --q-r2: 2px;
    --q-font: var(--pc-body, 'Bricolage Grotesque', sans-serif);
    --q-num: var(--pc-mono, 'JetBrains Mono', monospace);
}
.pxq-head { border-radius: 2px; }
.pxq-ib, .pxq-m-ic, .pxq-tab, .pxq-dr-btn, .pxq-m-diff, .pxq-m-rew span { border-radius: 2px; }
.pxq-tabs { border-radius: 2px; }
.pxq-segs i, .pxq-m-bar, .pxq-m-bar i { border-radius: 0; }
.pxq-dr-dot { background: #101311; }
.pxq-ttl { font: 800 13px var(--pc-display, inherit); letter-spacing: .02em; text-transform: uppercase; }
.pxq-sum-t, .pxq-tab, .pxq-m-diff, .pxq-reset, .pxq-foot { font-family: var(--q-num); letter-spacing: .04em; }
.pxq-sum-t, .pxq-tab { text-transform: uppercase; font-size: 10px; }
.pxq-tab.is-on { background: var(--q-acc); color: var(--q-acc-ink); box-shadow: none; }
.pxq-tab.is-on b { color: var(--q-acc-ink); }