/* =====================================================================
   BATALHA PARTY — Rodada 20: "Centro de tarefas" (overlay 'tasks' por cima do lobby, idêntico à foto de referência)
   docs/ROUND20-CENTRO-DE-TAREFAS.md §0 (foto) e §4. Arquivo próprio: style.css está com outra rodada.
   Palco fixo 1280x720 (escalado por transform em #stage): nada aqui precisa de media query.
   Estrutura: .tk-backdrop > .tk-wrap (1040x600) > .tk-panel (creme, overflow hidden corta o badge pela esquerda) > .tk-list
   > .tk-row; .tk-ribbon (fita roxa com pontas douradas) e .tk-close (X laranja) ficam FORA do painel para sobrepor a borda.
   Correção (rodada 20): --tk-cut = quantos px do badge de 96px a borda do painel corta. Fica em 30px: a foto pede a metade
   cortada E o nome inteiro dentro do círculo, mas num círculo de 96px as duas coisas não cabem juntas (com 36–48px cortados
   todo nome cairia para 12px ou menos) — 30px é o equilíbrio que mantém o nome legível. O nome fica centralizado na parte
   VISÍVEL do círculo (caixa de --tk-cut+1px até 95px) e screen-tasks.js (fitBadgeName) reduz a fonte de 20px até caber
   dentro do arco (1–2 linhas; 3 linhas quando ficam pelo menos 2px maiores). A prévia do painel usa a MESMA geometria e a
   mesma regra (admin.css .ta-pv-*, pages/tasks.js).
   ===================================================================== */
.overlay.tasks { position: absolute; inset: 0; }
.tk-backdrop { position: absolute; inset: 0; background: rgba(5, 2, 20, .55); display: flex; align-items: center; justify-content: center; }
.tk-wrap { position: relative; width: 1040px; height: 600px; --tk-cut: 44px; }

