*{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#04100a;
  color:white;
  font-family:Arial,Helvetica,sans-serif;
  touch-action:none;
}

#game{
  width:100vw;
  height:100vh;
  display:block;
}

#hud{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  min-height:62px;
  padding:8px 12px;
  background:linear-gradient(90deg,rgba(0,20,10,.92),rgba(0,90,50,.72));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
}

#hud strong{font-size:18px}
#hud small{display:block;color:#ffe08a;font-size:12px;margin-top:2px}

.hud-score{
  display:flex;
  gap:12px;
  font-size:14px;
}

.hud-actions{
  display:flex;
  gap:8px;
}

button,select{
  border:none;
  border-radius:12px;
  padding:9px 12px;
  font-weight:bold;
}

button{
  background:#198754;
  color:white;
  cursor:pointer;
}

select{
  width:100%;
  margin:12px 0;
  font-size:16px;
}

.start-screen{
  position:fixed;
  inset:0;
  z-index:100;
  background:radial-gradient(circle at center,#0d6b3b,#020805);
  display:flex;
  align-items:center;
  justify-content:center;
}

.start-card{
  width:min(92vw,420px);
  padding:26px;
  border-radius:26px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 25px 70px rgba(0,0,0,.55);
  text-align:center;
}

.start-card h1{
  font-size:36px;
  margin-bottom:10px;
}

.start-card p{
  color:#ffe08a;
}

#powerBar{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:30;
  width:min(80vw,420px);
  height:14px;
  border-radius:20px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
}

#powerFill{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#20c997,#ffe08a,#ff3b3b);
}

.result-modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hidden{display:none!important}

.result-box{
  width:min(92vw,460px);
  padding:28px;
  border-radius:28px;
  text-align:center;
  background:linear-gradient(145deg,#064524,#0f7a43);
  box-shadow:0 0 60px rgba(255,224,138,.45);
  animation:pop .35s ease;
}

.result-box h1{
  font-size:38px;
  color:#ffe08a;
  margin-bottom:10px;
}

.result-box p{
  margin-bottom:18px;
}

@keyframes pop{
  from{transform:scale(.7);opacity:0}
  to{transform:scale(1);opacity:1}
}

.confetti{
  position:fixed;
  width:10px;
  height:10px;
  z-index:250;
  pointer-events:none;
  animation:fall 1.8s linear forwards;
}

@keyframes fall{
  to{
    transform:translateY(100vh) rotate(720deg);
    opacity:0;
  }
}

@media(max-width:760px){
  #hud{
    min-height:86px;
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .hud-score{
    order:3;
    width:100%;
    justify-content:space-between;
    font-size:12px;
  }

  #hud strong{font-size:16px}
  #hud small{font-size:11px}

  button{
    padding:7px 9px;
    font-size:12px;
  }

  .start-card h1{
    font-size:30px;
  }
}


.floating-camera{

    position:fixed;

    right:18px;

    bottom:22px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#1976d2;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:99999;

    box-shadow:0 6px 18px rgba(0,0,0,.45);

    transition:.2s;

}

.floating-camera:active{

    transform:scale(.92);

}