/* update-restart.css — contagem do reinício do servidor (#px-restart) e popup
   "O que mudou" (#px-changelog). Ver assets/js/update-restart.js. */

/* ── Contagem do reinício ─────────────────────────────────────────────────── */
#px-restart {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000001;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(440px, calc(100vw - 24px));
    padding: 12px 16px 12px 12px;
    border-radius: 14px;
    background: rgba(12, 16, 26, 0.94);
    border: 1px solid rgba(255, 176, 77, 0.45);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: 'Inter', 'Ubuntu', sans-serif;
    pointer-events: none;           /* não atrapalha a partida */
    animation: pxrIn .25s ease-out;
}
@keyframes pxrIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#px-restart .pxr-ring { position: relative; flex: 0 0 52px; width: 52px; height: 52px; }
#px-restart .pxr-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
#px-restart .pxr-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 4; }
#px-restart .pxr-prog {
    fill: none; stroke: #ffb04d; stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear;
}
#px-restart .pxr-ring b {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; color: #ffd08a;
}
#px-restart .pxr-txt { min-width: 0; }
#px-restart .pxr-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffb04d; }
#px-restart .pxr-msg { margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.3; }
#px-restart .pxr-sub { margin-top: 3px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.68); }
#px-restart.is-now { border-color: rgba(94, 224, 255, 0.55); }
#px-restart.is-now .pxr-prog { stroke: #5ee0ff; }
#px-restart.is-now .pxr-ring b { color: #5ee0ff; font-size: 18px; }
#px-restart.is-now .pxr-ring b i { animation: pxrSpin 1s linear infinite; }
@keyframes pxrSpin { to { transform: rotate(360deg); } }

/* ── Popup "O que mudou" ──────────────────────────────────────────────────── */
#px-changelog-back {
    position: fixed; inset: 0; z-index: 1000002;
    background: rgba(4, 7, 12, 0.66);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#px-changelog {
    position: fixed; z-index: 1000003;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    border-radius: 18px;
    background: #0e131f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    color: #e9eef8;
    font-family: 'Inter', 'Ubuntu', sans-serif;
    animation: pxclIn .22s ease-out;
}
@keyframes pxclIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
#px-changelog .pxcl-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#px-changelog .pxcl-kicker { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5ee0ff; }
#px-changelog h2 { margin: 4px 0 0; font-size: 21px; font-weight: 900; color: #fff; }
#px-changelog .pxcl-x {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #cfd8e8;
}
#px-changelog .pxcl-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
#px-changelog .pxcl-body { overflow-y: auto; padding: 6px 22px 6px; }
#px-changelog .pxcl-sec { padding: 12px 0 4px; }
#px-changelog .pxcl-sec + .pxcl-sec { border-top: 1px solid rgba(255, 255, 255, 0.06); }
#px-changelog h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
#px-changelog .pxcl-new h3 { color: #6ff0a5; }
#px-changelog .pxcl-fix h3 { color: #ffd166; }
#px-changelog .pxcl-info h3 { color: #ffb04d; }
#px-changelog ul { margin: 0; padding: 0; list-style: none; }
#px-changelog li {
    position: relative; padding: 5px 0 5px 18px;
    font-size: 13.5px; line-height: 1.45; color: #cdd6e6;
}
#px-changelog li::before {
    content: ''; position: absolute; left: 3px; top: 12px;
    width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45;
}
#px-changelog .pxcl-new li::before { background: #6ff0a5; opacity: .9; }
#px-changelog .pxcl-fix li::before { background: #ffd166; opacity: .9; }
#px-changelog .pxcl-info li::before { background: #ffb04d; opacity: .9; }
#px-changelog li b { color: #fff; font-weight: 700; }
#px-changelog .pxcl-p2 {
    display: inline-block; padding: 0 5px; border-radius: 5px; vertical-align: 1px;
    font-size: 10px; font-weight: 800; line-height: 15px; color: #1a0f2e; background: #b79bff;
}
#px-changelog .pxcl-foot { padding: 14px 22px 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
#px-changelog .pxcl-ok {
    width: 100%; padding: 12px 16px; border-radius: 11px; cursor: pointer;
    border: 1px solid rgba(94, 224, 255, 0.55); background: rgba(94, 224, 255, 0.16);
    color: #fff; font: 800 15px 'Inter', 'Ubuntu', sans-serif;
}
#px-changelog .pxcl-ok:hover { background: rgba(94, 224, 255, 0.28); }
@media (max-width: 600px) {
    #px-changelog .pxcl-head { padding: 16px 16px 12px; }
    #px-changelog .pxcl-body { padding: 4px 16px; }
    #px-changelog .pxcl-foot { padding: 12px 16px 14px; }
    #px-changelog h2 { font-size: 18px; }
    #px-changelog li { font-size: 13px; }
}

/* ── Janela "Novidades": todas as versões (#px-changelog.pxcl-history) ───── */
#px-changelog.pxcl-history { width: min(640px, calc(100vw - 24px)); }
#px-changelog.pxcl-history .pxcl-body { padding: 10px 22px 12px; }
#px-changelog .pxcl-ver {
    margin: 0 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}
#px-changelog .pxcl-ver[open] { background: rgba(255, 255, 255, 0.035); border-color: rgba(94, 224, 255, 0.28); }
#px-changelog .pxcl-ver > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
#px-changelog .pxcl-ver > summary::-webkit-details-marker { display: none; }
#px-changelog .pxcl-vnum { font-size: 16px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
#px-changelog .pxcl-vnow {
    padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #0b1a12; background: #6ff0a5;
}
#px-changelog .pxcl-vmeta { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #8c9ab3; text-align: right; }
#px-changelog .pxcl-vchev { flex: 0 0 auto; font-size: 12px; color: #8c9ab3; transition: transform .15s; }
#px-changelog .pxcl-ver[open] .pxcl-vchev { transform: rotate(180deg); }
#px-changelog .pxcl-vbody { padding: 0 14px 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
@media (max-width: 600px) {
    #px-changelog.pxcl-history .pxcl-body { padding: 8px 12px 10px; }
    #px-changelog .pxcl-ver > summary { padding: 11px 12px; gap: 8px; }
    #px-changelog .pxcl-vmeta { font-size: 11px; }
    #px-changelog .pxcl-vbody { padding: 0 12px 4px; }
}