/* main.css - Final Night Theme with big screens, hover, countdown */
*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,Arial,Helvetica,sans-serif}
html,body{height:100%}
body{min-height:100vh;background:linear-gradient(180deg,#05061a,#0a0e2a);color:#fff;display:flex;flex-direction:column;align-items:center;padding:20px}
header{margin-top:6px}
#gameTitle{font-size:32px;text-shadow:0 0 12px #6f8cff77}

/* Panels */
.panel{background:rgba(255,255,255,0.03);backdrop-filter:blur(6px);padding:28px;border-radius:16px;width:520px;max-width:96%;text-align:center;box-shadow:0 12px 40px rgba(20,24,60,0.6);margin-top:60px}
.bigPanel{transform:scale(1.03);transition:transform .18s}
.bigPanel:hover{transform:scale(1.05)}
/*practicing to chnage the css*/

/* Titles */
.bigText{font-size:48px;margin-bottom:6px;letter-spacing:1px;text-shadow:0 0 12px #ffffff22}
.subText{font-size:20px;color:#e8eeff;margin-bottom:10px}

/* Mode buttons */
.modes{display:flex;gap:12px;justify-content:center;margin:12px 0 18px}
.modeBtn{padding:12px 18px;border-radius:12px;border:none;background:rgba(255,255,255,0.04);color:#fff;font-weight:700;cursor:pointer;transition:transform .12s,background .12s;box-shadow:0 6px 18px rgba(0,0,0,0.3)}
.modeBtn:hover{transform:translateY(-4px);background:rgba(91,111,255,0.14)}
.modeBtn.active{background:#5b6fff;box-shadow:0 10px 28px rgba(91,111,255,0.18)}

/* Countdown */
.countdown{font-size:46px;margin:8px 0;color:#fff;min-height:58px;}

/* Primary buttons */
.primary{padding:14px 22px;border-radius:14px;border:none;background:#5b6fff;color:white;font-size:20px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(91,111,255,0.28)}
.bigBtn{padding:18px 28px;font-size:22px}

/* Canvas */
#gameCanvas{display:none;margin-top:22px;border-radius:12px;border:4px solid #5b6fff;box-shadow:0 18px 50px rgba(91,111,255,0.08);background:linear-gradient(to top,#07102a,#0d0f25)}

/* Game Over heading */
.goHeading{font-size:46px;color:#ff5c5c;text-shadow:0 0 14px #ff5c5c88}

/* Best score highlight */
#bestScore{color:#ffd65c;font-size:22px;margin-top:8px;text-shadow:0 0 10px #ffd65c66;font-weight:800}

/* Score badges area on Game Over */
.scoreBadge{display:inline-block;background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:8px;margin:6px;font-weight:700;color:#fff}

/* small footer */
.small{opacity:0.7;margin-top:18px}

/* flash animation */
body.flash{animation:flash .28s ease-in-out}
@keyframes flash{0%{filter:brightness(1.8) hue-rotate(-10deg)}100%{filter:none}}

/* responsive */
@media(max-width:520px){
  .bigText{font-size:34px}
  .bigBtn{padding:14px 20px;font-size:18px}
  .panel{width:92%;margin-top:40px}
  #gameTitle{font-size:26px}
}