<!-- 
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&&%%#(###(#((#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%/*,... ../,  ..   ... ../*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&/.,,  ...... .    .. . . , .,,**#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&*...,. .    ..  ...    ...  .  ,. .../@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@&/..,...,     .  .         . ..      .. ...,%@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@%,.,., ..     ,.  .       ... .    . .   .  .//@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@( ..,. ,,.     ., .  . .  ......  ..      . .    .(@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@%//... .,, ..    . .       ... .  . ... . ....     .*%@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@/,... ...... . ... .......  ..,, ..,.         .      *%@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@&#/. .,,....  ......  .. ,   ...,..,. ... ...           .#@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@#*.. ...,,, .,,... .....  ., ,. .,..,...,,.,. . . . ...  ,#@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@(,. ...,,.,,,. .... .....,....,.,.,..,,,,*/*,.. .......  .*@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@#..,,.,.,.,,,,,....,.........,..,.,.,*((((#((*,..,.. .   .,%@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@&*,,,.,...,,*,.,**,,,,,,... .,,,,**(####%%%##/*,,...,..  .(@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@*..,,.. ... ..,,,,,,..,,*,*/((#(####%%%%%###((/...,,,, ..#@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@*..,...     ,****/#%%%%&&&&&&&%%%%&%%%#(((#((((,  .,,,.,,%@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@(,,.,.. *,*/#%%&&%#(/(#%&&&&%%%#(((#%%%%%##(((/,   ...,,,@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@(*, . .*/////**       *(#%%##(.             ..,*. ..,./%@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@&*.. *.#/.....          *  .                 .*. .(#%@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@&/**,#/*..             (%%/              . ##(*./##@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@#*/#%,.             %%&%%%             .*###(,/%%@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@%*(%#,.         /.#%%%%%##*           %###(/(%@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@#%###%%%%%%%%%%%#%%&&&%%####%%%%%&&%%######%@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&###%%%%&&&%%%%##%%%%##%###%%&&&%%%#######@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&%#%%%%%&&&&%%%%%%%%%##%%%%%%%%%%#####(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&%%%%%%%%%&&%%%%%%%%%%%%%%%%%%%#####(%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&%%%%%%%%%%%%##%%##%%%%%%%%%%#####&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&%%%%%%####%%%%%%%%##%###%######%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&###########(((#############(((@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%##%%#%%%%%%%%%%%######((#((*,@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&###%%%%%%%%%%%%%%%#(((####*..,..%@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&###############((######%(.,... .../@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@##%%##%%%%%#####%%%%%#%*,,..... ......,&@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(. ##%%%%%%%%%%%%%%%%#.,@#..... ............,*#@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@.....#%%%%%&&&&&&%%%*,,,,,@,..  ............. . . ...,*%@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*.. ,..,.(#%&&&&&&&%%,,,,,..,...  ......................... ... ,(@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@#, ....  ,,.#&,./#%%%%#,,,.,,,.,,...  ............... ................. 
@@@@@@@@@@@@@@@@@@@@@@&*.. ........  ...,,......,,.,,,,,,...&&,.. ............... ..................
@@@@@@@@@@@@@@@@(,................  (&,...,. #%,,,*@@@......... ....................................
-->
<!-- 一番好きな動画はこれ -->
<!-- https://youtu.be/J4fkJtnklCo?si=UuEkQLqgKX_atGBL -->

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEIKIN ROULETTE</title>
    <style>
        #background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* 背景を最背面に */
        }
        #backgroundImg {
            width: 100%;
            height: 100%;
        }

        #images-container {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-around;
        }
        img {
            width: 400px;
            height: 400px;
        }
        
        /* スマートフォン用のスタイル */
        @media (max-width: 600px) {
            img {
                width: 60px;
                height: 60px;
            }
        }


        #score-container {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: right;
        }
        #score {
            font-size: 30px;
        }
        #score-area {
            background-color: white;
            margin-right: 100px;

        }

        #message-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        #message {
            font-size: 50px;
            color: red;
            background-color: white;
        }

        #tweet-btn {
            width: 200px;
            height: 50px;
            font-size: 30px;
            margin-right: 100px;
            background-color: rgb(0, 132, 255);
            color: white;
        }
        #share-score {
            text-decoration: none;
            color: white;
        }

        #button-container {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
        }
        #start_btn {
            margin-top: 50px;
            width: 200px;
            height: 50px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="background">
        <!-- 確変モードのときの背景 -->
        <div id="highProbabilityMode" style="display: none;">
            <img id="backgroundImg" src="./background/kakuhen.png">
        </div>

        <!-- 7揃いのときの背景 -->
        <div id="sevenMode" style="display: none;">
            <img id="backgroundImg" src="./background/777.png">
        </div>
        
    </div> 

    <div id="score-container">
        <div id="message-container" style="display: none;">
            <p id="message">スコアがゼロになった・・・</p>
        </div>
        <p id="score-area">スコア: <span id="score">0</span></p>
        <p id="tweet-btn" type="button"><a id="share-score">Tweetする</a></p>
    </div>

    <div id="images-container">
        <img src="./seikin_imgs/01.png">
        <img src="./seikin_imgs/01.png">
        <img src="./seikin_imgs/01.png">
    </div>
    <div id="button-container">
        <button id="start_btn">スタート</button>
    </div>

    <div id="ytplayer" style="display: none;"></div>

</body>
<script>
    // Load the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Replace the 'ytplayer' element with an <iframe> and
    // YouTube player after the API code downloads.    
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
        height: '120',
        width: '160',
        videoId: 'luLRhYTNT2Q',
        events: {
            'onReady': onPlayerReady,
            // 'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
            // 'onStateChange': onPlayerStateChange,
            // 'onError': onPlayerError
        }
        });
    }
    function onPlayerReady(event) {
        event.target.mute();
        event.target.seekTo(6);
        event.target.playVideo();
        setTimeout(function() {
            event.target.unMute();
            event.target.setVolume(1);
        }, 1500);

        setInterval(() => {
            if (player && player.getCurrentTime() > 54) {
                player.seekTo(6);
            }
        }, 2000); 
    }
</script>
<script src="./script.js"></script>
</html>