:root{
  --groundY: 120px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background:#111;
  color:#fff;
  font-family: Arial, sans-serif;
  overflow:hidden;
}

#hud{
  position:fixed;
  top:14px;
  right:16px;
  display:flex;
  gap:14px;
  font-weight:700;
  letter-spacing:1px;
  z-index:10;
  opacity:0.95;
}

#game{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;

  /* EVIL INC BACKGROUND */
  background-image:
    linear-gradient(to top, #0b1f24 20%, #122f36 60%, #183f47 100%),
    url("https://images.steamusercontent.com/ugc/1861687440401560732/077CFAD96F868C20E85A010112F7D1BF95796560/?ima=fit&imcolor=%23000000&imh=358&impolicy=Letterbox&imw=637&letterbox=true");

  background-repeat: no-repeat;
  background-position:
    center bottom,
    center bottom;

  background-size:
    cover,
    cover;
}


#ground{
  position:absolute;
  left:0;
  right:0;
  bottom: var(--groundY);
  height:4px;
  background:#444;
}

#player{
  position:absolute;
  width:92px;
  left:140px;
  bottom: var(--groundY);
  transform-origin: bottom left;
  user-select:none;
  -webkit-user-drag:none;
}

.player-duck{
  transform: scaleY(0.65) translateY(22px);
}

#obstacles, #fx{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.obstacle{
  position:absolute;
  width:72px;                 /* bomb size */
  bottom: var(--groundY);
  user-select:none;
  -webkit-user-drag:none;
}

.fly{
  bottom: calc(var(--groundY) + 70px);
  width:62px;
}

/* --- Explosion FX --- */
.explosion{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  box-shadow: 0 0 14px 6px rgba(255,140,0,0.55);
  animation: boom 420ms ease-out forwards;
  transform: translate(-50%, -50%);
}

.explosion::before,
.explosion::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(255,200,0,0.65);
  animation: ring 420ms ease-out forwards;
}

@keyframes boom{
  0%{ transform: translate(-50%, -50%) scale(0.6); opacity:1; }
  60%{ transform: translate(-50%, -50%) scale(4.2); opacity:0.95; }
  100%{ transform: translate(-50%, -50%) scale(5.2); opacity:0; }
}

@keyframes ring{
  0%{ opacity:0.9; transform: scale(0.4); }
  100%{ opacity:0; transform: scale(1.35); }
}

/* shake screen briefly on boom */
.shake{
  animation: shake 220ms linear;
}
@keyframes shake{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(6px,-2px); }
  50%{ transform: translate(-6px,2px); }
  75%{ transform: translate(4px,2px); }
  100%{ transform: translate(0,0); }
}

#tip{
  position:absolute;
  left:16px;
  bottom:16px;
  font-size:14px;
  opacity:0.75;
}

.hidden{ display:none; }

#overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
}

.panel{
  background:#1c1c1c;
  border:1px solid #333;
  border-radius:14px;
  padding:22px 24px;
  width:min(420px, 92vw);
  text-align:center;
}

.big{
  font-size:28px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:14px;
}

.hidden { display: none !important; }

button{
  cursor:pointer;
  padding:10px 16px;
  font-size:16px;
  border:none;
  border-radius:12px;
}