:root{
    --bg0:#0d0619;
    --bg1:#170b2e;
    --card:rgba(139,92,246,.08);
    --card-br:rgba(167,139,250,.22);
    --track:rgba(255,255,255,.08);
    --txt:#f4f0ff;
    --muted:#a99cc9;
    --violet:#8b5cf6;
    --violet-deep:#6d28d9;
    --red:#ff4d63;
    --orange:#ffa02e;
    --green:#34e39b;

    /* ---- variáveis de TEMA (cada tema em [data-tema="..."] só redefine estas) ---- */
    --ac:139,92,246;      /* cor de destaque (rgb) */
    --ac2:167,139,250;    /* borda/realce suave */
    --ac3:124,58,237;     /* brilho/sombra */
    --ac4:76,29,149;      /* sombra funda */
    --ac5:196,181,253;    /* borda forte */
    --t-ghost:#cbbcf0; --t-mode:#e6dcff; --t-chip:#d9d0ef; --t-hover:#d6c9ff;
    --t-dot:#5a4a85;   --t-foot:#6d5c99; --t-rule:#d9cffa; --t-falta:#e9dfff;
    --orb1:#7c3aed; --orb1-o:.34;
    --orb2:#d946ef; --orb2-o:.16;
    --orb3:#4c1d95; --orb3-o:.30;
    --modal-a:rgba(30,15,58,.96); --modal-b:rgba(19,10,40,.96);
    --overlay:rgba(13,6,25,.72);
    --falta-bg:linear-gradient(135deg,rgba(139,92,246,.95),rgba(109,40,217,.95));
    --on-accent:#fff;     /* texto sobre fundo de destaque */
    --meta-theme:#0d0619;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{background:var(--bg0);}
  body{
    min-height:100vh;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--txt);
    -webkit-font-smoothing:antialiased;
    padding:46px 40px 40px;
    background:linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 55%);
    background-attachment:fixed;
    overflow-x:hidden;
  }
  /* ---------- Fundo vivo: orbes flutuando ---------- */
  .orb{position:fixed;border-radius:50%;filter:blur(95px);pointer-events:none;z-index:-1;}
  .orb1{width:540px;height:540px;background:var(--orb1);opacity:var(--orb1-o);top:-170px;left:-140px;animation:drift1 26s ease-in-out infinite alternate;}
  .orb2{width:430px;height:430px;background:var(--orb2);opacity:var(--orb2-o);top:-60px;right:-150px;animation:drift2 32s ease-in-out infinite alternate;}
  .orb3{width:640px;height:640px;background:var(--orb3);opacity:var(--orb3-o);bottom:-260px;left:32%;animation:drift3 38s ease-in-out infinite alternate;}
  @keyframes drift1{to{transform:translate(70px,50px) scale(1.08);}}
  @keyframes drift2{to{transform:translate(-60px,70px) scale(1.12);}}
  @keyframes drift3{to{transform:translate(50px,-60px) scale(1.05);}}

  .wrap{max-width:1380px;margin:0 auto;}

  /* ---------- Animação de entrada (só liga com frames ativos: html.anim) ---------- */
  html.anim .reveal{animation:rise .55s cubic-bezier(.22,.8,.28,1) both;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}}

  /* ---------- Cabeçalho ---------- */
  .head{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .head .flag{
    width:44px;height:44px;flex:none;border-radius:12px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--violet),var(--violet-deep));
    box-shadow:0 8px 24px rgba(var(--ac3),.45);
  }
  .head .flag svg{width:24px;height:24px;stroke:#fff;}
  .brand{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;font-weight:800;letter-spacing:.28em;color:var(--violet);
    text-transform:uppercase;
  }
  .head h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(21px,2.5vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  }
  .head h1 span{color:var(--muted);font-weight:500;}
  .hint{
    margin-left:auto;display:flex;align-items:center;gap:8px;
    font-size:13px;color:var(--muted);
    background:rgba(var(--ac),.10);border:1px solid var(--card-br);
    padding:8px 14px;border-radius:999px;white-space:nowrap;
  }
  .hint svg{width:14px;height:14px;stroke:var(--muted);flex:none;}
  .mode{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    font:600 13px 'Inter',sans-serif;color:var(--t-mode);white-space:nowrap;
    background:rgba(var(--ac),.22);border:1px solid rgba(var(--ac2),.5);
    padding:8px 16px;border-radius:999px;
    transition:background .2s, box-shadow .2s;
  }
  .mode:hover{background:rgba(var(--ac),.38);box-shadow:0 4px 18px rgba(var(--ac3),.35);}

  .subtitle{color:var(--muted);font-size:14px;margin-bottom:30px;}

  /* ---------- Totais: 3 cards iguais, alinhados no topo ---------- */
  .totals{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    align-items:stretch;margin-bottom:22px;
  }
  .kpi{
    display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
    padding:24px 26px;border-radius:18px;
    background:var(--card);
    border:1px solid var(--card-br);
    backdrop-filter:blur(8px);
    transition:transform .25s, box-shadow .25s;
  }
  .kpi:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(var(--ac4),.30);}
  .kpi .label{
    font-size:clamp(13px,1.05vw,17px);color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;
  }
  .kpi .value{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(26px,3.4vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    font-variant-numeric:tabular-nums;
  }
  .kpi.falta{
    background:var(--falta-bg);
    border:1px solid rgba(var(--ac5),.5);
    box-shadow:0 16px 44px rgba(var(--ac3),.40);
  }
  .kpi.falta:hover{box-shadow:0 20px 54px rgba(var(--ac3),.55);}
  .kpi.falta .label{color:var(--t-falta);}
  .kpi.falta .value{color:var(--on-accent);}

  /* ---------- Faixa: progresso geral + período + ritmo ---------- */
  .strip{
    background:var(--card);border:1px solid var(--card-br);
    border-radius:18px;padding:20px 24px;margin-bottom:16px;
    backdrop-filter:blur(8px);
  }
  .overall-top{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:10px;
    font-size:13px;color:var(--muted);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .ov-pct{
    font-family:'Space Grotesk',sans-serif;text-transform:none;letter-spacing:-.02em;
    font-size:clamp(18px,1.8vw,26px);font-weight:700;color:var(--c,#ff4d63);
    font-variant-numeric:tabular-nums;
  }
  .ov-track{
    height:14px;background:var(--track);
    border:1px solid rgba(255,255,255,.09);border-radius:999px;
    position:relative;overflow:hidden;
  }
  .ov-fill{
    position:absolute;top:0;left:0;bottom:0;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--c,#ff4d63),var(--c2,#ff2447));
    box-shadow:0 0 14px var(--glow,rgba(255,77,99,.35));
    transition:width .6s cubic-bezier(.22,.8,.28,1), background .3s;
  }
  .strip-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px;}
  .chip{
    font-size:13.5px;color:var(--t-chip);
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    padding:7px 13px;border-radius:999px;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .chip b{color:#fff;font-weight:700;}
  .chip b.cv{color:var(--c,#ff4d63);}
  .chip.stamp{margin-left:auto;color:var(--muted);}
  #inPeriodo{font-weight:700;color:#fff;}

  /* ---------- Ações ---------- */
  .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:32px;}
  .ghost{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font:600 13px 'Inter',sans-serif;color:var(--t-ghost);
    background:rgba(var(--ac),.10);border:1px solid var(--card-br);
    padding:8px 14px;border-radius:10px;
    transition:background .2s, color .2s, border-color .2s;
  }
  .ghost:hover{background:rgba(var(--ac),.22);color:#fff;border-color:rgba(var(--ac5),.5);}
  .ghost.danger:hover{background:rgba(255,77,99,.14);border-color:rgba(255,77,99,.5);color:#ffb3bd;}

  /* ---------- Squads: cards com a mesma dinâmica do Progresso geral ---------- */
  .squad{
    position:relative;
    background:var(--card);border:1px solid var(--card-br);
    border-radius:18px;padding:20px 24px;
    margin-bottom:18px;
    backdrop-filter:blur(8px);
    transition:border-color .25s, box-shadow .25s;
  }
  .squad:hover{border-color:rgba(var(--ac5),.42);box-shadow:0 10px 34px rgba(var(--ac4),.35);}
  .squad-top{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .in-name{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(18px,1.9vw,27px);font-weight:700;letter-spacing:-.02em;color:var(--txt);
  }
  .squad-meta{
    font-size:clamp(13px,1.2vw,17px);color:var(--muted);font-weight:500;
    display:inline-flex;align-items:baseline;gap:2px;
  }
  .squad-pct{
    margin-left:auto;font-family:'Space Grotesk',sans-serif;
    font-size:clamp(18px,1.9vw,27px);font-weight:700;letter-spacing:-.02em;
    color:var(--c,#ff4d63);
    font-variant-numeric:tabular-nums;
  }
  .rm{
    flex:none;align-self:center;
    width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;
    background:transparent;color:var(--muted);font-size:15px;line-height:1;
    opacity:.3;transition:opacity .2s, background .2s, color .2s;
  }
  .squad:hover .rm{opacity:1;}
  .rm:hover{background:rgba(255,77,99,.15);color:var(--red);}

  /* barra individual (mesma linguagem da geral, com o valor editável dentro) */
  .track{
    position:relative;height:clamp(50px,4.6vw,62px);
    background:var(--track);
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  }
  .fill{
    position:absolute;top:0;left:0;bottom:0;width:0;
    background:var(--c,#ff4d63);
    background:linear-gradient(90deg, var(--c,#ff4d63), var(--c2,#ff2447));
    border-radius:999px;
    box-shadow:0 0 24px var(--glow,rgba(255,77,99,.35));
    transition:width .45s cubic-bezier(.22,.8,.28,1), background .3s;
    z-index:1;
    overflow:hidden;
  }
  .fill::after{ /* brilho no topo */
    content:'';position:absolute;left:0;right:0;top:0;height:45%;
    background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
    border-radius:999px 999px 0 0;
  }
  .fill::before{ /* shimmer passando pela barra */
    content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%);
    background-size:220% 100%;
    animation:shimmer 2.8s linear 1.1s infinite;
  }
  @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
  .st-green .fill{ /* pulso quando a meta é batida */
    animation:glowPulse 2.2s ease-in-out 1s infinite;
  }
  @keyframes glowPulse{
    0%,100%{box-shadow:0 0 22px var(--glow);}
    50%{box-shadow:0 0 42px var(--glow), 0 0 70px var(--glow);}
  }
  .bar-label{
    position:absolute;top:0;left:0;bottom:0;
    display:flex;align-items:center;gap:2px;padding-left:20px;
    white-space:nowrap;z-index:2;
    font-size:clamp(15px,1.5vw,23px);font-weight:700;letter-spacing:-.01em;color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.55);
  }

  /* chips por squad: falta, ritmo diário e participação (mesma dinâmica da faixa geral) */
  .squad-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px;}
  .squad-chips .chip{font-size:14px;}

  /* cores por status */
  .st-red   {--c:var(--red);   --c2:#ff2447;--glow:rgba(255,77,99,.35);}
  .st-orange{--c:var(--orange);--c2:#ff8800;--glow:rgba(255,160,46,.35);}
  .st-green {--c:var(--green); --c2:#0fc97e;--glow:rgba(52,227,155,.40);}

  /* ---------- Inputs editáveis (parecem texto) ---------- */
  input.in{
    font:inherit;color:inherit;letter-spacing:inherit;
    background:transparent;border:none;outline:none;
    border-bottom:1.5px dashed rgba(var(--ac2),.5);
    border-radius:6px 6px 0 0;
    padding:0 3px;min-width:2ch;
    transition:background .2s, border-color .2s;
  }
  input.in:hover{background:rgba(var(--ac),.16);}
  input.in:focus{background:rgba(var(--ac),.28);border-bottom-color:var(--violet);border-bottom-style:solid;}
  .bar-label input.in{border-bottom-color:rgba(255,255,255,.6);}
  .bar-label input.in:hover,.bar-label input.in:focus{background:rgba(0,0,0,.30);}

  /* ---------- Modo apresentação: tela limpa para projetar ---------- */
  body.present .hint,
  body.present .subtitle,
  body.present .actions,
  body.present .rm,
  body.present .add,
  body.present .foot{display:none;}
  body.present input.in{border-bottom-color:transparent;pointer-events:none;background:transparent!important;}
  body.present .squad{margin-bottom:22px;}

  /* ---------- Adicionar squad ---------- */
  .add{
    width:100%;padding:16px;border-radius:16px;cursor:pointer;
    background:transparent;color:var(--muted);
    border:1.5px dashed rgba(var(--ac2),.35);
    font:600 15px 'Inter',sans-serif;letter-spacing:.02em;
    transition:all .2s;
    margin-top:4px;
  }
  .add:hover{color:var(--t-hover);border-color:var(--violet);background:rgba(var(--ac),.10);}

  /* ---------- Legenda + rodapé ---------- */
  .legend{
    margin-top:44px;
    background:var(--card);border:1px solid var(--card-br);
    border-radius:16px;padding:16px 22px;
    display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;
    font-size:clamp(13px,1.05vw,16px);color:var(--t-chip);
    backdrop-filter:blur(8px);
  }
  .legend svg{width:20px;height:20px;stroke:var(--muted);flex:none;}
  .legend .dot{color:var(--t-dot);}
  .r{color:var(--red);font-weight:700}
  .o{color:var(--orange);font-weight:700}
  .g{color:var(--green);font-weight:700}
  .foot{
    margin-top:34px;text-align:center;
    font-size:12.5px;color:var(--t-foot);letter-spacing:.04em;
  }

  @media (max-width:900px){
    body{padding:24px 16px 32px;}
    .totals{grid-template-columns:1fr;gap:12px;}
    .kpi{padding:18px 20px;}
    .hint{padding:7px 12px;font-size:12.5px;}
    .mode{margin-left:auto;}
    .chip.stamp{margin-left:0;}
    .actions{justify-content:flex-start;}
    .squad{padding:16px 16px 18px;}
    .rm{opacity:.6;}
  }
  @media (prefers-reduced-motion:reduce){
    .orb,html.anim .reveal{animation:none;}
    .fill,.st-green .fill{animation:none!important;transition:none;}
    .fill::before{animation:none;display:none;}
  }

  /* ============================================================
     NOVO — trava por senha, modal, toast e arquivo
     (mesma linguagem visual do restante do painel)
     ============================================================ */

  /* botão de trava (reaproveita o visual da antiga "dica") */
  button.hint{cursor:pointer;font:600 13px 'Inter',sans-serif;transition:background .2s, box-shadow .2s, color .2s;margin-left:auto;}
  button.hint:hover{background:rgba(var(--ac),.22);color:#fff;box-shadow:0 4px 18px rgba(var(--ac3),.25);}
  body.unlocked button.hint{background:rgba(52,227,155,.12);border-color:rgba(52,227,155,.45);color:#b8f5dd;}
  body.unlocked button.hint:hover{background:rgba(52,227,155,.20);}

  /* modo leitura (padrão): valores não são editáveis sem a senha */
  body:not(.unlocked) input.in{pointer-events:none;border-bottom-color:transparent;}
  body:not(.unlocked) #squads .rm,
  body:not(.unlocked) .add{display:none;}

  /* ---------- modal de senha ---------- */
  .modal-bg{
    position:fixed;inset:0;z-index:60;
    display:flex;align-items:center;justify-content:center;padding:20px;
    background:var(--overlay);backdrop-filter:blur(6px);
  }
  .modal-bg[hidden]{display:none;}
  .modal{
    width:min(400px,100%);
    background:linear-gradient(180deg,var(--modal-a),var(--modal-b));
    border:1px solid var(--card-br);border-radius:20px;
    padding:28px 26px 24px;text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--ac),.08);
    animation:modalIn .22s cubic-bezier(.22,.8,.28,1);
  }
  @keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.97);}}
  .modal.shake{animation:shakeX .4s cubic-bezier(.36,.07,.19,.97);}
  @keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
  .m-icon{
    width:52px;height:52px;margin:0 auto 14px;border-radius:14px;
    display:grid;place-items:center;font-size:24px;
    background:linear-gradient(135deg,var(--violet),var(--violet-deep));
    box-shadow:0 8px 24px rgba(var(--ac3),.45);
  }
  .modal h3{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;}
  .m-sub{font-size:13.5px;color:var(--muted);margin-bottom:18px;line-height:1.45;}
  #mInput{
    width:100%;padding:12px 14px;border-radius:12px;
    font:600 16px 'Inter',sans-serif;color:var(--txt);text-align:center;letter-spacing:.14em;
    background:rgba(255,255,255,.05);border:1px solid var(--card-br);outline:none;
    transition:border-color .2s, background .2s;
  }
  #mInput:focus{border-color:var(--violet);background:rgba(var(--ac),.12);}
  .m-err{margin-top:10px;font-size:13px;font-weight:600;color:var(--red);}
  .m-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;}
  .m-actions .ghost,.m-actions .mode{padding:9px 18px;}

  /* ---------- toast ---------- */
  #toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
    z-index:70;pointer-events:none;opacity:0;
    padding:10px 18px;border-radius:999px;
    font:600 13.5px 'Inter',sans-serif;color:#eafff5;
    background:rgba(15,50,38,.92);border:1px solid rgba(52,227,155,.45);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    transition:opacity .25s, transform .25s;
    max-width:calc(100vw - 40px);text-align:center;
  }
  #toast.show{opacity:1;transform:translate(-50%,0);}
  #toast.erro{color:#ffe3e7;background:rgba(58,15,22,.94);border-color:rgba(255,77,99,.5);}

  /* ---------- página de meses arquivados ---------- */
  .mes .in-name{border-bottom:none;padding:0;}
  .mes .track.mini{height:clamp(38px,3.4vw,46px);}
  .mes-squads{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
  .mrow{
    display:grid;grid-template-columns:minmax(90px,160px) 1fr auto auto;
    align-items:center;gap:12px;
    font-size:clamp(13px,1.1vw,15.5px);
  }
  .mrow .mnome{font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mrow .mtrack{
    height:9px;border-radius:999px;background:var(--track);
    border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;
  }
  .mrow .mfill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--c,#ff4d63);box-shadow:0 0 10px var(--glow,rgba(255,77,99,.3));}
  .mrow .mpct{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--c,#ff4d63);font-variant-numeric:tabular-nums;min-width:56px;text-align:right;}
  .mrow .mval{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .mrow.st-red{--c:var(--red);--glow:rgba(255,77,99,.3);}
  .mrow.st-orange{--c:var(--orange);--glow:rgba(255,160,46,.3);}
  .mrow.st-green{--c:var(--green);--glow:rgba(52,227,155,.35);}
  .mes .rm{opacity:.35;}
  .vazio{
    border:1.5px dashed rgba(var(--ac2),.35);border-radius:16px;
    padding:34px 20px;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.6;
  }
  .carregando{color:var(--muted);font-size:14px;padding:8px 2px;}
  a.mode{text-decoration:none;}
  a.ghost{text-decoration:none;}
  @media (max-width:700px){
    .mrow{grid-template-columns:minmax(80px,110px) 1fr auto;}
    .mrow .mval{display:none;}
  }

  /* coordenações dentro de um mês arquivado — mesma lista compacta de squads,
     só que separada por sub-cabeçalho de coordenação */
  .mgroup{margin-top:16px;}
  .mgroup:first-child{margin-top:0;}
  .mgroup-head{
    display:flex;align-items:baseline;gap:8px;margin-bottom:8px;
    font:700 12px 'Inter',sans-serif;color:var(--muted);
    text-transform:uppercase;letter-spacing:.08em;
  }
  .mgroup-nome{color:var(--t-chip);}
  .mgroup-pct{
    margin-left:auto;font-family:'Space Grotesk',sans-serif;
    text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;
  }
  .mgroup-badge{
    font:700 10.5px 'Inter',sans-serif;color:#2a1a00;text-transform:none;letter-spacing:0;
    background:linear-gradient(135deg,#ffd166,#ffb703);
    padding:2px 9px;border-radius:999px;
  }
  .mgroup-empty .mgroup-nome{opacity:.65;}
  .mgroup-leader .mgroup-nome{color:#ffd166;}
  .mgroup .mes-squads{margin-top:0;}

/* ============================================================
   Renovação + Upsell — desdobramento dentro de cada squad
   (o total do card é sempre a soma das duas linhas)
   ============================================================ */
.parts{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
.part{
  display:grid;
  grid-template-columns:112px minmax(60px,1fr) 54px auto;
  gap:12px;align-items:center;font-size:13.5px;
}
.p-nome{color:var(--muted);font-weight:600;white-space:nowrap;}
.p-track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;display:block;}
.p-fill{
  position:absolute;inset:0 auto 0 0;border-radius:999px;display:block;
  background:var(--c,#ff4d63);box-shadow:0 0 10px var(--glow,rgba(255,77,99,.3));
  transition:width .45s ease;
}
.p-pct{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--c,#ff4d63);font-variant-numeric:tabular-nums;text-align:right;}
.p-val{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.p-val i{font-style:normal;opacity:.55;margin:0 2px;}
.p-val input.in{font-weight:700;}
.squad .bar-label b{font-variant-numeric:tabular-nums;}
@media (max-width:700px){
  .part{
    grid-template-columns:1fr auto;
    grid-template-areas:"nome pct" "track track" "val val";
    gap:6px 10px;
  }
  .p-nome{grid-area:nome;}
  .p-pct{grid-area:pct;}
  .p-track{grid-area:track;}
  .p-val{grid-area:val;white-space:normal;}
}
.msub{
  color:var(--muted);font-size:12.5px;margin:-2px 0 4px;
  padding-left:2px;font-variant-numeric:tabular-nums;
}
@media (max-width:700px){ .msub{font-size:12px;} }

/* ============================================================
   Coordenações — squads agrupados (mesmo card de squad, um
   nível acima). Reaproveita .squad/.squad-top/.squad-pct/.track/
   .fill/.squad-chips: cores e comportamento continuam os mesmos.
   ============================================================ */
.coord-group{padding-bottom:14px;}
.coord-body{margin-top:16px;}

.coord-group.coord-empty{
  background:transparent;border-style:dashed;border-color:rgba(var(--ac2),.28);
  box-shadow:none;padding:14px 16px 4px;
}
.coord-group.coord-empty:hover{box-shadow:none;border-color:rgba(var(--ac2),.42);}
.coord-label-empty{
  font:700 12.5px 'Inter',sans-serif;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
}
.coord-empty-meta{color:var(--muted);font-size:13px;}

.track-coord{height:clamp(36px,3.2vw,46px);}
.track-coord .bar-label{font-size:clamp(13px,1.2vw,17px);}
.track-coord .bar-label i{font-style:normal;opacity:.55;margin:0 2px;}

/* chip com o campo de coordenação, dentro de cada squad
   (input.coord-in pra ganhar da regra base input.in{min-width:2ch}) */
.coord-chip{padding:5px 10px 5px 9px;}
input.coord-in{min-width:150px;font-weight:600;}

/* selo "Na frente" e destaque da coordenação líder */
.coord-badge{
  display:inline-flex;align-items:center;gap:5px;
  font:700 12.5px 'Inter',sans-serif;color:#2a1a00;
  background:linear-gradient(135deg,#ffd166,#ffb703);
  padding:5px 12px;border-radius:999px;
  box-shadow:0 4px 14px rgba(255,183,3,.35);
}
.coord-group.coord-leader{
  border-color:rgba(255,183,3,.55);
  box-shadow:0 0 0 1px rgba(255,183,3,.2), 0 14px 34px rgba(255,183,3,.16);
}
.coord-group.coord-leader:hover{
  box-shadow:0 0 0 1px rgba(255,183,3,.28), 0 16px 40px rgba(255,183,3,.22);
}
@media (max-width:900px){
  .coord-group{padding-bottom:10px;}
}

/* ============================================================
   Super meta — degrau bônus opcional acima da meta normal
   (mesma linguagem dourada já usada no selo "🏆 Na frente")
   ============================================================ */
.super-chip{padding:5px 10px 5px 9px;}
input.super-in{min-width:150px;font-weight:600;}

.super-row,.coord-super-row{
  display:grid;
  grid-template-columns:112px minmax(60px,1fr) 54px auto;
  gap:12px;align-items:center;font-size:13.5px;
  margin-top:10px;padding-top:10px;
  border-top:1px dashed rgba(255,209,102,.25);
}
.super-nome{color:#ffd166;font-weight:600;white-space:nowrap;}
.super-track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;display:block;}
.super-fill{
  position:absolute;inset:0 auto 0 0;border-radius:999px;display:block;
  background:linear-gradient(90deg,#ffd166,#ffb703);
  box-shadow:0 0 10px rgba(255,183,3,.35);
  transition:width .45s ease;
}
.super-pct{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#ffd166;font-variant-numeric:tabular-nums;text-align:right;}
.super-val{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.super-val i{font-style:normal;opacity:.55;margin:0 2px;}
@media (max-width:700px){
  .super-row,.coord-super-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"nome pct" "track track" "val val";
    gap:6px 10px;
  }
  .super-nome{grid-area:nome;}
  .super-pct{grid-area:pct;}
  .super-track{grid-area:track;}
  .super-val{grid-area:val;white-space:normal;}
}

/* faixa geral da super meta — mesmo card do progresso geral, em dourado */
.super-strip{
  border-color:rgba(255,183,3,.35);
  background:linear-gradient(135deg,rgba(255,209,102,.09),rgba(255,183,3,.05));
}
.super-strip .overall-top{color:#e8c988;}
.super-strip .ov-pct{color:#ffd166;}
.super-strip .ov-fill{background:linear-gradient(90deg,#ffd166,#ffb703);box-shadow:0 0 14px rgba(255,183,3,.35);}
.super-strip[hidden]{display:none;}

/* chip e valor dourados (usados nos selos "faltam"/"batida" da super meta) */
.chip.chip-gold{border-color:rgba(255,183,3,.4);}
.chip b.cv-gold{color:#ffd166;}


  /* ---------- janela "Regras da meta" ---------- */
  .head .mode.rules{margin-left:auto;}
  .head .hint{margin-left:auto;}
  .head .hint + .mode.rules{margin-left:0;}
  body.modal-open{overflow:hidden;}
  .modal.modal-regras{
    width:min(760px,100%);max-height:calc(100vh - 40px);
    display:flex;flex-direction:column;text-align:left;padding:22px 24px 20px;
  }
  .regras-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
  .regras-head .m-icon{margin:0;flex:none;}
  .regras-tt{flex:1;min-width:0;}
  .regras-tt .m-sub{margin:0;}
  #regrasNota.on{color:#b8f5dd;}
  .regras-corpo{overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:12px;}
  .regra{
    background:var(--card);border:1px solid var(--card-br);border-radius:14px;padding:14px 16px;
  }
  .regra h4{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;margin-bottom:6px;}
  .regra p{white-space:pre-wrap;color:var(--t-rule);font-size:14.5px;line-height:1.6;}
  .rn{
    flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
    font:700 12.5px 'Space Grotesk',sans-serif;color:#fff;
    background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  }
  .regra-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .regra-top .rm{position:static;opacity:.7;flex:none;}
  .r-tit,.r-txt{
    width:100%;font:inherit;color:var(--txt);background:rgba(255,255,255,.05);
    border:1px solid var(--card-br);border-radius:10px;outline:none;padding:9px 12px;
    transition:border-color .2s, background .2s;
  }
  .r-tit{font:700 16px 'Space Grotesk',sans-serif;}
  .r-txt{display:block;font-size:14.5px;line-height:1.55;resize:none;min-height:70px;}
  .r-tit:focus,.r-txt:focus{border-color:var(--violet);background:rgba(var(--ac),.12);}
  .regras-corpo .add{margin-top:2px;}
  body:not(.unlocked) .regras-corpo .add{display:none;}
  @media (max-width:700px){
    .head .mode.rules{margin-left:0;}
    .regras-head{flex-wrap:wrap;}
    .regras-head .ghost{margin-left:auto;}
  }


/* ============================================================
   SÓ COM A EDIÇÃO ATIVA  (.so-edicao)
   Tudo que tem essa classe some para quem só está olhando
   (e também no modo apresentação).
   ============================================================ */
body:not(.unlocked) .so-edicao,
body.present .so-edicao{display:none!important;}

/* seletor de tema (fica na linha de ações) */
.tema-sel{gap:8px;}
.tema-sel select{
  font:600 13px 'Inter',sans-serif;color:inherit;cursor:pointer;
  background:rgba(0,0,0,.35);border:1px solid rgba(var(--ac2),.35);
  border-radius:8px;padding:3px 8px;outline:none;
}
.tema-sel select:focus{border-color:var(--violet);}
.tema-sel select option{background:#1a1a1a;color:#fff;}

/* ============================================================
   FASES DA META  (faixa na tela + janela de gerenciamento)
   ============================================================ */
.fase-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  background:var(--card);border:1px dashed rgba(var(--ac2),.5);
  border-radius:18px;padding:14px 20px;margin-bottom:16px;
}
.fase-strip[hidden]{display:none!important;}
.fs-tit{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.fs-chips{display:flex;flex-wrap:wrap;gap:8px;}
.fs-chip{
  font:700 12.5px 'Inter',sans-serif;padding:5px 12px;border-radius:999px;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
}
.fs-chip.feita{color:var(--green);border-color:rgba(52,227,155,.4);background:rgba(52,227,155,.08);}
.fs-chip.atual{color:var(--on-accent);background:var(--violet);border-color:var(--violet);}
.fs-info{font-size:13.5px;color:var(--t-chip);}
.fs-info b{color:#fff;}
.fase-strip .ghost{margin-left:auto;}

.modal.modal-fases{
  width:min(860px,100%);max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;text-align:left;padding:22px 24px 20px;
}
.fase-auto{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:14px;color:var(--t-chip);margin-bottom:14px;
  background:var(--card);border:1px solid var(--card-br);border-radius:12px;padding:10px 14px;
}
.fase-auto input{width:18px;height:18px;accent-color:var(--violet);cursor:pointer;flex:none;}
.fase{
  background:var(--card);border:1px solid var(--card-br);border-radius:14px;padding:14px 16px;
}
.fase.atual{border-color:var(--violet);box-shadow:0 0 0 1px rgba(var(--ac),.35);}
.fase-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.fase-top .r-tit{flex:1;min-width:140px;width:auto;}
.fase-top .rm{position:static;opacity:.7;flex:none;}
.fase-badge{
  font:700 11.5px 'Inter',sans-serif;padding:4px 10px;border-radius:999px;white-space:nowrap;
  color:var(--muted);background:rgba(255,255,255,.06);
}
.fase.atual .fase-badge{color:var(--on-accent);background:var(--violet);}
.fase.feita .fase-badge{color:var(--green);background:rgba(52,227,155,.12);}
.fase-tab{width:100%;border-collapse:collapse;font-size:13.5px;}
.fase-tab th{
  text-align:left;font:700 11px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:4px 6px 6px;
}
.fase-tab td{padding:4px 6px;border-top:1px solid rgba(255,255,255,.06);}
.fase-tab td.num,.fase-tab th.num{text-align:right;font-variant-numeric:tabular-nums;}
.fase-tab .fnome{font-weight:700;color:var(--txt);white-space:nowrap;}
.fase-tab .fcoord{display:block;font-weight:500;font-size:11.5px;color:var(--muted);}
.fase-tab input.fi{
  width:100%;min-width:90px;text-align:right;font:600 13.5px 'Inter',sans-serif;color:var(--txt);
  background:rgba(255,255,255,.05);border:1px solid var(--card-br);border-radius:8px;
  padding:6px 8px;outline:none;font-variant-numeric:tabular-nums;
}
.fase-tab input.fi:focus{border-color:var(--violet);background:rgba(var(--ac),.14);}
.fase-tab tfoot td{border-top:1.5px solid rgba(var(--ac2),.35);font-weight:700;color:#fff;padding-top:8px;}
.fase-acoes{display:flex;gap:8px;margin-top:10px;}
@media (max-width:700px){
  .fase-tab{display:block;overflow-x:auto;white-space:nowrap;}
  .fase-strip .ghost{margin-left:0;}
}

/* ============================================================
   TEMAS
   Cada tema só redefine variáveis (e pode ter enfeites próprios).
   O tema padrão é o :root lá de cima. Para criar um novo (ex.:
   natal), copie o bloco "black" abaixo, troque o nome em
   [data-tema="..."], ajuste as cores e registre o tema em
   TEMAS no js/comum.js. Guia completo no LEIA-ME.txt.
   ============================================================ */
.selo{display:none;}

/* ---------- FAMÍLIA "BLACK FRIDAY" (enfeites compartilhados) ----------
   Os temas black / vermelho / neon usam data-fx="black" (definido em TEMAS, js/comum.js)
   para ganhar os mesmos enfeites; o que muda de um para outro são só as cores. */
[data-fx="black"] body::before{ /* fita de alerta no topo */
  content:'';position:fixed;top:0;left:0;right:0;height:9px;z-index:55;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--brand) 0 14px,#0a0a0a 14px 28px);
}
[data-fx="black"] .head .flag{box-shadow:0 8px 24px rgba(var(--ac),.35);}
[data-fx="black"] .head .flag svg{stroke:var(--on-accent);}
[data-fx="black"] .brand .eyebrow{color:var(--brand);}
[data-fx="black"] .head h1,
[data-fx="black"] .kpi .value,
[data-fx="black"] .ov-pct,
[data-fx="black"] .squad-pct,
[data-fx="black"] .in-name{font-family:'Anton','Space Grotesk',sans-serif;font-weight:400;}
[data-fx="black"] .head h1{text-transform:uppercase;letter-spacing:.015em;}
[data-fx="black"] .head h1 span{color:var(--brand);}
[data-fx="black"] .kpi .value{letter-spacing:.005em;}
[data-fx="black"] .kpi.falta{border-color:var(--brand);box-shadow:0 16px 44px rgba(var(--ac),.28);}
[data-fx="black"] .kpi.falta .label{color:var(--t-falta);}
[data-fx="black"] .kpi.falta .value{color:var(--on-accent);}
[data-fx="black"] .mode{color:var(--on-accent);background:var(--brand);border-color:var(--brand);}
[data-fx="black"] .mode:hover{filter:brightness(1.12);box-shadow:0 4px 18px rgba(var(--ac),.4);}
[data-fx="black"] .hint{color:var(--muted);}
[data-fx="black"] .rn{color:var(--on-accent);}
[data-fx="black"] .fill::after{background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);}
[data-fx="black"] .squad:hover,
[data-fx="black"] .kpi:hover{box-shadow:0 14px 34px rgba(var(--ac),.10);}
[data-fx="black"] .legend,
[data-fx="black"] .strip,
[data-fx="black"] .squad,
[data-fx="black"] .kpi{backdrop-filter:none;}
[data-fx="black"] .selo{
  display:inline-block;font-family:'Anton',sans-serif;font-size:clamp(13px,1.3vw,18px);letter-spacing:.12em;
  color:var(--on-accent);background:var(--brand);padding:6px 14px 5px;border-radius:4px;
  transform:rotate(-2.5deg);box-shadow:4px 4px 0 var(--selo-sombra);white-space:nowrap;
}
[data-fx="black"] .selo::after{content:'BLACK FRIDAY';}
[data-fx="black"] .foot{color:var(--t-foot);}
[data-fx="black"] .fs-chip.atual,
[data-fx="black"] .fase.atual .fase-badge{color:var(--on-accent);}
[data-fx="black"] #toast{background:rgba(var(--ac4),.55);border-color:rgba(var(--ac),.55);color:#fff;backdrop-filter:blur(6px);}
[data-fx="black"] #toast.erro{background:rgba(58,15,22,.96);border-color:rgba(255,77,99,.55);color:#ffe3e7;}

/* ---------- BLACK FRIDAY · amarelo (fase 1) ---------- */
:root[data-tema="black"]{
  --bg0:#000000; --bg1:#0d0b02;
  --card:rgba(255,255,255,.04); --card-br:rgba(255,214,10,.20); --track:rgba(255,255,255,.09);
  --txt:#ffffff; --muted:#b6b09a;
  --violet:#ffd60a; --violet-deep:#f59e0b;
  --brand:#ffd60a; --selo-sombra:#ef4444;
  --ac:255,214,10; --ac2:255,224,64; --ac3:255,190,0; --ac4:120,90,0; --ac5:255,230,120;
  --t-ghost:#f3e9b4; --t-mode:#ffe680; --t-chip:#e9e3cc; --t-hover:#fff3b0;
  --t-dot:#6b6130; --t-foot:#8a7f4d; --t-rule:#e8e1c4; --t-falta:#3b2d00;
  --orb1:#ffd60a; --orb1-o:.20; --orb2:#ef4444; --orb2-o:.22; --orb3:#a16207; --orb3-o:.26;
  --modal-a:rgba(26,21,4,.97); --modal-b:rgba(8,6,0,.98); --overlay:rgba(0,0,0,.80);
  --falta-bg:linear-gradient(135deg,#ffe14d,#ffb800);
  --on-accent:#111111; --meta-theme:#000000;
}

/* ---------- BLACK FRIDAY · vermelho (fase 2) ---------- */
:root[data-tema="vermelho"]{
  --bg0:#000000; --bg1:#150306;
  --card:rgba(255,255,255,.04); --card-br:rgba(255,45,61,.26); --track:rgba(255,255,255,.09);
  --txt:#ffffff; --muted:#bda3a6;
  --violet:#ff2d3d; --violet-deep:#b80016;
  --brand:#ff2d3d; --selo-sombra:#ffffff;
  --ac:255,45,61; --ac2:255,110,120; --ac3:230,20,40; --ac4:110,0,15; --ac5:255,150,160;
  --t-ghost:#f7c4c8; --t-mode:#ffb3ba; --t-chip:#ecd5d7; --t-hover:#ffd9dc;
  --t-dot:#6b3038; --t-foot:#8a4a52; --t-rule:#ead0d2; --t-falta:#ffe3e5;
  --orb1:#ff2d3d; --orb1-o:.24; --orb2:#7a0010; --orb2-o:.40; --orb3:#ff7a00; --orb3-o:.12;
  --modal-a:rgba(34,6,10,.97); --modal-b:rgba(10,0,2,.98); --overlay:rgba(0,0,0,.82);
  --falta-bg:linear-gradient(135deg,#ff4d5a,#c4001a);
  --on-accent:#ffffff; --meta-theme:#000000;
  --red:#ff9a3d; /* o vermelho de "abaixo de 50%" ficaria igual ao destaque; vira laranja forte */
  --orange:#ffd23d;
}
[data-tema="vermelho"] .r{color:#ff9a3d;}
[data-tema="vermelho"] .o{color:#ffd23d;}

/* ---------- BLACK FRIDAY · neon roxo (fase 3, puxa para as cores da DKF) ---------- */
:root[data-tema="neon"]{
  --bg0:#000000; --bg1:#0b0418;
  --card:rgba(168,85,247,.07); --card-br:rgba(168,85,247,.32); --track:rgba(255,255,255,.09);
  --txt:#ffffff; --muted:#b5a3d4;
  --violet:#a855f7; --violet-deep:#7c3aed;
  --brand:#a855f7; --selo-sombra:#e879f9;
  --ac:168,85,247; --ac2:192,132,252; --ac3:147,51,234; --ac4:76,29,149; --ac5:216,180,254;
  --t-ghost:#e4d4ff; --t-mode:#ffffff; --t-chip:#e6dcfb; --t-hover:#f3e8ff;
  --t-dot:#4c2f7a; --t-foot:#7c64a8; --t-rule:#e3d9f7; --t-falta:#f3e8ff;
  --orb1:#a855f7; --orb1-o:.34; --orb2:#e879f9; --orb2-o:.24; --orb3:#6d28d9; --orb3-o:.40;
  --modal-a:rgba(24,8,46,.97); --modal-b:rgba(6,0,16,.98); --overlay:rgba(2,0,10,.82);
  --falta-bg:linear-gradient(135deg,#8b5cf6,#d946ef);
  --on-accent:#ffffff; --meta-theme:#05010d;
}
[data-tema="neon"] .head h1 span{background:linear-gradient(90deg,#c084fc,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent;}
[data-tema="neon"] body::before{background:repeating-linear-gradient(-45deg,#a855f7 0 14px,#e879f9 14px 28px);}
[data-tema="neon"] .kpi.falta{box-shadow:0 16px 54px rgba(217,70,239,.40);}
[data-tema="neon"] .head .flag{box-shadow:0 8px 28px rgba(168,85,247,.55);}

/* ============================================================
   Quebra Renovação / Upsell logo abaixo do Progresso geral
   ============================================================ */
.ov-parts{display:flex;flex-direction:column;gap:7px;margin-top:14px;}
.ov-parts:empty{display:none;}
.ov-part{font-size:14px;}
@media (max-width:900px){
  .ov-part{grid-template-columns:1fr auto;grid-template-areas:"nome pct" "track track" "val val";gap:6px 10px;}
  .ov-part .p-nome{grid-area:nome;} .ov-part .p-pct{grid-area:pct;} .ov-part .p-track{grid-area:track;}
  .ov-part .p-val{grid-area:val;white-space:normal;}
}

/* ---------- gerenciador de fases: tema por fase e "como terminou" ---------- */
.fase-tema{display:inline-flex;align-items:center;gap:6px;font-size:13px;}
.fase-tema select{
  font:600 12.5px 'Inter',sans-serif;color:var(--txt);cursor:pointer;
  background:rgba(0,0,0,.35);border:1px solid rgba(var(--ac2),.35);border-radius:8px;padding:4px 8px;outline:none;
}
.fase-tema select option{background:#1a1a1a;color:#fff;}
.fase-fim{
  margin:0 0 12px;padding:12px 14px;border-radius:12px;
  background:rgba(52,227,155,.06);border:1px solid rgba(52,227,155,.28);
}
.fase-fim.vazio-fim{color:var(--muted);font-size:13px;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);}
.ff-top{font-size:13.5px;color:var(--t-chip);margin-bottom:8px;}
.ff-top b{color:var(--green);}
.ff-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.ff-tab td i{font-style:normal;opacity:.55;margin:0 2px;}
.ff-tab td.st-red .cv{color:var(--red);} .ff-tab td.st-orange .cv{color:var(--orange);} .ff-tab td.st-green .cv{color:var(--green);}

/* ---------- gerenciador: base de cada squad e % por fase ---------- */
.fase.basecard{border-style:dashed;}
.bc-tit{font:700 16px 'Space Grotesk',sans-serif;}
.fp-hint{font-size:12.5px;color:var(--muted);line-height:1.5;}
.fase.basecard .fp-hint{margin:0 0 10px;}
.fase-pct{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);}
.fase-pct label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--t-chip);}
.fase-pct input.fp{
  width:78px;text-align:right;font:700 14px 'Inter',sans-serif;color:var(--txt);
  background:rgba(255,255,255,.06);border:1px solid var(--card-br);border-radius:8px;padding:6px 8px;outline:none;
}
.fase-pct input.fp:focus{border-color:var(--violet);background:rgba(var(--ac),.14);}

.fase-strip .ghost[hidden]{display:none!important;}
.fase-strip #btnComoTerminou{margin-left:auto;}
.fase-strip #btnComoTerminou + .ghost,.fase-strip #btnFaseAnterior + .ghost{margin-left:0;}
.fase-strip #btnFases{margin-left:0;}


/* ============================================================
   TEMAS DE DATAS COMEMORATIVAS  (data-fx="festa")
   Natal, Carnaval, Páscoa e Festa Junina. Mesma ideia da família
   Black: as cores vêm das variáveis do tema; os enfeites (faixa
   no topo, selo, fundo decorado) ficam em cada bloco.
   ============================================================ */
[data-fx="festa"] body::before{ /* faixa decorada no topo (cada tema define --faixa e --faixa-h) */
  content:'';position:fixed;top:0;left:0;right:0;height:var(--faixa-h,10px);z-index:55;pointer-events:none;
  background:var(--faixa);background-size:var(--faixa-sz,auto);
}
[data-fx="festa"] body::after{ /* fundo decorado (neve, confete, ovinhos...) */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:var(--deco-o,.5);
  background-image:var(--deco);background-size:var(--deco-sz,240px 240px);
}
[data-fx="festa"] .head .flag{box-shadow:0 8px 24px rgba(var(--ac),.4);}
[data-fx="festa"] .head .flag svg{stroke:var(--on-accent);}
[data-fx="festa"] .brand .eyebrow{color:var(--brand);}
[data-fx="festa"] .head h1,
[data-fx="festa"] .kpi .value,
[data-fx="festa"] .ov-pct,
[data-fx="festa"] .squad-pct,
[data-fx="festa"] .in-name{font-family:'Fredoka','Space Grotesk',sans-serif;}
[data-fx="festa"] .head h1 span{color:var(--brand);}
[data-fx="festa"] .kpi.falta{border-color:var(--brand);box-shadow:0 16px 44px rgba(var(--ac),.28);}
[data-fx="festa"] .kpi.falta .label{color:var(--falta-txt);opacity:.85;}
[data-fx="festa"] .kpi.falta .value{color:var(--falta-txt);}
[data-fx="festa"] .mode{color:var(--on-accent);background:var(--brand);border-color:var(--brand);}
[data-fx="festa"] .mode:hover{filter:brightness(1.1);box-shadow:0 4px 18px rgba(var(--ac),.4);}
[data-fx="festa"] .rn{color:var(--on-accent);}
[data-fx="festa"] .fill::after{background:linear-gradient(180deg,rgba(255,255,255,.26),transparent);}
[data-fx="festa"] .foot{color:var(--t-foot);}
[data-fx="festa"] .fs-chip.atual,
[data-fx="festa"] .fase.atual .fase-badge{color:var(--on-accent);}
[data-fx="festa"] .selo{
  display:inline-block;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(13px,1.3vw,18px);letter-spacing:.07em;
  color:var(--on-accent);background:var(--brand);padding:6px 18px;border-radius:999px;
  transform:rotate(-2deg);box-shadow:0 4px 0 var(--selo-sombra);white-space:nowrap;
}
[data-fx="festa"] #toast{background:rgba(var(--ac4),.55);border-color:rgba(var(--ac),.55);color:#fff;backdrop-filter:blur(6px);}
[data-fx="festa"] #toast.erro{background:rgba(58,15,22,.96);border-color:rgba(255,77,99,.55);color:#ffe3e7;}
@keyframes festaDrift{to{background-position:0 240px;}}
@media (prefers-reduced-motion:reduce){ [data-fx="festa"] body::after{animation:none!important;} }

/* ---------- NATAL ---------- */
:root[data-tema="natal"]{
  --bg0:#020b06; --bg1:#07220f; --card:rgba(255,255,255,.045); --card-br:rgba(251,191,36,.24); --track:rgba(255,255,255,.10);
  --txt:#ffffff; --muted:#a9c4b0;
  --violet:#fbbf24; --violet-deep:#d97706; --brand:#fbbf24; --selo-sombra:#dc2626;
  --ac:251,191,36; --ac2:253,224,71; --ac3:245,158,11; --ac4:120,80,0; --ac5:253,230,138;
  --t-ghost:#f6e7b4; --t-mode:#fff1b8; --t-chip:#e3ecdf; --t-hover:#fff6cc;
  --t-dot:#2f5a3d; --t-foot:#5f8f6f; --t-rule:#dbe7d8; --t-falta:#ffe4e4;
  --orb1:#16a34a; --orb1-o:.30; --orb2:#dc2626; --orb2-o:.22; --orb3:#065f46; --orb3-o:.36;
  --modal-a:rgba(7,34,15,.97); --modal-b:rgba(1,8,4,.98); --overlay:rgba(0,6,2,.82);
  --falta-bg:linear-gradient(135deg,#dc2626,#7f1d1d); --falta-txt:#ffffff;
  --on-accent:#1f1400; --meta-theme:#020b06;
  --faixa:repeating-linear-gradient(-45deg,#dc2626 0 12px,#ffffff 12px 24px); --faixa-h:10px;
  --deco:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 60px 90px,#fff,transparent),radial-gradient(3px 3px at 110px 50px,#fff,transparent),radial-gradient(2px 2px at 150px 130px,#fff,transparent),radial-gradient(3px 3px at 190px 80px,#fff,transparent),radial-gradient(2px 2px at 40px 170px,#fff,transparent),radial-gradient(2px 2px at 130px 210px,#fff,transparent);
  --deco-sz:240px 240px; --deco-o:.55;
}
[data-tema="natal"] body::after{animation:festaDrift 16s linear infinite;}
[data-tema="natal"] .selo::after{content:'FELIZ NATAL';}

/* ---------- CARNAVAL ---------- */
:root[data-tema="carnaval"]{
  --bg0:#020818; --bg1:#07163a; --card:rgba(255,255,255,.05); --card-br:rgba(25,211,122,.28); --track:rgba(255,255,255,.10);
  --txt:#ffffff; --muted:#9db3d6;
  --violet:#19d37a; --violet-deep:#0fa05a; --brand:#19d37a; --selo-sombra:#ff2d95;
  --ac:25,211,122; --ac2:94,234,170; --ac3:16,185,100; --ac4:4,80,50; --ac5:150,245,200;
  --t-ghost:#c4f5dc; --t-mode:#d9fff0; --t-chip:#dbe6f7; --t-hover:#eafff5;
  --t-dot:#274a80; --t-foot:#5877ad; --t-rule:#d6e2f5; --t-falta:#021a0e;
  --orb1:#19d37a; --orb1-o:.20; --orb2:#ff2d95; --orb2-o:.26; --orb3:#3b82f6; --orb3-o:.32;
  --modal-a:rgba(6,20,52,.97); --modal-b:rgba(1,6,20,.98); --overlay:rgba(1,4,14,.82);
  --falta-bg:linear-gradient(135deg,#19d37a,#facc15); --falta-txt:#03160c;
  --on-accent:#03160c; --meta-theme:#020818;
  --faixa:linear-gradient(90deg,#19d37a 0 25%,#facc15 25% 50%,#ff2d95 50% 75%,#3b82f6 75% 100%); --faixa-sz:200px 100%; --faixa-h:10px;
  --deco:radial-gradient(4px 4px at 30px 40px,#facc15,transparent),radial-gradient(3px 3px at 90px 20px,#ff2d95,transparent),radial-gradient(4px 4px at 150px 70px,#19d37a,transparent),radial-gradient(3px 3px at 200px 30px,#3b82f6,transparent),radial-gradient(4px 4px at 60px 120px,#ff2d95,transparent),radial-gradient(3px 3px at 120px 160px,#facc15,transparent),radial-gradient(4px 4px at 190px 190px,#19d37a,transparent),radial-gradient(3px 3px at 20px 210px,#3b82f6,transparent);
  --deco-sz:240px 240px; --deco-o:.45;
}
[data-tema="carnaval"] body::after{animation:festaDrift 28s linear infinite;}
[data-tema="carnaval"] .selo::after{content:'CARNAVAL';}

/* ---------- PÁSCOA ---------- */
:root[data-tema="pascoa"]{
  --bg0:#120805; --bg1:#2a140c; --card:rgba(255,255,255,.05); --card-br:rgba(244,166,215,.28); --track:rgba(255,255,255,.10);
  --txt:#fff7f3; --muted:#c9aea6;
  --violet:#f4a6d7; --violet-deep:#d946a8; --brand:#f4a6d7; --selo-sombra:#a78bfa;
  --ac:244,166,215; --ac2:250,205,232; --ac3:217,70,168; --ac4:110,30,80; --ac5:252,220,240;
  --t-ghost:#f9d8ec; --t-mode:#ffe3f3; --t-chip:#efdcd6; --t-hover:#fff0f8;
  --t-dot:#5c3a35; --t-foot:#8a6a62; --t-rule:#ecd9d2; --t-falta:#3a0a26;
  --orb1:#f4a6d7; --orb1-o:.20; --orb2:#a78bfa; --orb2-o:.24; --orb3:#86efac; --orb3-o:.14;
  --modal-a:rgba(40,20,14,.97); --modal-b:rgba(14,6,4,.98); --overlay:rgba(10,4,2,.82);
  --falta-bg:linear-gradient(135deg,#f9b4de,#b79cff); --falta-txt:#2a0a1c;
  --on-accent:#2a0a1c; --meta-theme:#120805;
  --faixa:repeating-linear-gradient(90deg,#f4a6d7 0 40px,#c4b5fd 40px 80px,#86efac 80px 120px,#fde68a 120px 160px); --faixa-h:10px;
  --deco:radial-gradient(ellipse 9px 12px at 40px 40px,#f4a6d7,transparent 70%),radial-gradient(ellipse 8px 11px at 140px 70px,#c4b5fd,transparent 70%),radial-gradient(ellipse 9px 12px at 90px 150px,#86efac,transparent 70%),radial-gradient(ellipse 8px 11px at 200px 180px,#fde68a,transparent 70%),radial-gradient(ellipse 9px 12px at 30px 210px,#c4b5fd,transparent 70%);
  --deco-sz:240px 240px; --deco-o:.35;
}
[data-tema="pascoa"] .selo::after{content:'FELIZ PÁSCOA';}

/* ---------- FESTA JUNINA ---------- */
:root[data-tema="junina"]{
  --bg0:#100602; --bg1:#2a1004; --card:rgba(255,255,255,.045); --card-br:rgba(255,159,28,.28); --track:rgba(255,255,255,.10);
  --txt:#fff8ef; --muted:#c9b09a;
  --violet:#ff9f1c; --violet-deep:#e85d04; --brand:#ff9f1c; --selo-sombra:#e63946;
  --ac:255,159,28; --ac2:255,196,102; --ac3:232,93,4; --ac4:120,40,0; --ac5:255,214,150;
  --t-ghost:#fbd9a8; --t-mode:#ffe6c2; --t-chip:#f0dfcf; --t-hover:#fff1dc;
  --t-dot:#5e3a1e; --t-foot:#8f6a47; --t-rule:#eddccb; --t-falta:#fff0e0;
  --orb1:#ff9f1c; --orb1-o:.26; --orb2:#e63946; --orb2-o:.22; --orb3:#7c2d12; --orb3-o:.40;
  --modal-a:rgba(40,16,6,.97); --modal-b:rgba(14,5,1,.98); --overlay:rgba(10,4,1,.82);
  --falta-bg:linear-gradient(135deg,#e85d04,#9d0208); --falta-txt:#ffffff;
  --on-accent:#2a1000; --meta-theme:#100602;
  /* bandeirinhas de festa junina */
  --faixa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30'%3E%3Cpath d='M0 2H160' stroke='%23ffd166' stroke-width='2'/%3E%3Cpath d='M4 2L36 2L20 28Z' fill='%23e63946'/%3E%3Cpath d='M44 2L76 2L60 28Z' fill='%23ffd166'/%3E%3Cpath d='M84 2L116 2L100 28Z' fill='%232a9d8f'/%3E%3Cpath d='M124 2L156 2L140 28Z' fill='%234361ee'/%3E%3C/svg%3E");
  --faixa-h:30px; --faixa-sz:160px 30px;
  --deco:radial-gradient(2px 2px at 30px 200px,#ffb347,transparent),radial-gradient(3px 3px at 90px 150px,#ff9f1c,transparent),radial-gradient(2px 2px at 150px 220px,#ffd166,transparent),radial-gradient(3px 3px at 200px 120px,#ff7b00,transparent),radial-gradient(2px 2px at 60px 90px,#ffd166,transparent),radial-gradient(2px 2px at 120px 40px,#ffb347,transparent);
  --deco-sz:240px 240px; --deco-o:.5;
}
[data-tema="junina"] body::after{animation:festaDrift 20s linear infinite reverse;}
[data-tema="junina"] .selo::after{content:'FESTA JUNINA';}
[data-tema="junina"] .head{margin-top:14px;}

.h1-main{font-style:normal;}
.head .selo{margin-left:6px;}


/* ============================================================
   MODO PLACAR: todos os squads em tela cheia, líder no meio e maior
   ============================================================ */
body.placar-on{overflow:hidden;}
.placar{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  padding:clamp(14px,2.4vh,34px) clamp(16px,3vw,56px);
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(var(--ac),.26), transparent 70%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 70%);
  color:var(--txt);overflow:hidden;
}
.placar[hidden]{display:none;}
.pl-head{display:flex;align-items:center;gap:20px;flex:none;flex-wrap:wrap;}
.pl-brand{display:flex;flex-direction:column;gap:2px;}
.pl-eyebrow{font-size:clamp(10px,1.1vw,15px);font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--violet);}
.pl-title{font:700 clamp(20px,2.8vw,48px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.02em;}
.pl-total{margin-left:auto;font:600 clamp(13px,1.4vw,22px) 'Inter',sans-serif;color:var(--muted);text-align:right;}
.pl-total b{color:var(--txt);font-family:'Space Grotesk',sans-serif;}
.pl-close{
  cursor:pointer;font:600 13px 'Inter',sans-serif;color:var(--t-mode);
  background:rgba(var(--ac),.22);border:1px solid rgba(var(--ac2),.5);
  padding:8px 16px;border-radius:999px;opacity:.55;transition:opacity .2s;
}
.pl-close:hover{opacity:1;}

.pl-stage{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.8vw,34px);padding:clamp(6px,1.5vh,20px) 0;
}
.pl-card{
  container-type:inline-size;
  flex:1 1 0;max-width:22vw;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:5cqw 4cqw;border-radius:22px;
  background:var(--card);border:1px solid var(--card-br);backdrop-filter:blur(8px);
  transition:flex-grow .7s cubic-bezier(.22,.8,.28,1), max-width .7s cubic-bezier(.22,.8,.28,1), box-shadow .5s, border-color .5s;
  position:relative;
}
.pl-card.lider{
  flex-grow:1.75;max-width:36vw;
  border-color:rgba(var(--ac5),.75);
  box-shadow:0 0 0 1px rgba(var(--ac5),.35), 0 24px 70px rgba(var(--ac3),.55), 0 0 90px rgba(var(--ac),.35);
  background:linear-gradient(180deg, rgba(var(--ac),.20), rgba(var(--ac),.07));
}
.pl-crown{position:absolute;top:0;left:50%;transform:translate(-50%,-62%);font-size:0;transition:font-size .5s;line-height:1;}
.pl-card.lider .pl-crown{font-size:min(7vw,11vh);animation:plFloat 3s ease-in-out infinite;}
@keyframes plFloat{50%{transform:translate(-50%,-70%);}}
.pl-ring{position:relative;width:100%;aspect-ratio:1;}
.pl-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block;overflow:visible;}
.pl-bg{fill:none;stroke:var(--track);stroke-width:9;}
.pl-arc{fill:none;stroke:var(--red);stroke-width:9;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset 1.1s cubic-bezier(.22,.8,.28,1), stroke .4s;}
.st-red .pl-arc{stroke:var(--red);}
.st-orange .pl-arc{stroke:var(--orange);}
.st-green .pl-arc{stroke:var(--green);}
.pl-card.lider .pl-arc{filter:drop-shadow(0 0 6px currentColor);}
.pl-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;}
.pl-num{display:flex;align-items:baseline;justify-content:center;}
.pl-esc{height:19cqw;max-width:60%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));}
.pl-card.lider .pl-esc{height:26cqw;}
.pl-pct b{font-size:17cqw;font-weight:700;}
.pl-pct i{font-style:normal;font-size:8cqw;font-weight:600;margin-left:.8cqw;opacity:.8;}
.pl-pct.long b{font-size:14cqw;}
.pl-card.lider .pl-pct b{font-size:21cqw;}
.pl-card.lider .pl-pct.long b{font-size:17cqw;}
.st-red .pl-pct b{color:var(--red);} .st-orange .pl-pct b{color:var(--orange);} .st-green .pl-pct b{color:var(--green);}
.pl-rank{margin-top:4cqw;font:700 6.5cqw 'Inter',sans-serif;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;}
.pl-card.lider .pl-rank{color:var(--t-hover);}
.pl-nome{font:700 11.5cqw/1.1 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin-top:1.5cqw;overflow-wrap:anywhere;}
.pl-card.lider .pl-nome{font-size:12cqw;}
.pl-coord{margin-top:2cqw;font:600 6.5cqw 'Inter',sans-serif;color:var(--muted);}
.pl-val{margin-top:4cqw;white-space:nowrap;font:600 5.8cqw 'Inter',sans-serif;font-variant-numeric:tabular-nums;}
.pl-val i{font-style:normal;color:var(--muted);font-weight:500;}
.pl-falta{margin-top:1.5cqw;font:500 6.6cqw 'Inter',sans-serif;color:var(--muted);}
.pl-falta b{color:var(--txt);}
.pl-falta.ok b{color:var(--green);}

.pl-foot{flex:none;}
.pl-track{height:clamp(10px,1.6vh,20px);border-radius:999px;background:var(--track);overflow:hidden;}
.pl-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--violet-deep),var(--violet));transition:width 1.1s cubic-bezier(.22,.8,.28,1);}
.pl-foot .pl-fill.st-green{background:var(--green);}
.pl-foot-txt{margin-top:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 clamp(12px,1.2vw,18px) 'Inter',sans-serif;color:var(--muted);}
.pl-foot-txt b{color:var(--txt);}

/* celular / tela estreita: lista vertical, líder no topo e maior */
@media (max-width:760px){
  .placar{overflow-y:auto;}
  .pl-stage{flex-direction:column;align-items:stretch;justify-content:flex-start;flex:none;}
  .pl-card{max-width:none!important;flex:none;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:18px;container-type:normal;}
  .pl-card .pl-ring{width:42%;}
  .pl-card.lider .pl-ring{width:60%;}
  .pl-card .pl-pct b{font-size:clamp(26px,9vw,40px);} .pl-card.lider .pl-pct b{font-size:clamp(36px,12vw,56px);}
  .pl-card .pl-pct i{font-size:16px;padding-bottom:6px;}
  .pl-rank,.pl-nome,.pl-coord,.pl-val,.pl-falta{width:100%;font-size:15px!important;}
  .pl-val{white-space:normal;}
  .pl-nome{font-size:22px!important;}
  .pl-crown{display:none;}
  .pl-card{order:var(--rk)!important;}
  .pl-esc{height:38px!important;}
  .pl-card.lider .pl-esc{height:54px!important;}
  .pl-pct.long b{font-size:clamp(22px,7vw,34px)!important;}
}
@media (prefers-reduced-motion:reduce){.pl-card,.pl-arc,.pl-fill{transition:none;}.pl-card.lider .pl-crown{animation:none;}}

/* ---------- escudo do squad ---------- */
.esc{display:none;flex:none;width:44px;height:44px;border-radius:10px;place-items:center;cursor:pointer;align-self:center;position:relative;}
.esc.tem{display:grid;cursor:default;}
body.unlocked .esc{display:grid;cursor:pointer;}
.esc img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));}
.esc:not(.tem){border:1.5px dashed rgba(var(--ac2),.55);background:rgba(var(--ac),.10);}
.esc:not(.tem):hover{background:rgba(var(--ac),.25);}
.esc.tem .esc-ph{display:none;}
.esc-ph{font-size:20px;opacity:.8;}
body.unlocked .esc.tem{outline:1.5px dashed transparent;} body.unlocked .esc.tem:hover{outline-color:rgba(var(--ac2),.7);}
.esc-rm{align-self:center;}
body.present .esc:not(.tem){display:none;}
.ff-del{margin-left:12px;padding:4px 10px;font-size:12px;}
.fase-hist-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--card-br);color:var(--muted);font-size:13px;}

/* escudo do líder: marca d'água grande ocupando o card todo */
.pl-card.com-esc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:var(--esc) center/92% auto no-repeat;opacity:.36;
  -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
  filter:saturate(1.1);
}
.pl-card.com-esc > *{position:relative;z-index:1;}
.pl-card.com-esc > .pl-crown{position:absolute;}
.pl-card.com-esc .pl-esc{display:none;}
.pl-card.com-esc .pl-nome,.pl-card.com-esc .pl-rank{text-shadow:0 2px 12px rgba(0,0,0,.6);}

/* escudo do líder também como fundo da página toda */
.placar.com-fundo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--esc-pg) center / auto 92% no-repeat;opacity:.13;filter:blur(1.5px) saturate(1.1);
}
.placar > *{position:relative;z-index:1;}

/* ============================================================
   PLACAR EM BOLINHAS: cada squad é uma bolha (sem card quadrado)
   ============================================================ */
.pl-card,.pl-card.lider{
  background:none;border:none;box-shadow:none;backdrop-filter:none;border-radius:0;padding:0;
}
.pl-ring{border-radius:50%;animation:plBob 7s ease-in-out infinite alternate;}
.pl-card:nth-child(2n) .pl-ring{animation-delay:-2.5s;animation-duration:8s;}
.pl-card:nth-child(3n) .pl-ring{animation-delay:-4.5s;}
@keyframes plBob{to{transform:translateY(-6px);}}
/* miolo da bolha: vidro com brilho, dentro do anel de progresso */
.pl-ring::before{
  content:"";position:absolute;inset:7.5%;border-radius:50%;z-index:0;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 55%, rgba(var(--ac),.30), rgba(var(--ac),.10) 70%, rgba(var(--ac),.04));
  box-shadow:inset 0 0 0 1px rgba(var(--ac5),.28), inset 0 -10px 30px rgba(0,0,0,.28), 0 10px 40px rgba(var(--ac4),.45);
}
.pl-card.lider .pl-ring::before{box-shadow:inset 0 0 0 1px rgba(var(--ac5),.5), inset 0 -14px 40px rgba(0,0,0,.3), 0 0 70px rgba(var(--ac),.55), 0 20px 60px rgba(var(--ac3),.5);}
.pl-ring svg,.pl-pct{position:relative;z-index:2;}
.pl-ring svg{position:absolute;inset:0;}
.pl-pct{position:absolute;}
/* escudo do líder preenche a bolha inteira */
.pl-card.com-esc::before{display:none;}
.pl-card.com-esc .pl-ring::after{
  content:"";position:absolute;inset:7.5%;border-radius:50%;z-index:1;pointer-events:none;
  background:var(--esc) center / 78% auto no-repeat;opacity:.26;
}
.pl-crown{transform:translate(-50%,-58%);}
@keyframes plFloat{50%{transform:translate(-50%,-66%);}}
.pl-rank{margin-top:5cqw;}
.pl-nome{text-shadow:0 2px 14px rgba(0,0,0,.55);}
@media (max-width:760px){
  .pl-card,.pl-card.lider{background:var(--card);border:1px solid var(--card-br);border-radius:22px;padding:18px;}
  .pl-ring{animation:none;}
}
@media (prefers-reduced-motion:reduce){.pl-ring{animation:none;}}
.pl-pct b{text-shadow:0 2px 16px rgba(0,0,0,.6);}

/* ---------- pódio: o 1º fica mais alto e os demais descem degrau a degrau ---------- */
.pl-card{transform:translateY(calc(var(--deg,0) * 4.2vh));transition:flex-grow .7s cubic-bezier(.22,.8,.28,1), max-width .7s cubic-bezier(.22,.8,.28,1), transform .9s cubic-bezier(.22,.8,.28,1);}
/* logo circular dentro da bolha */
.pl-esc{width:19cqw;height:19cqw;max-width:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .6cqw rgba(var(--ac5),.55), 0 6px 16px rgba(0,0,0,.45);filter:none;}
.pl-card.lider .pl-esc{width:26cqw;height:26cqw;}
.pl-card.com-esc .pl-ring::after{background-size:cover;opacity:.34;}
@media (max-width:760px){
  .pl-card{transform:none;}
  .pl-esc{width:38px!important;height:38px!important;}
  .pl-card.lider .pl-esc{width:54px!important;height:54px!important;}
}

/* ---------- placar: % embaixo da bolha, logo preenchendo o círculo, coroa acima ---------- */
.pl-card{max-width:min(22vw,27vh);}
.pl-card.lider{max-width:min(32vw,40vh);}
.pl-card.com-esc .pl-ring::after{display:none;}
.pl-esc{position:absolute;inset:11%;width:78%!important;height:78%!important;z-index:2;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .8cqw rgba(var(--ac5),.45), 0 10px 30px rgba(0,0,0,.45);}
.pl-card.com-esc .pl-esc{display:block;}
.pl-esc[hidden],.pl-ini[hidden]{display:none!important;}
.pl-ini{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font:700 30cqw 'Space Grotesk',sans-serif;color:rgba(255,255,255,.85);letter-spacing:-.04em;}
.pl-card.lider .pl-ini{font-size:34cqw;}
.pl-num{margin-top:5cqw;display:flex;align-items:baseline;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 16px rgba(0,0,0,.55);}
.pl-num b{font-size:17cqw;font-weight:700;}
.pl-num i{font-style:normal;font-size:8cqw;font-weight:600;margin-left:.8cqw;opacity:.8;}
.pl-card.lider .pl-num b{font-size:19cqw;}
.pl-num.long b{font-size:15cqw;} .pl-card.lider .pl-num.long b{font-size:17cqw;}
.st-red .pl-num b{color:var(--red);} .st-orange .pl-num b{color:var(--orange);} .st-green .pl-num b{color:var(--green);}
.pl-rank{margin-top:3cqw;}
.pl-crown{transform:translate(-50%,-104%);}
.pl-card.lider .pl-crown{font-size:min(5.5vw,9vh);}
@keyframes plFloat{50%{transform:translate(-50%,-114%);}}
@media (max-width:760px){
  .pl-card,.pl-card.lider{max-width:none!important;}
  .pl-num{width:100%;margin-top:8px;}
  .pl-num b{font-size:clamp(30px,9vw,42px)!important;} .pl-card.lider .pl-num b{font-size:clamp(40px,12vw,58px)!important;}
  .pl-ini{font-size:46px!important;}
}