/* Body要素全体のスタイル */
body {
    display: flex;              /* フレックスコンテナとして要素を中央に配置 */
    justify-content: center;    /* 水平方向に中央揃え */
    align-items: center;        /* 垂直方向に中央揃え */
    height: 100vh;              /* 画面全体の高さを占める */
    margin: 0;                  /* ページの余白をなくす */
    background-color: #fff;     /* 背景色を白に設定 */
    color: #000;                /* 文字色を黒に設定 */
    flex-direction: column;     /* 要素を縦に積み重ねる */
    position: relative;         /* 相対位置指定 */
}

/* タイマー表示部分のスタイル */
#timer {
    font-size: 30vw;            /* フォントサイズを画面幅の30%に設定 */
    text-align: center;         /* テキストを中央揃え */
    margin-bottom: 20px;        /* 下部の余白を追加 */
    white-space: nowrap;        /* テキストを折り返さずに表示 */
    max-width: 100vw;           /* 最大幅を画面幅に制限 */
}

/* 残り秒数表示部分のスタイル */
#seconds-left {
    font-size: 15vw;            /* フォントサイズを画面幅の15%に設定 */
}

/* ボタンコンテナ全体のスタイル */
.button-container {
    position: absolute;         /* 絶対位置指定 */
    bottom: 15px;               /* 下部からの位置 */
    right: 15px;                /* 右端からの位置 */
    display: flex;              /* フレックスボックスを使用 */
    flex-direction: row;        /* 横方向に並べる */
    gap: 10px;                  /* ボタン間のギャップ */
}

/* ボタンのスタイル */
.button-container button {
    font-size: 16px;            /* フォントサイズを16pxに設定 */
    padding: 10px 20px;         /* パディングを設定 */
    border: none;               /* ボーダーをなしに設定 */
    border-radius: 5px;         /* ボーダーの角を丸くする */
    cursor: pointer;            /* ポインターを指定 */
    color: white;               /* 文字色を白に設定 */
    white-space: nowrap;        /* テキストを折り返さずに表示 */
}

.button-container #startButton {
    background-color: #28a745;   /* スタートボタンの背景色 */
}

.button-container #pauseButton {
    background-color: #ffc107;   /* 一時停止ボタンの背景色 */
}

.button-container #resetButton {
    background-color: #dc3545;   /* リセットボタンの背景色 */
}

/* スタートボタンの無効化スタイル */
.button-container #startButton.disabled {
    color: #ccc;                /* 無効化時の文字色をグレーに設定 */
    pointer-events: none;       /* クリックイベントを無効化 */
}

/* ボタンのホバースタイル */
.button-container button:hover {
    opacity: 0.9;               /* ホバー時の透過度を少し下げる */
}

/* レスポンシブデザイン（横幅384px以下） */
@media (max-width: 384px) {
    .button-container {
        bottom: 30px;           /* ボタンの位置を調整 */
        right: 50%;             /* ボタンを画面中央に寄せる */
        transform: translateX(50%); /* ボタンを水平中央に移動 */
        gap: 5px;               /* ボタン間のギャップを調整 */
    }
    .button-container button {
        font-size: 12px;        /* ボタンのフォントサイズを調整 */
        padding: 8px 12px;      /* ボタンのパディングを調整 */
    }
}

/* レスポンシブデザイン（768px以下） */
@media (max-width: 768px) {
    #timer {
        font-size: 18vw;        /* 画面幅が768px以下のときのフォントサイズ */
    }
    #seconds-left {
        font-size: 10vw;        /* 画面幅が768px以下のときのフォントサイズ */
    }
    .button-container {
        bottom: 30px;           /* ボタンの位置を調整 */
        right: 50%;             /* ボタンを画面中央に寄せる */
        transform: translateX(50%); /* ボタンを水平中央に移動 */
        gap: 5px;               /* ボタン間のギャップを調整 */
    }
    .button-container button {
        font-size: 14px;        /* ボタンのフォントサイズを調整 */
        padding: 8px 16px;      /* ボタンのパディングを調整 */
    }
}

/* 画面サイズ表示用 */
#screen-size {
    position: absolute;         /* 絶対位置指定 */
    bottom: 2px;                /* 下部からの位置 */
    right: 2px;                 /* 右部からの位置 */
    font-size: 5px;            /* フォントサイズを小さめに設定 */
    color: white;               /* 文字色を白に設定 */
}

/* 背景ビデオ */
#background-video {
    width: 100vw;               /* 幅を画面幅に設定 */
    height: 100vh;              /* 高さを画面高さに設定 */
    position: absolute;         /* 絶対位置指定 */
    top: 0;                     /* 上部からの位置 */
    left: 0;                    /* 左部からの位置 */
    z-index: -1;                /* z-indexを指定 */
    object-fit: cover;          /* オブジェクトのフィットをカバー */
}

/* 確認ダイアログのスタイル */
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dialog p {
    margin-bottom: 20px;
}

.dialog button {
    margin: 0 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dialog button#confirmYesButton {
    background-color: #28a745;
    color: white;
}

.dialog button#confirmNoButton {
    background-color: #dc3545;
    color: white;
}