﻿* { margin: 0; padding: 0; box-sizing: border-box }
html, body { height: 100%; overflow: hidden; background: #4ec0ca; font-family: system-ui, sans-serif; user-select: none }
#game { display: block; width: 100vw; height: 100vh; background: #4ec0ca }
#ui { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 10 }
.screen { pointer-events: auto; text-align: center; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); animation: popIn 0.3s ease-out }
.screen:not(.active) { display: none }
@keyframes popIn { from { opacity: 0; transform: scale(0.9) } to { opacity: 1; transform: scale(1) } }
h1 { font-size: clamp(2.5rem, 12vw, 4rem); font-weight: 800; letter-spacing: 0.1em; margin-bottom: 0.5rem; background: linear-gradient(180deg, #fff, #ffe066); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
h2 { font-size: clamp(2rem, 10vw, 3rem); font-weight: 800; margin-bottom: 1rem; color: #fff }
.best-score { font-size: clamp(1rem, 4vw, 1.5rem); margin-bottom: 1.5rem; opacity: 0.9; font-weight: 600 }
.final-score { font-size: clamp(1.5rem, 6vw, 2.5rem); font-weight: 800; margin-bottom: 0.5rem; color: #fff }
button { font: inherit; font-size: clamp(1rem, 4vw, 1.3rem); font-weight: 700; padding: 0.9rem 2.5rem; border: none; border-radius: 50px; background: #fff; color: #4ec0ca; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.2); transition: transform 0.1s, box-shadow 0.1s; min-width: 180px }
button:active { transform: scale(0.95); box-shadow: 0 3px 10px rgba(0,0,0,0.2) }
button:focus-visible { outline: 3px solid #ffe066; outline-offset: 3px }
#hud { justify-content: flex-start; padding-top: clamp(1rem, 5vh, 2rem) }
#score { font-size: clamp(3rem, 15vw, 6rem); font-weight: 800; line-height: 1; text-shadow: 0 4px 8px rgba(0,0,0,0.3); animation: scorePop 0.15s ease-out }
@keyframes scorePop { 0% { transform: scale(1) } 50% { transform: scale(1.2) } 100% { transform: scale(1) } }
@media (max-width: 480px) { button { padding: 1rem 2rem; min-width: 160px } }
