/* style.css */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#fffb9e;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
#game{width:100vw;height:100vh;position:relative;overflow:hidden}

/* HUD */
#hud{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:12px;align-items:center;z-index:60}
#score{font-weight:900;font-size:16px;background:rgba(255,255,255,0.95);padding:8px 12px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,0.06)}
#levelLabel{font-weight:700;font-size:14px;background:rgba(255,255,255,0.95);padding:8px 12px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,0.06)}
#timer{font-weight:800;font-size:14px;background:rgba(255,255,255,0.95);padding:8px 12px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,0.06)}

/* Progress bar */
#progressWrap{
  position:absolute;top:64px;left:12px;right:12px;height:12px;background:rgba(255,255,255,0.6);
  border-radius:999px;overflow:hidden;box-shadow:inset 0 -2px 6px rgba(0,0,0,0.06);z-index:60;
}
#progressBar{
  width:0%;height:100%;background:linear-gradient(90deg,#ffd6a5,#caffbf);transition:width 300ms ease;
}

/* Message */
.msg{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:clamp(16px,4.6vw,28px);font-weight:800;text-transform:uppercase;color:#d9534f;z-index:40;pointer-events:none}

/* Egg container */
#eggContainer{position:absolute;width:160px;height:160px;display:flex;align-items:center;justify-content:center;z-index:30;touch-action:none}

/* Egg and chick */
.egg, .chick{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:120px;height:120px;font-size:64px;user-select:none;touch-action:none;
  transition:transform 0.12s, filter 0.18s;
}
.egg{background:linear-gradient(180deg,#fffef0,#fff3c4);border-radius:50%;box-shadow:0 6px 12px rgba(0,0,0,0.12);cursor:pointer}
.cracked{background:linear-gradient(180deg,#fff3c4,#ffdca0);transform:scale(0.95)}
.hidden{display:none}
.chick{font-size:56px;bottom:6px;transform:translateY(20px);cursor:pointer}

/* Golden skin */
.egg.golden{
  background: radial-gradient(circle at 30% 20%, #fff9d6 0%, #ffd54a 20%, #f6c23e 45%, #c48b12 100%);
  box-shadow: 0 8px 20px rgba(196,138,18,0.28), inset 0 -6px 18px rgba(255,255,255,0.18);
  color:#fff;
  transform-origin:center;
}
.egg.golden::after{
  content: "✨";
  position:absolute;
  right:8px;
  top:8px;
  font-size:18px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* Diamond skin */
.egg.diamond{
  background: radial-gradient(circle at 30% 20%, #f8fcff 0%, #cfe8ff 18%, #9fd1ff 45%, #6fb8ff 100%);
  box-shadow: 0 10px 30px rgba(80,160,255,0.18), inset 0 -8px 22px rgba(255,255,255,0.22);
  color:#fff;
  transform-origin:center;
  border: 2px solid rgba(255,255,255,0.18);
}
.egg.diamond::after{
  content: "💎";
  position:absolute;
  right:8px;
  top:8px;
  font-size:18px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* Animations */
@keyframes pop {0%{transform:scale(0.95)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes bounce {0%{transform:translateY(0)}30%{transform:translateY(-18px)}60%{transform:translateY(6px)}100%{transform:translateY(0)}}
.color-flash { filter: hue-rotate(40deg) saturate(1.15); }

/* Overlay */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:80}
#overlay.hidden{display:none}
#overlayCard{background:#fff;padding:20px;border-radius:12px;min-width:260px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,0.25)}
#overlayText{font-weight:800;margin-bottom:12px}
#overlayButtons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{background:#ff8a65;border:none;padding:10px 14px;border-radius:8px;color:#fff;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(0.95)}
.btn.alt{background:#6c757d}

/* Final screen */
#finalScreen{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:90}
#finalScreen.hidden{display:none}
#finalCard{background:#fff;padding:20px;border-radius:12px;min-width:260px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,0.25)}
#finalText{font-weight:900;margin-bottom:12px}

/* Miss flash (raudonas) */
#game.miss::after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 0, 0, 0.18);
  pointer-events: none;
  z-index: 120;
  animation: missFlash 420ms ease-out;
}
@keyframes missFlash {
  0%   { opacity: 1; }
  60%  { opacity: 0.45; }
  100% { opacity: 0; }
}

/* Responsive */
@media (max-width:420px){
  #eggContainer{width:130px;height:130px}
  .egg,.chick{width:100px;height:100px;font-size:52px}
  #overlayCard, #finalCard{min-width:200px}
  #progressWrap{top:56px}
}