/* 画面全体を中央寄せ & 背景色 */
body {
    margin: 0;
    padding: 40px 0;
    background: radial-gradient(circle at top, #444 0, #111 60%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

/* スロット筐体の外枠 */
.slot-machine {
    background: linear-gradient(145deg, #555, #222);
    border-radius: 24px;
    padding: 10px 24px 16px; /* ← ここを小さくした */
    box-shadow: 0 12px 28px rgba(0,0,0,0.8);
    border: 4px solid #999;
    width: min(800px, 120vw);
    position: relative;
}

/* 上にネームプレートっぽいパーツ */
/* .slot-machine::before {
    content: "SLOT";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 18px;
    background: #f5d76e;
    border-radius: 999px;
    border: 2px solid #b38b2a;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 12px;
} */

/* リール部分の枠（既存の .display を筐体内パネルぽく） */
.display {
    display: flex;
    justify-content: center;
    gap: 0px;
    padding: 4px 8px;  /* ← 横は少し、縦は4pxに変更 */
    margin-bottom: 10px; /* ← 下の余白も減らす */
    background: #111;
    border-radius: 16px;
    border: 3px inset #444;
    font-size: 7rem;
}

/* 各リールの中身は今のまま・中央揃えだけ補助 */
.leftDisplay,
.centerDisplay,
.rightDisplay {
    text-align: center;
}

/* スタートボタンの位置だけ中央寄せ */
.startBtn {
    display: block;
    margin: 8px auto 0;
    font-size: 2rem;
}

.leftDisplay,
.centerDisplay,
.rightDisplay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* ← これが重要！隙間ゼロ */
}

.leftDisplay p,
.centerDisplay p,
.rightDisplay p {
    margin: 0;
    padding: 0;
    line-height: 0.75; /* ← 絵文字の上下余白をさらに圧縮 */
}

.leftBtn,
.centerBtn,
.rightBtn {
    margin: 4px;
    padding-top: 0;  /* 絵文字との距離を最小限に */
}