/* ---------- Global ---------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{box-sizing:border-box;margin:0}
body{font-family:Roboto,Helvetica,sans-serif;background:#fefefe;color:#111}

/* ---------- Header ---------- */
#topBar{display:flex;justify-content:space-between;align-items:center;background:#111;color:#fff;
        padding:8px 14px;font-weight:700}
#logo{font-size:18px} #stats{font-size:16px}

/* ---------- Card ---------- */
#card{max-width:460px;margin:40px auto;padding:24px;text-align:center;background:#fff;border-radius:8px;
      box-shadow:0 4px 16px rgba(0,0,0,.1);transition:box-shadow .3s}
#mascot{width:180px;margin-bottom:18px}
#dailyQuestion{font-size:28px;font-weight:700;margin-bottom:22px}

#userAnswer{width:100%;max-width:100vw;padding:10px;font-size:18px;font-weight:700;margin-bottom:16px;
            position:relative;z-index:10}

/* ---------- Buttons ---------- */
button{border:none;border-radius:4px;font-weight:700;cursor:pointer}
#submitAnswerBtn{background:#188038;color:#fff;padding:10px 24px;font-size:17px}
#submitAnswerBtn:hover{background:#0f6b2c}
.btnRow{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.iconBtn{background:#444;color:#fff;font-size:20px;width:48px;height:48px;display:flex;align-items:center;
         justify-content:center;position:relative;transition:background-color .3s}
.iconBtn:hover{background:#222}
#hintBtn[disabled]{background:#aaa;cursor:not-allowed}
#hintCount{font-size:14px;position:absolute;bottom:4px;right:6px}

#result{min-height:28px;font-size:20px;font-weight:700;margin-top:8px}

/* ---------- Toast ---------- */
#toastContainer{position:fixed;top:70px;right:20px;z-index:9999}
.toast{background:#333;color:#fff;padding:10px 16px;border-radius:4px;margin-top:10px;
       animation:slideIn .4s,fadeOut .4s 2.8s forwards;font-weight:700}
@keyframes slideIn{from{opacity:0;transform:translateX(120%)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateX(120%)}}
@media(prefers-color-scheme:dark){.toast{background:#eee;color:#000}}

/* ---------- How-to modal ---------- */
dialog{border:none;border-radius:8px;padding:20px 26px;max-width:320px;font-size:16px}
dialog::backdrop{background:rgba(0,0,0,.45)}
#closeHowTo{margin-top:12px;padding:8px 20px;background:#188038;color:#fff;border:none;border-radius:4px}

/* ---------- Countdown ---------- */
#countdownTimer{position:fixed;left:10px;bottom:10px;background:#eee;padding:8px 12px;border-radius:4px;font-weight:700}
#countdownTimer #timer{font-weight:700}

/* ---------- Effects ---------- */
@keyframes neonFlash{0%,100%{box-shadow:0 0 0 rgba(0,255,255,0)}
                     50%    {box-shadow:0 0 22px 5px rgba(0,255,255,.95)}}
.arcade{animation:neonFlash .8s ease-out}
@keyframes timeFlash{0%,100%{box-shadow:0 0 0 rgba(255,0,0,0)}
                     50%    {box-shadow:0 0 22px 5px rgba(255,0,0,.9)}}
.timesUp{animation:timeFlash .4s ease-out}

/* ---------- GAME OVER overlay ---------- */
#gameOver{
  display:none;                    /* JS toggles this to flex */
  position:fixed;inset:0;z-index:2000;
  justify-content:center;align-items:center;
  background:rgba(0,0,0,.85);
  font-size:64px;font-weight:900;color:#fff;
  text-shadow:4px 4px 0 #ff00b7,-4px -4px 0 #00e5ff;
}

/* ---------- Floating icons ---------- */
.phone-button{display:inline-block;background:red;color:#fff;width:40px;height:40px;border-radius:50%;
              text-align:center;line-height:40px;font-size:20px;position:fixed;bottom:20px;right:20px;
              transition:background-color .3s,transform .3s}
.phone-button:hover{background:darkred;transform:scale(1.1)}

.sippy-cup-button{display:inline-block;background:#fff;width:40px;height:40px;border-radius:50%;
                  text-align:center;line-height:40px;position:fixed;bottom:20px;right:70px;
                  transition:background-color .3s,transform .3s}
.sippy-cup-button img{max-width:100%;max-height:100%}
.sippy-cup-button:hover{background:#f0f0f0;transform:scale(1.1)}

.arrow-blink{position:fixed;bottom:80px;right:81px;background:#fff;color:#000;font-weight:700;font-size:18px;
             padding:5px;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.2);animation:blink 1s linear infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}