body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100dvh; background: #87CEEB; font-family: sans-serif; overflow: hidden; touch-action: none; }
.game-container { position: relative; width: 100vw; max-height: 95dvh; max-width: 800px; aspect-ratio: 2 / 1; display: flex; justify-content: center; align-items: center; }
canvas { width: 100%; height: auto; max-height: 100%; background-color: #fcfcfc; display: block; image-rendering: pixelated; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
#score { position: absolute; top: 10px; left: 15px; font-size: 20px; font-weight: bold; color: #333; pointer-events: none; text-shadow: 1px 1px 0px white; z-index: 10; }
#leaderboard-ui { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.98); padding: 15px; border-radius: 12px; box-shadow: 0 0 30px rgba(0,0,0,0.7); text-align: center; z-index: 100; width: 320px; max-width: 90%; max-height: 85%; border: 3px solid #ffcc00; flex-direction: column; }
.leaderboard-content { overflow-y: auto; margin-bottom: 10px; padding-right: 5px; }
#leaderboard-list { list-style: none; padding: 0; margin: 10px 0; text-align: left; }
#leaderboard-list li { padding: 8px 0; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; font-size: 14px; }
input#player-name { padding: 10px; width: 100%; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
button { padding: 12px; background: #27ae60; color: white; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; width: 100%; }
#close-btn { background: #2980b9; }
#rotate-device { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30, 30, 30, 0.98); color: white; z-index: 99999; justify-content: center; align-items: center; text-align: center; padding: 20px; box-sizing: border-box; }