/* Tela inicial e paginas de texto. */
.fundo-estadio { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(120% 80% at 50% -10%, #17352a 0%, #0a1612 45%, var(--bg-0) 75%); }
.fundo-estadio .refletor { position: absolute; top: -30vh; width: 70vw; height: 120vh; opacity: .22; filter: blur(30px);
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(220,255,200,.55) 180deg, transparent 200deg); }
.fundo-estadio .r1 { left: -25vw; transform: rotate(-24deg); animation: varre 14s ease-in-out infinite alternate; }
.fundo-estadio .r2 { right: -25vw; transform: rotate(24deg); animation: varre 17s ease-in-out infinite alternate-reverse; }
@keyframes varre { to { transform: rotate(0deg); } }
.fundo-estadio .gramado { position: absolute; inset: auto -10% -25vh; height: 55vh; transform: perspective(600px) rotateX(62deg);
  background: repeating-linear-gradient(90deg, #12442a 0 8%, #0f3b24 8% 16%); opacity: .5;
  mask-image: linear-gradient(to top, #000 10%, transparent 90%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); }

.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 4vw, 40px); background: linear-gradient(180deg, rgba(5,11,9,.9), rgba(5,11,9,.0));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.topo nav { display: flex; gap: clamp(10px, 3vw, 26px); font-weight: 600; font-size: 14px; }
.topo nav a { color: var(--texto-2); }
.topo nav a:hover { color: var(--texto); text-decoration: none; }

main { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; padding: clamp(18px, 5vw, 56px) 0 28px; }
.hero h1 { font-size: clamp(46px, 7.4vw, 92px); text-transform: uppercase; font-style: italic; margin: 16px 0 14px; line-height: .92; }
.hero h1 em { font-style: italic; background: linear-gradient(92deg, var(--neon), #3ee08f 60%, var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-texto p { font-size: clamp(16px, 1.6vw, 19px); color: #c8d8ce; max-width: 34em; margin: 0; }
.hero-numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px; margin-top: 22px; }
.hero-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hero-numeros div { padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--borda); }
.hero-numeros b { display: block; font: 900 28px/1 var(--fonte-t); color: var(--neon); }
.hero-numeros small { color: var(--texto-2); font-size: 12px; font-weight: 600; }
.hero-cartas { position: relative; height: clamp(300px, 34vw, 420px); }
.hero-cartas .carta { --w: clamp(150px, 15vw, 200px); position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--r)) translateY(var(--y));
  animation: flutua 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes flutua { 50% { transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--r)) translateY(calc(var(--y) - 12px)); } }

