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

/* ═══════════ MODO DRAFT ═══════════ */
#screen-draft { align-items:flex-start; }
.dft-wrap { width:100%; max-width:980px; margin:0 auto; padding:0 14px 40px; box-sizing:border-box; }
.dft-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.dft-h2 { font-family:var(--font-title); color:var(--text-color); font-size:1.35rem; letter-spacing:.5px; margin:0; display:flex; align-items:center; }
.dft-brand { margin-left:auto; background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:8px; padding:6px 10px; }
.dft-brand img { height:14px; display:block; }
.dft-p { font-family:var(--font-tech); color:#8b93a3; font-size:.9rem; margin:0 0 18px; }
/* intro */
.dft-intro-hero { text-align:center; max-width:460px; margin:6vh auto 0; background:radial-gradient(120% 120% at 50% 0%,rgba(255,206,0,.12),transparent 60%); border:1px solid rgba(255,207,63,.25); border-radius:22px; padding:34px 26px 30px; }
.dft-intro-ic { font-size:3.4rem; filter:drop-shadow(0 0 18px rgba(255,206,0,.5)); }
.dft-intro-ttl { font-family:var(--font-title); color:#fff; font-size:2.3rem; letter-spacing:2px; margin:6px 0 14px; }
.dft-intro-ttl span { color:var(--gold); text-shadow:0 0 24px rgba(255,206,0,.5); }
.dft-intro-sub { font-family:var(--font-title); color:#fff; font-size:1.2rem; line-height:1.35; letter-spacing:.5px; }
.dft-intro-sub b { color:var(--gold); }
.dft-intro-txt { font-family:var(--font-tech); color:#c3cbd8; font-size:.92rem; line-height:1.6; margin:14px 0 24px; }
.dft-intro-txt b { color:#fff; }
.dft-cta { font-family:var(--font-title); font-size:1.15rem; letter-spacing:1.5px; color:#1a1400; background:linear-gradient(135deg,#ffe600,#ffce00); border:none; border-radius:12px; padding:16px 40px; cursor:pointer; transition:.15s; box-shadow:0 8px 26px rgba(255,206,0,.32); }
.dft-cta:hover { filter:brightness(1.06); transform:translateY(-2px); }
.dft-intro-note { font-family:var(--font-tech); color:#7f8794; font-size:.74rem; margin-top:16px; letter-spacing:.5px; }
/* formação */
.dft-form-grid { display:grid; grid-template-columns:1fr; gap:10px; max-width:520px; }
.dft-form-opt { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; cursor:pointer; transition:.15s; }
.dft-form-opt:hover { border-color:var(--gold); background:rgba(255,207,63,.08); transform:translateY(-2px); }
.dfo-ball { display:none; }
.dfo-name { font-family:var(--font-title); color:#fff; font-size:1.25rem; letter-spacing:1px; }
.dfo-pos { font-family:var(--font-tech); color:#8b93a3; font-size:.68rem; letter-spacing:.5px; }
/* montagem */
.dft-progress { font-family:var(--font-tech); color:var(--gold); font-size:.9rem; margin-bottom:12px; }
.dft-build-grid { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
@media (max-width:820px){ .dft-build-grid { grid-template-columns:1fr; } #draft-pitch{ margin:0 auto; } }
.dft-side { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:16px; }
.dft-bench-ttl { font-family:var(--font-title); color:var(--text-color); font-size:1rem; letter-spacing:.5px; margin-bottom:10px; }
.dft-bench-ttl span { display:block; font-family:var(--font-tech); font-weight:400; color:#8b93a3; font-size:.68rem; letter-spacing:0; margin-top:3px; }
.dft-bench { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.dft-bench-slot { position:relative; aspect-ratio:3/4; background:rgba(0,0,0,.28); border:1.5px dashed rgba(255,255,255,.35); border-radius:8px; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding:0; overflow:hidden; transition:.15s; }
.dft-bench-slot:hover { border-color:var(--gold); }
.dft-bench-slot.filled { border-style:solid; border-color:transparent; }
.dft-bench-slot.sel { border-color:var(--gold) !important; box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(255,206,0,.5); }
.dbs-card { position:absolute; inset:0; background-size:cover; background-position:center 16%; }
.dbs-pos { color:#9aa3b2; font-family:var(--font-tech); font-weight:800; font-size:.7rem; margin-bottom:auto; margin-top:auto; }
.dbs-lbl { position:relative; z-index:2; width:100%; text-align:center; font-family:var(--font-tech); font-weight:800; font-size:.56rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.8)); padding:6px 0 2px; letter-spacing:.5px; }
.dft-finalize { width:100%; font-family:var(--font-title); font-size:1.1rem; letter-spacing:1px; color:#1a1400; background:linear-gradient(135deg,#ffe600,#ffce00); border:none; border-radius:10px; padding:15px 0; cursor:pointer; transition:.15s; box-shadow:0 6px 20px rgba(255,206,0,.28); }
.dft-finalize:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.dft-finalize:not(:disabled):hover { transform:translateY(-2px); filter:brightness(1.06); }
.dft-build-hint { font-family:var(--font-tech); color:#7f8794; font-size:.72rem; text-align:center; margin-top:10px; }

/* ═══ NOTA VIVA — a força do time reagindo a cada carta ═══ */
.dft-nv { margin:2px 0 16px; }
.dft-nv-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dft-nv-lbl { font-family:var(--font-tech); font-size:.64rem; letter-spacing:2.4px; color:#8b93a3; text-transform:uppercase; }
.dft-nv-num { font-family:var(--font-title); font-size:1.9rem; line-height:1; color:var(--gold); transition:color .25s; }
.dft-nv-num.pulso { animation:dftNvPulso .42s cubic-bezier(.2,.9,.2,1); }
@keyframes dftNvPulso { 0%{ transform:scale(1); } 35%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
.dft-nv-delta { font-family:var(--font-tech); font-weight:800; font-size:.9rem; opacity:0; }
.dft-nv-delta.on { animation:dftNvDelta 1.1s ease forwards; }
@keyframes dftNvDelta { 0%{ opacity:0; transform:translateY(6px); } 22%{ opacity:1; transform:translateY(-2px); } 100%{ opacity:0; transform:translateY(-14px); } }
.dft-nv .dft-progress { margin-left:auto; }
.dft-nv-bar { height:9px; border-radius:6px; margin-top:8px; overflow:hidden;
    background:rgba(255,255,255,.06); border:1px solid var(--glass-border); }
.dft-nv-fill { height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg,#2fe38a,#7ef2b0);
    transition:width .5s cubic-bezier(.2,.8,.2,1), background .35s; }
/* faixas: cada patamar tem cor própria, igual à leitura da nota final */
.dft-nv-fill.f-bom  { background:linear-gradient(90deg,var(--gold),#ffd97a); }
.dft-nv-fill.f-meio { background:linear-gradient(90deg,#ff9f43,#ffc078); }
.dft-nv-fill.f-ruim { background:linear-gradient(90deg,#ff4757,#ff8a94); }
.dft-som-wrap { position:relative; }
.dft-som { background:none; border:1px solid var(--glass-border); border-radius:9px; color:#c3cbd8;
    font-size:1rem; line-height:1; min-width:38px; min-height:34px; cursor:pointer; transition:.15s; }
.dft-som:hover { border-color:var(--gold); color:#fff; }
/* Painelzinho de som: volume de verdade, não só liga/desliga */
.dft-vol { position:absolute; top:42px; right:0; z-index:60; width:216px; display:none;
    background:#0e1219; border:1px solid var(--glass-border); border-radius:12px; padding:13px;
    box-shadow:0 22px 50px rgba(0,0,0,.75); }
.dft-vol.open { display:block; }
.dft-vol-ttl { font-family:var(--font-tech); font-size:.56rem; letter-spacing:2px; color:#8b93a3; text-transform:uppercase; margin-bottom:9px; }
.dft-vol-linha { display:flex; justify-content:space-between; align-items:baseline;
    font-family:var(--font-tech); font-size:.72rem; color:#c3cbd8; }
.dft-vol-linha b { color:var(--gold); font-family:var(--font-title); font-size:.95rem; }
#draft-volrange { width:100%; margin:7px 0 11px; accent-color:var(--gold); cursor:pointer; }
.dft-vol-mudo { width:100%; min-height:36px; font-family:var(--font-tech); font-weight:700; font-size:.66rem;
    letter-spacing:1.2px; color:#9aa3b2; background:rgba(255,255,255,.04);
    border:1px solid var(--glass-border); border-radius:8px; cursor:pointer; transition:.14s; }
.dft-vol-mudo:hover { color:#fff; border-color:var(--gold); }
.dft-vol.mudo .dft-vol-mudo { color:#1a1400; background:var(--gold); border-color:var(--gold); }
.dft-vol-chk { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px;
    border-top:1px solid var(--glass-border); cursor:pointer; }
.dft-vol-chk input { width:16px; height:16px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; }
.dft-vol-chk span { font-family:var(--font-tech); font-size:.7rem; color:#c3cbd8; line-height:1.35; }
.dft-vol-nota { font-family:var(--font-tech); font-size:.6rem; line-height:1.45; color:#6f7887; margin-top:6px; }

/* ═══ WALKOUT — só quando cai uma BRIGA PRA TOP 10 ═══ */
#dft-walkout { position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 45%, rgba(60,44,0,.92), rgba(3,5,10,.97)); overflow:hidden; }
#dft-walkout.open { display:flex; }
.dftw-raios { position:absolute; left:50%; top:50%; width:190vmax; height:190vmax; transform:translate(-50%,-50%);
    background:repeating-conic-gradient(from 0deg, rgba(255,214,0,.14) 0deg 7deg, rgba(255,214,0,0) 7deg 14deg);
    animation:dftwGira 9s linear infinite; }
@keyframes dftwGira { to { transform:translate(-50%,-50%) rotate(360deg); } }
/* Sem `both` de propósito: com fill-mode o navegador segura o frame 0 (opacity:0)
   quando a animação não chega a rodar, e o walkout aparecia vazio. Assim o estado
   normal da caixa é VISÍVEL, e a animação é só o tempero da entrada. */
.dftw-box { position:relative; text-align:center; animation:dftwEntra .62s cubic-bezier(.2,.9,.2,1); }
/* Anima SÓ a escala. Se a animação começar em opacity:0 e o relógio de animação
   travar (aba oculta, pane sem composição), o walkout fica invisível pra sempre —
   o mesmo tipo de armadilha que o count-up da nota já tinha. Escala presa em 0.42
   ainda mostra a carta; opacidade presa em 0 não mostra nada. */
@keyframes dftwEntra { 0%{ transform:scale(.42); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
.dftw-img { width:min(56vw,270px); aspect-ratio:3/4; background-size:cover; background-position:center 16%;
    border-radius:14px; margin:0 auto; box-shadow:0 0 60px rgba(255,214,0,.55), 0 26px 60px rgba(0,0,0,.8); }
.dftw-selo { font-family:var(--font-title); font-size:1.5rem; letter-spacing:3px; color:#141200; margin-bottom:16px;
    background:linear-gradient(135deg,#ffe600,#ffd200); display:inline-block; padding:7px 20px; border-radius:9px;
    box-shadow:0 6px 26px rgba(255,214,0,.45); }
.dftw-nome { font-family:var(--font-title); font-size:1.55rem; letter-spacing:1px; color:#fff; margin-top:16px; }
.dftw-meta { font-family:var(--font-tech); font-size:.8rem; letter-spacing:2px; color:#e0c98a; margin-top:5px; }
.dftw-toque { font-family:var(--font-tech); font-size:.66rem; letter-spacing:2px; color:#8b7f52; margin-top:20px; }
.dftw-part { position:absolute; width:7px; height:7px; border-radius:50%; background:#ffd200; pointer-events:none;
    animation:dftwSobe linear forwards; box-shadow:0 0 8px rgba(255,214,0,.9); }
@keyframes dftwSobe { from { transform:translateY(0) scale(1); opacity:.95; } to { transform:translateY(-70vh) scale(.3); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .dftw-raios, .dftw-part { animation:none; }
  .dftw-box { animation:none; }
  .dft-nv-num.pulso, .dft-nv-delta.on { animation:none; }
}
/* categoria badge/glow nas cartas */
.sb-slot-card.c-top, .dbs-card.c-top { box-shadow:0 0 10px rgba(255,206,0,.5); }
.sb-slot-card.c-bad, .dbs-card.c-bad { filter:grayscale(.4); }
.draft-slot-cat { position:absolute; bottom:1px; left:0; right:0; text-align:center; font-family:var(--font-tech); font-weight:800; font-size:.5rem; letter-spacing:.4px; color:#fff; text-shadow:0 1px 3px #000; z-index:4; pointer-events:none; }
.draft-slot-cat.c-top { color:#ffe14d; } .draft-slot-cat.c-vg { color:#5df0c4; } .draft-slot-cat.c-good { color:#8fc0ff; } .draft-slot-cat.c-bad { color:#c2c8d2; }
/* REVEAL modal */
.dft-reveal { position:fixed; inset:0; z-index:920; display:none; align-items:center; justify-content:center; background:rgba(3,5,10,.86); backdrop-filter:blur(6px); padding:16px; }
.dft-reveal.open { display:flex; }
.dft-reveal-box { width:100%; max-width:560px; }
.dft-reveal-head { display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-title); color:#fff; font-size:1.2rem; letter-spacing:1px; position:relative; margin-bottom:4px; }
.dft-reveal-head b { color:var(--gold); }
.dft-reveal-head .sb-x { position:absolute; right:0; top:0; }
.dft-reveal-hint { text-align:center; font-family:var(--font-tech); color:#9aa3b2; font-size:.76rem; margin-bottom:16px; }
.dft-reveal-hint b { color:var(--gold); }
.dft-reveal-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:520px; margin:0 auto; }
.draft-rc { flex:0 0 28%; max-width:150px; background:none; border:none; padding:0; cursor:pointer; perspective:800px; aspect-ratio:3/4.4; }
@media (max-width:520px){ .dft-reveal-cards { gap:9px; } .draft-rc { flex:0 0 29%; } }
.drc-inner { position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.2,.8,.3,1.2); transform-style:preserve-3d; }
.draft-rc.flipped .drc-inner { transform:rotateY(180deg); }
.drc-back, .drc-front { position:absolute; inset:0; backface-visibility:hidden; border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.drc-back { background:linear-gradient(150deg,#1a1f2b,#0b0e14); border:1px solid rgba(255,207,63,.4); }
.drc-back img { width:64%; opacity:.92; filter:drop-shadow(0 0 8px rgba(255,206,0,.35)); }
.drc-front { transform:rotateY(180deg); flex-direction:column; background:#0e1219; border:1px solid var(--glass-border); }
.drc-front.c-top { border-color:#ffd200; box-shadow:0 0 20px rgba(255,206,0,.5); }
.drc-front.c-vg { border-color:#29d3a2; } .drc-front.c-good { border-color:#4a90e2; } .drc-front.c-bad { border-color:#6b7280; }
.drc-img { position:relative; width:100%; flex:1; background-size:cover; background-position:center 16%; }
.drc-ps { position:absolute; top:3px; right:3px; z-index:3; pointer-events:none; }
.drc-ps .card-ps-wrap { flex-direction:column; flex-wrap:nowrap; gap:2px; margin:0; }
.drc-ps .card-ps-icon { width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; max-width:14px !important; max-height:14px !important; border-radius:4px !important; box-shadow:0 1px 3px rgba(0,0,0,.9); }
.drc-cat { width:100%; text-align:center; font-family:var(--font-tech); font-weight:800; font-size:.52rem; letter-spacing:.4px; padding:2px 0; color:#1a1400; }
.drc-front.c-top .drc-cat { background:#ffd200; } .drc-front.c-vg .drc-cat { background:#29d3a2; } .drc-front.c-good .drc-cat { background:#4a90e2; color:#fff; } .drc-front.c-bad .drc-cat { background:#6b7280; color:#fff; }
.drc-name { width:100%; text-align:center; font-family:var(--font-tech); font-weight:700; font-size:.56rem; color:#fff; padding:3px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,.4); }
.drc-pick { width:100%; text-align:center; font-family:var(--font-tech); font-weight:800; font-size:.62rem; letter-spacing:.5px; color:#06251a; background:#29d3a2; padding:5px 0; }
.draft-rc.flipped .drc-pick { animation:drcPickPulse 1.1s ease-in-out infinite; }
@keyframes drcPickPulse { 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.2); } }
/* NOTA */
.dft-nota-box { max-width:440px; margin:5vh auto 0; text-align:center; background:linear-gradient(180deg,#12161f,#0b0e14); border:1px solid rgba(255,207,63,.35); border-radius:20px; padding:30px 26px; }
.dft-nota-lbl { font-family:var(--font-tech); color:#aab2c0; font-size:.82rem; letter-spacing:3px; }
.dft-nota-num { font-family:var(--font-title); color:var(--gold); font-size:6rem; line-height:1; text-shadow:0 0 34px rgba(255,206,0,.5); margin:2px 0; }
.dft-nota-msg { font-family:var(--font-title); color:#fff; font-size:1.05rem; letter-spacing:.5px; min-height:1.3em; margin-bottom:20px; }
.dft-gancho { background:rgba(255,206,0,.08); border:1px solid rgba(255,207,63,.3); border-radius:14px; padding:16px; margin-bottom:20px; }
.dft-gancho-txt { font-family:var(--font-tech); color:#e7ecf3; font-size:.9rem; margin-bottom:12px; }
.dft-gancho-txt b { color:var(--gold); }
.dft-gancho-btns { display:flex; flex-direction:column; gap:8px; }
.dft-copy { font-family:var(--font-tech); font-weight:800; font-size:.85rem; color:#1a1400; background:linear-gradient(135deg,#ffe600,#ffce00); border:none; border-radius:9px; padding:12px; cursor:pointer; }
.dft-euquero { display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-tech); font-weight:800; font-size:.85rem; color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:9px; padding:11px; text-decoration:none; }
.dft-euquero img { height:12px; }
.dft-euquero:hover { border-color:var(--gold); }
/* TORNEIO */
.dft-nota-mini, .dft-nota-mini b { font-family:var(--font-tech); color:#aab2c0; font-size:.85rem; text-align:center; display:block; margin-bottom:16px; }
.dft-nota-mini b { display:inline; color:var(--gold); font-family:var(--font-title); font-size:1.1rem; }
.dft-bracket { max-width:460px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.draft-cursed { position:absolute; top:-9px; left:-7px; font-size:1.05rem; z-index:6; filter:drop-shadow(0 0 3px #000); }
.draft-captain { position:absolute; top:-10px; right:-7px; font-size:1.05rem; z-index:6; filter:drop-shadow(0 0 4px rgba(255,206,0,.8)); }
.dft-match { display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:12px; padding:15px 16px; opacity:0; transform:translateY(8px); animation:dftIn .4s forwards; }
.dft-match-scorers { font-family:var(--font-tech); color:#8fe3c4; font-size:.64rem; margin-top:4px; }
.dft-topscorer { font-family:var(--font-tech); color:var(--gold); font-size:.86rem; margin:-6px 0 18px; }
.dft-match-body { flex:1; display:flex; flex-direction:column; gap:4px; text-align:center; min-width:0; }
.dft-match-line { font-family:var(--font-tech); color:#fff; font-size:.92rem; }
.dft-live-score { display:inline-block; font-family:var(--font-title); font-size:1.5rem; color:#fff; margin:0 7px; will-change:transform; }
.dft-live-score.goal { animation:dftGoalPulse .55s; }
@keyframes dftGoalPulse { 0%{ transform:scale(1); color:#fff; } 35%{ transform:scale(1.5); color:var(--gold); } 100%{ transform:scale(1); color:#fff; } }
.dft-clock { font-family:var(--font-tech); color:#9aa3b2; font-size:.72rem; background:rgba(255,255,255,.07); border-radius:5px; padding:2px 7px; margin-left:6px; }
/* A narração ganhou nome de jogador e tipo de gol — numa linha só com ellipsis a
   frase morria no meio ("GOOOL — FULANO numa pintura de f..."). Duas linhas de
   altura mínima deixam o texto inteiro aparecer sem a linha do jogo pular. */
.dft-narr { font-family:var(--font-tech); color:#8fe3c4; font-size:.78rem; line-height:1.32;
    min-height:2.64em; white-space:normal; overflow-wrap:anywhere; }
.dft-match.live { border-color:rgba(255,255,255,.16); }
.dft-match.win { border-color:rgba(41,211,162,.5); }
.dft-match.loss { border-color:rgba(230,90,90,.5); }
.dft-match-round { font-family:var(--font-tech); color:#8b93a3; font-size:.66rem; letter-spacing:1px; width:66px; flex-shrink:0; }
.dft-match-teams { flex:1; font-family:var(--font-tech); color:#fff; font-size:.82rem; text-align:center; }
.dft-match-score { font-family:var(--font-title); font-size:1.05rem; color:#fff; }
.dft-match-res { font-size:1rem; width:22px; text-align:center; }
@keyframes dftIn { to { opacity:1; transform:translateY(0); } }
/* FIM */
.dft-end-box { max-width:440px; margin:5vh auto 0; text-align:center; padding:34px 26px; border-radius:22px; }
.dft-end-box.champ { background:radial-gradient(120% 120% at 50% 0%,rgba(255,206,0,.2),transparent 62%); border:1px solid rgba(255,207,63,.5); }
.dft-end-box.lose { background:linear-gradient(180deg,#141821,#0b0e14); border:1px solid var(--glass-border); }
.dft-end-ic { font-size:4rem; filter:drop-shadow(0 0 20px rgba(255,206,0,.55)); }
.dft-end-ttl { font-family:var(--font-title); color:#fff; font-size:2rem; letter-spacing:1px; margin:8px 0; }
.dft-end-box.champ .dft-end-ttl { color:var(--gold); text-shadow:0 0 26px rgba(255,206,0,.5); }
.dft-end-sub { font-family:var(--font-tech); color:#c3cbd8; font-size:.95rem; line-height:1.5; margin-bottom:24px; }
.dft-end-btns { display:flex; flex-direction:column; gap:10px; }
.dft-end-again { font-family:var(--font-title); font-size:1.05rem; letter-spacing:1px; color:#1a1400; background:linear-gradient(135deg,#ffe600,#ffce00); border:none; border-radius:11px; padding:14px; cursor:pointer; }
.dft-end-menu { font-family:var(--font-tech); font-weight:700; color:#c3cbd8; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:11px; padding:12px; cursor:pointer; }
.dft-end-menu:hover { color:#fff; border-color:var(--gold); }
/* ═══ ESCOLHAS (dificuldade e esquema tático) ═══ */
.dft-esc { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0; }
.dft-esc button { min-width:104px; padding:10px 14px; cursor:pointer; transition:.14s; border-radius:11px;
    font-family:var(--font-tech); font-weight:700; font-size:.74rem; letter-spacing:.8px;
    color:#9aa3b2; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); }
.dft-esc button:hover { color:#fff; border-color:var(--gold); }
.dft-esc button.on { color:#1a1400; background:var(--gold); border-color:var(--gold); }
.dft-esc button i { display:block; font-style:normal; font-size:1.15rem; line-height:1; margin-bottom:4px; }
.dft-tat-ttl { font-family:var(--font-tech); font-size:.6rem; letter-spacing:2.4px; color:#8b93a3;
    text-transform:uppercase; margin-top:20px; }
.dft-tat-desc { font-family:var(--font-tech); font-size:.74rem; line-height:1.5; color:#8b93a3; min-height:32px; margin:-4px 0 6px; }
.dft-tat-desc b { color:#e0c98a; }
/* frase do Boss na tela da nota */
.dft-boss { font-family:var(--font-tech); font-size:.88rem; line-height:1.55; color:#e8f2ee; text-align:left;
    background:rgba(0,242,255,.06); border:1px solid rgba(0,242,255,.25); border-radius:12px;
    padding:12px 14px; margin:14px 0 4px; display:flex; gap:10px; align-items:flex-start; }
.dft-boss img { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.dft-boss-txt b { color:var(--text-color); }
.dft-boss-quem { font-family:var(--font-tech); font-size:.58rem; letter-spacing:1.6px; color:#7f9aa5;
    text-transform:uppercase; margin-bottom:3px; }
/* re-roll */
.dft-reroll { display:block; width:100%; max-width:340px; margin:14px auto 0; min-height:46px; cursor:pointer;
    font-family:var(--font-tech); font-weight:800; font-size:.76rem; letter-spacing:1.1px; color:#c7cfda;
    background:rgba(255,255,255,.05); border:1px dashed var(--glass-border); border-radius:11px; transition:.14s; }
.dft-reroll span { font-weight:400; opacity:.7; letter-spacing:.5px; }
.dft-reroll:hover { color:#fff; border-color:var(--gold); background:rgba(255,207,63,.1); }
.dft-reroll[disabled] { opacity:.35; cursor:default; }
/* histórico */
.dft-hist { margin-top:16px; }
.dft-hist-ttl { font-family:var(--font-tech); font-size:.58rem; letter-spacing:2px; color:#8b93a3;
    text-transform:uppercase; text-align:center; margin-bottom:8px; }
.dft-hist-l { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
    background:rgba(255,255,255,.03); border:1px solid var(--glass-border); margin-bottom:5px; }
.dft-hist-ic { font-size:.95rem; flex-shrink:0; }
.dft-hist-nota { font-family:var(--font-title); font-size:1rem; color:var(--gold); min-width:26px; }
.dft-hist-txt { flex:1; min-width:0; font-family:var(--font-tech); font-size:.68rem; color:#9aa3b2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dft-hist-data { font-family:var(--font-tech); font-size:.6rem; color:#6f7887; flex-shrink:0; }

/* ═══ RECORDES E TROFÉUS ═══ */
.dft-rec { margin-top:22px; padding-top:18px; border-top:1px solid var(--glass-border); }
.dft-rec-linha { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.dft-rec-box { min-width:88px; padding:9px 12px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); }
.dft-rec-num { font-family:var(--font-title); font-size:1.5rem; line-height:1; color:var(--gold); }
.dft-rec-lbl { font-family:var(--font-tech); font-size:.56rem; letter-spacing:1.6px; color:#8b93a3; text-transform:uppercase; margin-top:4px; }
.dft-rec-desafio { font-family:var(--font-tech); font-size:.82rem; color:#e0c98a; text-align:center; margin-bottom:14px; }
.dft-rec-desafio b { color:var(--gold); font-family:var(--font-title); font-size:1.05rem; }
.dft-trof { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.dft-trof-i { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
    filter:grayscale(1); opacity:.32; cursor:default; }
.dft-trof-i.on { filter:none; opacity:1; border-color:rgba(255,207,63,.5); background:rgba(255,207,63,.1); }
.dft-trof-i.novo { border-color:var(--gold); box-shadow:0 0 16px rgba(255,207,63,.5); }
.dft-novos { font-family:var(--font-tech); font-size:.8rem; line-height:1.6; color:#e0c98a; margin:12px 0;
    background:rgba(255,207,63,.08); border:1px solid rgba(255,207,63,.3); border-radius:11px; padding:11px 13px; }
.dft-novos b { color:var(--gold); }
.dft-end-exp { display:flex; gap:9px; margin-top:12px; }
.dft-end-exp button { flex:1; min-height:48px; font-family:var(--font-tech); font-weight:800; font-size:.72rem; letter-spacing:1.1px;
    color:#c7cfda; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:11px; cursor:pointer; transition:.14s; }
.dft-end-exp button:hover { color:#fff; border-color:var(--gold); background:rgba(255,207,63,.1); }
.dft-end-exp button:disabled { opacity:.5; cursor:default; }

/* ═══ MINI-CAMPO AO VIVO ═══
   Ocupa o lugar do chaveamento enquanto a partida rola. As bolinhas andam com
   setInterval + transição curta — animação de CSS congela quando o navegador não
   está compondo quadros, e o campo ficaria parado. */
.dcp-wrap { width:100%; max-width:460px; margin:8px auto 16px; }
.dcp-placar { display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:9px; flex-wrap:wrap; }
.dcp-time { display:flex; align-items:center; gap:6px; font-family:var(--font-tech); font-weight:700;
    font-size:.72rem; letter-spacing:.5px; color:#c7cfda; }
.dcp-cor { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dcp-cor.me { background:var(--text-color,#00f2ff); }
.dcp-cor.foe { background:#ff5566; }
.dcp-num { font-family:var(--font-title); font-size:1.6rem; line-height:1; color:#fff; min-width:20px;
    text-align:center; transition:transform .18s, color .18s; }
.dcp-num.pulso { transform:scale(1.38); color:var(--gold); }
.dcp-x { font-family:var(--font-title); font-size:.9rem; color:#5d6673; }
.dcp-relogio { font-family:var(--font-tech); font-size:.66rem; letter-spacing:1.4px; color:var(--gold);
    background:rgba(232,183,58,.1); border:1px solid rgba(232,183,58,.3); border-radius:20px; padding:2px 9px; }
.dcp-campo { position:relative; width:100%; aspect-ratio:3/2; border-radius:12px; overflow:hidden;
    box-shadow:inset 0 0 46px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.5); }
.dcp-faixa { position:absolute; top:0; bottom:0; }
.dcp-linha { position:absolute; background:rgba(255,255,255,.16); }
.dcp-circulo { position:absolute; left:50%; top:50%; width:19%; aspect-ratio:1; transform:translate(-50%,-50%);
    border:2px solid rgba(255,255,255,.16); border-radius:50%; }
.dcp-area { position:absolute; top:22%; height:56%; width:14%; border:2px solid rgba(255,255,255,.16); }
.dcp-gol { position:absolute; top:38%; height:24%; width:2.6%; background:rgba(255,255,255,.1);
    border:2px solid rgba(255,255,255,.28); }
/* MINHAS CARTAS em campo (fixas, na formação escolhida) */
.dcp-carta { position:absolute; width:30px; height:40px; margin:-20px 0 0 -15px; border-radius:5px;
    background-size:cover; background-position:center 16%; background-color:#05070d; z-index:3;
    box-shadow:0 3px 9px rgba(0,0,0,.7); transition:box-shadow .2s, transform .2s; }
.dcp-carta.dono { box-shadow:0 0 0 2px #fff, 0 0 18px rgba(255,255,255,.8), 0 4px 12px rgba(0,0,0,.7);
    transform:scale(1.12); z-index:5; }
/* CAMISA do adversário, na cor do país */
.dcp-camisa { position:absolute; width:28px; height:30px; margin:-15px 0 0 -14px; z-index:3;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.7)); transition:filter .2s, transform .2s; }
.dcp-camisa svg { width:100%; height:100%; display:block; }
.dcp-camisa .num { font-family:var(--font-tech); font-weight:700; font-size:8.5px; }
.dcp-camisa.dono { filter:drop-shadow(0 0 7px #fff) drop-shadow(0 3px 7px rgba(0,0,0,.7)); transform:scale(1.14); z-index:5; }
/* etiqueta com o nome — aparece SÓ em quem está com a bola */
.dcp-tag { position:absolute; z-index:7; transform:translate(-50%,0); pointer-events:none;
    font-family:var(--font-tech); font-weight:700; font-size:.56rem; letter-spacing:.4px; color:#fff;
    background:rgba(5,8,14,.88); border:1px solid rgba(255,255,255,.22); border-radius:5px;
    padding:2px 6px; white-space:nowrap; opacity:0; transition:opacity .2s, left .25s, top .25s; }
.dcp-tag.on { opacity:1; }
/* a bola viaja em LINHA RETA, como num pebolim (linear, não suavizada) */
.dcp-bola { position:absolute; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; z-index:6;
    background:radial-gradient(circle at 35% 30%,#fff,#b9c5d1);
    /* contorno escuro forte: a bola passa POR CIMA das cartas, e sem ele o branco
       da bola sumia em cima do branco da arte da carta */
    box-shadow:0 0 0 2.5px rgba(0,0,0,.75), 0 0 18px rgba(255,255,255,.95), 0 2px 8px rgba(0,0,0,.8);
    transition:left .3s linear, top .3s linear; }
.dcp-rastro { position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
    background:rgba(255,255,255,.5); z-index:4; pointer-events:none; animation:dcpSome .55s linear forwards; }
@keyframes dcpSome { to { opacity:0; transform:scale(.3); } }
.dcp-flash { position:absolute; inset:0; opacity:0; pointer-events:none; z-index:7;
    background:radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%); }
.dcp-flash.on { animation:dcpFlash .7s ease-out; }
@keyframes dcpFlash { 0%{ opacity:.55; } 100%{ opacity:0; } }
.dcp-golzao { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:8;
    font-family:var(--font-title); font-size:2.6rem; letter-spacing:5px; color:#fff; opacity:0;
    pointer-events:none; text-shadow:0 4px 22px rgba(0,0,0,.9); }
.dcp-golzao.on { animation:dcpGolzao 1.5s cubic-bezier(.2,.9,.2,1); }
@keyframes dcpGolzao { 0%{opacity:0;transform:scale(.5)} 25%{opacity:1;transform:scale(1.1)} 75%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.05)} }
@media (max-width:560px){
  .dcp-carta { width:24px; height:32px; margin:-16px 0 0 -12px; }
  .dcp-camisa { width:23px; height:25px; margin:-12.5px 0 0 -11.5px; }
  .dcp-tag { font-size:.5rem; padding:1px 4px; }
  .dcp-golzao { font-size:2rem; } }
@media (prefers-reduced-motion: reduce){ .dcp-bola { transition:none; } .dcp-rastro { display:none; } }

/* ═══ CHAVEAMENTO DO MUNDIAL ═══ */
.dft-chv-wrap { width:100%; overflow-x:auto; padding-bottom:6px; margin:8px 0 18px; }
.dft-chv { display:flex; gap:9px; min-width:max-content; margin:0 auto; }
.dft-chv-fase { min-width:136px; flex:1; background:rgba(255,255,255,.03); border:1px solid var(--glass-border);
    border-radius:11px; padding:9px 10px; opacity:.5; transition:.3s; }
.dft-chv-fase.atual  { opacity:1; border-color:var(--gold); box-shadow:0 0 22px rgba(255,207,63,.2); }
.dft-chv-fase.ganhou { opacity:1; border-color:rgba(47,227,138,.5); }
.dft-chv-fase.perdeu { opacity:.9; border-color:rgba(255,71,87,.5); }
.dft-chv-lbl { font-family:var(--font-tech); font-size:.55rem; letter-spacing:1.6px; color:#8b93a3;
    text-transform:uppercase; text-align:center; margin-bottom:7px; }
.dft-chv-time { display:flex; align-items:center; gap:5px; font-family:var(--font-tech); font-size:.72rem;
    color:#c7cfda; padding:3px 5px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dft-chv-time.eu { color:#fff; font-weight:700; }
.dft-chv-time.win { background:rgba(47,227,138,.13); color:#3ff29a; }
.dft-chv-time.out { opacity:.38; filter:grayscale(.75); }
.dft-chv-vs { font-family:var(--font-tech); font-size:.5rem; letter-spacing:1.4px; color:#5d6673; text-align:center; margin:1px 0; }
.dft-chv-res { text-align:center; font-family:var(--font-title); font-size:.82rem; color:#8b93a3; margin-top:6px; min-height:15px; }
.dft-chv-res.win { color:#3ff29a; }
.dft-chv-res.loss { color:#ff6b78; }
.dft-pen { color:#ff8a94; font-family:var(--font-tech); font-size:.8rem; }

/* ═══ overlays do torneio (substituição e pênaltis) ═══ */
.dft-ov { position:fixed; inset:0; z-index:9400; display:none; align-items:center; justify-content:center;
    background:rgba(3,5,10,.9); backdrop-filter:blur(5px); padding:16px; }
.dft-ov.open { display:flex; }
.dsub-box, .dpen-box { width:100%; max-width:420px; background:#0e1219; border:1px solid var(--glass-border);
    border-radius:16px; padding:20px 18px; box-shadow:0 30px 70px rgba(0,0,0,.8); }
.dsub-ttl { font-family:var(--font-title); font-size:1.15rem; letter-spacing:.6px; color:#fff; text-align:center; }
.dsub-sub { font-family:var(--font-tech); font-size:.8rem; color:#8b93a3; text-align:center; margin:8px 0 14px; }
.dsub-list { display:flex; flex-direction:column; gap:7px; max-height:46vh; overflow-y:auto; }
.dsub-op { display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; transition:.13s;
    background:rgba(255,255,255,.03); border:1px solid var(--glass-border); border-radius:10px; padding:8px 10px; }
.dsub-op:hover { border-color:var(--gold); background:rgba(255,207,63,.08); }
.dsub-img { width:38px; height:51px; border-radius:5px; background-size:cover; background-position:center 16%; flex-shrink:0; background-color:#05070d; }
.dsub-info { flex:1; min-width:0; }
.dsub-nome { font-family:var(--font-tech); font-weight:700; font-size:.88rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsub-meta { font-family:var(--font-tech); font-size:.68rem; color:#8b93a3; margin-top:2px; }
.dsub-custo { font-family:var(--font-title); font-size:1.15rem; flex-shrink:0; }
.dsub-custo.baixo { color:#3ff29a; } .dsub-custo.medio { color:#ff9f43; } .dsub-custo.alto { color:#ff6b78; }
.dsub-ok { width:100%; min-height:46px; font-family:var(--font-tech); font-weight:800; font-size:.78rem; letter-spacing:1.2px;
    color:#1a1400; background:var(--gold); border:none; border-radius:10px; cursor:pointer; }
.dsub-nota { font-family:var(--font-tech); font-size:.66rem; line-height:1.5; color:#6f7887; text-align:center; margin-top:13px; }

.dpen-ttl { font-family:var(--font-title); font-size:1.3rem; letter-spacing:2px; color:#fff; text-align:center; }
.dpen-sub { font-family:var(--font-tech); font-size:.78rem; color:#8b93a3; text-align:center; margin:7px 0 14px; }
.dpen-placar { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.dpen-linha { display:flex; align-items:center; gap:9px; }
.dpen-flag { font-size:1.1rem; width:26px; flex-shrink:0; }
.dpen-marks { flex:1; display:flex; gap:5px; }
.dpen-marks i { width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.1); font-style:normal; }
.dpen-marks i.gol { background:#3ff29a; box-shadow:0 0 8px rgba(47,227,138,.6); }
.dpen-marks i.erro { background:#ff4757; }
.dpen-linha b { font-family:var(--font-title); font-size:1.4rem; color:var(--gold); min-width:24px; text-align:right; }
.dpen-gol { position:relative; height:54px; border-radius:9px; overflow:hidden; margin-bottom:14px;
    background:linear-gradient(180deg,#134b2b,#0e3d22); border:2px solid rgba(255,255,255,.22); }
.dpen-zona { position:absolute; top:0; bottom:0; background:rgba(47,227,138,.3); border-left:2px solid #3ff29a; border-right:2px solid #3ff29a; }
.dpen-mira { position:absolute; top:-3px; bottom:-3px; width:5px; background:#fff; border-radius:3px; box-shadow:0 0 12px rgba(255,255,255,.9); }
.dpen-bt { width:100%; min-height:56px; font-family:var(--font-title); font-size:1.15rem; letter-spacing:2px;
    color:#1a1400; background:linear-gradient(135deg,#ffe600,#ffce00); border:none; border-radius:12px; cursor:pointer; transition:.13s; }
.dpen-bt:hover { filter:brightness(1.06); }
.dpen-bt:disabled { opacity:.45; cursor:default; }
.dpen-msg { font-family:var(--font-tech); font-size:.74rem; line-height:1.5; color:#8b93a3; text-align:center; margin-top:11px; min-height:34px; }
.dpen-msg b { color:#fff; }

.dft-confetti { position:fixed; top:-10px; font-size:1.2rem; z-index:930; pointer-events:none; animation:dftFall linear forwards; }
@keyframes dftFall { to { transform:translateY(105vh) rotate(360deg); opacity:.2; } }