@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#1a6b2f;
  --green2:#23983f;
  --gold:#f0c040;
  --gold2:#e8a800;
  --grass1:#1a6b2f;
  --grass2:#23983f;
}

body{
    background:transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tudo{
    font-family:'Inter',sans-serif;
    padding:0 0 2rem;
    max-width: 80%;
}

.hero{
  background:linear-gradient(160deg,#0d4a1e 0%,#1a6b2f 40%,#23983f 70%,#1a6b2f 100%);
  border-radius:16px;
  padding:2rem 1.5rem;
  position:relative;
  overflow:hidden;
  margin-bottom:1.5rem;
  min-height: 140px;
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
}
.hero-linhas{
  position:absolute;
  inset:0;
  pointer-events:none;
  width: 100%;
  height: 100%;
}
.hero-titulo{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(28px, 6vw, 52px);
  line-height: 1;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  position:relative;
  z-index:1;
}
.hero-titulo span{
  color:#f0c040;
}
.hero-sub{
  font-size:clamp(10px, 2vw, 13px);
  color:rgba(255,255,255,.75);
  margin-top:6px;
  position:relative;
  z-index:1;
  text-transform:uppercase;
  letter-spacing:2px;
}
.bola{
  position:absolute;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  font-size:clamp(40px, 10vw, 72px);
  line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
  z-index:1;
}
.sessao{
  background:#fff;border-radius:12px;
  border:0.5px solid #d6d6d6;
  padding:1.25rem 1.25rem 1.5rem;
  margin-bottom:1rem;
}
.dark-bg .sessao{background:#1a1a1a;border-color:#333;}
.sessao-legenda{
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;color:#1a6b2f;
  letter-spacing:1px;margin-bottom:1rem;
  display:flex;align-items:center;gap:8px;
}
.sessao-legenda .badge{
  font-size:10px;font-family:'Inter',sans-serif;
  background:#f0c040;color:#333;
  padding:2px 8px;border-radius:20px;
  font-weight:600;letter-spacing:.5px;
  margin-top:2px;
}
.field{margin-bottom:1rem;}
.field legenda{font-size:13px;color:#555;display:block;margin-bottom:5px;font-weight:500;}
.field input,.field select{
  width:100%;padding:9px 12px;
  border:1.5px solid #ddd;border-radius:8px;
  font-size:15px;font-family:'Inter',sans-serif;
  outline:none;transition:border .2s;
  background:#fafafa;
}
.field input:focus,.field select:focus{border-color:#23983f;}
.group2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.group3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.match-card{
  background:#f7fbf8;border:1.5px solid #c5e6cc;
  border-radius:10px;padding:1rem;margin-bottom:.75rem;
}
.match-header{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:#777;margin-bottom:.75rem;
  text-transform:uppercase;letter-spacing:.5px;
}
.match-row{display:flex;align-items:center;gap:8px;}
.flag{font-size:22px;line-height:1;}
.team-name{font-size:14px;font-weight:600;color:#222;flex:1;}
.vs{
  font-family:'Bebas Neue',sans-serif;font-size:20px;
  color:#1a6b2f;padding:0 4px;flex-shrink:0;
}
.score-box{
  width:42px;height:38px;border-radius:8px;
  border:1.5px solid #c5e6cc;
  background:#fff;text-align:center;
  font-size:20px;font-family:'Bebas Neue',sans-serif;
  font-weight:400;color:#1a6b2f;
  outline:none;
}
.score-box:focus{border-color:#1a6b2f;}
.artilheiro-wrap{display:flex;gap:10px;align-items:center;}
.artilheiro-wrap .flag{font-size:18px;}
.fun-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:.5rem;}
.fun-chip{
  padding:7px 14px;border-radius:20px;
  border:1.5px solid #c5e6cc;background:#f7fbf8;
  font-size:13px;cursor:pointer;transition:all .15s;
  font-weight:500;color:#1a6b2f;
}
.fun-chip:hover,.fun-chip.sel{background:#1a6b2f;color:#fff;border-color:#1a6b2f;}
.fun-chip.gold.sel{background:#f0c040;color:#333;border-color:#f0c040;}
.trophy-row{display:flex;gap:8px;flex-wrap:wrap;}
.trophy-btn{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 12px;border-radius:10px;
  border:1.5px solid #e0e0e0;background:#fafafa;
  cursor:pointer;transition:all .15s;min-width:72px;
}
.trophy-btn .emoji{font-size:28px;margin-bottom:4px;}
.trophy-btn .lbl{font-size:11px;font-weight:600;color:#555;}
.trophy-btn.sel{border-color:#f0c040;background:#fffbec;}
.trophy-btn.sel .lbl{color:#b87a00;}
.submit-btn{
  width:100%;padding:14px;
  background:linear-gradient(90deg,#1a6b2f,#23983f);
  color:#fff;border:none;border-radius:10px;
  font-family:'Bebas Neue',sans-serif;font-size:26px;
  letter-spacing:2px;cursor:pointer;
  position:relative;overflow:hidden;margin-top:.5rem;
}
.submit-btn:active{transform:scale(.98);}
.confetti-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;}
.toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);
  background:#1a6b2f;color:#fff;
  padding:12px 28px;border-radius:30px;
  font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);z-index:1000;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  opacity:0;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.grama-linhas{stroke:rgba(255,255,255,.07);stroke-width:1;fill:none;}

#s2, #s3, #s4 .submit-btn{
    opacity: 1;
    visibility: hidden;
    height: 1;
    overflow: hidden;
}

@media (max-width: 400px) {
  .hero {
    padding: 1.25rem 1rem;
  }
  .bola {
    right: 0.75rem;
  }
}

@media(max-width: 700px){
  .group2{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 12px;
  }
  
}