/* Site StarsTank: visual de jogo (céu da arena, botões 3D, painéis creme com faixa azul). */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:#0F4C9A;color:#FFFFFF;font-family:'Nunito',system-ui,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#FFD23F}
a:hover{color:#FFF0A8}
.lk{font-family:'Luckiest Guy',cursive;font-weight:400;letter-spacing:.5px}
.wrap{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barra de cima */
.topo{background:#0A2550;font-size:14px}
.topo .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}
.online{display:inline-flex;align-items:center;gap:8px;color:#9CF08A;font-weight:900}
.online i{width:10px;height:10px;border-radius:50%;background:#5BE046;box-shadow:0 0 0 3px rgba(91,224,70,.25)}
.online.off{color:#FFB4A6}.online.off i{background:#E03A1E;box-shadow:none}
.tl{color:#BFD6FF;text-decoration:none;display:inline-flex;align-items:center;min-height:36px;padding:0 6px;font-weight:800}
.tl:hover{color:#FFFFFF}

/* cabeçalho */
.bar{background:linear-gradient(#2F86E8,#1659B8);border-bottom:4px solid #0B3F86;position:relative;z-index:5}
.bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:76px}
.logo{display:block;margin:-10px 0 -26px;position:relative;z-index:2}
.logo img{height:104px;width:auto;display:block;filter:drop-shadow(0 4px 0 rgba(10,37,80,.6))}
.menu{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 auto;min-width:0}
.nv{font-family:'Luckiest Guy',cursive;font-size:19px;letter-spacing:.5px;color:#FFFFFF;text-decoration:none;display:inline-flex;align-items:center;min-height:52px;padding:4px 16px 0;border-radius:12px;text-shadow:0 2px 0 #0B3F86}
.nv:hover{background:rgba(255,255,255,.16);color:#FFE27A}
.nv.on{color:#FFD23F;background:rgba(10,37,80,.35)}
.acoes-topo{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}
.quem{font-weight:900;color:#FFFFFF;text-shadow:0 2px 0 #0B3F86}

/* botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:4px 26px 0;border-radius:16px;font-family:'Luckiest Guy',cursive;font-weight:400;font-size:20px;letter-spacing:.5px;text-decoration:none;cursor:pointer;border:3px solid;border-bottom-width:7px;line-height:1.1;text-align:center;transition:transform .08s}
.bt:active{transform:translateY(3px);border-bottom-width:4px}
.bt.p{min-height:46px;font-size:17px;padding:4px 18px 0}
.bt.g{min-height:68px;font-size:26px;padding:6px 34px 0}
.bt.xg{min-height:76px;font-size:32px;padding:6px 42px 0}
.bt.full{width:100%}
.ouro{background:linear-gradient(#FFE58A,#FFB31A);border-color:#9A4A00;color:#5A2500;text-shadow:0 1px 0 #FFF3B0}
.ouro:hover{background:linear-gradient(#FFF0B0,#FFC23D);color:#5A2500}
.azul{background:linear-gradient(#5FB4FF,#1F6FD6);border-color:#0B3F86;color:#FFFFFF;text-shadow:0 2px 0 #0B3F86}
.azul:hover{background:linear-gradient(#86C7FF,#2E80E6);color:#FFFFFF}
.verde{background:linear-gradient(#8BE36A,#36A325);border-color:#1D5E12;color:#FFFFFF;text-shadow:0 2px 0 #1D5E12}
.verde:hover{background:linear-gradient(#A6F08A,#45B533);color:#FFFFFF}
.verm{background:linear-gradient(#FF8C6B,#E03A1E);border-color:#7A1505;color:#FFFFFF;text-shadow:0 2px 0 #7A1505}
.verm:hover{background:linear-gradient(#FFA58A,#EE4A2C);color:#FFFFFF}
.bt[disabled]{opacity:.55;cursor:not-allowed}

/* painéis */
.pn{background:#FFF8E6;border:4px solid #F2B33D;border-radius:22px;box-shadow:0 7px 0 #C47F12,0 16px 30px rgba(0,25,70,.35);color:#3B2410;position:relative}
.pn a:not(.bt){color:#1659B8;font-weight:900}
.rb{position:absolute;top:-26px;left:24px;background:linear-gradient(#3B92F0,#1659B8);color:#FFFFFF;font-family:'Luckiest Guy',cursive;font-size:22px;letter-spacing:.5px;padding:10px 22px 6px;border-radius:14px;border:3px solid #0B3F86;text-shadow:0 2px 0 #0B3F86;white-space:nowrap;max-width:calc(100% - 48px);overflow:hidden;text-overflow:ellipsis}
.rb.ouro{background:linear-gradient(#FFE58A,#FFB31A);border-color:#9A4A00;color:#5A2500;text-shadow:0 1px 0 #FFF3B0}
.rb.verde{background:linear-gradient(#8BE36A,#36A325);border-color:#1D5E12;text-shadow:0 2px 0 #1D5E12}
.cx{padding:18px;border-radius:18px;background:#FFFFFF;border:3px solid #F5DDA6}
.cx h3{margin:0 0 6px;font-size:20px;font-weight:900;color:#3B2410}
.cx p{margin:0;color:#6B4A22;font-weight:700;line-height:1.55}
.tx{margin:0;color:#6B4A22;font-weight:700;font-size:17px;line-height:1.6}
.mudo{color:#8A6A3A;font-weight:700}

/* títulos */
.hero{background:#6EC3F5 url(img/arena.jpg) center bottom / cover no-repeat}
.hero.curto{background-position:center 70%}
.ttl{font-family:'Luckiest Guy',cursive;font-weight:400;color:#FFFFFF;letter-spacing:1px;margin:0;line-height:1.04;overflow-wrap:break-word;
  text-shadow:0 5px 0 #0B3F86,3px 0 0 #0B3F86,-3px 0 0 #0B3F86,0 -3px 0 #0B3F86,3px 3px 0 #0B3F86,-3px 3px 0 #0B3F86}
.ttl .am{color:#FFD23F}
.sub-hero{margin:0;align-self:flex-start;font-weight:900;color:#0A2550;background:rgba(255,255,255,.86);padding:8px 14px;border-radius:12px;font-size:18px}
.cab-pagina .wrap{padding-top:48px;padding-bottom:56px;display:flex;flex-direction:column;gap:12px}
.cab-pagina h1{font-size:clamp(40px,5vw,64px)}
.h2{margin:0;font-family:'Luckiest Guy',cursive;font-weight:400;font-size:36px;color:#1659B8;letter-spacing:.5px}

/* formulários */
.lb{display:flex;flex-direction:column;gap:6px;font-weight:800;color:#6B4A22;font-size:15px}
.in{min-height:48px;padding:0 14px;border-radius:12px;border:3px solid #E3C27A;background:#FFFFFF;color:#3B2410;font-size:16px;font-family:inherit;font-weight:700;width:100%}
.in:focus{outline:3px solid #2F86E8;outline-offset:1px}
.ck{display:flex;gap:10px;align-items:flex-start;color:#6B4A22;font-weight:700;line-height:1.5}
.ck input{width:22px;height:22px;margin:1px 0 0;accent-color:#1F6FD6;flex-shrink:0}
form.col{display:flex;flex-direction:column;gap:14px}
.linha2{display:flex;flex-wrap:wrap;gap:12px}.linha2>*{flex:1 1 180px}

/* abas */
.abas{display:flex;flex-wrap:wrap;gap:8px}
.tb{min-height:46px;padding:4px 18px 0;border-radius:12px;border:3px solid #E3C27A;background:#FFF1CC;color:#8A5A1E;font-family:'Luckiest Guy',cursive;font-size:17px;letter-spacing:.5px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.tb:hover{border-color:#F2B33D;color:#8A5A1E}
.tb.on{background:linear-gradient(#FFE58A,#FFB31A);border-color:#9A4A00;color:#5A2500}
.tb.azul-tb{border-color:#0B3F86;border-bottom-width:6px;background:linear-gradient(#5FB4FF,#1F6FD6);color:#FFFFFF;text-shadow:0 2px 0 #0B3F86;min-height:52px;font-size:19px}
.tb.azul-tb.on{background:linear-gradient(#FFE58A,#FFB31A);border-color:#9A4A00;color:#5A2500;text-shadow:0 1px 0 #FFF3B0}
[data-painel][hidden]{display:none!important}

/* avisos */
.aviso{padding:14px 18px;border-radius:14px;font-weight:800;border:3px solid;line-height:1.45}
.aviso.erro{background:#FFE9E4;border-color:#E03A1E;color:#7A1505}
.aviso.ok{background:#E8F9E2;border-color:#36A325;color:#1D5E12}
.aviso.info{background:#EAF4FF;border-color:#5FB4FF;color:#0B3F86}
.selo{display:inline-block;font-family:'Luckiest Guy',cursive;font-weight:400;font-size:14px;letter-spacing:.5px;padding:5px 10px 2px;border-radius:8px;color:#FFFFFF}
.selo.ok{background:#36A325}.selo.espera{background:#C87200}.selo.off{background:#7D8FA8}

/* início */
.hero-inicio .wrap{padding-top:56px;padding-bottom:120px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.carimbo{align-self:flex-start;background:#E8452C;color:#FFFFFF;font-family:'Luckiest Guy',cursive;font-size:18px;letter-spacing:1px;padding:8px 16px 4px;border-radius:10px;border:3px solid #7A1505;transform:rotate(-3deg)}
.chamada{margin:0;font-size:20px;line-height:1.5;font-weight:800;color:#0A2550;background:rgba(255,255,255,.85);padding:14px 18px;border-radius:16px;max-width:520px}
.zeus{width:100%;max-width:380px;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(10,37,80,.45))}
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:-84px;position:relative}
.tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px 20px;text-decoration:none;text-align:center;transition:transform .12s}
.tile:hover{transform:translateY(-4px)}
.tile .ic{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid}
.tile .t{font-family:'Luckiest Guy',cursive;font-size:24px;color:#1659B8;letter-spacing:.5px}
.tile .d{font-weight:700;color:#6B4A22}
.noticia{display:flex;gap:16px;align-items:center;padding:12px;border-radius:16px;background:#FFFFFF;border:3px solid #F5DDA6}
.noticia img{width:120px;height:84px;object-fit:cover;object-position:center 30%;border-radius:12px;border:3px solid #FFD23F;flex-shrink:0}
.noticia h3{margin:0;font-size:19px;font-weight:900;color:#3B2410}
.noticia p{margin:0;color:#6B4A22;font-weight:600;line-height:1.45}
.rk-abas .tb{flex:1 1 0;padding:4px 8px 0;font-size:16px}
.rk{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px}
.rk .n{flex:1;font-weight:900;color:#3B2410;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .v{font-weight:800;color:#8A5A1E;font-size:15px}
.med{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Luckiest Guy',cursive;font-size:19px;padding-top:3px;border:3px solid #E3C27A;background:#FFFFFF;color:#8A5A1E;flex-shrink:0}
.m1{background:#FFD23F;color:#5A2500;border-color:#9A4A00}.rk.m1f{background:#FFF1CC}
.m2{background:#E6EEF8;color:#2A3B55;border-color:#7D8FA8}.rk.m2f{background:#F4F7FB}
.m3{background:#F0A060;color:#4A1E00;border-color:#8A4510}.rk.m3f{background:#FFF0E4}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.card-mapa{display:block;border-radius:18px;border:4px solid #FFD23F;box-shadow:0 6px 0 #C47F12,0 14px 26px rgba(0,25,70,.4);overflow:hidden;background:#0A2550;transition:transform .15s}
.card-mapa:hover{transform:translateY(-6px) rotate(-1deg)}
.card-mapa img{width:100%;height:auto;display:block}

/* tabelas */
.tabela{overflow-x:auto}
.tabela table{width:100%;border-collapse:collapse;min-width:640px;color:#3B2410}
.tabela th{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:16px;letter-spacing:.5px;color:#8A5A1E;text-align:left;padding:12px 14px}
.tabela td{padding:12px 14px;border-top:2px dashed #F0D9A4;font-size:15px;font-weight:800}
.tabela tr.voce{background:#EAF4FF}
.dir{text-align:right}

/* ranking */
.podio{display:flex;align-items:flex-end;justify-content:center;gap:14px;flex-wrap:wrap;width:100%;margin-top:18px}
.degrau{flex:0 1 260px;min-width:180px;display:flex;flex-direction:column;align-items:center}
.degrau .nome{font-family:'Nunito',sans-serif;font-weight:900;font-size:24px;color:#0A2550;background:#FFFFFF;border:3px solid #0B3F86;border-radius:12px;padding:2px 14px;text-align:center;margin:6px 0 2px;word-break:break-word}
.degrau .valor{font-weight:900;color:#0A2550;background:rgba(255,255,255,.86);padding:3px 12px;border-radius:10px;margin-bottom:10px}
.degrau .base{width:100%;border-radius:18px 18px 0 0;border:4px solid;border-bottom:0;display:flex;justify-content:center;padding-top:14px}
.degrau .base span{font-family:'Luckiest Guy',cursive;font-size:64px;line-height:1;color:#FFFFFF}
.d1{order:2}.d1 .base{height:200px;border-color:#9A4A00;background:linear-gradient(#FFE58A,#FFC21A)}.d1 .base span{text-shadow:0 4px 0 #9A4A00}
.d2{order:1}.d2 .base{height:150px;border-color:#4D6280;background:linear-gradient(#E6EEF8,#9FB4CF)}.d2 .base span{text-shadow:0 4px 0 #4D6280}
.d3{order:3}.d3 .base{height:115px;border-color:#8A4510;background:linear-gradient(#F8C9A0,#E0915A)}.d3 .base span{text-shadow:0 4px 0 #8A4510}
.busca{position:relative;flex:0 1 360px;min-width:240px}
.busca svg{position:absolute;left:14px;top:15px}
.busca .in{padding-left:46px}

/* guia */
.guia-menu{display:flex;flex-direction:column;gap:8px}
.sn{display:flex;align-items:center;width:100%;min-height:52px;padding:4px 16px 0;border-radius:14px;border:3px solid #F5DDA6;background:#FFFFFF;color:#8A5A1E;font-family:'Luckiest Guy',cursive;font-size:18px;letter-spacing:.5px;cursor:pointer;text-align:left;text-decoration:none}
.sn:hover{border-color:#F2B33D;color:#8A5A1E}
.sn.on{background:linear-gradient(#FFE58A,#FFB31A);border-color:#9A4A00;color:#5A2500}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:4px 12px 0;border-radius:10px;background:linear-gradient(#FFFFFF,#E9EEF6);border:3px solid #7D8FA8;border-bottom-width:6px;font-family:'Luckiest Guy',cursive;font-size:18px;color:#2A3B55}
.tecla{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:#6B4A22;font-weight:800}

/* doar */
.pacotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.pk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px 18px;border-radius:22px;background:#FFFFFF;border:4px solid #F5DDA6;color:#3B2410;cursor:pointer;text-align:center;position:relative;transition:transform .12s}
.pk:hover{border-color:#F2B33D;transform:translateY(-4px)}
.pk input{position:absolute;opacity:0;pointer-events:none}
.pk:has(input:checked){border-color:#E03A1E;background:#FFF4E8;box-shadow:0 0 0 4px #FFD23F}
.pk:focus-within{outline:3px solid #2F86E8;outline-offset:2px}
.pk .gema{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid}
.pk .nome{font-family:'Luckiest Guy',cursive;font-size:24px;letter-spacing:.5px}
.pk .preco{margin-top:6px;font-family:'Luckiest Guy',cursive;font-size:24px;color:#FFFFFF;background:linear-gradient(#FF8C6B,#E03A1E);border:3px solid #7A1505;border-radius:12px;padding:6px 18px 2px;text-shadow:0 2px 0 #7A1505}
.pk .tag{position:absolute;top:-16px;right:-8px;background:linear-gradient(#FF8C6B,#E03A1E);border:3px solid #7A1505;color:#FFFFFF;font-family:'Luckiest Guy',cursive;font-size:14px;padding:6px 10px 2px;border-radius:10px;transform:rotate(6deg)}
.etapas{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.etapas li{display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:999px;font-family:'Luckiest Guy',cursive;font-size:18px;letter-spacing:.5px;background:#0A2550;color:#FFFFFF;border:3px solid #2F86E8}
.etapas li span{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFFFFF;color:#0A2550;padding-top:3px}
.etapas li.atual{background:#FFC21A;color:#5A2500;border-color:#9A4A00}
.etapas li.feito{background:#36A325;border-color:#1D5E12}
.qr{width:260px;height:260px;border-radius:18px;background:#FFFFFF;border:4px solid #36A325;padding:10px;flex-shrink:0;image-rendering:pixelated}

/* rodapé */
.rodape{background:#0A2550;border-top:4px solid #FFD23F}
.rodape .wrap{padding-top:32px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center}
.rodape img{height:64px;width:auto}
.fl{color:#BFD6FF;text-decoration:none;font-weight:800}
.fl:hover{color:#FFFFFF}
.rodape p{margin:0;color:#8FAAD8;font-size:14px;font-weight:700;flex-basis:100%}

@media (max-width:720px){
  .wrap{padding-left:16px;padding-right:16px}
  .menu{flex-basis:100%}
  .acoes-topo{flex-basis:100%;justify-content:center}
  .chamada{font-size:17px}
  .bt.xg{font-size:26px;padding:6px 28px 0}
  .logo img{height:76px}
  .logo{margin:-4px 0 -14px}
  .bar .wrap{justify-content:center}
  .menu{justify-content:center}
  .nv{font-size:17px;padding:4px 10px 0}
  .hero-inicio .wrap{padding-top:36px}
  .rb{font-size:19px}
  .noticia{flex-direction:column;align-items:flex-start}
  .noticia img{width:100%;height:140px}
}