/* montar partida */
.montar { padding: clamp(18px, 3vw, 30px); display: flex; flex-direction: column; gap: 22px; box-shadow: var(--sombra); scroll-margin-top: 80px; }
.montar h2 { font-size: 22px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.montar h2 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--neon); color: #07110b; font-size: 16px; }
.escolha-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.time-tile { position: relative; display: block; cursor: pointer; border-radius: 14px; }
.time-tile input { position: absolute; opacity: 0; pointer-events: none; }
.tt-corpo { position: relative; display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c1, #333) 24%, #0d1a16), #0b1512 65%); border: 1px solid var(--borda); transition: border-color .2s, box-shadow .2s, transform .15s; }
.tt-corpo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--c1, #555), var(--c2, #555)); }
.time-tile .avatar { --tam: 44px; }
.tt-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tt-texto b { font: 800 17px/1.1 var(--fonte-t); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-texto small { color: var(--texto-2); font-size: 12px; font-weight: 600; }
.tt-texto em { color: var(--texto-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-tile:hover .tt-corpo { transform: translateY(-2px); }
.time-tile input:checked + .tt-corpo { border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon), 0 10px 30px rgba(200,255,61,.15); }
.time-tile input:focus-visible + .tt-corpo { outline: 2px solid var(--ciano); outline-offset: 2px; }
.time-tile.trancado { cursor: default; }
.time-tile.trancado .tt-corpo > :not(.tranca):not(.selo) { filter: grayscale(.8) brightness(.6); }
.tranca { position: absolute; right: 8px; bottom: 6px; font-size: 11px; font-weight: 800; color: var(--ouro); }
.selo { flex: none; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(61,224,255,.15); color: var(--ciano); white-space: nowrap; }
.selo.ouro { background: rgba(255,200,61,.15); color: var(--ouro); }
.time-tile.breve .tt-corpo { border-style: dashed; background: rgba(255,255,255,.03); }
.time-tile.breve .tt-texto b { white-space: normal; font-size: 15px; }
.time-tile.breve .btn { min-height: 34px; padding: 0 12px; font-size: 14px; }
.tt-icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(61,224,255,.12); font-size: 20px; flex: none; }
.time-tile.breve.ouro .tt-icone { background: rgba(255,200,61,.14); color: var(--ouro); }
.time-detalhe { margin-top: 12px; }
.time-detalhe .time-ficha { padding: 14px 18px; }
/* conta no topo */
.conta { display: inline-flex; align-items: center; }
.conta .btn { min-height: 34px; font-size: 14px; padding: 0 14px; }
.conta-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid var(--borda); color: var(--texto) !important; text-decoration: none !important; font-size: 14px; }
.conta-chip img, .conta-chip > span { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #1b2a24; }
.conta-chip b { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo-assinante { color: var(--ouro); }
.escolha-times label { cursor: pointer; display: block; border-radius: var(--raio); transition: transform .15s; }
.escolha-times input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-times label:hover { transform: translateY(-2px); }
.escolha-times .time-ficha { height: 100%; transition: box-shadow .2s, border-color .2s; }
.escolha-times .time-ficha { padding-bottom: 40px; }
.escolha-times input:checked + .time-ficha { border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon), 0 12px 40px color-mix(in srgb, var(--neon) 18%, transparent); }
.escolha-times input:checked + .time-ficha::after { content: "✓ Seu time"; position: absolute; bottom: 12px; right: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--neon); color: #07110b; font: 800 12px/1.4 var(--fonte); }
.escolha-times input:focus-visible + .time-ficha { outline: 2px solid var(--ciano); outline-offset: 3px; }
.montar-linha { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--borda); }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado.niveis span { min-height: 58px; text-align: center; padding: 0 6px; }
.segmentado span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px;
  font: 800 19px/1 var(--fonte-t); cursor: pointer; transition: background .2s, color .2s; }
.segmentado small { font: 600 11px/1.2 var(--fonte); color: var(--texto-3); margin-top: 2px; }
.segmentado input:checked + span { background: var(--neon); color: #07110b; }
.segmentado input:checked + span small { color: rgba(7,17,11,.7); }
.segmentado input:focus-visible + span { outline: 2px solid var(--ciano); }
.montar-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.montar-acoes #btnEstranhos { grid-column: 1 / -1; }
.codigo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--texto-2); font-size: 14px; }
.codigo input { flex: 1; min-width: 140px; max-width: 240px; min-height: 42px; text-transform: lowercase; font-family: ui-monospace, monospace; }
.codigo .btn { min-height: 42px; font-size: 16px; }