/* painel creme: borda bege 4px, cantos 22px, linha fina clara tracejada logo abaixo da borda superior */
.tk-panel {
  position: absolute; inset: 0; overflow: hidden; background: #f8f1e1; border: 4px solid #d9c9a3; border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.tk-panel::before { content: ''; position: absolute; left: 14px; right: 14px; top: 9px; border-top: 2px dashed rgba(255, 255, 255, .95); pointer-events: none; z-index: 2; }
.tk-panel::after { content: ''; position: absolute; left: 14px; right: 14px; top: 11px; border-top: 1px dashed rgba(201, 180, 130, .45); pointer-events: none; z-index: 2; }

/* fita-título roxa centralizada sobrepondo a borda (top -26px); pontas douradas dobradas para baixo atrás das extremidades */
.tk-ribbon { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); height: 66px; z-index: 2; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .38)); }
.tk-ribbon::before, .tk-ribbon::after {
  content: ''; position: absolute; top: 15px; width: 78px; height: 58px; z-index: 0;
  background: linear-gradient(#ffd24f 0%, #ffc83d 35%, #ff9a1f 100%);
}
.tk-ribbon::before { left: -46px; transform: rotate(-7deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 50%); border-radius: 5px 0 0 5px; }
.tk-ribbon::after { right: -46px; transform: rotate(7deg); clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); border-radius: 0 5px 5px 0; }
.tk-rb {
  position: relative; z-index: 1; height: 66px; padding: 0 48px; line-height: 64px; border-radius: 7px; white-space: nowrap;
  background: linear-gradient(#ac55f4 0%, #9b3fe6 14%, #7e22d6 68%, #6a12c4 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 1.5px rgba(59, 10, 99, .55);
  font-size: 34px; font-weight: 900; letter-spacing: .3px; color: #ffe9f3;
  -webkit-text-stroke: 1.6px #3b0a63; paint-order: stroke fill; text-shadow: 0 3px 0 #3b0a63, 0 5px 6px rgba(0, 0, 0, .35);
}
/* dobras escuras onde a fita encosta nas pontas */
.tk-rb::before, .tk-rb::after { content: ''; position: absolute; bottom: -9px; width: 0; height: 0; border-style: solid; }
.tk-rb::before { left: 0; border-width: 9px 13px 0 0; border-color: #b8600a transparent transparent transparent; }
.tk-rb::after { right: 0; border-width: 9px 0 0 13px; border-color: #b8600a transparent transparent transparent; }

/* X laranja: círculo 64px com borda marrom-escura e X grosso escuro, sobrepondo o canto do painel */
.tk-close {
  position: absolute; top: -22px; right: -22px; width: 64px; height: 64px; z-index: 3; padding: 0; cursor: pointer;
  border-radius: 50%; border: 3px solid #7a3d00; background: linear-gradient(#ffc043 0%, #ffb020 30%, #ff8a1e 100%);
  box-shadow: 0 4px 0 rgba(90, 40, 0, .6), 0 7px 12px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .4);
  font-size: 0; color: transparent; transition: transform .1s;
}
.tk-close::before, .tk-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 9px; margin: -4.5px 0 0 -17px; border-radius: 4px; background: #3a1d00; transform: rotate(45deg); }
.tk-close::after { transform: rotate(-45deg); }
.tk-close:hover { transform: scale(1.07); }
.tk-close:active { transform: scale(.94); }

/* lista com rolagem; começa --tk-cut à esquerda do painel para o badge "sair" pela borda (o overflow do painel corta) */
.tk-list { position: absolute; left: calc(-1 * var(--tk-cut)); right: 0; top: 48px; bottom: 6px; overflow-x: hidden; overflow-y: auto; }
.tk-list::-webkit-scrollbar { width: 10px; }
.tk-list::-webkit-scrollbar-track { background: transparent; }
.tk-list::-webkit-scrollbar-thumb { background: #d9c9a3; border-radius: 5px; border: 2px solid #f8f1e1; }

/* linha (≈98px) separada por linha fina bege; a descrição começa 26px depois da parte visível do badge (96 - corte + 26) */
.tk-row { position: relative; height: 98px; margin-left: var(--tk-cut); padding: 0 22px 0 calc(122px - var(--tk-cut)); display: flex; align-items: center; gap: 18px; border-bottom: 2px solid #e6d9bd; }
.tk-row:last-child { border-bottom: 0; }
.tk-row.done { opacity: .55; }

/* badge circular laranja (96px) com a parte esquerda cortada pela borda do painel; nome verde itálico com contorno branco */
.tk-badge {
  position: absolute; left: calc(-1 * var(--tk-cut)); top: 1px; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, #ffd166 0%, #ffc44a 40%, #ffab2c 72%, #ff9a1f 100%);
  box-shadow: inset 0 -4px 0 rgba(160, 70, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .4), 0 2px 5px rgba(0, 0, 0, .28);
}
/* nome: caixa centralizada na parte visível do círculo; font-size final vem de screen-tasks.js (fitBadgeName: 20 → 12px);
   contorno branco em em (1.5px a 20px, ~1px a 13px) para não engordar as letras pequenas */
.tk-nm {
  position: absolute; left: 26px; right: -26px; top: 50%; transform: translateY(-50%); text-align: center; /* caixa deslocada para a direita: o nome passa um pouco do círculo e a borda do painel corta 1–2 letras à esquerda, como na foto */
  font-size: 20px; line-height: 1; letter-spacing: -.02em; font-weight: 900; font-style: italic; color: #3fbf2f; overflow-wrap: normal;
  -webkit-text-stroke: .075em #fff; paint-order: stroke fill; text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, .3);
}
.tk-nm.crush { overflow-wrap: anywhere; } /* último recurso: palavra maior que a parte visível mesmo a 12px */
/* mini-chip do período (só diária/semanal) no canto superior direito do badge */
.tk-period { position: absolute; right: -10px; top: 2px; padding: 1px 6px; border-radius: 8px; background: #fff; border: 1.5px solid #3fbf2f; color: #1f6b16; font-size: 11px; line-height: 1.2; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .22); }

/* descrição sublinhada + barra de progresso verde-limão com "13/10" */
.tk-main { flex: 1 1 auto; min-width: 0; }
.tk-desc { display: block; width: 330px; max-width: 100%; padding-bottom: 3px; border-bottom: 2px solid #4a4a4a; font-size: 18px; line-height: 1.15; font-weight: 800; color: #3c3c3c; }
.tk-bar { position: relative; width: 300px; max-width: 100%; height: 22px; margin-top: 8px; border-radius: 11px; background: #c9c9c9; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28); }
.tk-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 11px; background: linear-gradient(#8de23a, #5fc71f); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .35); }
.tk-bar .txt { position: absolute; inset: 0; text-align: center; line-height: 22px; font-size: 16px; font-weight: 800; color: #eaeaea; -webkit-text-stroke: 1px rgba(50, 50, 50, .6); paint-order: stroke fill; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }

/* recompensa: quadrado lilás com o ícone da moeda e "x2" no canto inferior direito */
.tk-rw { flex: 0 0 auto; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tk-reward {
  position: relative; width: 70px; height: 70px; border-radius: 14px; border: 2px solid #9d93b8; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#e6e0f5, #bfb5d9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 3px rgba(0, 0, 0, .2);
}
.tk-reward .ico { display: block; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); }
.tk-x { position: absolute; right: 3px; bottom: 1px; font-size: 16px; line-height: 1; font-weight: 900; color: #fff; -webkit-text-stroke: 1.3px #2b1a3f; paint-order: stroke fill; text-shadow: 0 1px 0 #2b1a3f, 0 1px 3px rgba(0, 0, 0, .45); }
.tk-extra { font-size: 12px; line-height: 1; font-weight: 800; color: #5a4d73; white-space: nowrap; }
.tk-extra .ico { vertical-align: middle; }

/* botão Receber: laranja-dourado (resgatável) / cinza (falta progresso) / cinza "Resgatado" */
.tk-btn {
  flex: 0 0 auto; width: 200px; height: 62px; border: 0; border-radius: 16px; padding: 0 8px; cursor: pointer; font-family: inherit;
  font-size: 28px; font-weight: 900; line-height: 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #3c3c3c; background: linear-gradient(#e9e9ee, #b3b3bd); box-shadow: 0 6px 0 #7a7a86, 0 9px 10px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5); transition: transform .06s, box-shadow .06s, filter .12s;
}
.tk-btn.ready { color: #3a1d00; background: linear-gradient(#ffd24a, #ff9c1a); box-shadow: 0 6px 0 #a05a00, 0 9px 10px rgba(0, 0, 0, .25); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.tk-btn.ready:hover { filter: brightness(1.05); }
.tk-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a7a86, 0 3px 6px rgba(0, 0, 0, .25); }
.tk-btn.ready:active { box-shadow: 0 2px 0 #a05a00, 0 3px 6px rgba(0, 0, 0, .25); }
.tk-btn.done { cursor: default; }
.tk-btn:disabled { cursor: wait; filter: brightness(.92); }

/* carregando / vazio / erro */
.tk-msg { margin-left: var(--tk-cut); padding: 90px 24px; text-align: center; font-size: 24px; font-weight: 800; color: #8a7a58; }
.tk-msg.err { color: #c0392b; }

/* rodada 59: completou todas as tarefas que renovam — aviso no topo da lista (só voltam quando o jogador subir de nível) */
.tk-lock {
  margin: 10px 18px 6px var(--tk-cut); padding: 12px 16px; display: flex; align-items: center; gap: 14px;
  border-radius: 14px; background: linear-gradient(180deg, #fff6d6 0%, #ffe9a8 100%); border: 2px solid #f0c75a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 4px rgba(150, 100, 0, .18); color: #6b4a12;
}
.tk-lock-ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #ffd166, #ff9a1f);
  box-shadow: inset 0 -3px 0 rgba(160, 70, 0, .3), 0 1px 3px rgba(0, 0, 0, .25); position: relative;
}
.tk-lock-ic::before { content: ""; position: absolute; left: 12px; top: 9px; width: 14px; height: 10px; border: 3px solid #fff; border-bottom: 0; border-radius: 8px 8px 0 0; }
.tk-lock-ic::after { content: ""; position: absolute; left: 10px; top: 17px; width: 18px; height: 13px; border-radius: 3px; background: #fff; }
/* "done" (novas amanhã): relógio no lugar do cadeado */
.tk-lock--done .tk-lock-ic { background: radial-gradient(circle at 45% 40%, #8fe36a, #3fbf2f); box-shadow: inset 0 -3px 0 rgba(20, 90, 0, .3), 0 1px 3px rgba(0, 0, 0, .25); }
.tk-lock--done .tk-lock-ic::before { left: 9px; top: 9px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; }
.tk-lock--done .tk-lock-ic::after { left: 17px; top: 12px; width: 5px; height: 6px; border-radius: 0; background: none; border-left: 3px solid #fff; border-bottom: 3px solid #fff; }
.tk-lock-tx { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.tk-lock-tx b { font-size: 18px; font-weight: 900; color: #237a14; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.tk-lock-tx span { font-size: 15px; font-weight: 800; }