*, *::before, *::after {
    box-sizing: border-box;
}

/* --- 重要：基本設定 --- */
:root {
    /* (調整可能) 1シンボルの高さを指定 */
    --symbol-height: 80px; 
}
/* ---------------------- */
/* -----------アイコンの色設定----------- */

.symbol-lemon{color:yellow;}
.symbol-apple-whole{color:lime;}
.symbol-hippo{color:fuchsia;}
.symbol-bar{color:red;}
.symbol-hat-cowboy{color:teal;}
.symbol-carrot{color:orange;}
.symbol-bell{color:yellow;}

.reel li img{
	height:90%;
}

.reel{background:#fff;}

.gold-display, .bet-select, #initial-gold-setup, #initial-gold-input, #set-gold-button {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}
#initial-gold-input{text-align:right;}
#set-gold-button{
	background:#111 !important;
}

.wrapgold{
	display:block;
	width:200px;
	background:#111;
	border-radius:2px;
	text-align:right;
	margin:5px 0 0 0;
	padding:0 2px 0 0;
}

span#gold-display-amount{
	font-size:1.3em;
}


/* ---------------------- */
body {
    font-family: sans-serif;
    background: #000;
    color: white;
    display: grid;
    place-items: center;
    height: 100vh; 
    margin: 0;
    overflow: hidden; /* スクロールバーを強制的に消す */
}

#wrapper {
    width: 100%; /* 横幅は利用可能な最大幅まで */
    max-width: 450px; /* ただし最大450pxまで */
    margin: 0 auto; /* ★左右中央揃えにする */

    /* ▼ 背景画像と暗くする設定 ▼ */
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* 半透明の黒 (0.6 = 60%の暗さ) */
        url("../img/bg1.jpg"); /* 背景画像 */
    background-size: cover; /* 画像を要素に合わせて拡大縮小 */
    background-position: center center; /* 画像を中央に配置 */
    /* ▲ ここまで変更 ▲ */
    
    border-radius: 10px; /* 角丸は残す */
    /* box-shadow: ... ; ← 必要なら */
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    overflow: hidden; 
}

#slot-machine {
    padding: 10px 10px 5px 10px; /* ★下paddingを調整 */
    display: flex; /* Flexboxコンテナにする */
    flex-direction: column; /* 子要素を縦に並べる */
    flex-grow: 1; /* 親(#wrapper)の残りのスペースを埋める */
    min-height: 0; /* flexアイテムが縮小できるように */
}

/* リールを表示する「窓」コンテナ */
.reels-container {
    display: flex;
    justify-content: space-around; 
    border: 3px solid #gold;
    background: none;
    margin-bottom: 10px; 
    /* ▼▼▼ [変更] 高さを固定 ▼▼▼ */
    height: calc(var(--symbol-height) * 3); 
    /* flex-grow: 1; */ /* ← 削除 */
    /* min-height: 0; */ /* ← 削除 */
    /* height: auto; */ /* ← 削除 */
    /* ▲▲▲ [変更] ここまで ▲▲▲ */
    position: relative; 
}

/* 1リール分の「窓」 */
.reel {
    width: 30%;
    height: 100%; 
    overflow: hidden; 
    border-left: 2px solid #555;
    border-right: 2px solid #555;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    background:#fff;
}

/* リール本体 (絵文字リスト) */
.reel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.3s ease-out;
}

/* 各シンボル */
.reel li {
    height: var(--symbol-height);
    font-size: calc(var(--symbol-height) * 0.7); 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 操作ボタン --- */
.controls { display: flex; flex-direction: column; gap: 5px; } /* gap調整 */

.stop-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stop-button { padding: 10px; font-size: 1rem; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
.stop-button:disabled { background-color: #555; opacity: 0.7; }

/* ▼▼▼ STARTボタンエリア ▼▼▼ */
.start-area {
    display: flex; 
    gap: 10px;     
}
#start-button { 
    width: 50%; 
    padding: 15px; 
    font-size: 1.2rem; 
    background-color: #d40000; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
}
#start-button:disabled { background-color: #555; }


#kakuhen-info {
    width: 50%; 
    background: #333; 
    border: 1px solid #555;
    border-radius: 5px;
    color: #ff00de; 
    text-shadow: 0 0 5px #fff;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px;
}
#kakuhen-info span.chance { 
    display: inline-block;
    color: #ff0; 
    animation: chance-flash 0.5s infinite alternate;
}
@keyframes chance-flash {
    from { opacity: 1; transform: scale(1.0); }
    to { opacity: 0.7; transform: scale(1.05); }
}
#kakuhen-info span.count { 
    margin-left: 0.5em; 
}
/* ▲▲▲ ここまで ▲▲▲ */


