@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
:root { --neon-pink: #ff0055; --neon-blue: #00ffff; }
body { margin: 0; padding: 0; background-color: #000; color: white; font-family: 'Russo One', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.background-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('bg.png') no-repeat center center; background-size: cover; z-index: -1; }
.main-wrapper { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 60px 20px; }
.container { text-align: center; width: 100%; max-width: 500px; }
.glitch-title { margin-bottom: 30px; line-height: 1.1; }
.en-main { font-size: 3.5rem; text-shadow: 3px 3px 0px var(--neon-pink), -3px -3px 0px var(--neon-blue); }
.en-sub { font-size: 1rem; color: var(--neon-blue); letter-spacing: 2px; } /* 少しサイズを調整 */

/* ★修正：テキストが消えた分、上下のパディングを増やしてバランスを取る */
.result-area {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--neon-pink);
    border-radius: 15px;
    padding: 50px 20px; /* 上下のパディングを少し増やしました */
    margin-bottom: 30px;
}

#song-result { font-size: 2rem; min-height: 3.5rem; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 10px #fff; }
.button-group { display: flex; flex-direction: column; gap: 15px; }
.btn-neon { background: transparent; padding: 15px; font-size: 1.1rem; border-radius: 50px; cursor: pointer; font-family: 'Russo One', sans-serif; transition: 0.3s; border: 2px solid; }
.btn-neon.spin { border-color: var(--neon-blue); color: var(--neon-blue); }
.btn-neon.spin:hover { background: var(--neon-blue); color: #000; }
.btn-neon.share { border-color: var(--neon-pink); color: var(--neon-pink); }
.btn-neon.share:hover { background: var(--neon-pink); color: #fff; }
.content-footer { margin-top: 50px; padding: 20px 0; font-size: 0.8rem; color: #888; }
.official-link { color: var(--neon-pink); text-decoration: none; }