:root{
  --bg:#0b1210;
  --pitch1:#0c4a24;
  --pitch2:#0a381c;
  --white:#f9fafb;
  --muted:#cbd5e1;
  --accent:#22c55e;
  --danger:#ef4444;
  --card:#0f172a;
  --card-2:#111827;
  --tile:#0b1220;
  --tile-b:#1e293b;
  --glow:0 0 0.8rem rgba(34,197,94,.6);
  --shadow:0 6px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(160deg,var(--bg),#020617);
  color:var(--white); font-family:system-ui,Segoe UI,Roboto,Ubuntu,Inter,sans-serif;
}

.stadium-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at 50% 100%, rgba(46,204,113,.12), transparent 60%),
    repeating-linear-gradient(90deg,var(--pitch1) 0 40px,var(--pitch2) 40px 80px);
  filter:saturate(1.1) brightness(0.9);
}

.app{max-width:980px; margin:32px auto; padding:0 16px}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:16px;
}
.logo{display:flex; align-items:center; gap:.5ch; letter-spacing:.5px}
.logo .ball{
  width:28px; height:28px; display:inline-block; border-radius:50%;
  background:
    radial-gradient(#000 7%, transparent 8%),
    radial-gradient(#000 7%, transparent 8%),
    radial-gradient(#000 7%, transparent 8%),
    radial-gradient(#000 7%, transparent 8%),
    radial-gradient(#000 7%, transparent 8%),
    radial-gradient(#000 7%, transparent 8%),
    radial-gradient(#111 35%, #fff 36% 100%);
  background-position:20% 30%, 65% 35%, 40% 65%, 80% 60%, 55% 15%, 25% 80%, 50% 50%;
  background-size:20% 20%,20% 20%,20% 20%,20% 20%,20% 20%,20% 20%,100% 100%;
  background-repeat:no-repeat;
  box-shadow:var(--glow);
  animation:spin 6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.controls{display:flex; gap:12px; align-items:center}
.select-wrap{display:flex; gap:8px; align-items:center; background:var(--card); padding:8px 10px; border-radius:10px}
select{background:transparent; color:var(--white); border:none; outline:none}

.btn{
  border:1px solid #334155; background:var(--card-2); color:var(--white);
  padding:10px 14px; border-radius:12px; cursor:pointer; transition:.15s transform,.15s filter;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{border-color:#16a34a; background:linear-gradient(180deg,#1ea55a,#128046)}
.btn.ghost{background:transparent}
.btn.danger{background:linear-gradient(180deg,#ef4444,#b91c1c); border-color:#ef4444}

.scoreboard{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 20px;
}
.score-tile{background:rgba(2,6,23,.5); border:1px solid #1f2937; border-radius:16px; padding:12px 16px}
.score-tile .label{font-size:.85rem; color:var(--muted)}
.score-tile .value{font-size:1.8rem; font-weight:700}
.value.bump{animation:bump .3s ease}
@keyframes bump{
  0%{transform:scale(1)}
  30%{transform:scale(1.15)}
  100%{transform:scale(1)}
}

.arena{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid #1f2937; border-radius:20px; padding:12px; box-shadow:var(--shadow);
}
.goal{width:100%; max-width:720px; display:block; margin:0 auto}
.grass{fill:#175c32}
.post,.crossbar{fill:#e5e7eb}
.net-rect{fill:rgba(255,255,255,.03); stroke:#64748b; stroke-width:1; transform-origin:50% 10%}
.net-rect.ripple{animation:net-ripple .7s ease}
@keyframes net-ripple{
  0%{transform:skewY(0deg) scaleY(1)}
  30%{transform:skewY(-6deg) scaleY(1.02)}
  100%{transform:skewY(0deg) scaleY(1)}
}
.net-lines line{stroke:#475569; stroke-width:.6}
.man{stroke:#e5e7eb; stroke-width:4; fill:none; stroke-linecap:round}

/* Pelota: animación sutil y transform coherente */
.ball-svg{
  transform-box: fill-box;
  transform-origin: center;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.ball-core{fill:url(#ballShine); stroke:#0f172a; stroke-width:.8}
.ball-cell{fill:none; stroke:#0f172a; stroke-width:.8}

.ball-svg.idle{animation:rock 3s ease-in-out infinite}
@keyframes rock{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(4px,-3px) rotate(-6deg)}
}
.ball-svg.tap{animation:tap .20s ease-out}
@keyframes tap{
  0%{transform:translate(0,0)}
  100%{transform:translate(10px,-7px)}
}
.ball-svg.post{animation:post .45s cubic-bezier(.2,.6,.2,1)}
@keyframes post{
  0%{transform:translate(0,0)}
  40%{transform:translate(80px,-70px) rotate(180deg)}
  100%{transform:translate(8px,-6px) rotate(220deg)}
}
.ball-svg.kick{animation:kick .9s ease-out forwards}
@keyframes kick{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(130px,-64px) rotate(540deg)}
}

.hidden{opacity:0}
.s1.show,.s2.show,.s3.show,.s4.show,.s5.show,.s6.show{opacity:1; transition:opacity .35s ease}

.goal.shake{animation:shake .3s linear}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

.toast{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px; background:rgba(2,6,23,.9); border:1px solid #1f2937;
  padding:8px 12px; border-radius:12px; font-size:.92rem; color:#e2e8f0;
  box-shadow:var(--shadow); min-width:220px; text-align:center; pointer-events:none;
}

.red-card{
  position:absolute; right:18px; top:10px; font-size:2rem;
  transform:translateY(-12px) scale(0.6); opacity:0; transition:.25s;
}
.red-card.show{transform:translateY(0) scale(1); opacity:1}

.word{margin:16px 0}
.tiles{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:8px 4px;
}
.tile{
  min-width:28px; padding:10px 12px; text-transform:uppercase; text-align:center;
  border-radius:12px; border:1px dashed #334155; background:var(--tile);
  color:#cbd5e1; font-weight:700; letter-spacing:1px; box-shadow:inset 0 0 8px rgba(0,0,0,.25)
}
.tile.revealed{background:linear-gradient(180deg,#0f172a,#0a0f1d); border:1px solid var(--tile-b); color:#e5e7eb}
.tile.space{border-style:solid; opacity:.5}

.hint-row{display:flex; gap:10px; justify-content:center; margin-top:8px}

.keyboard{
  margin:18px auto 6px; display:grid; gap:10px; max-width:780px;
  grid-template-columns:repeat(10,1fr);
}
.key{
  user-select:none; text-transform:uppercase; text-align:center; padding:12px 0;
  border-radius:12px; background:rgba(2,6,23,.7); border:1px solid #1f2937;
  cursor:pointer; transition:.1s; font-weight:700; letter-spacing:.5px;
}
.key:hover{transform:translateY(-1px)}
.key.used{opacity:.45; filter:grayscale(.6); pointer-events:none}
.key.good{outline:2px solid var(--accent)}
.key.bad{outline:2px solid var(--danger)}

.foot{opacity:.7; text-align:center; margin:18px 0 8px}

/* confetti */
.confetti-layer{pointer-events:none; position:absolute; inset:0}
.confetti{
  position:absolute; width:8px; height:14px; border-radius:2px; opacity:.9;
  animation:confetti-fall 1.8s ease-in forwards;
}
@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0)}
  100%{transform:translateY(260px) rotate(540deg)}
}