/* Mobile-first cozy styles */
:root{
  --bg1: #fffbf2;
  --bg2: #f5eafd;
  --accent: #a084ff;
  --text: #2b2b2b;
}
*{box-sizing:border-box}
html,body,#game-wrap{height:100%;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg1), var(--bg2));
  -webkit-tap-highlight-color: transparent;
}
#game-wrap{position:relative;overflow:hidden}
canvas{display:block;width:100%;height:100vh}

/* UI */
#ui{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;padding:6px 10px}
#score, #high-score, #misses{background:rgba(255,255,255,0.6);backdrop-filter:blur(6px);padding:6px 10px;border-radius:14px;font-weight:600}

/* overlay */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0.0),rgba(245,240,255,0.2));}
#overlay.hidden{display:none}
#overlay .panel{background:rgba(255,255,255,0.92);padding:22px;border-radius:16px;text-align:center;box-shadow:0 6px 20px rgba(10,10,20,0.08)}
#overlay h1{margin:0 0 6px;font-size:20px;color:var(--accent)}
#overlay p{margin:0 0 14px}
#overlay button{background:var(--accent);color:white;border:0;padding:10px 16px;border-radius:10px;font-weight:700}

/* small vase hint for accessibility when canvas is off-screen */
@media(min-width:700px){
  #overlay .panel{width:420px}
}