* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:"Arial Black","Segoe UI",system-ui,sans-serif;
  color:#fff; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  height:100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select:none; -webkit-user-select:none; touch-action:manipulation; overscroll-behavior:none;
  /* stadium scene: night sky -> pitch green (matches the board edges) */
  background:
    radial-gradient(60% 30% at 18% 4%, rgba(120,170,255,.35), rgba(0,0,0,0) 60%),
    radial-gradient(60% 30% at 82% 4%, rgba(120,170,255,.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#06112b 0%, #0a1c40 26%, #0b2a2a 60%, #0c441c 82%, #0e521f 100%);
}
@supports (height:100dvh){ body{ height:100dvh; } }

/* ---- top HUD band ---- */
#hud{
  flex:0 0 auto; width:100%; max-width:780px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 18px 4px;
}
#muteBtn{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  border:2px solid rgba(150,190,255,.6); background:rgba(10,22,55,.6);
  color:#fff; font-size:18px; cursor:pointer; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 0 12px rgba(60,120,255,.5);
}
#scoreboard{ flex:1 1 auto; text-align:center; display:flex; flex-direction:column; line-height:1; }
#scoreboard .lbl{ font-size:11px; letter-spacing:3px; color:#cfe0ff; opacity:.85; }
#scoreValue{ font-size:clamp(26px,6vw,40px); color:#ffe04a; text-shadow:0 0 16px rgba(255,206,58,.9), 0 2px 0 #6b4a00; }
#ballsBox{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; line-height:1; }
#ballsBox .lbl{ font-size:11px; letter-spacing:2px; color:#cfe0ff; opacity:.85; }
#ballsBox span{ font-size:clamp(18px,4.6vw,24px); color:#ffe04a; text-shadow:0 0 12px rgba(255,206,58,.7); }

/* ---- board (keeps 1122:1402 aspect, fits between HUD and dock) ---- */
#wrap{
  flex:0 0 auto; position:relative; margin:2px auto;
  width:  min(100vw, 60vh);
  height: calc(min(100vw, 60vh) * 1.2496);
  border-radius:14px; overflow:hidden;
  box-shadow:0 10px 36px rgba(0,0,0,.55), 0 0 26px rgba(70,110,255,.18);
}
@supports (height:100dvh){
  #wrap{ width:min(100vw,60dvh); height:calc(min(100vw,60dvh)*1.2496); }
}
#bg{ display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
#board{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---- bottom dock with big KICK button ---- */
#dock{
  flex:0 0 auto; width:100%; max-width:780px;
  display:flex; justify-content:center; padding:6px 18px 14px;
}
#kickBtn{
  width:min(88%, 520px); height:64px; min-height:54px; border:none; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,#ffe071,#ffb300); color:#5a3d00;
  font-size:clamp(20px,6vw,30px); font-weight:900; letter-spacing:1px;
  box-shadow:0 6px 0 #b97e00, 0 0 26px rgba(255,200,60,.7);
  transition:transform .08s, filter .2s; touch-action:manipulation;
}
#kickBtn:active:not(:disabled){ transform:translateY(4px); box-shadow:0 2px 0 #b97e00, 0 0 26px rgba(255,200,60,.7); }
#kickBtn:disabled{ filter:grayscale(.55) brightness(.85); cursor:not-allowed; box-shadow:0 4px 0 #6b5200; }

/* ---- popup ---- */
#popup{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:opacity .25s; }
#popup.hidden{ opacity:0; pointer-events:none; }
.popup-card{ position:relative; text-align:center; padding:4vh 7vw; background:radial-gradient(circle at 50% 30%, rgba(40,80,180,.95), rgba(8,18,45,.97)); border:3px solid #ffce3a; border-radius:24px; box-shadow:0 0 40px rgba(255,206,58,.7); animation:pop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop{ 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }
.popup-burst{ position:absolute; inset:-30px; border-radius:50%; z-index:-1; background:radial-gradient(circle, rgba(255,206,58,.5), rgba(255,206,58,0) 65%); animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.popup-title{ font-size:clamp(20px,3.4vh,40px); color:#fff; letter-spacing:3px; text-shadow:0 0 14px rgba(120,180,255,.9); }
.popup-amount{ font-size:clamp(38px,7vh,80px); color:#ffce3a; margin-top:6px; text-shadow:0 0 22px rgba(255,206,58,.9), 0 3px 0 #7a5400; }
.popup-lucky{ margin-top:10px; font-size:clamp(14px,2.2vh,26px); color:#ffd34d; text-shadow:0 0 14px rgba(255,200,60,1); animation:pulse .7s ease-in-out infinite alternate; }
@keyframes pulse{ from{transform:scale(1)} to{transform:scale(1.12)} }
.hidden{ display:none !important; }
#confetti{ position:fixed; inset:0; z-index:25; pointer-events:none; }