:root{
  --groundY: 120px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background:#111;
  color:#fff;
  font-family: Arial, sans-serif;
  overflow:hidden;
 /* background: url(https://www.freepik.com/free-vector/flat-design-red-comic-style-background_11685287.htm#fromView=keyword&page=1&position=18&uuid=0de1674a-1712-4f68-b150-777ba5629d51&query=Spiderman+background) no-repeat center fixed;
    background-size: cover; */
}

#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;

 
  background-image:
    linear-gradient(to top, #0367A6 20%, #D91A2A 60%, #D92546 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;
  height: auto;
  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 */
  height: auto;
  max-width: 72px;
  bottom: var(--groundY);
  user-select:none;
  -webkit-user-drag:none;
  display: block;
}

.fly{
  bottom: calc(var(--groundY) + 70px);
  width:62px;
}
.web{
  position:absolute;
  width:2px;
  background:#f2f2f2;
  transform-origin: bottom center;
  opacity:0.9;
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
#fx{
  z-index: 9;
}

@keyframes webShoot {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 120px;
    opacity: 0.9;
  }
}
#fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.web {
  position: absolute;
  width: 3px;
  background: white;
  transform-origin: bottom center;
  border-radius: 2px;
}

/* --- 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:#011526;
  border:1px solid #af2121;
  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;
}