/* ==============================
   当たりイベント用エフェクト (ライトバー)
   ============================== */
#display-board {
    background: none;
    border: 0px solid #444;
    border-bottom: 5px solid #222;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 10px;
}
#light-bar {
    display: flex; justify-content: space-around;
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 0px solid #333;
}
#light-bar i { font-size: 1.5rem; color: #111; transition: color 0.1s ease-in-out; }
#video-monitor {
    width: 100%; aspect-ratio: 16 / 9; 
    background: #000; border-radius: 5px;
    overflow: hidden; position: relative;
}
#video-monitor video {
    width: 100%; height: 100%; position: absolute;
    top: 0; left: 0; object-fit: cover; 
}
.video-hidden { display: none; }
.win-light-level-1 #light-bar i { animation: flash-small 0.5s infinite; }
@keyframes flash-small { 0%, 100% { color: #f0ad4e; } 50% { color: #444; } }
.win-light-level-2 #light-bar i:nth-child(even) { animation: flash-medium-even 0.4s infinite; }
.win-light-level-2 #light-bar i:nth-child(odd) { animation: flash-medium-odd 0.4s infinite; }
@keyframes flash-medium-even { 0%, 100% { color: #5bc0de; } 50% { color: #444; } }
@keyframes flash-medium-odd { 0%, 100% { color: #444; } 50% { color: #5bc0de; } }
.win-light-level-3 #light-bar i {
    color: #444; animation: flow-kakuhen 1.5s infinite linear;
    animation-delay: calc(var(--i) * 0.1s); 
}
@keyframes flow-kakuhen { 0% { color: #444; } 20% { color: #ff00de; } 40% { color: #444; } 100% { color: #444; } }

/* ==============================
   GOLD・BET UI
   ============================== */
#game-info {
    padding: 10px 15px; background: #222; border-radius: 8px;
    margin-bottom: 10px; color: white;
}
#initial-gold-setup .input-group { display: flex; gap: 10px; }
#initial-gold-setup input[type="number"] { flex-grow: 1; padding: 8px; font-size: 1.1rem; border: 1px solid #555; background: #111; color: white; border-radius: 5px; }
#initial-gold-setup button { padding: 8px 12px; font-size: 1.1rem; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
.stats-hidden { display: none !important; }
#game-stats { display: flex; justify-content: space-between; align-items: center; }
.gold-display { font-size: 1.8rem; font-weight: bold; color: #ffd700; text-shadow: 0 0 5px #ffc107; }
.gold-display .label { font-size: 0.8rem; color: #ccc; display: block; margin-bottom: -5px; }
.bet-select { font-size: 1.1rem; }
.bet-select .label { font-size: 0.8rem; color: #ccc; display: block; margin-bottom: 0px; }
.bet-select label { margin-left: 10px; }
.bet-select input[type="radio"] { margin-right: 3px; transform: scale(1.3); }

/* ==============================
   当たり配当表示
   ============================== */
#win-display {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-size: 4rem; 
    font-weight: bold; color: #fff;
    text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 30px #fff;
    animation: win-popup 1.5s ease-out; z-index: 10; 
    pointer-events: none; display: none;
}
@keyframes win-popup { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-50%, -100%) scale(1.2); opacity: 0; } }

/* ==============================
   ゲームオーバー画面
   ============================== */
#game-over-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex;
    justify-content: center; align-items: center; z-index: 99;
}
.game-over-hidden { display: none !important; }
.game-over-box {
    background: #111; border: 3px solid #ff0000; border-radius: 10px;
    padding: 30px; text-align: center; color: white; box-shadow: 0 0 20px #ff0000;
}
.game-over-box h1 { color: #ff0000; margin-top: 0; }
#restart-button {
    padding: 10px 20px; font-size: 1.2rem; background: #007bff; color: white;
    border: none; border-radius: 5px; cursor: pointer; margin-top: 10px;
}

/* ==============================
   音量ボタン スタイル
   ============================== */
#mute-button {
    position: absolute; top: 25px; right: 30px; z-index: 5; 
    background: rgba(0, 0, 0, 0.5); color: white; border: 1px solid #888;
    border-radius: 5px; font-size: 1.2rem; line-height: 1;
    padding: 5px 8px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s;
}
#mute-button:hover { opacity: 1; }
#mute-button i { width: 1.2em; }

/* ==============================
   カットイン スタイル
   ============================== */
#cutin-display {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20; background: #000;
}
.cutin-hidden { display: none; }
#cutin-display .cutin-animation {
    display: none; width: 100%; height: 100%; object-fit: cover;
}

/* ==============================
   当たりライン スタイル & アニメーション
   ============================== */
.reels-container { position: relative; }
.payline {
    position: absolute; left: 5%; right: 5%; height: 10px; 
    background: linear-gradient(90deg, rgba(255, 0, 222, 0), rgba(255, 0, 222, 0.9), rgba(255, 0, 222, 0)); 
    box-shadow: 0 0 15px 5px #ff00de, 0 0 20px 8px #fff; 
    border-radius: 5px; opacity: 0; pointer-events: none; 
    transform: scale(0); transition: transform 0.2s ease-out, opacity 0.2s ease-out; 
}
#payline-1 { top: calc(var(--symbol-height) * 0.5 - 5px); } 
#payline-2 { top: calc(var(--symbol-height) * 1.5 - 5px); } 
#payline-3 { top: calc(var(--symbol-height) * 2.5 - 5px); } 
#payline-4, #payline-5 {
    height: 105%; top: -2.5%; left: -2%; right: -2%;
    transform-origin: center center; 
}
#payline-4 { transform: rotate(25deg) scaleY(0.04) scaleX(0); } 
#payline-5 { transform: rotate(-25deg) scaleY(0.04) scaleX(0); }
.payline.show { animation: pulse-glow 1.5s ease-in-out; }
@keyframes pulse-glow {
    0% { transform: scale(0.8); opacity: 0; }
    30% { transform: scale(1.1); opacity: 1; } 
    50% { transform: scale(1.0); opacity: 0.9; }
    100% { transform: scale(1.0); opacity: 0; }
}
.payline#payline-4.show { animation: pulse-glow-diag-down 1.5s ease-in-out; }
.payline#payline-5.show { animation: pulse-glow-diag-up 1.5s ease-in-out; }
@keyframes pulse-glow-diag-down {
    0% { opacity: 0; transform: rotate(25deg) scaleY(0.04) scaleX(0.8); }
    30% { opacity: 1; transform: rotate(25deg) scaleY(0.04) scaleX(1.1); }
    50% { opacity: 0.9; transform: rotate(25deg) scaleY(0.04) scaleX(1.0); }
    100% { opacity: 0; transform: rotate(25deg) scaleY(0.04) scaleX(1.0); }
}
@keyframes pulse-glow-diag-up {
    0% { opacity: 0; transform: rotate(-25deg) scaleY(0.04) scaleX(0.8); }
    50% { opacity: 1; transform: rotate(-25deg) scaleY(0.04) scaleX(1.1); }
    70% { opacity: 0.9; transform: rotate(-25deg) scaleY(0.04) scaleX(1.0); }
    100% { opacity: 0; transform: rotate(-25deg) scaleY(0.04) scaleX(1.0); }
}
.reel li.winning-symbol {
     animation: symbol-highlight 0.5s ease-in-out forwards; 
    position: relative; z-index: 5; 
}
@keyframes symbol-highlight {
    0% { transform: scale(1.0); filter: brightness(1.0) drop-shadow(0 0 0px white); }
    50% { transform: scale(1.1); filter: brightness(1.7) drop-shadow(0 0 10px gold); } 
    100% { transform: scale(1.0); filter: brightness(1.0) drop-shadow(0 0 0px white); }
}


/* ==============================
   [追加] タブレット縦向き用スタイル調整
   ============================== */
@media screen and (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
    #wrapper {
        /* 画面の高さの90%を最大高さにする (上下に5%ずつの余白ができる) */
        /* この値を 85vh や 95vh などに変えて調整してください */
        height: auto;
        max-height:100vh; 
        
        /* 幅は維持 */
        width: 90vw;
        max-width:100vw; 
    }
}