<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta content="user-scalable=0" name="viewport" />
        <style type="text/css">
          body{{
            background-color: #000000;
            -webkit-text-size-adjust: none;
            padding: 0px;
            margin: 0 auto;
            text-align:center;
            color: #FFFFFF;
            -webkit-text-size-adjust: auto;
            -webkit-touch-callout:none;
            -webkit-tap-highlight-color:rgba(255,255,0,0.4);
            height: 100%;
            font-family: Hiragino Kaku Gothic ProN,Hiragino Kaku Gothic Pro,Meiryo,Helvetica,Arial,sans-serif;
            font-size: 34pt;
            line-height: 36pt;
          }}
            .a_left{{text-align:left;}}
            .a_center{{text-align:center;}}
            .w100{{width:100%;}}
            .d_ib{{display:inline-block;}}
            .mb10p{{margin-bottom:10%;}}
            .f90{{font-size:90%;}}
            .pt50{{padding-top:50px;}}
            #header {{
                text-align: center;
                background-color: #000000;
                border-bottom: 2px solid #ffffff;
                top: 0px;
                width: 100%;
                padding: 0px;
                display: block;
                z-index: 4;
                position: fixed;
            }}
            div#wrapper{{
            	width: 100%;
              position: relative;
              z-index: 1;
            }}
            .wrapper_box{{
              text-align:center;
              margin-top:5%;
              display: inline-block;
              position: relative;
              width: 100%;
            }}
            .ttl_height{{
              height:40px;
              margin:20px 0px;
            }}
            .bt_bg01_ifedup {{
                background: url("/files/web/bt_bg01_640.gif");
                background-color: transparent;
                background-repeat: no-repeat;
                background-size:cover;
                padding: 10px;
                display: block;
                text-align:center;
                font-size:70%;
                width:380px;
                height: 61px;
                color: #DDDDDD;
                margin: 20px auto;
            }}
            .bt_bg01 {{
                background: url("/files/web/bt_bg04_640.gif");
                background-color: transparent;
                background-repeat: no-repeat;
                background-size:cover;
                display: block;
                text-align:center;
                font-size:70%;
                width:250px;
                height: 42px;
                color: #DDDDDD;
                margin: 20px auto;
            }}
            .bt_bg01_ac {{
                background: url("/files/web/bt_bg04_ac_640.gif");
                background-color: transparent;
                background-repeat: no-repeat;
                background-size:cover;
                display: block;
                text-align:center;
                font-size:70%;
                width:250px;
                height: 42px;
                color: #DDDDDD;
                margin: 20px auto;
            }}
            .song-list {{
                list-style: none;
                padding: 0;
                margin: 0;
            }}

            .song-item {{
                margin-bottom: 1px;
            }}

            .song-button {{
                display: block;
                padding: 15px;
                background-color: #333333;
                color: white;
                text-decoration: none;
                text-align: center;
                font-size: 26px;
                border: none;
                width: 100%;
                box-sizing: border-box;
            }}

            .song-button:hover {{
                background-color: #444444;
            }}

            .song-item + .song-item {{
                border-top: 1px solid #444444;
            }}
            .button-row {{
                display: flex;
                justify-content: center;
                gap: 10px; /* Space between buttons */
                margin-bottom: 20px; /* Space between rows */
            }}
            .player-element {{
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: url("/files/web/PLAYERback.gif") no-repeat center center;
                background-size: cover;
                border-radius: 10px;
                padding: 10px;
                margin: 10px 0;
                height: 100px;
                width: 98%;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            }}

            .player-info {{
                flex-grow: 0.9;
                text-align: left;
            }}

            .name {{
                font-size: 36px;
                font-weight: bold;
                color: #FFFFFF;
                margin-bottom: 5px;
            }}

            .title {{
                height: 40px;
                width: auto;
            }}

            .player-score {{
                font-size: 40px;
                font-weight: bold;
                color: #FFD700;
                text-align: left;
                margin-right: 100px;
            }}
            .rank {{
                font-size: 20px;
                font-weight: bold;
                color: white;
                margin-right: 10px;
            }}
            .avatar {{
                width: 70px;
                height: 70px;
                background-color: black;
                border: 2px solid #333;
                background-size: cover;
                background-position: center;
                margin-right: 10px;
                border-radius: 8px;
                padding: 20px;
            }}
            .title-list {{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                margin-top: 20px;
            }}

            .title-row {{
                display: flex;
                justify-content: center;
                gap: 10px;
            }}

            .title-image {{
                width: 40vw;
                height: auto;
                cursor: pointer;
                transition: transform 0.2s;
            }}

            .title-image-selected {{
                width: 40vw;
                height: auto;
                border: 3px solid lightgray;
                pointer-events: none;
            }}

            .title-image:hover {{
                transform: scale(1.1);
            }}
        </style>
    </head>
    <body>
        <div id="header">
            <img class="ttl_height" src="/files/web/ttl_title.png" alt="TITLE" />
        </div>
        <div id="wrapper">
            <div class="wrapper_box">
                <div class="a_left w100 d_ib mb10p">
                    <br>{text}
                </div>
            </div>
        </div>
    </body>
</html>