:root {
    --bg-color: #1a1a2e;
    --panel-color: #16213e;
    --field-color: #0f3460;
    --target-color: #e94560;
    --accent-color: #4ecca3;
    --text-color: #ffffff;
}

body {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden;
    touch-action: manipulation;
}

#game-container { width: 95%; max-width: 500px; text-align: center; }

header h1 { font-size: 1.8rem; margin: 0 0 10px 0; color: #ffd700; }

#info-panel {
    display: flex; justify-content: space-around;
    padding: 15px; background: var(--panel-color);
    margin-bottom: 10px; border-radius: 12px; font-size: 1.2rem;
}

#game-field {
    position: relative; height: 200px; background: var(--field-color);
    overflow: hidden; border-top: 4px solid var(--accent-color);
    border-bottom: 4px solid var(--accent-color);
}

#number-lane {
    position: absolute; top: 0; left: 0;
    display: flex; align-items: center; height: 100%;
    will-change: transform;
}

.num-item {
    min-width: 80px; font-size: 3.5rem; font-weight: bold;
    color: var(--accent-color); text-align: center;
}

#target-box {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 120px;
    border: 4px solid var(--target-color);
    box-shadow: 0 0 15px var(--target-color);
    z-index: 10; pointer-events: none;
}

.highlight { color: #fff !important; text-shadow: 0 0 20px #fff; transform: scale(1.2); }

#arrow { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); font-size: 3rem; z-index: 5; }

/* オーバーレイ・ボタン強化 */
#overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100;
}

#result-board {
    background: var(--panel-color); padding: 30px 20px; border-radius: 20px;
    border: 3px solid #ffd700; width: 85%; max-width: 400px; box-sizing: border-box;
}

#result-board h2 { color: #ffd700; margin: 0 0 10px 0; }

.big-btn {
    display: block; margin: 20px auto 0; padding: 18px 40px;
    font-size: 1.6rem; font-weight: 900; background: var(--accent-color);
    color: white; border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 6px 0 #2d7a61; width: 90%;
}

.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #2d7a61; }

#controls { margin-top: 25px; display: flex; justify-content: center; gap: 15px; }

#shoot-button {
    background: var(--target-color); color: white; flex: 2; height: 60px;
    font-size: 1.5rem; font-weight: bold; border: none; border-radius: 12px; box-shadow: 0 4px 0 #a82a40;
}
#shoot-button:disabled { background: #444; box-shadow: none; color: #777; }

#stop-button { background: #666; color: white; flex: 1; border: none; border-radius: 12px; font-weight: bold; }
#stop-button:disabled { opacity: 0.3; }