@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;600&family=Yellowtail&display=swap");

/* ===== Base ===== */
:root { --ouro:#ffd21f; --borda:#b8930a; --suave:#a79f8c; --ouro-metal:linear-gradient(180deg,#ffe566 0%,#e0b100 55%,#b98b00 100%); --painel:linear-gradient(180deg,#1a1a1f,#0b0b0d); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; padding:20px 20px 40px; color:#fff; font-family:Barlow,system-ui,sans-serif; position:relative;
  background:radial-gradient(800px 420px at 50% -10%,rgba(255,210,31,.14),transparent 70%),
             radial-gradient(520px 360px at 100% 100%,rgba(255,210,31,.06),transparent 70%),
             radial-gradient(520px 360px at 0% 60%,rgba(255,210,31,.04),transparent 70%),
             repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),#08080a; }
body:has(.nav) { padding-bottom:128px; }
body::before { content:""; position:fixed; inset:0; background:url(logo.png) center 55%/min(70vmin,620px) no-repeat; opacity:.055; pointer-events:none; }
main { position:relative; max-width:1180px; margin:0 auto; }
.w520 { max-width:520px; } .w640 { max-width:640px; }

/* ===== Título ===== */
.titulo { text-align:center; margin-bottom:22px; }
h1 { margin:0; font-family:Anton,Impact,sans-serif; font-weight:400; font-size:clamp(2.4rem,8vw,5.2rem); line-height:1.25; letter-spacing:1px;
  background:var(--ouro-metal); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 0 rgba(0,0,0,.55)); }
