body {
    background-color: rgb(44 44 44);
    color: white;
    font: bold 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    text-align: center;
}

#board {
    width: 300px;
    height: 400px;
    background-color: rgb(62 62 62);
    border: 3px solid rgb(117 117 117);
    margin: 20px auto;
}

#ball {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
}

#message {
    min-height: 60px;
    font-size: 32px;
    font-weight: bold;
    color: #f69636;
    text-align: center;
    margin-top: 10px;
}

#startBtn.btn--orange, #retryBtn.btn--orange {
    color: #fff;
    background-color: #eb6100;
    border-bottom: 5px solid #b84c00;
}
#startBtn.btn--orange:hover, #retryBtn.btn--orange:hover {
    margin-top: 3px;
    color: #fff;
    background: #f56500;
    border-bottom: 2px solid #b84c00;
}
#startBtn.btn--shadow, #retryBtn.btn--shadow {
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

/* ★ 修正：盤面の直上に中央寄せで配置するコンパクトなスタイル */
#rankingBox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px auto;
    padding: 6px 16px;
    background: #2a2a30;
    border-radius: 20px;
    width: fit-content;
    font-size: 14px;
}

.ranking-title {
    color: #ffd700;
    font-weight: bold;
}

#rankingList {
    color: #fff;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
}

.button-group {
    margin-top: 10px;
}