*{box-sizing:border-box}
:root{
  --bg:#0b0b0d;
  --card:#18181b;
  --rise:#131315;
  --hi:#202024;
  --line:#ffffff12;
  --orange:#f4801f;
  --deep:#c85f0f;
  --white:#f5f4f2;
  --muted:#98959e;
  --green:#36c76b;
  --red:#ff5b5b;
}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
  background:
    radial-gradient(circle at 50% -10%,#f4801f1c,transparent 34rem),
    linear-gradient(180deg,#0d0d0f,#09090b 75%);
}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.wrap{width:min(940px,100%);margin:auto;padding:26px 18px 60px}
.top{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.back{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:14px;background:#ffffff08;
  color:var(--white);text-decoration:none;font-size:22px
}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--orange);margin:2px 0 5px}
h1{font-size:clamp(27px,5vw,42px);line-height:1;margin:0 0 8px;letter-spacing:-.04em}
.top p{margin:0;color:var(--muted);max-width:650px;line-height:1.5}
.game-card,.result{
  border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#18181b,#111113);
  box-shadow:0 24px 70px #0008;overflow:hidden
}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat{background:#151517;padding:13px 10px;text-align:center}
.stat small{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.14em;margin-bottom:4px}
.stat strong{font-size:18px}
.stat.combo strong{color:var(--orange)}
.stadium{
  position:relative;height:min(590px,68vh);min-height:470px;overflow:hidden;
  background:
    linear-gradient(180deg,#15151a 0 24%,#202025 24% 34%,#235d35 34% 100%);
  touch-action:none;user-select:none
}
.lights{
  position:absolute;inset:0 0 auto;height:34%;
  background:
    radial-gradient(circle at 15% 10%,#fff9 0 2px,transparent 3px),
    radial-gradient(circle at 35% 16%,#fff7 0 2px,transparent 3px),
    radial-gradient(circle at 65% 12%,#fff8 0 2px,transparent 3px),
    radial-gradient(circle at 86% 17%,#fff7 0 2px,transparent 3px),
    linear-gradient(180deg,#1c1c22,#111116);
}
.crowd{
  position:absolute;left:0;right:0;top:19%;height:16%;
  opacity:.8;
  background:
    radial-gradient(circle,#f4801f 0 2px,transparent 2.5px) 0 0/23px 17px,
    radial-gradient(circle,#f5f4f2 0 1.5px,transparent 2px) 8px 5px/29px 21px,
    #17171b;
  border-top:1px solid #ffffff10;border-bottom:3px solid #f4801f55
}
.goal{
  position:absolute;z-index:3;left:50%;top:18%;transform:translateX(-50%);
  width:min(76%,620px);height:42%;
  border:7px solid #e8e8e8;border-bottom-width:8px;border-radius:5px 5px 2px 2px;
  box-shadow:0 7px 0 #aaa,0 18px 30px #0008;
  cursor:crosshair;overflow:hidden
}
.net{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#ffffff2b 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(#ffffff2b 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg,#19191db5,#111116d9)
}
.bonus{
  position:absolute;z-index:2;top:10px;padding:5px 7px;border:1px solid #f4801f66;
  border-radius:7px;background:#0b0b0dc9;color:var(--orange);font-size:9px;font-weight:1000;
  letter-spacing:.08em;opacity:.72
}
.bonus-tl{left:10px}.bonus-tr{right:10px}
.keeper{
  position:absolute;z-index:5;left:50%;bottom:8px;width:72px;height:112px;
  transform:translateX(-50%);transform-origin:50% 80%;
  transition:transform .24s cubic-bezier(.2,.8,.25,1),left .24s cubic-bezier(.2,.8,.25,1),bottom .24s;
  pointer-events:none
}
.keeper-head{position:absolute;width:28px;height:28px;border-radius:50%;background:#d49b72;left:22px;top:2px;border:2px solid #101012}
.keeper-body{position:absolute;width:42px;height:53px;border-radius:12px 12px 8px 8px;background:var(--orange);left:15px;top:27px;border:3px solid #111}
.keeper-arm,.keeper-leg{position:absolute;background:var(--orange);border:3px solid #111;border-radius:20px;transform-origin:50% 8%}
.keeper-arm{width:15px;height:58px;top:31px}
.keeper-arm.left{left:6px;transform:rotate(48deg)}
.keeper-arm.right{right:6px;transform:rotate(-48deg)}
.keeper-leg{width:17px;height:50px;top:70px;background:#24242a}
.keeper-leg.left{left:19px;transform:rotate(18deg)}
.keeper-leg.right{right:19px;transform:rotate(-18deg)}
.keeper.dive-left{transform:translateX(-50%) rotate(-72deg) scale(1.08)}
.keeper.dive-right{transform:translateX(-50%) rotate(72deg) scale(1.08)}
.aim{
  position:absolute;z-index:4;width:50px;height:50px;border:2px solid #f4801f;
  border-radius:50%;transform:translate(-50%,-50%);left:50%;top:42%;pointer-events:none;
  box-shadow:0 0 0 5px #f4801f20,0 0 22px #f4801f55
}
.aim:before,.aim:after{content:"";position:absolute;background:var(--orange)}
.aim:before{left:50%;top:-8px;width:2px;height:64px;transform:translateX(-50%)}
.aim:after{top:50%;left:-8px;height:2px;width:64px;transform:translateY(-50%)}
.aim span{position:absolute;inset:17px;border:2px solid var(--orange);border-radius:50%;background:#f4801f18}
.shot-mark{
  position:absolute;z-index:8;width:24px;height:24px;border:3px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;opacity:0
}
.shot-mark.show{animation:mark .5s ease-out}
@keyframes mark{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
.pitch{position:absolute;inset:34% 0 0;background:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(180deg,#2d7442,#1f5f34);background-size:80px 100%,100% 100%}
.pitch:after{content:"";position:absolute;left:50%;top:48%;width:210px;height:120px;border:2px solid #ffffff35;border-radius:50%;transform:translate(-50%,-50%)}
.penalty-line{position:absolute;left:50%;top:48%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0003}
.ball{
  position:absolute;z-index:7;left:50%;bottom:11%;transform:translateX(-50%);
  width:58px;height:58px;display:grid;place-items:center;font-size:48px;filter:drop-shadow(0 10px 7px #0008);
  transition:transform .34s cubic-bezier(.2,.8,.2,1),left .34s,top .34s,opacity .18s
}
.ball.shoot{transform:translate(-50%,-50%) scale(.42) rotate(250deg)}
.callout{
  position:absolute;z-index:12;left:50%;top:12px;transform:translateX(-50%);
  padding:8px 13px;border-radius:999px;background:#0b0b0dcc;border:1px solid #ffffff16;
  font-size:12px;font-weight:1000;letter-spacing:.08em;white-space:nowrap
}
.callout.good{color:#72e69b;border-color:#36c76b55}
.callout.bad{color:#ff7777;border-color:#ff5b5b55}
.callout.gold{color:#ffb65f;border-color:#f4801f66}
.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:22px;background:#09090bdc;backdrop-filter:blur(7px)}
.overlay.hidden{display:none}
.overlay-box{width:min(430px,100%);text-align:center;padding:28px;border:1px solid var(--line);border-radius:22px;background:#151517e8;box-shadow:0 20px 70px #000a}
.overlay-box .big{font-size:52px}
.overlay-box h2{font-size:28px;margin:6px 0 10px}
.overlay-box p{color:var(--muted);line-height:1.55;margin:0 auto 20px}
.primary,.secondary{
  border:0;border-radius:13px;font-weight:1000;letter-spacing:.05em;cursor:pointer;
  min-height:48px;padding:0 20px
}
.primary{color:#fff;background:linear-gradient(135deg,var(--orange),var(--deep));box-shadow:0 10px 28px #f4801f2c}
.primary:active,.secondary:active{transform:translateY(1px)}
.hint{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:13px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);background:#111113}
.result{margin-top:18px;padding:28px;text-align:center}
.result.hidden{display:none}
.result-kicker{color:var(--orange);font-size:10px;font-weight:1000;letter-spacing:.18em}
.result h2{font-size:38px;margin:7px 0}
.result>p{color:var(--muted);margin:0 0 20px}
.reward{width:min(480px,100%);margin:0 auto 20px;padding:20px;border:1px solid #f4801f40;border-radius:18px;background:#f4801f0b}
.reward small{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.15em}
.reward strong{display:block;font-size:20px;color:var(--orange);margin:6px 0 12px}
.code{font:900 24px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;padding:13px;border-radius:12px;background:#09090b;border:1px dashed #f4801f66;word-break:break-all}
.secondary{margin-top:10px;background:#252529;color:#fff;border:1px solid var(--line)}
.reward p{font-size:11px;color:var(--muted);margin:9px 0 0}
.again{display:block;margin:0 auto 14px}
.games-link{color:var(--muted);text-decoration:none;font-size:12px}
.games-link:hover{color:var(--orange)}
@media(max-width:620px){
  .wrap{padding:16px 10px 40px}
  .top{gap:10px}
  .top p{font-size:13px}
  .hud .stat{padding:10px 4px}
  .stat strong{font-size:15px}
  .stadium{min-height:500px;height:66vh;max-height:610px}
  .goal{width:90%;height:38%;top:21%;border-width:5px}
  .keeper{transform:translateX(-50%) scale(.88);bottom:1px}
  .keeper.dive-left{transform:translateX(-50%) rotate(-72deg) scale(.95)}
  .keeper.dive-right{transform:translateX(-50%) rotate(72deg) scale(.95)}
  .ball{bottom:9%}
  .hint{gap:8px 14px}
}