* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root{
  --sky:#b9dbe1; --grass:#c3d692; --ink:#123; --red:#c0202e; --blue:#2b6cb0;
}
html,body{height:100%;}
body{
  font-family:'Fredoka',system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%, #d8eef1 0%, #a9d3da 55%, #8fbf9a 100%);
  color:var(--ink);
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  overflow:hidden;
}
.game{ width:100%; max-width:520px; text-align:center; }

.title{
  font-size:clamp(20px,5.4vw,30px); font-weight:700; color:#0e3a44; line-height:1.1;
  margin-bottom:12px; text-shadow:0 2px 0 #ffffff70;
}
.title span{ display:block; font-size:clamp(12px,3.2vw,15px); font-weight:500; color:#2c6b60; margin-top:2px;}

/* pitch */
.pitch{
  position:relative; width:100%; aspect-ratio: 4/3; border-radius:20px; overflow:hidden;
  box-shadow:0 14px 30px -12px rgba(0,40,60,.45), inset 0 0 0 3px #ffffff55;
}
.scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#keeper{ transition:transform .35s cubic-bezier(.3,1.4,.6,1); transform-origin:400px 200px; }
#keeper.dive-left{ transform:translate(-70px,18px) rotate(-32deg); }
#keeper.dive-right{ transform:translate(70px,18px) rotate(32deg); }

/* ball */
.ball{
  position:absolute; width:11%; aspect-ratio:1; left:44.5%; top:74%;
  transition:transform .62s cubic-bezier(.35,-.2,.55,1), opacity .2s;
  z-index:3; filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.ball img{ width:100%; height:100%; display:block; }
.ball.spin{ animation:spin .62s linear; }
@keyframes spin{ from{rotate:0deg} to{rotate:900deg} }

/* celebration overlay */
.celebrate{
  position:absolute; inset:0; display:none; z-index:5; background:rgba(6,30,40,.14);
}
.celebrate.show{ display:block; }

.slot{ position:absolute; bottom:2%; width:47%; display:flex; align-items:flex-end; justify-content:center; }
.slot-left{ left:2%; }
.slot-right{ right:2%; }

.toon{ display:none; width:100%; }
.toon svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 8px rgba(0,0,0,.25)); }
.celebrate-toon{ max-width:200px; }
.react-toon{ max-width:150px; opacity:.97; }

/* who scored -> celebrate on their side, rival reacts on the other */
.celebrate.messi .slot-left .celebrate-toon{ display:block; animation:raise .9s cubic-bezier(.2,1.2,.4,1); }
.celebrate.messi .slot-right .react-toon{ display:block; animation:reactAngry 1s ease-out; }
.celebrate.ronaldo .slot-right .celebrate-toon{ display:block; animation:siuu .95s cubic-bezier(.25,1.3,.5,1); }
.celebrate.ronaldo .slot-left .react-toon{ display:block; animation:reactSad 1s ease-out; }

@keyframes siuu{
  0%{ transform:translateY(-120px) scale(.7); opacity:0; }
  45%{ transform:translateY(6px) scale(1.05); opacity:1; }
  60%{ transform:translateY(-8px) scale(1); }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes raise{
  0%{ transform:translateY(40px) scale(.85); opacity:0; }
  60%{ transform:translateY(-6px) scale(1.03); opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes reactAngry{
  0%{ transform:translateY(24px) scale(.9); opacity:0; }
  40%{ opacity:1; }
  55%{ transform:translateX(-4px) rotate(-2deg); }
  70%{ transform:translateX(4px) rotate(2deg); }
  85%{ transform:translateX(-2px) rotate(-1deg); }
  100%{ transform:translateX(0) scale(1); opacity:1; }
}
@keyframes reactSad{
  0%{ transform:translateY(0) scale(.92); opacity:0; }
  45%{ opacity:1; }
  70%{ transform:translateY(6px) rotate(2deg); }
  100%{ transform:translateY(4px) rotate(1deg); opacity:1; }
}

.celebrate-text{
  position:absolute; top:14%; left:50%; transform:translateX(-50%);
  font-weight:700; font-size:clamp(26px,9vw,52px); color:#fff; white-space:nowrap;
  text-shadow:0 3px 0 #00000040, 0 0 18px #ffffff90; letter-spacing:.5px;
  animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes pop{ 0%{ transform:translateX(-50%) scale(.2); opacity:0 } 100%{ transform:translateX(-50%) scale(1); opacity:1 } }

/* camera flashes for Messi */
.flashes{ position:absolute; inset:0; pointer-events:none; }
.flashes .fx{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #fff 40%, rgba(255,255,255,0) 72%);
  opacity:0; box-shadow:0 0 14px 6px #ffffffcc;
}
.celebrate.messi .flashes .fx{ animation:flash 1.1s ease-in-out infinite; }
@keyframes flash{ 0%,100%{opacity:0; transform:scale(.6)} 8%{opacity:1; transform:scale(1.3)} 22%{opacity:0} }

/* VAR / no goal */
.var{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:6;
  background:rgba(8,20,30,.55); backdrop-filter:blur(2px); }
.var.show{ display:flex; animation:fadein .25s ease both; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
.var-card{ text-align:center; animation:pop .45s cubic-bezier(.2,1.6,.4,1) both; }
.var-img{ width:34%; min-width:120px; max-width:180px; border-radius:50%;
  border:5px solid #fff; box-shadow:0 10px 26px rgba(0,0,0,.5); background:#0b2a4a; }
.var-text{ margin-top:10px; font-weight:700; font-size:clamp(24px,8vw,44px); color:#ff5a5a;
  text-shadow:0 2px 0 #000, 0 0 18px #ff000060; }

/* players */
.players{ display:flex; gap:14px; justify-content:center; margin-top:18px; }
.player{
  flex:1; max-width:200px; background:#ffffffcc; border:none; border-radius:20px; padding:12px 8px 10px;
  cursor:pointer; position:relative; box-shadow:0 8px 18px -8px rgba(0,40,60,.5);
  transition:transform .12s ease, box-shadow .12s ease; font-family:inherit;
}
.player:active{ transform:translateY(3px) scale(.98); box-shadow:0 4px 10px -6px rgba(0,40,60,.5); }
.player:disabled{ opacity:.65; cursor:default; }
.avatar{ width:78px; height:78px; margin:6px auto 0; border-radius:50%;
  background:linear-gradient(180deg,#eef6f8,#d5e8ea); overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 0 0 3px #ffffff; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pname{ margin-top:6px; font-weight:600; font-size:15px; color:#0e3a44; }
.counter{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  min-width:44px; height:30px; padding:0 10px; border-radius:16px;
  background:#0e3a44; color:#fff; font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3); border:2px solid #fff;
}
.player[data-player="messi"] .counter{ background:#2b6cb0; }
.player[data-player="ronaldo"] .counter{ background:#c0202e; }
.counter.bump{ animation:bump .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump{ 0%{transform:translateX(-50%) scale(1)} 45%{transform:translateX(-50%) scale(1.4)} 100%{transform:translateX(-50%) scale(1)} }

.hint{ margin-top:14px; font-size:13px; color:#245a52; font-weight:500; min-height:18px; }