body {
    margin: 0;
    overflow: hidden;
    background-color: #333;
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    justify-content: center; /* 垂直方向中央寄せ (キャンバスとボタンを合わせて中央) */
    align-items: center; /* 水平方向中央寄せ */
    min-height: 100vh;
    font-family: 'Press Start 2P', cursive;
    color: white;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

canvas {
    background-color: skyblue;
    border: 2px solid #fff;
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 100px); /* 画面の高さからUI要素分のスペースを引く量を微調整 */
    width: auto;
    height: auto;
    object-fit: contain;
}

#gameUI {
    position: absolute; /* UIは画面左上に固定のためabsoluteを維持 */
    top: 10px;
    left: 10px;
    display: flex;
    gap: 20px;
    font-size: 1.5em;
    z-index: 10;
}

/* Start Screen Styles */
#startScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 30;
}

#startScreen h1 {
    font-size: 3em;
    color: #ffd700;
    text-shadow: 4px 4px #8b0000;
    margin-bottom: 20px;
}

#startScreen button {
    padding: 15px 30px;
    font-size: 1.8em;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#startScreen button:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

#startScreen button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}


/* Game Over Screen Styles */
#gameOverScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 20;
}

#gameOverScreen h1 {
    font-size: 3em;
    color: #ff4500;
    text-shadow: 4px 4px #8b0000;
}

#gameOverScreen button {
    padding: 12px 25px;
    font-size: 1.5em;
    cursor: pointer;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#gameOverScreen button:hover {
    background-color: #da190b;
    transform: translateY(-2px);
}

#gameOverScreen button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Stage Clear Screen Styles (新規追加) */
#stageClearScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 100, 0, 0.8); /* 少し緑がかった背景 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 25; /* Game Overより優先順位を低く、Start Screenより高く */
}

#stageClearScreen h1 {
    font-size: 3em;
    color: #90ee90; /* 明るい緑色 */
    text-shadow: 4px 4px #006400; /* 濃い緑の影 */
    margin-bottom: 20px;
}

#stageClearScreen button {
    padding: 12px 25px;
    font-size: 1.5em;
    cursor: pointer;
    background-color: #32cd32; /* ライムグリーン */
    color: white;
    border: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin: 5px; /* ボタン間の余白 */
}

#stageClearScreen button:hover {
    background-color: #228b22; /* フォレストグリーン */
    transform: translateY(-2px);
}

#stageClearScreen button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Pause Screen Styles */
#pauseScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 少し透明な黒 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 40; /* 他の画面より高いZ-indexで最前面に */
}

#pauseScreen h1 {
    font-size: 3.5em;
    color: #add8e6; /* 薄い水色 */
    text-shadow: 4px 4px #00008b; /* 濃い青の影 */
    margin-bottom: 20px;
}

#pauseScreen button {
    padding: 15px 30px;
    font-size: 1.8em;
    cursor: pointer;
    background-color: #007bff; /* 青 */
    color: white;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    margin: 10px;
}

#pauseScreen button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

#pauseScreen button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* 画面の状態に応じて表示/非表示を切り替えるためのクラス */
.hidden {
    display: none !important;
}

/* Control Buttons */
#controls {
    margin-top: 10px; /* キャンバスとの間に少し隙間を作る */
    width: 100%; /* 幅は維持 */
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 50;
}

#dpad {
    display: flex;
    gap: 10px;
}

.control-button {
    background-color: #555;
    color: white;
    border: none;
    padding: 15px 25px;
    font-size: 1.5em;
    cursor: pointer;
    border-radius: 8px;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.1s ease;
    min-width: 80px;
    text-align: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.control-button:active {
    opacity: 1;
    transform: scale(0.95);
}

/* ゲーム開始時にコントロールを表示するためにhiddenクラスを解除 */
#controls.hidden {
    display: none;
}