* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; background-color: #000; overflow: hidden; }

#gameCanvas {
    display: block; width: 100vw; height: 100vh;
    image-rendering: pixelated; background-color: #87CEEB;
}

#musicControl {
    position: absolute; top: 20px; right: 20px; width: 50px; height: 50px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 200; transition: transform 0.2s, opacity 0.3s; opacity: 0.7;
}

#musicControl:hover { transform: scale(1.1); opacity: 1; }

.circle {
    position: absolute; width: 100%; height: 100%;
    border: 3px solid white; border-radius: 50%;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

.note {
    width: 10px; height: 8px; background: white; position: relative;
    margin-top: 5px; margin-right: -4px; box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

.note::before { content: ''; position: absolute; right: 0; bottom: 0; width: 3px; height: 18px; background: white; }
.note::after { content: ''; position: absolute; right: -8px; top: 0; width: 8px; height: 4px; background: white; }

#overlay {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    color: white; text-align: center; pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8); font-family: "Hiragino Sans", "Microsoft JhengHei", sans-serif;
    transition: opacity 1s; z-index: 100;
}