/* recentes */
.recentes { margin-top: 26px; }
.recentes h2 { font-size: 22px; text-transform: uppercase; margin-bottom: 10px; }
.recentes-lista { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.recente { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; color: var(--texto);
  background: rgba(255,255,255,.05); border: 1px solid var(--borda); text-decoration: none !important; }
.recente:hover { border-color: var(--neon); }
.recente small { display: block; color: var(--texto-2); font-size: 12px; }

.pagina-home .ad-caixa { margin: 34px 0 6px; }

/* como joga */
.titulo-secao { font-size: clamp(32px, 4.5vw, 52px); text-transform: uppercase; font-style: italic; text-align: center; margin: 56px 0 22px; }
.como-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.como-grade article { padding: 22px; }
.como-icone { width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; border-radius: 14px;
  background: linear-gradient(140deg, rgba(200,255,61,.25), rgba(61,224,255,.12)); margin-bottom: 14px; }
.como-grade h3 { font-size: 23px; text-transform: uppercase; margin-bottom: 6px; }
.como-grade p { margin: 0; color: #c4d4ca; font-size: 14.5px; }

.mesa-fisica { margin-top: 40px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mesa-fisica h2 { font-size: 30px; text-transform: uppercase; font-style: italic; margin-bottom: 6px; }
.mesa-fisica p { margin: 0; color: #c4d4ca; max-width: 40em; }
.mesa-fisica-botoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* elencos */
.abas { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.abas button { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--borda-forte); background: rgba(255,255,255,.04); font-weight: 700; }
.abas button[aria-selected=true] { background: var(--neon); color: #07110b; border-color: transparent; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; justify-items: center; }
.galeria .carta { --w: 172px; }
.galeria .carta:hover { transform: translateY(-6px) rotate(-1deg) scale(1.03); }
.galeria h3 { grid-column: 1 / -1; justify-self: start; font-size: 20px; text-transform: uppercase; color: var(--texto-2); margin-top: 8px; }

.rodape { text-align: center; color: var(--texto-3); font-size: 13px; padding: 60px 16px 30px; border-top: 1px solid var(--borda); margin-top: 50px; }
.rodape p { margin: 6px 0; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 10px 0; }
.rodape-links a { color: var(--texto-2); font-weight: 600; }
.rodape-links a:hover { color: var(--neon); }
.rodape-direitos { color: var(--texto-3); font-size: 12px; }
.imprimir .rodape, .pagina-imprimir .rodape { }
@media print { .rodape { display: none; } }

/* paginas de texto (regras) */
.texto-pagina { max-width: 820px; margin: 0 auto; padding: 24px 16px 40px; }
.texto-pagina h1 { font-size: clamp(38px, 6vw, 60px); text-transform: uppercase; font-style: italic; margin: 18px 0; }
.texto-pagina h2 { font-size: 28px; text-transform: uppercase; margin: 34px 0 10px; color: var(--neon); }
.texto-pagina p, .texto-pagina li { color: #cbdad1; }
.texto-pagina .carta p { color: #2d2a24; }   /* o texto da pagina nao vaza para dentro da carta */
.texto-pagina table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.texto-pagina th, .texto-pagina td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
.texto-pagina th { color: var(--texto-2); font-weight: 700; }
.texto-pagina .ad-caixa { margin: 30px 0; }
.destaque-regra { padding: 14px 16px; border-radius: 14px; background: rgba(200,255,61,.08); border: 1px solid rgba(200,255,61,.3); }
.exemplo-roubo { display: flex; align-items: flex-start; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; padding: 18px 12px;
  border-radius: 18px; background: repeating-linear-gradient(90deg, var(--grama-1) 0 10%, var(--grama-2) 10% 20%); }
.exemplo-roubo figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.exemplo-roubo .carta { --w: 150px; }
.exemplo-roubo figcaption { max-width: 170px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.65); font-size: 13px; text-align: center; line-height: 1.35; }
.exemplo-roubo figcaption.ok { border: 1px solid var(--neon); }
.exemplo-roubo figcaption.ruim { border: 1px solid var(--perigo); }
.er-x { align-self: center; font: 900 italic 40px/1 var(--fonte-t); color: var(--neon); }
.exemplo-roubo .valor-badge { position: absolute; top: -.9em; left: 50%; transform: translateX(-50%); padding: .1em .5em; border-radius: 999px;
  font: 900 1.4em/1.2 var(--fonte-t); background: var(--neon); color: #07110b; }
.exemplo-roubo .acao-faixa { position: absolute; left: 0; right: 0; bottom: -.2em; padding: .2em; text-align: center; font: 800 .9em/1.15 var(--fonte-t);
  text-transform: uppercase; background: rgba(0,0,0,.78); color: #fff; border-radius: 0 0 .7em .7em; }
@media (max-width: 560px) { .exemplo-roubo .carta { --w: 120px; } .er-x { display: none; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 8px; }
  .hero-cartas { height: 270px; order: -1; }
  .hero-cartas .carta { --w: 142px; }
  .como-grade { grid-template-columns: 1fr 1fr; }
  .montar-linha { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topo nav a:not(:last-child) { display: none; }
  .hero h1 { font-size: 50px; }
  .hero-cartas { height: 230px; }
  .hero-cartas .carta { --w: 122px; }
  .montar-acoes { grid-template-columns: 1fr; position: sticky; bottom: calc(var(--anchor-h) + var(--safe-b) + 8px); z-index: 5; }
  .escolha-times .tf-flavor, .escolha-times .tf-estrela { display: none; }
  .hero-numeros div { padding: 8px 12px; } .hero-numeros b { font-size: 22px; }
  .hero-cta .btn { flex: 1; }
  .como-grade { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .galeria .carta { --w: min(44vw, 172px); }
  .btn.grande { font-size: 20px; }
}

@media (max-width: 720px) {
  /* tres botoes grudados embaixo: mais baixos, sem a legenda */
  .montar-acoes .btn.grande { min-height: 48px; font-size: 18px; }
  .montar-acoes #btnEstranhos small { display: none; }
}