* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
html, body { height: 100%; }
body { display: flex; align-items: center; justify-content: center; background: linear-gradient(#70c5ce, #a0e9ff); padding: 12px; }
#game { position: relative; width: min(420px, 96vw); aspect-ratio: 2 / 3; box-shadow: 0 8px 30px rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; background: #70c5ce; }
canvas { display: block; width: 100%; height: 100%; background: linear-gradient(#70c5ce, #a0e9ff); touch-action: manipulation; }
#hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; }
#score { background: rgba(255,255,255,0.85); padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: 18px; color: #333; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.42); z-index: 20; }
#overlay.hidden { display: none; }
.overlay-panel { background: #fff; padding: 18px 22px; border-radius: 10px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.2); max-width: 90%; }
#title { font-size: 28px; margin-bottom: 6px; }
#best { color: #666; margin-bottom: 12px; }
#instructions { color: #444; font-size: 14px; margin-top: 10px; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
#start, #restart { background: #ffd54f; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; }
#start:active, #restart:active { transform: translateY(1px); }
#topScoresContainer, #finalTopScores { margin-top: 12px; text-align: left; }
ol { padding-left: 18px; margin-top: 6px; }
#finalScore { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
#finalBest { color: #666; margin-bottom: 10px; }
#credits { position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: #222; z-index: 12; }
/* Darker text for better contrast */
body, button, input, h1, h2, h3, h4, div { color: #222; }
/* Password overlay specifics */
#pwOverlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); z-index: 40; }
#pwOverlay .overlay-panel { max-width: 320px; }
/* Password row */
.pw-row { display: flex; gap: 8px; align-items: center; }
#pwInput { flex: 1; }
#pwToggle { background: #f0f0f0; border: 1px solid #ccc; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
#pwToggle:active { transform: translateY(1px); }
#pwInput { width: 100%; padding: 8px 10px; font-size: 16px; border-radius: 6px; border: 1px solid #ccd; margin-top: 8px; }
#pwBtn { margin-top: 8px; padding: 8px 12px; background: #4caf50; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
#pwBtn:active { transform: translateY(1px); }
/* Small screens adjustments */
@media (max-width: 420px) {
	#title { font-size: 22px; }
	.overlay-panel { padding: 14px 16px; }
}

/* Ensure any element with the utility hidden class is not shown */
.hidden { display: none !important; }