.titulo.menor h1 { font-size:clamp(2rem,7vw,3.4rem); }
.mes { display:block; margin-top:-.65em; position:relative; font-family:Yellowtail,cursive; font-size:clamp(1.8rem,5vw,3.2rem); color:#fff; text-shadow:0 2px 8px #000; }
.sub { margin:10px 0 0; color:#cfc7b2; }

/* ===== Abas ===== */
.abas { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.aba { position:relative; isolation:isolate; padding:9px 26px; font-family:Anton,sans-serif; font-size:1rem; letter-spacing:.4px; color:#d9d2bd; text-decoration:none; }
.aba::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--borda); background:var(--painel); }
.aba.ativa { color:#111; }
.aba.ativa::before { background:var(--ouro-metal); border-color:#f0cf4a; }
.aba:focus-visible, .nv:focus-visible { outline:2px solid var(--ouro); outline-offset:3px; }

/* ===== Tabela em paralelogramos ===== */
.cab, .linha { display:grid; gap:8px; }
.g4 { grid-template-columns:150px 1fr 210px 150px; }
.g3 { grid-template-columns:150px 1fr 150px; }
.cab { background:#fff; color:#111; height:52px; align-items:center; margin-bottom:10px; font-family:Anton,sans-serif; font-size:1.05rem; }
.cab span { padding:0 18px; }
.cab .centro { text-align:center; }
.cab .pts-t { color:#d9a800; }
.linha { height:44px; margin-bottom:7px; }
.linha.alta { height:62px; }
.c { position:relative; isolation:isolate; display:flex; align-items:center; padding:0 18px; min-width:0; }
.c::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--borda); background:var(--painel); }
.rk::before, .pt::before { background:var(--ouro-metal); border-color:#f0cf4a; }
.rk { justify-content:center; gap:8px; color:#111; font-family:Yellowtail,cursive; font-size:1.7rem; }
.rk svg { display:block; }
.nm { font-family:Anton,sans-serif; font-size:1.2rem; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; }
.nm > span { overflow:hidden; text-overflow:ellipsis; }
.nmu { flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
.trilho { align-self:stretch; height:6px; background:rgba(255,255,255,.12); }
.barra { height:100%; background:linear-gradient(90deg,color-mix(in srgb,var(--cor) 55%,#000),var(--cor)); transition:width .9s ease; }
.un { gap:8px; color:#d9d2bd; font-weight:600; }
.un i { width:9px; height:9px; border-radius:50%; background:var(--cor); box-shadow:0 0 7px var(--cor); flex:none; }
.pt { justify-content:center; color:#111; font-family:Anton,sans-serif; font-size:1.5rem; }
.subiu .c::before { animation:flash 1.6s ease; }
@keyframes flash { 0% { filter:brightness(2.4); } 100% { filter:brightness(1); } }
.vazio { text-align:center; color:var(--suave); padding:24px; }

/* ===== Atalhos do rodapé ===== */
/* Barra fixa no rodapé: Agenda (esquerda), Ranking (centro, em destaque), Missões (direita). Só ícones. */
.nav { position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:20;
  width:min(440px,calc(100% - 24px)); display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:12px; align-items:end; padding:10px 18px;
  background:rgba(10,10,13,.78); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(184,147,10,.5); box-shadow:0 12px 34px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); }
.nv { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; height:46px; color:#e9d9a0; text-decoration:none;
  transition:transform .18s ease, color .18s ease; -webkit-tap-highlight-color:transparent; }
.nv::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--borda); background:var(--painel); transition:box-shadow .18s ease, border-color .18s ease; }
a.nv:hover { transform:translateY(-3px); }
a.nv:hover::before { border-color:var(--ouro); box-shadow:0 0 16px rgba(255,210,31,.35); }
.nv.centro { height:60px; margin-top:-26px; color:#111; }
.nv.centro::before { background:var(--ouro-metal); border-color:#f0cf4a; box-shadow:0 0 22px rgba(255,210,31,.45), 0 8px 18px rgba(0,0,0,.55); }
.nv.atual:not(.centro)::before { border-color:var(--ouro); box-shadow:0 0 14px rgba(255,210,31,.35); }
.nv.off { opacity:.45; cursor:not-allowed; }
.nv svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nv.centro svg { width:30px; height:30px; stroke-width:2; }

.status { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:24px; color:var(--suave); font-size:.9rem; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--ouro); box-shadow:0 0 9px var(--ouro); }
.dot.off { background:#d9534f; box-shadow:none; }

/* ===== Formulários e botões ===== */
label { display:block; font-weight:600; margin:0 0 6px; color:#d9d2bd; }
select, input { width:100%; font:inherit; font-size:1.05rem; color:#fff; padding:13px 14px; margin-bottom:18px; background:var(--painel); border:1px solid var(--borda); border-radius:2px; }
select:focus, input:focus { outline:2px solid var(--ouro); outline-offset:2px; }
option { background:#141418; color:#fff; }
.btn { font-family:Anton,sans-serif; font-size:1.1rem; letter-spacing:.5px; text-transform:uppercase; color:#111; background:var(--ouro-metal); border:0; padding:14px 26px; cursor:pointer;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%); }
.btn.sec { color:#e9d9a0; background:linear-gradient(180deg,#3a3320,#1a1a1f); }
.btn.peq { padding:9px 20px; font-size:.95rem; }
.btn.largo { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.msg { margin-top:18px; padding:13px 16px; background:#141418; border-left:5px solid var(--ouro); }
.msg.erro { border-left-color:#e5484d; color:#ffb4ab; }
.msg:empty { display:none; }
.topo { display:flex; justify-content:flex-end; margin-bottom:8px; }
.pedido { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:14px 30px 14px 18px; margin-bottom:10px;
  background:var(--painel); border-left:6px solid var(--ouro); clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%); }
.pedido h3 { margin:0; font-family:Anton,sans-serif; font-weight:400; font-size:1.25rem; letter-spacing:.4px; text-transform:uppercase; }
.pedido p { margin:2px 0 0; color:#cfc7b2; }
.acoes { display:flex; gap:8px; }

@media (max-width:720px) {
  .g4, .g3 { grid-template-columns:84px 1fr 96px; }
  .g4 .un, .cab .h-un { display:none; }
  .nm { font-size:1rem; } .rk { font-size:1.35rem; } .pt { font-size:1.25rem; }
  .c, .cab span { padding:0 10px; }
  .pedido { grid-template-columns:1fr; padding-right:34px; }
}
@media (prefers-reduced-motion:reduce) { .subiu .c::before { animation:none; } .barra { transition:none; } }

/* ===== Cadastro (diretoria) ===== */
.novo { display:flex; gap:10px; align-items:flex-start; margin-bottom:22px; }
.novo input { margin:0; flex:1; }
.nota { color:#cfc7b2; margin:0 0 16px; }
@media (max-width:720px) { .novo { flex-direction:column; } .novo .btn { width:100%; } }

/* ===== Seletores dentro de formulários e cartões ===== */
.novo select { margin:0; width:auto; flex:0 0 190px; }
.acoes { flex-wrap:wrap; justify-content:flex-end; }
.acoes select { width:auto; margin:0; padding:8px 10px; font-size:.95rem; }
@media (max-width:720px) { .novo select { flex:none; width:100%; } .acoes { justify-content:flex-start; } }

/* ===== Menu lateral da diretoria ===== */
.menu { position:fixed; top:0; left:0; bottom:0; width:240px; z-index:30; padding:20px 14px; display:flex; flex-direction:column; gap:4px; overflow-y:auto;
  background:linear-gradient(180deg,#14141a,#0a0a0c); border-right:1px solid var(--borda); }
.menu nav { display:flex; flex-direction:column; gap:4px; }
.menu .marca { display:flex; align-items:center; gap:10px; padding:0 6px 14px; margin-bottom:10px; border-bottom:1px solid rgba(184,147,10,.35); }
.menu .marca img { width:44px; height:auto; }
.menu .marca span { font-family:Anton,sans-serif; font-size:1rem; letter-spacing:.4px; line-height:1.1; color:var(--ouro); text-transform:uppercase; }
.menu .rodape { margin-top:auto; padding-top:12px; border-top:1px solid rgba(184,147,10,.35); }
.mi { position:relative; isolation:isolate; display:flex; align-items:center; gap:10px; padding:11px 14px; color:#d9d2bd; text-decoration:none;
  font-family:Anton,sans-serif; font-size:.98rem; letter-spacing:.4px; text-transform:uppercase; }
.mi::before { content:""; position:absolute; inset:0; transform:skewX(-14deg); z-index:-1; border:1px solid transparent; }
.mi:hover:not(.off)::before { border-color:var(--borda); background:rgba(255,210,31,.06); }
.mi.atual { color:#111; }
.mi.atual::before { background:var(--ouro-metal); border-color:#f0cf4a; }
.mi.off { opacity:.45; cursor:not-allowed; }
.mi:focus-visible { outline:2px solid var(--ouro); outline-offset:2px; }
.mi svg { width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mi small { margin-left:auto; font-family:Barlow,sans-serif; font-size:.7rem; text-transform:none; letter-spacing:0; color:var(--suave); }
.menu-btn, .menu-fundo { display:none; }
body.com-menu { padding-left:268px; }
.pedido.inativa { opacity:.55; }
.fm { display:grid; grid-template-columns:1fr 120px; gap:0 10px; margin-bottom:22px; }
.fm .larga { grid-column:1 / -1; }
.acoes-form { display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:900px) {
  body.com-menu { padding-left:20px; padding-top:76px; }
  .menu { transform:translateX(-100%); visibility:hidden; transition:transform .25s, visibility .25s; box-shadow:8px 0 30px rgba(0,0,0,.6); }
  .menu.aberto { transform:none; visibility:visible; }
  .menu-btn { display:flex; align-items:center; justify-content:center; position:fixed; top:12px; left:12px; z-index:40; width:46px; height:46px; cursor:pointer;
    background:var(--painel); border:1px solid var(--borda); color:var(--ouro); }
  .menu-btn svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
  .menu-btn:focus-visible { outline:2px solid var(--ouro); outline-offset:2px; }
  .menu-fundo.aberto { display:block; position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.6); }
}
@media (max-width:720px) { .fm { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .menu { transition:none; } }
@media (max-width:900px) { .menu { padding-top:72px; } }
.nota a { color:#f5c518; }

/* ===== Marca do app (topo das páginas públicas) ===== */
.marca-app { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 2px 12px; margin-bottom:22px; position:relative; }
.marca-app::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--ouro),rgba(184,147,10,.25) 55%,transparent); }
.marca-app img { height:42px; width:auto; display:block; filter:drop-shadow(0 2px 10px rgba(255,210,31,.18)); }
.marca-app .clube { font-family:Anton,sans-serif; font-size:.95rem; letter-spacing:1.2px; text-transform:uppercase; color:#cfc7b2; text-align:right; }
.logo-app { display:block; width:min(250px,70%); height:auto; margin:6px auto 22px; filter:drop-shadow(0 4px 18px rgba(255,210,31,.2)); }

/* ===== Legenda das medalhas ===== */
.legenda { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; margin:-4px 0 22px; font-size:.82rem; font-weight:600; color:var(--suave); }
.legenda span { display:inline-flex; align-items:center; gap:6px; }
.legenda b { font-family:Anton,sans-serif; font-weight:400; letter-spacing:.6px; text-transform:uppercase; color:var(--m); }
.legenda svg { width:22px; height:22px; filter:drop-shadow(0 0 5px var(--m)); }

/* ===== Grupos por medalha ===== */
.grupo { --m:#ffd21f; --mb:rgba(255,210,31,.3); margin-top:26px; }
.grupo:first-child { margin-top:12px; }
.grupo.bronze { --m:#e08a4a; --mb:rgba(224,138,74,.32); }
.grupo.prata { --m:#cfd6de; --mb:rgba(207,214,222,.28); }
.grupo.ouro { --m:#ffd21f; --mb:rgba(255,210,31,.32); }
.grupo.diamante { --m:#6fe3ff; --mb:rgba(111,227,255,.34); }
.grupo.sem { --m:#8b8574; --mb:rgba(139,133,116,.18); }
.grupo-cab { display:flex; align-items:center; gap:14px; margin:0 0 12px 6px; }
.grupo-tag { position:relative; isolation:isolate; display:flex; align-items:center; gap:10px; padding:5px 28px 5px 14px;
  font-family:Anton,sans-serif; font-size:1.2rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--m); }
.grupo-tag::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--m); background:linear-gradient(180deg,#1b1b21,#0a0a0c);
  box-shadow:0 0 18px var(--mb), inset 0 0 14px var(--mb); }
.grupo-tag svg { width:30px; height:30px; flex:none; filter:drop-shadow(0 0 6px var(--m)); }
.grupo-linha { flex:1; height:1px; background:linear-gradient(90deg,var(--m),transparent); opacity:.55; }
.grupo-qtd { font-size:.82rem; font-weight:600; color:var(--suave); white-space:nowrap; }
.grupo .nm::before { border-color:color-mix(in srgb,var(--m) 50%,#2a2205); }
.linha.alta { height:70px; }
.nmu .nome { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.nmu .trilho { height:7px; margin-top:1px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.nmu .barra { position:relative; box-shadow:0 0 10px color-mix(in srgb,var(--cor) 60%,transparent); }
.nmu .barra::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:220% 100%; background-position:160% 0; animation:brilho-barra 3.4s ease-in-out infinite; }
.dica { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-family:Barlow,sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--suave); }
.dica span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dica b { flex:none; font-family:Anton,sans-serif; font-weight:400; font-size:.8rem; letter-spacing:.6px; color:var(--cor); }

/* ===== Efeitos ===== */
main { animation:surgir .55s ease both; }
@keyframes surgir { from { opacity:0; } to { opacity:1; } }
.entrada .linha { animation:entra .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 55ms); }
.entrada .barra { animation:cresce 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 55ms + 150ms); }
@keyframes entra { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@keyframes cresce { from { width:0; } }
@keyframes brilho-barra { 0%,35% { background-position:160% 0; } 80%,100% { background-position:-60% 0; } }
.rk::before, .pt::before { background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) 160% 0/260% 100% no-repeat, var(--ouro-metal); animation:varre 6.5s ease-in-out infinite; animation-delay:calc(var(--i,0) * 220ms); }
@keyframes varre { 0%,55% { background-position:160% 0, 0 0; } 90%,100% { background-position:-70% 0, 0 0; } }
.linha.top1 .rk::before, .linha.top1 .pt::before { box-shadow:0 0 22px rgba(255,210,31,.5); }
.linha:not(.subiu) .nm::before { transition:border-color .2s; }
.linha:hover .nm::before { border-color:var(--m, var(--ouro)); }
.aba { transition:transform .18s ease, color .18s ease; }
.aba:hover { transform:translateY(-2px); color:#fff; }
.aba.ativa:hover { color:#111; }
h1 { position:relative; }
.btn { transition:transform .15s ease, filter .15s ease; }
.btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.btn:active:not(:disabled) { transform:none; }

@media (max-width:720px) {
  .marca-app img { height:34px; }
  .marca-app .clube { font-size:.8rem; }
  .legenda { gap:6px 14px; font-size:.75rem; }
  .grupo-tag { font-size:1.05rem; padding-right:22px; }
  .grupo-qtd { font-size:.72rem; }
  .linha.alta { height:68px; }
  .c.nm { padding-right:26px; }
  .dica { font-size:.64rem; letter-spacing:.2px; }
  .linha.g3 { grid-template-columns:72px 1fr 80px; }
  .cab.g3 { grid-template-columns:72px 1fr 80px; }
  .nav { padding:9px 14px; gap:10px; }
}
@media (max-width:420px) {
  .grupo-qtd { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  main, .entrada .linha, .entrada .barra, .rk::before, .pt::before, .nmu .barra::after { animation:none !important; }
  .nv, .aba, .btn { transition:none; }
}

/* ===== Página Progressão (diretoria) ===== */
.nivel { --m:#ffd21f; display:grid; grid-template-columns:44px 1fr 170px; align-items:center; gap:16px; padding:14px 34px 14px 18px; margin-bottom:10px;
  background:var(--painel); border-left:6px solid var(--m); clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%); }
.nivel > svg { width:42px; height:42px; filter:drop-shadow(0 0 7px var(--m)); }
.nivel h3 { margin:0; font-family:Anton,sans-serif; font-weight:400; font-size:1.3rem; letter-spacing:.8px; text-transform:uppercase; color:var(--m); }
.nivel p { margin:2px 0 0; color:#cfc7b2; font-size:.92rem; }
.nivel .campo label { margin:0 0 4px; font-size:.78rem; color:var(--suave); text-transform:uppercase; letter-spacing:.5px; }
.nivel input { margin:0; text-align:center; font-family:Anton,sans-serif; font-size:1.35rem; padding:9px 10px; }
.nivel.sem { --m:#8b8574; opacity:.85; }
.nivel .fixo { font-family:Anton,sans-serif; font-size:1.2rem; text-align:center; color:var(--suave); }
.nivel.bronze { --m:#e08a4a; } .nivel.prata { --m:#cfd6de; } .nivel.ouro { --m:#ffd21f; } .nivel.diamante { --m:#6fe3ff; }
#form .acoes-form { margin-top:20px; }
@media (max-width:720px) {
  .nivel { grid-template-columns:44px 1fr; padding-right:30px; }
  .nivel .campo, .nivel .fixo { grid-column:1 / -1; }
  .nivel .fixo { text-align:left; }
}

/* ===== Botão da diretoria (topo das páginas públicas) ===== */
.btn-dir { position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:8px; padding:9px 24px; font-family:Anton,sans-serif; font-size:.9rem; letter-spacing:1px; text-transform:uppercase; color:var(--ouro); text-decoration:none; transition:transform .18s ease, color .18s ease; }
.btn-dir::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--borda); background:var(--painel); box-shadow:0 0 14px rgba(255,210,31,.12); transition:background .18s ease, border-color .18s ease; }
.btn-dir svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn-dir:hover { transform:translateY(-2px); color:#111; }
.btn-dir:hover::before { background:var(--ouro-metal); border-color:#f0cf4a; }
.btn-dir:focus-visible { outline:2px solid var(--ouro); outline-offset:3px; }
.temp-datas { margin:2px 0 0; color:var(--suave); font-size:.82rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; }
.temp-datas:empty { display:none; }

/* ===== Moldura de foto (paralelogramo, mesmo estilo das linhas) ===== */
.foto { --t:48px; position:relative; display:block; flex:none; width:var(--t); height:var(--t); }
.foto::before, .foto > i { content:""; position:absolute; clip-path:polygon(16% 0,100% 0,84% 100%,0 100%); }
.foto::before { inset:0; background:var(--ouro-metal); }
.foto > i { inset:2px; display:grid; place-items:center; overflow:hidden; font-style:normal; font-family:Anton,sans-serif; font-size:calc(var(--t) * .36); letter-spacing:.5px; color:var(--ouro);
  background:radial-gradient(circle at 35% 25%,#33301f,#101012 70%); }
.foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Dentro do quadrado amarelo da linha: moldura escura, como um encaixe para a foto */
.rk .foto { --t:46px; order:3; }
.rk .foto::before { background:#15120a; }
.rk .foto > i { background:radial-gradient(circle at 35% 25%,#33301f,#0f0e0a 70%); }
.linha.fotos { grid-template-columns:200px 1fr 150px; }
.linha.fotos .rk { padding:0 22px; gap:6px; }

.linha.fotos .rk .tr { order:2; }

/* ===== Pódios por período ===== */
.podios { max-width:680px; margin:0 auto 34px; }
.podio-abas { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.podio-aba { position:relative; isolation:isolate; border:0; background:none; cursor:pointer; padding:7px 22px; font-family:Anton,sans-serif; font-size:.88rem; letter-spacing:.6px; text-transform:uppercase; color:#d9d2bd; transition:color .18s ease, transform .18s ease; }
.podio-aba::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--borda); background:var(--painel); }
.podio-aba.ativa { color:#111; }
.podio-aba.ativa::before { background:var(--ouro-metal); border-color:#f0cf4a; }
.podio-aba:hover:not(.ativa) { color:#fff; transform:translateY(-2px); }
.podio-aba:focus-visible { outline:2px solid var(--ouro); outline-offset:3px; }
.podio-periodo { margin:0 0 16px; text-align:center; color:var(--suave); font-size:.8rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; }
.podio { display:flex; align-items:flex-end; justify-content:center; gap:12px; }
.degrau { --m:#ffd21f; flex:1 1 0; min-width:0; max-width:200px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.degrau.d2 { --m:#cfd6de; } .degrau.d3 { --m:#e08a4a; }
.degrau .foto.grande { --t:64px; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--m) 45%,transparent)); }
.degrau.d1 .foto.grande { --t:84px; }
.degrau .foto::before { background:linear-gradient(180deg,color-mix(in srgb,var(--m) 85%,#fff),var(--m) 55%,color-mix(in srgb,var(--m) 60%,#000)); }
.degrau .foto > i { color:var(--m); }
.degrau-nome { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:Anton,sans-serif; font-size:1.05rem; letter-spacing:.4px; text-transform:uppercase; }
.degrau-base { position:relative; isolation:isolate; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#111; font-family:Anton,sans-serif; }
.degrau-base::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid color-mix(in srgb,var(--m) 70%,#fff);
  background:linear-gradient(180deg,color-mix(in srgb,var(--m) 85%,#fff),var(--m) 55%,color-mix(in srgb,var(--m) 60%,#000)); }
.degrau.d1 .degrau-base { height:88px; box-shadow:0 0 26px rgba(255,210,31,.28); }
.degrau.d2 .degrau-base { height:68px; }
.degrau.d3 .degrau-base { height:54px; }
.degrau-base b { font-family:Yellowtail,cursive; font-weight:400; font-size:1.9rem; line-height:1; }
.degrau-base span { font-size:1.05rem; letter-spacing:.4px; }
.degrau.vazio-d { opacity:.35; }
.degrau.vazio-d .degrau-base span:empty { display:none; }
.podio .degrau { animation:surgir-podio .6s cubic-bezier(.2,.8,.2,1) both; }
.podio .d1 { animation-delay:.15s; } .podio .d3 { animation-delay:.3s; }
@keyframes surgir-podio { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (max-width:720px) {
  .linha.fotos, .cab.fotos { grid-template-columns:104px 1fr 80px; }
  .linha.fotos .rk { padding:0 12px; gap:5px; font-size:1.2rem; }
  .linha.fotos .rk .tr { display:none; }
  .rk .foto { --t:38px; }
  .btn-dir { padding:8px 18px; font-size:.82rem; }
  .podios { margin-bottom:26px; }
  .podio { gap:8px; }
  .degrau .foto.grande { --t:52px; }
  .degrau.d1 .foto.grande { --t:66px; }
  .degrau-nome { font-size:.88rem; }
  .degrau.d1 .degrau-base { height:76px; } .degrau.d2 .degrau-base { height:58px; } .degrau.d3 .degrau-base { height:46px; }
  .degrau-base b { font-size:1.5rem; } .degrau-base span { font-size:.92rem; }
  .podio-aba { padding:6px 16px; font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce) { .podio .degrau { animation:none !important; } .btn-dir, .podio-aba { transition:none; } }

/* ===== Página Competição (diretoria) ===== */
input[type=date] { color-scheme:dark; }
.bloco-titulo { margin:30px 0 10px; font-family:Anton,sans-serif; font-weight:400; font-size:1.3rem; letter-spacing:.8px; text-transform:uppercase; color:var(--ouro); }
.bloco-sub { margin:-4px 0 14px; color:#cfc7b2; font-size:.95rem; }
.fm.datas { grid-template-columns:1fr 1fr; }
.fm.datas .larga { grid-column:1 / -1; }
.chk { display:flex; align-items:center; gap:10px; margin:0 0 18px; cursor:pointer; font-weight:600; }
.chk input { width:20px; height:20px; margin:0; accent-color:#ffd21f; flex:none; }
.selo { display:inline-block; margin-left:8px; padding:2px 10px; font-family:Anton,sans-serif; font-weight:400; font-size:.72rem; letter-spacing:.8px; color:#111; background:var(--ouro-metal); vertical-align:middle; transform:skewX(-14deg); }
.selo > span { display:inline-block; transform:skewX(14deg); }
.podio-cfg h3 { margin:0; font-family:Anton,sans-serif; font-weight:400; font-size:1.2rem; letter-spacing:.4px; text-transform:uppercase; }
.podio-cfg p { margin:2px 0 0; color:#cfc7b2; font-size:.9rem; }
.podio-cfg .chaves { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.chave { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; font-size:.92rem; color:#e6dfc9; margin:0; user-select:none; }
.chave input { position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; }
.chave .tr-ch { position:relative; flex:none; width:40px; height:22px; background:#26262c; border:1px solid var(--borda); border-radius:12px; transition:background .18s ease; }
.chave .tr-ch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#8b8574; transition:transform .18s ease, background .18s ease; }
.chave input:checked + .tr-ch { background:#5a4a0c; }
.chave input:checked + .tr-ch::after { transform:translateX(18px); background:var(--ouro); }
.chave input:focus-visible + .tr-ch { outline:2px solid var(--ouro); outline-offset:2px; }
.chave input:disabled + .tr-ch { opacity:.4; }
.chave input:disabled ~ span { opacity:.5; }
@media (max-width:720px) { .fm.datas { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .chave .tr-ch, .chave .tr-ch::after { transition:none; } }
@media (max-width:720px) {
  .podio-cfg .chaves { flex-direction:row; flex-wrap:wrap; gap:8px 20px; }
}

/* A dica ("faltam X para Y" + %) ocupa a largura da coluna: o texto encurta com "…" e o % nunca some */
.nmu .dica { align-self:stretch; min-width:0; }
.nmu .nome { align-self:stretch; }
@media (max-width:420px) {
  .dica .alvo { display:none; }
  .linha.fotos, .cab.fotos { grid-template-columns:96px 1fr 76px; }
  .linha.fotos .rk { padding:0 10px; gap:4px; font-size:1.1rem; }
  .rk .foto { --t:36px; }
  .linha.g3 .pt { font-size:1.2rem; }
}

/* ===== Ranking v3: fotos, bordas por medalha, pódio com seletores, efeitos ===== */
.linha.m-bronze  { --m:#b87333; --m1:#d9955a; --m2:#7a4a1f; }
.linha.m-prata   { --m:#c9cdd3; --m1:#eceef1; --m2:#8d939b; }
.linha.m-ouro    { --m:#ffd21f; --m1:#ffe566; --m2:#b98b00; }
.linha.m-diamante{ --m:#8fe3f5; --m1:#d2f6fc; --m2:#4aa8c8; }
.linha.m-sem     { --m:#4a463a; --m1:#6b6656; --m2:#33302a; }

.linha.fotos { grid-template-columns:116px 1fr 150px; height:74px; transition:transform .22s ease, filter .22s ease; }
.linha.fotos .rk { padding:0; }
.linha.fotos .rk::before { display:none; }
.linha.fotos:hover { transform:translateY(-2px); }
.linha.fotos:hover .nm::before { box-shadow:0 0 18px color-mix(in srgb,var(--m) 45%,transparent); }
.linha.top1 { margin-top:16px; }

/* Caixa da foto: preenche tudo, com a borda da cor da medalha */
.cx { position:absolute; inset:0; transform:skewX(-22deg); overflow:hidden; z-index:0; border:2px solid var(--m);
  background:radial-gradient(circle at 35% 25%,#2d2b20,#0d0d0f 75%); box-shadow:0 0 14px color-mix(in srgb,var(--m) 30%,transparent); }
.cx .in { position:absolute; inset:0; transform:skewX(22deg) scale(1.45); display:grid; place-items:center; }
.cx img { width:100%; height:100%; object-fit:cover; display:block; }
.sil { width:40px; height:40px; fill:var(--m, var(--ouro)); opacity:.75; }
.linha.top1 .cx { box-shadow:0 0 24px color-mix(in srgb,var(--m) 60%,transparent); }
.selo-m { position:absolute; left:-6px; bottom:-9px; width:34px; height:34px; z-index:3; filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.selo-m svg { display:block; width:100%; height:100%; }
.linha:hover .selo-m { transform:scale(1.18) rotate(-6deg); }
.m-sem .selo-m { color:var(--m); background:#14130f; border-radius:50%; padding:4px; width:30px; height:30px; border:1px solid var(--m2); }
.coroa { position:absolute; top:-19px; right:14px; width:30px; height:23px; z-index:4; filter:drop-shadow(0 2px 6px rgba(255,210,31,.55)); animation:flutua 2.8s ease-in-out infinite; }
@keyframes flutua { 0%,100% { transform:translateY(0) rotate(7deg); } 50% { transform:translateY(-3px) rotate(10deg); } }

/* Caixa do nome e dos pontos nas cores da medalha */
.linha.fotos .nm::before { border:1.5px solid var(--m); background:linear-gradient(180deg,color-mix(in srgb,var(--m) 4%,#17160f),#0b0b0d); }
.linha.fotos .nm::after { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--m) 24%,transparent) 50%,transparent 60%) 160% 0/260% 100% no-repeat;
  animation:varre1 8s ease-in-out infinite; animation-delay:calc(var(--i,0) * 300ms); }
@keyframes varre1 { 0%,60% { background-position:160% 0; } 92%,100% { background-position:-70% 0; } }
.linha.fotos .pt::before { background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) 160% 0/260% 100% no-repeat, var(--ouro-metal); border-color:#f0cf4a; box-shadow:0 0 14px rgba(255,210,31,.28); }
.linha.fotos.top1 .pt::before { box-shadow:0 0 24px rgba(255,210,31,.5); }

/* Título com brilho e luz ambiente */
.titulo:not(.menor) h1 { background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) 160% 0/250% 100% no-repeat, var(--ouro-metal);
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:varre 7s ease-in-out infinite; }
body::after { content:""; position:fixed; left:-20vmax; top:-20vmax; width:60vmax; height:60vmax; z-index:-1; pointer-events:none;
  background:radial-gradient(circle,rgba(255,210,31,.08),transparent 62%); animation:deriva 24s ease-in-out infinite alternate; }
@keyframes deriva { to { transform:translate(55vmax,35vmax); } }

/* Seletores do pódio */
.podio-controles { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.sel { display:flex; flex-direction:column; gap:4px; min-width:190px; margin:0; }
.sel[hidden] { display:none; }
.sel > span { padding-left:16px; font-size:.68rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--suave); }
.sel-in { position:relative; isolation:isolate; }
.sel-in::before { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; border:1px solid var(--borda); background:var(--painel); transition:border-color .18s, box-shadow .18s; }
.sel-in:hover::before, .sel-in:focus-within::before { border-color:var(--ouro); box-shadow:0 0 14px rgba(255,210,31,.25); }
.sel-in::after { content:""; position:absolute; right:18px; top:50%; width:7px; height:7px; margin-top:-6px; border:solid var(--ouro); border-width:0 2px 2px 0; transform:rotate(45deg); pointer-events:none; }
.sel select { appearance:none; -webkit-appearance:none; width:100%; border:0; background:transparent; color:#fff; cursor:pointer; padding:10px 40px 10px 22px; font-family:Anton,sans-serif; font-size:1rem; letter-spacing:.4px; border-radius:0; }
.sel select:focus { outline:none; }
.sel select option { background:#16161a; color:#fff; font-family:Barlow,sans-serif; }

/* Pódio mais vivo */
.podio { position:relative; isolation:isolate; padding-top:30px; }
.podio::before { content:""; position:absolute; inset:-10px -4% 0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 90%,rgba(255,210,31,.22),transparent 65%); animation:pulsa 4s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.podio .degrau { position:relative; }
.podio .coroa { position:static; width:34px; height:26px; margin-bottom:-4px; animation:flutua 2.8s ease-in-out infinite; }
.podio .degrau .foto { animation:cai .7s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:.35s; }
.podio .d1 .foto { animation-delay:.5s; }
.podio .degrau-base { transform-origin:50% 100%; animation:sobe .75s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.15s; }
.degrau-base::after { content:""; position:absolute; inset:0; transform:skewX(-22deg); z-index:-1; pointer-events:none; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) 160% 0/260% 100% no-repeat; animation:varre1 6s ease-in-out infinite; }
@keyframes cai { from { opacity:0; transform:translateY(-28px); } }
@keyframes sobe { from { transform:scaleY(0); opacity:.2; } }

@media (max-width:720px) {
  .linha.fotos, .cab.fotos { grid-template-columns:92px 1fr 80px; height:74px; }
  .selo-m { width:28px; height:28px; left:-4px; bottom:-8px; }
  .m-sem .selo-m { width:25px; height:25px; padding:3px; }
  .sil { width:34px; height:34px; }
  .coroa { width:26px; height:20px; top:-16px; right:10px; }
  .sel { min-width:150px; flex:1 1 150px; max-width:240px; }
  .sel select { font-size:.92rem; padding-left:18px; }
}
@media (max-width:420px) { .linha.fotos, .cab.fotos { grid-template-columns:84px 1fr 74px; } }
@media (prefers-reduced-motion:reduce) {
  .coroa, .podio::before, body::after, .degrau-base::after, .linha.fotos .nm::after, .titulo:not(.menor) h1,
  .podio .degrau .foto, .podio .degrau-base { animation:none !important; }
  .linha.fotos, .selo-m, .sel-in::before { transition:none; }
}

/* Seletores do pódio no celular: tipo e período em linhas inteiras, sem cortar o texto */
@media (max-width:520px) {
  .podio-controles { flex-direction:column; align-items:stretch; gap:10px; padding:0 14px; }
  .sel { min-width:0; width:100%; max-width:none; flex:0 0 auto; }
  .sel select { text-overflow:ellipsis; font-size:.95rem; }
}

/* Paleta A: amarelo e preto predominam; a medalha só colore borda e ícone */
.linha.fotos .barra { background:linear-gradient(90deg,#8a6a00,#ffd21f); box-shadow:0 0 10px rgba(255,210,31,.45); }
.linha.fotos .dica b { color:var(--ouro); }
.linha.fotos .nm::after { background:linear-gradient(100deg,transparent 40%,rgba(255,210,31,.14) 50%,transparent 60%) 160% 0/260% 100% no-repeat; animation:varre1 8s ease-in-out infinite; animation-delay:calc(var(--i,0) * 300ms); }

/* ===== Ajustes finais: tudo em amarelo e preto ===== */
.so-leitor { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Bordas, silhueta e sombras das caixas: sempre amarelas (a medalha é identificada pelo ícone) */
.linha.fotos { --m:#ffd21f; --m1:#ffe566; --m2:#b98b00; }
.m-sem .selo-m { color:#7c7664; border-color:#4a463a; }
.linha.fotos .nm::before { border:1.5px solid var(--ouro); background:linear-gradient(180deg,#1b1a12,#0b0b0d); }
.cx { border-color:var(--ouro); }
.sil { opacity:.8; }
.m-sem .sil { opacity:.45; }

/* Informações bem encaixadas na caixa do nome */
.linha.fotos .c.nm { padding:0 40px 0 30px; gap:7px; }
.linha.fotos .nm .nome { line-height:1.05; letter-spacing:.5px; }
.linha.fotos .dica { padding-right:2px; }
.linha.fotos .pt { padding:0; justify-content:center; }

/* Pódio: plataformas e fotos todas amarelas, só os pontos (maiores) */
.degrau, .degrau.d2, .degrau.d3 { --m:#ffd21f; }
.degrau-base::before { border-color:#f0cf4a; background:var(--ouro-metal); }
.degrau-base span { font-family:Anton,sans-serif; font-size:1.9rem; letter-spacing:.5px; line-height:1; }
.degrau-base span small { font-size:.9rem; letter-spacing:.8px; margin-left:3px; }
.degrau.d1 .degrau-base { height:92px; } .degrau.d2 .degrau-base { height:72px; } .degrau.d3 .degrau-base { height:58px; }
.degrau .foto::before { background:var(--ouro-metal); }
.degrau .foto > i { color:var(--ouro); }

/* Seletores */
.podio-controles { flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; padding:0; }
.sel { min-width:0; width:auto; max-width:none; flex:0 0 auto; align-items:center; }
/* Tipo: igual à aba "SUPER DESBRAVADOR" (amarelo, texto preto, centralizado) */
#w-tipo .sel-in::before { background:var(--ouro-metal); border-color:#f0cf4a; border-width:1px; box-shadow:none; }
#w-tipo .sel-in:hover::before, #w-tipo .sel-in:focus-within::before { box-shadow:0 0 16px rgba(255,210,31,.4); }
#w-tipo .sel-in::after { border-color:#111; right:14px; }
#w-tipo select { color:#111; font-family:Anton,sans-serif; font-size:1rem; letter-spacing:.4px; text-align:center; text-align-last:center; padding:9px 38px; min-width:250px; }
#w-tipo select option { color:#fff; text-align:left; }
/* Período: sem caixa, texto centralizado em dourado suave */
#w-periodo .sel-in::before { display:none; }
#w-periodo .sel-in::after { display:none; }
#w-periodo select { color:#e9d58a; font-family:Anton,sans-serif; font-size:1rem; letter-spacing:.4px; text-align:center; text-align-last:center; padding:6px 14px; min-width:250px; text-decoration:underline; text-decoration-color:rgba(255,210,31,.35); text-underline-offset:6px; }
#w-periodo .sel-in:hover select { color:var(--ouro); }
@media (max-width:520px) {
  .podio-controles { align-items:center; padding:0; }
  .sel { width:auto; }
  #w-tipo select, #w-periodo select { min-width:230px; }
}
@media (max-width:520px) { .degrau-base span { font-size:1.45rem; } .degrau.d1 .degrau-base { height:80px; } .degrau.d2 .degrau-base { height:62px; } .degrau.d3 .degrau-base { height:50px; } }
#w-tipo select { padding-top:12px; padding-bottom:8px; }
@media (max-width:520px) {
  .linha.fotos .c.nm { padding:0 24px 0 16px; }
  .linha.fotos .dica { font-size:.6rem; letter-spacing:.1px; gap:6px; }
  .linha.fotos .dica b { font-size:.72rem; }
}

/* ===== Controles minimalistas do pódio: texto + traço, sem caixas ===== */
.podio-controles { display:block !important; margin:0 0 6px; padding:0; }
.tipos { position:relative; display:flex; justify-content:safe center; gap:26px; overflow-x:auto; padding:2px 18px 11px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.tipos::-webkit-scrollbar { display:none; }
.tipo { flex:none; appearance:none; background:none; border:0; padding:4px 0; cursor:pointer; font-family:Anton,sans-serif; font-size:.95rem; letter-spacing:1.2px; text-transform:uppercase; color:#8d8670; transition:color .2s ease; -webkit-tap-highlight-color:transparent; }
.tipo:hover { color:#e9d58a; }
.tipo.on { color:var(--ouro); text-shadow:0 0 14px rgba(255,210,31,.45); }
.tipo:focus-visible, .per-seta:focus-visible, .per-volta:focus-visible { outline:2px solid var(--ouro); outline-offset:3px; }
.tipos-barra { position:absolute; left:0; bottom:3px; height:3px; width:0; background:var(--ouro-metal); box-shadow:0 0 10px rgba(255,210,31,.6); transform:skewX(-22deg); transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1); }

.per-nav { display:flex; align-items:center; justify-content:center; gap:6px; margin:6px auto 0; max-width:420px; }
.per-nav[hidden] { display:none; }
.per-seta { flex:none; appearance:none; background:none; border:0; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; color:var(--ouro); -webkit-tap-highlight-color:transparent; transition:transform .15s ease, opacity .2s ease; }
.per-seta svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.per-seta:hover:not(:disabled) { transform:scale(1.18); }
.per-seta:disabled { opacity:.22; cursor:default; }
.per-meio { flex:1; min-width:0; text-align:center; font-family:Anton,sans-serif; font-size:1rem; letter-spacing:.6px; text-transform:uppercase; color:#e9d58a; white-space:nowrap; }
.per-meio em { font-style:normal; margin-left:9px; font-family:Barlow,sans-serif; font-weight:700; font-size:.62rem; letter-spacing:1.2px; color:var(--ouro); vertical-align:middle; border:1px solid rgba(255,210,31,.5); padding:2px 6px; }
.per-meio em[hidden] { display:none; }
.per-volta { display:block; margin:0 auto 4px; appearance:none; background:none; border:0; cursor:pointer; font-family:Barlow,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--ouro); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,210,31,.4); }
.per-volta[hidden] { display:block; visibility:hidden; }
.podio-periodo:empty { display:none; }

/* Troca suave ao mudar de período */
.podio.troca-d { animation:entra-d .38s cubic-bezier(.2,.8,.2,1); }
.podio.troca-e { animation:entra-e .38s cubic-bezier(.2,.8,.2,1); }
@keyframes entra-d { from { opacity:0; transform:translateX(34px); } }
@keyframes entra-e { from { opacity:0; transform:translateX(-34px); } }
@media (max-width:520px) { .tipos { gap:22px; } .tipo { font-size:.9rem; } .per-meio { font-size:.92rem; } }
@media (prefers-reduced-motion:reduce) { .tipos-barra, .tipo, .per-seta { transition:none; } .podio.troca-d, .podio.troca-e { animation:none; } }

/* ===== Menu "Ranking da semana…" (dropdown minimalista) ===== */
.tipo-menu { position:relative; display:flex; justify-content:center; margin:0 0 6px; }
.tipo-btn { appearance:none; background:none; border:0; border-bottom:3px solid var(--ouro); padding:4px 4px 7px 6px; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  font-family:Anton,sans-serif; font-size:1.05rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--ouro); text-shadow:0 0 14px rgba(255,210,31,.4); -webkit-tap-highlight-color:transparent; }
.tipo-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.tipo-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.tipo-btn:focus-visible { outline:2px solid var(--ouro); outline-offset:4px; }
.tipo-lista { position:absolute; z-index:30; top:calc(100% + 8px); left:50%; transform:translateX(-50%); min-width:min(290px,86vw); margin:0; padding:6px; list-style:none;
  background:rgba(14,13,9,.97); border:1px solid var(--ouro); box-shadow:0 18px 40px rgba(0,0,0,.7), 0 0 22px rgba(255,210,31,.18); animation:menu-entra .18s ease-out; }
.tipo-lista[hidden] { display:none; }
.tipo-lista li { padding:12px 16px; cursor:pointer; font-family:Anton,sans-serif; font-size:.98rem; letter-spacing:1px; text-transform:uppercase; color:#d9d2bd; border-left:3px solid transparent; transition:background .12s, color .12s; }
.tipo-lista li:hover, .tipo-lista li:focus { background:rgba(255,210,31,.1); color:#fff; outline:none; }
.tipo-lista li.on { color:var(--ouro); border-left-color:var(--ouro); background:rgba(255,210,31,.07); }
@keyframes menu-entra { from { opacity:0; transform:translateX(-50%) translateY(-6px); } }
.per-meio em { letter-spacing:1px; text-transform:uppercase; }
@media (prefers-reduced-motion:reduce) { .tipo-lista { animation:none; } .tipo-btn svg { transition:none; } }

/* ===================================================================
   Pegada de competição: palco, holofotes, pódio e linhas ao vivo
   =================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.28s; }

/* Palco ao fundo */
.palco { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.palco canvas { position:absolute; inset:0; }
.palco .raios { position:absolute; left:50%; top:-14%; width:190vmax; height:150vmax; margin-left:-95vmax; transform-origin:50% 0;
  background:repeating-conic-gradient(from -52deg at 50% 0, rgba(255,210,31,.085) 0 3.2deg, transparent 3.2deg 10.5deg);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0,#000 0,transparent 72%); mask-image:radial-gradient(ellipse 60% 50% at 50% 0,#000 0,transparent 72%);
  animation:balanca 16s ease-in-out infinite alternate; }
.palco .holofote { position:absolute; left:50%; top:-22vh; width:min(120vw,1100px); height:64vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0, rgba(255,214,60,.24), rgba(255,210,31,.07) 45%, transparent 70%); animation:pulsa 6s ease-in-out infinite; }
@keyframes balanca { from { transform:rotate(-3.5deg); } to { transform:rotate(3.5deg); } }

/* Título estilo "noite de campeões" */
.titulo:not(.menor)::before { content:"★"; display:block; margin:0 auto 6px; max-width:420px; font-size:.85rem; line-height:1; color:var(--ouro); text-shadow:0 0 12px rgba(255,210,31,.8);
  background:linear-gradient(90deg,transparent,rgba(255,210,31,.75)) left center/38% 1px no-repeat, linear-gradient(270deg,transparent,rgba(255,210,31,.75)) right center/38% 1px no-repeat; }
.titulo:not(.menor) h1 { animation:titulo-in .9s cubic-bezier(.2,.8,.2,1) both, varre 7s ease-in-out 1s infinite; }
@keyframes titulo-in { from { opacity:0; transform:translateY(16px) skewX(-8deg); filter:blur(7px); letter-spacing:.14em; } }
.mes { animation:surgir-podio .8s .35s cubic-bezier(.2,.8,.2,1) both; }

/* Ao vivo */
.dot:not(.off) { animation:ao-vivo 2s ease-out infinite; }
@keyframes ao-vivo { 0% { box-shadow:0 0 0 0 rgba(255,210,31,.7), 0 0 9px var(--ouro); } 70%,100% { box-shadow:0 0 0 11px rgba(255,210,31,0), 0 0 9px var(--ouro); } }

/* ----- Pódio: plataformas com a MESMA inclinação (alinhadas e centralizadas) ----- */
.podio { gap:6px; }
.degrau-base { --sl:14px; filter:drop-shadow(0 0 14px rgba(255,210,31,.3)); }
.degrau-base::before, .degrau-base::after { transform:none !important; border:0 !important; clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%); }
.degrau-base::before { background:linear-gradient(180deg,#fff0a0 0,#ffd21f 22%,#e9b800 70%,#b78900 100%); }
.degrau.d1 .degrau-base { filter:drop-shadow(0 0 26px rgba(255,210,31,.5)); }
@media (max-width:520px) { .podio { gap:4px; } .degrau-base { --sl:11px; } }
/* Cone de luz sobre o campeão */
.podio::after { content:""; position:absolute; z-index:-1; left:50%; top:-28px; width:78%; height:calc(100% + 28px); transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(180deg,rgba(255,226,120,.3),rgba(255,210,31,.07) 62%,transparent 92%); clip-path:polygon(41% 0,59% 0,100% 100%,0 100%); animation:pulsa 5s ease-in-out infinite; }
.degrau.d1 .foto.grande { filter:drop-shadow(0 0 16px rgba(255,210,31,.75)); }

/* ----- Linhas ----- */
.linha.top1 .cx { animation:aura 2.8s ease-in-out infinite; }
@keyframes aura { 0%,100% { box-shadow:0 0 14px rgba(255,210,31,.35); } 50% { box-shadow:0 0 30px rgba(255,210,31,.8); } }
.linha.fotos { transition:transform .22s ease, filter .22s ease; }
.linha.fotos:hover .cx { box-shadow:0 0 22px rgba(255,210,31,.55); }
.linha.fotos .nm::before { transition:box-shadow .25s ease, border-color .25s ease; }
.linha.fotos:hover .nm::before { box-shadow:0 0 22px rgba(255,210,31,.35), inset 0 0 22px rgba(255,210,31,.06); }
.selo-m svg { animation:brilha-medalha 5.5s ease-in-out infinite; animation-delay:calc(var(--i,0) * 400ms); }
@keyframes brilha-medalha { 0%,86%,100% { filter:brightness(1); } 92% { filter:brightness(1.7) saturate(1.2); } }
.pt { position:relative; }
.ganho { position:absolute; left:50%; margin-left:-22px; bottom:3px; z-index:6; font-family:Anton,sans-serif; font-weight:400; font-size:1.05rem; color:#fff; padding:1px 8px; background:#16a34a; box-shadow:0 0 16px rgba(34,197,94,.8); transform:skewX(-14deg); animation:ganho-sobe 2.5s cubic-bezier(.2,.8,.2,1) forwards; pointer-events:none; }
@keyframes ganho-sobe { 0% { opacity:0; transform:translateY(14px) skewX(-14deg) scale(.7); } 14% { opacity:1; transform:translateY(0) skewX(-14deg) scale(1.15); } 26% { transform:translateY(-2px) skewX(-14deg) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translateY(-26px) skewX(-14deg); } }

/* Toque */
.nv:active, .per-seta:active, .tipo-btn:active, .aba:active, .btn-dir:active { transform:scale(.94); }

@media (prefers-reduced-motion:reduce) {
  .palco .raios, .palco .holofote, .podio::after, .linha.top1 .cx, .selo-m svg, .dot, .mes, .titulo:not(.menor) h1, .ganho { animation:none !important; }
  @view-transition { navigation: none; }
}
.degrau .degrau-base, .degrau.d1 .degrau-base { box-shadow:none; background:none; border:0; }

/* ===== Hierarquia: o pódio é o destaque (amarelo cheio); a lista vira grafite com fios dourados ===== */
.divisor { display:flex; align-items:center; gap:14px; margin:40px 6px 22px; font-family:Anton,sans-serif; font-size:.82rem; letter-spacing:3px; text-transform:uppercase; color:#a89a63; }
.divisor::before, .divisor::after { content:""; flex:1; height:1px; }
.divisor::before { background:linear-gradient(90deg,transparent,rgba(255,210,31,.55)); }
.divisor::after  { background:linear-gradient(270deg,transparent,rgba(255,210,31,.55)); }
.divisor[hidden] { display:none; }
.podios { margin-bottom:0; }

/* Caixa de pontos: grafite com número claro (sem amarelo cheio) */
.linha.fotos .pt { color:#f6edcb; }
.linha.fotos .pt::before { background:linear-gradient(180deg,#2b281c,#15140d); border:1px solid rgba(255,210,31,.34); box-shadow:inset 0 1px 0 rgba(255,236,150,.16); animation:none; }
.linha.fotos.top1 .pt::before { box-shadow:0 0 18px rgba(255,210,31,.25), inset 0 1px 0 rgba(255,236,150,.2); }
/* Bordas mais discretas; o brilho completo só aparece no hover */
.linha.fotos .nm::before { border:1px solid rgba(255,210,31,.3); background:linear-gradient(180deg,#191810,#0b0b0d); }
.cx { border-color:rgba(255,210,31,.5); box-shadow:none; }
.linha.fotos:hover .nm::before, .linha.fotos:hover .pt::before, .linha.fotos:hover .cx { border-color:var(--ouro); }
.sil { fill:#c2ad5f; opacity:.6; }
.linha.top1 .cx { border-color:var(--ouro); }
/* Barra de progresso mais fina e contida */
.linha.fotos .barra { background:linear-gradient(90deg,#7a5f00,#e9b800); box-shadow:none; }
.linha.fotos .dica b { color:#e9d58a; }
.degrau .sil { fill:var(--ouro); opacity:.9; }