:root{
  --verde:#0a7d4f; --verde-esc:#075c39; --ouro:#f2c14e; --ouro-esc:#d9a521;
  --tinta:#11241c; --papel:#f7f4ec; --cinza:#e7e2d6; --suave:#fffdf7;
  --vit:#1d9d62; --der:#d2543f; --sombra:0 4px 14px rgba(0,0,0,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--papel);color:var(--tinta);line-height:1.45}
img{display:block;max-width:100%}

header{background:linear-gradient(135deg,var(--verde),var(--verde-esc));color:#fff;padding:18px 16px;box-shadow:var(--sombra)}
.cab{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
header h1{font-size:1.35rem;letter-spacing:.3px}
header h1 small{display:block;font-weight:400;opacity:.85;font-size:.72rem;letter-spacing:2px;text-transform:uppercase}
.btn-atualizar{background:var(--ouro);color:var(--tinta);border:none;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;box-shadow:var(--sombra);transition:.15s}
.btn-atualizar:hover{background:var(--ouro-esc)}
.btn-atualizar:disabled{opacity:.6;cursor:wait}
.sync-msg{font-size:.8rem;opacity:.95;width:100%;text-align:right}

nav{background:var(--verde-esc);position:sticky;top:0;z-index:10}
.tabs{max-width:1100px;margin:0 auto;display:flex;overflow-x:auto}
.tab{flex:0 0 auto;background:none;border:none;color:#cfe9dd;padding:13px 18px;font-size:.92rem;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab.ativa{color:#fff;border-bottom-color:var(--ouro)}

main{max-width:1100px;margin:0 auto;padding:18px 16px 60px}
h2.titulo{font-size:1.15rem;margin-bottom:14px;color:var(--verde-esc);display:flex;align-items:center;gap:8px}

.grid{display:grid;gap:12px}
.grid-sel{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid-fig{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}

.card{background:var(--suave);border:1px solid var(--cinza);border-radius:14px;padding:12px;box-shadow:var(--sombra);cursor:pointer;transition:.15s}
.card:hover{transform:translateY(-2px)}
.card .flag{font-size:2rem}
.card .nome{font-weight:700;margin-top:4px}
.card .grp{font-size:.78rem;color:#6b7d73}

/* figurinhas */
.fig{background:var(--suave);border:1px solid var(--cinza);border-radius:14px;overflow:hidden;box-shadow:var(--sombra);position:relative;text-align:center}
.fig.coletada{outline:3px solid var(--ouro)}
.fig .foto{width:100%;aspect-ratio:3/4;object-fit:cover;background:#dfe7e2}
.fig .ph{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#cfe0d7,#aecbbd);font-size:2rem;font-weight:800;color:#fff}
.fig .info{padding:8px}
.fig .info b{font-size:.85rem;display:block;line-height:1.2}
.fig .info span{font-size:.72rem;color:#6b7d73}
.fig .credito{font-size:.6rem;color:#9aa89f;padding:0 6px 6px}
.fig .num{position:absolute;top:6px;left:6px;background:var(--verde);color:#fff;font-size:.72rem;font-weight:700;border-radius:6px;padding:1px 6px}
.fig .col{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:.9rem}
.fig .edit{position:absolute;top:6px;right:36px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:.8rem}

/* modal de imagem */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:#fff;border-radius:16px;padding:20px;max-width:430px;width:100%;box-shadow:var(--sombra)}
.modal h3{font-size:1.05rem;margin-bottom:12px;color:var(--verde-esc)}
.modal label{display:block;font-size:.82rem;margin:14px 0 5px;color:#6b7d73;font-weight:600}
.modal .busca{display:inline-block;background:var(--ouro);color:var(--tinta);padding:9px 14px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.86rem}
.modal .linha{display:flex;gap:6px}
.modal input[type=url]{flex:1;padding:10px;border:1px solid var(--cinza);border-radius:9px;font-size:.88rem}
.modal input[type=file]{width:100%;font-size:.85rem;padding:8px 0}
.modal button{background:var(--verde);color:#fff;border:none;border-radius:9px;padding:10px 16px;cursor:pointer;font-weight:700}
.modal .fechar{background:#d9d4c8;color:#333;margin-top:16px;width:100%}
.modal .status{font-size:.84rem;color:#6b7d73;min-height:20px;margin-top:10px}

/* filtros */
.filtros{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filtros select,.filtros input{padding:9px 12px;border:1px solid var(--cinza);border-radius:10px;font-size:.9rem;background:#fff}
/* ===== SIMULADOR (Caminho do Brasil) — tema escuro com brilho ===== */
.sim{background:linear-gradient(160deg,#06281b,#0a3d2a 55%,#06223a);border-radius:18px;padding:18px 16px 26px;color:#eaf5ee;box-shadow:var(--sombra);position:relative;overflow:hidden}
.sim::before{content:"";position:absolute;top:-40%;left:50%;width:120%;height:120%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(242,193,78,.18),transparent 70%);pointer-events:none}

.sim-top{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative}
.sim-top .titulo{color:#fff}
.sim-tools{display:flex;gap:6px}
.sim-ghost{background:rgba(255,255,255,.12);color:#eaf5ee;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;font-size:.78rem;cursor:pointer}
.sim-ghost:hover{background:rgba(255,255,255,.2)}
.sim-sub{color:var(--ouro);font-weight:600;font-size:.86rem;margin:2px 0 12px;position:relative}
.sim-bar{height:8px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden;margin-bottom:18px;position:relative}
.sim-bar-fill{height:100%;background:linear-gradient(90deg,var(--vit),var(--ouro));border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}

.ladder{position:relative}
.step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;margin:0 auto 12px;max-width:520px;transition:.35s}
.step.locked{opacity:.4;filter:saturate(.5)}
.step.passed{border-left:4px solid var(--vit);padding-top:10px}
.step.active{border-color:var(--ouro);transform:scale(1.02);animation:glow 2s ease-in-out infinite}
.step-tag{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ouro);font-weight:800;margin-bottom:8px}
.match{display:flex;align-items:stretch;gap:8px}
.team{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.05)}
.team .fl{font-size:2rem;line-height:1}
.team .nm{font-weight:700;font-size:.9rem;text-align:center}
.team .det{font-size:.64rem;color:#9fc3b1;text-align:center}
.team.br{background:linear-gradient(180deg,rgba(29,157,98,.4),rgba(242,193,78,.16))}
.vsb{align-self:center;font-weight:900;color:var(--ouro);font-size:1.05rem;flex:0 0 auto}
.team.opp.reveal{animation:flipIn .5s ease}
.team.opp.defeated{animation:shakeFall .9s forwards}
.winning .team.br{animation:pulseGreen .9s}
.team.opp.aberta{justify-content:flex-start;gap:5px;padding:10px 8px}
.team .nm.und{color:#ffd97a}
.pool-cap{font-size:.68rem;color:#9fc3b1;margin-top:6px;text-align:center;line-height:1.3}
.pool{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:5px;max-height:150px;overflow:auto}
.chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 9px;font-size:.72rem;color:#eaf5ee;white-space:nowrap}
.chip .cf{font-size:.95rem;line-height:1}
.cnt{margin-top:4px;color:#9fc3b1;font-weight:600;font-size:.8rem}
.step-foot{margin-top:9px;font-size:.72rem;color:#9fc3b1;text-align:center}
.advance{display:block;width:100%;margin-top:12px;border:none;border-radius:999px;padding:13px;font-weight:800;font-size:.98rem;cursor:pointer;color:#06281b;background:linear-gradient(90deg,var(--ouro),#ffd97a);box-shadow:0 6px 18px rgba(242,193,78,.35);transition:.15s}
.advance:hover{transform:translateY(-1px)}
.advance:disabled{opacity:.7;cursor:wait}
.advance.final{background:linear-gradient(90deg,#ffe14d,#ffb300);animation:pulseBtn 1.2s infinite}
.check{margin-top:8px;text-align:center;color:#5be39a;font-weight:700;font-size:.82rem}

/* tela de escolha do cenário */
.sim-hero{text-align:center;padding:22px 10px;position:relative}
.sim-ball{font-size:3rem;animation:bob 1.6s ease-in-out infinite}
.sim-hero h2{color:#fff;margin:6px 0}
.sim-hero p{color:#cfe9dd;font-size:.92rem}
.sim-choices{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.sim-choice{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:18px 22px;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.2s;min-width:120px}
.sim-choice:hover{border-color:var(--ouro);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.sim-choice .pos{font-size:1.9rem;font-weight:900;color:var(--ouro)}
.sim-choice .lbl{font-size:.76rem;color:#cfe9dd}

/* troféu */
.trophy{text-align:center;opacity:0;height:0;overflow:hidden}
.trophy.show{opacity:1;height:auto;padding:18px 10px 4px;animation:popIn .7s cubic-bezier(.2,1.4,.4,1)}
.trophy .cup{font-size:5rem;filter:drop-shadow(0 0 22px rgba(242,193,78,.85));animation:bob 2s ease-in-out infinite}
.trophy .tw{font-weight:900;letter-spacing:3px;color:var(--ouro);font-size:1.05rem;margin-top:6px}
.trophy .tx{font-size:1.4rem;font-weight:800;color:#fff;margin-top:2px}
.confete{position:fixed;inset:0;pointer-events:none;z-index:9999}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes flipIn{0%{transform:rotateY(90deg);opacity:0}100%{transform:rotateY(0);opacity:1}}
@keyframes shakeFall{0%{transform:translateX(0)}15%{transform:translateX(-6px) rotate(-3deg)}30%{transform:translateX(6px) rotate(3deg)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}100%{transform:translateY(42px) rotate(9deg);opacity:.12;filter:grayscale(1)}}
@keyframes pulseGreen{0%{box-shadow:0 0 0 0 rgba(29,157,98,.7)}70%{box-shadow:0 0 0 18px rgba(29,157,98,0)}100%{box-shadow:0 0 0 0 rgba(29,157,98,0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 2px rgba(242,193,78,.4),0 8px 24px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 3px rgba(242,193,78,.85),0 10px 32px rgba(0,0,0,.55)}}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes popIn{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

.contador{font-size:.82rem;color:#6b7d73;margin-left:auto;align-self:center}

/* tabela de classificação */
.grupo-bloco{margin-bottom:22px}
.grupo-bloco h3{background:var(--verde);color:#fff;padding:7px 12px;border-radius:10px 10px 0 0;font-size:.95rem}
table{width:100%;border-collapse:collapse;background:var(--suave);border-radius:0 0 10px 10px;overflow:hidden;font-size:.85rem}
th,td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--cinza)}
th{background:#eef3ef;font-weight:700}
td.time{text-align:left;font-weight:600;white-space:nowrap}
tr.classif td{background:rgba(29,157,98,.08)}

/* jogos */
.dia{margin-bottom:16px}
.dia h3{font-size:.92rem;color:var(--verde-esc);margin-bottom:6px;border-bottom:2px solid var(--cinza);padding-bottom:3px}
.jogo{display:flex;align-items:center;gap:8px;background:var(--suave);border:1px solid var(--cinza);border-radius:10px;padding:9px 12px;margin-bottom:6px;font-size:.9rem}
.jogo .t1{flex:1;text-align:right;font-weight:600}
.jogo .t2{flex:1;text-align:left;font-weight:600}
.jogo .placar{font-weight:800;background:var(--tinta);color:#fff;border-radius:7px;padding:3px 9px;min-width:54px;text-align:center}
.jogo .hora{font-weight:700;color:#6b7d73;min-width:54px;text-align:center;font-size:.8rem}
.jogo .loc{flex-basis:100%;font-size:.72rem;color:#9aa89f;text-align:center}
.tag-grp{background:var(--ouro);color:var(--tinta);font-size:.68rem;font-weight:700;border-radius:5px;padding:1px 6px}

/* artilharia */
.art{display:flex;align-items:center;gap:12px;background:var(--suave);border:1px solid var(--cinza);border-radius:10px;padding:10px 14px;margin-bottom:6px}
.art .pos{font-weight:800;color:var(--ouro-esc);width:26px}
.art .g{margin-left:auto;font-weight:800;background:var(--verde);color:#fff;border-radius:7px;padding:2px 10px}

/* chat */
.chat-box{display:flex;flex-direction:column;height:62vh;background:var(--suave);border:1px solid var(--cinza);border-radius:14px;overflow:hidden}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;font-size:.9rem}
.msg.user{align-self:flex-end;background:var(--verde);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--cinza);border-bottom-left-radius:4px}
.msg .fonte{font-size:.66rem;opacity:.6;margin-top:5px}
.feedback{display:flex;gap:8px;margin-top:8px}
.feedback button{border:1px solid var(--cinza);background:#fff;border-radius:8px;padding:5px 12px;cursor:pointer;font-size:.82rem}
.feedback button:hover{background:#eef3ef}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--cinza);background:#fff}
.chat-input input{flex:1;padding:11px 14px;border:1px solid var(--cinza);border-radius:999px;font-size:.92rem}
.chat-input button{background:var(--verde);color:#fff;border:none;border-radius:999px;padding:0 20px;font-weight:700;cursor:pointer}

.carregando{text-align:center;color:#6b7d73;padding:40px}
.erro{background:#fdecea;border:1px solid #f5c6cb;color:#a3372c;padding:12px;border-radius:10px;margin-bottom:14px;font-size:.88rem}