From a1e8fd08c8f5fc8a9ad74c4769ca98f06fbaab95 Mon Sep 17 00:00:00 2001
From: UnitedAirforce <i5904503668i@gmail.com>
Date: Sun, 11 May 2025 14:22:44 +0800
Subject: [PATCH] web cleanup

---
 files/history.html         |  59 +-----
 files/inform.html          |  73 +-------
 files/mission.html         |  90 +--------
 files/profile.html         |  81 +--------
 files/ranking.html         | 216 +---------------------
 files/register.html        |  79 +-------
 files/status.html          | 214 +---------------------
 files/style.css            | 362 +++++++++++++++++++++++++++++++++++++
 files/web_shop_1.html      |  71 +-------
 files/web_shop_2.html      |  71 +-------
 files/web_shop_3.html      |  71 +-------
 files/web_shop_detail.html |  67 +------
 12 files changed, 384 insertions(+), 1070 deletions(-)
 create mode 100644 files/style.css
diff --git a/files/history.html b/files/history.html
index b526a76..6228052 100644
--- a/files/history.html
+++ b/files/history.html
@@ -3,64 +3,7 @@
     <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;
-          }
-            .d_bl{display:block;}
-            .a_left{text-align:left;}
-            .a_center{text-align:center;}
-            .w90{width:90%;}
-            .w100{width:100%;}
-            .d_ib{display:inline-block;}
-            .mb10p{margin-bottom:10%;}
-            .f90{font-size:90%;}
-            .pt50{padding-top:50px;}
-            .f60{font-size:60%;}
-            .f70{font-size:70%;}
-            .plr25{padding-left:25px;padding-right:25px;}
-            .plr50{padding-left:50px;padding-right:50px;}
-            .m_auto{margin: 0px auto;}
-            #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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }
-            .ttl_height{
-              height:40px;
-              margin:20px 0px;}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
diff --git a/files/inform.html b/files/inform.html
index 862f105..ddd7f2e 100644
--- a/files/inform.html
+++ b/files/inform.html
@@ -3,78 +3,7 @@
     <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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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;
-            }}
-            .title-image {{
-                width: 40vw;
-                height: auto;
-                cursor: pointer;
-                transition: transform 0.2s;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
diff --git a/files/mission.html b/files/mission.html
index dce5988..93e0a22 100644
--- a/files/mission.html
+++ b/files/mission.html
@@ -3,95 +3,7 @@
     <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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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;
-            }}
-            .mission-list {{
-                display: flex;
-                flex-direction: column;
-                width: 100%;
-                margin: 20px 0;
-                font-family: Arial, sans-serif;
-            }}
-
-            .mission-row {{
-                display: flex;
-                justify-content: space-between;
-                padding: 10px;
-                border-bottom: 1px solid #ddd;
-            }}
-
-            .mission-level {{
-                font-weight: bold;
-                color: #DDD;
-            }}
-
-            .mission-song {{
-                color: #EEE;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
diff --git a/files/profile.html b/files/profile.html
index 93c5b43..7d6b7bc 100644
--- a/files/profile.html
+++ b/files/profile.html
@@ -3,80 +3,7 @@
     <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;}}
-            .f60{{font-size:60%;}}
-            .f70{{font-size:70%;}}
-            .plr25{{padding-left:25px;padding-right:25px;}}
-            #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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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:285px;
-                height: 61px;
-                color: #DDDDDD;
-                margin: 20px auto;
-            }}
-            .input{{
-                font-size: 1em;
-                background-color: #000000;
-                color: #dddddd;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
@@ -89,7 +16,7 @@
                     <br>
                     <div class="f90 a_center pt50">Logged in as {user}</div>
                     <form action=/logout/?{pid} method=post>
-                        <input class="bt_bg01" type=submit value="Log Out">
+                        <input class="bt_bg01_narrow" type=submit value="Log Out">
                     </form>
                     <br>
                     <form action=/password_reset/?{pid} method=post>
@@ -105,7 +32,7 @@
                             <input class="input" id=new name=new>
                             <br>
                         </div>
-                        <input class="bt_bg01" type=submit value='Reset Password'>
+                        <input class="bt_bg01_narrow" type=submit value='Reset Password'>
                     </form>
                     <br>
                     <form action=/name_reset/?{pid} method=post>
@@ -121,7 +48,7 @@
                             <input class="input" id=password name=password>
                             <br>
                         </div>
-                        <input class="bt_bg01" type=submit value='Edit Username'>
+                        <input class="bt_bg01_narrow" type=submit value='Edit Username'>
                     </form>
                 </div>
             </div>
diff --git a/files/ranking.html b/files/ranking.html
index 97ffeee..6b27acf 100644
--- a/files/ranking.html
+++ b/files/ranking.html
@@ -3,221 +3,7 @@
     <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;
-            }}
-            .leaderboard-container {{
-              height: calc(53vh);
-                overflow-y: auto; 
-                border: 1px solid #444; 
-                margin: 20px auto;
-                padding: 10px;
-                background-color: #111; 
-            }}
-
-            .leaderboard-player {{
-                display: flex;
-                align-items: center;
-                padding: 10px;
-                margin-bottom: 10px;
-                border-bottom: 1px solid #333; 
-                color: #ddd; 
-            }}
-
-            .leaderboard-info {{
-                flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                padding-left: 10px;
-            }}
-
-            .leaderboard-score {{
-              font-size: 40px;
-                font-weight: bold;
-                text-align: left;
-                margin-right: 100px;
-            }}
-
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
diff --git a/files/register.html b/files/register.html
index fcc0216..a4ec7ad 100644
--- a/files/register.html
+++ b/files/register.html
@@ -3,80 +3,7 @@
     <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;}}
-            .f60{{font-size:60%;}}
-            .f70{{font-size:70%;}}
-            .plr25{{padding-left:25px;padding-right:25px;}}
-            #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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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:285px;
-                height: 61px;
-                color: #DDDDDD;
-                margin: 20px auto;
-            }}
-            .input{{
-                font-size: 1em;
-                background-color: #000000;
-                color: #dddddd;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
@@ -105,7 +32,7 @@
                             <input class="input" id=password name=password>
                             <br>
                         </div>
-                        <input class="bt_bg01" type=submit value='Register'>
+                        <input class="bt_bg01_narrow" type=submit value='Register'>
                     </form>
                     <br>
                     <form action=/login/?{pid} method=post>
@@ -121,7 +48,7 @@
                             <input class="input" id=password name=password>
                             <br>
                         </div>
-                        <input class="bt_bg01" type=submit value='Log In'>
+                        <input class="bt_bg01_narrow" type=submit value='Log In'>
                     </form>
                 </div>
             </div>
diff --git a/files/status.html b/files/status.html
index 17b9353..c7c700b 100644
--- a/files/status.html
+++ b/files/status.html
@@ -3,219 +3,7 @@
     <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>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
diff --git a/files/style.css b/files/style.css
new file mode 100644
index 0000000..54b524b
--- /dev/null
+++ b/files/style.css
@@ -0,0 +1,362 @@
+.dlc_body {
+    background: url('/files/web/gc4ex_bg.jpg') no-repeat center center fixed;
+    background-size: cover;
+    color: white;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+.dlc_container {
+    max-width: 800px;
+    height: 90vh;
+    margin: 0px auto;
+    padding: 20px;
+}
+.dlc_logo {
+    width: 100%;
+    max-width: 500px;
+    margin-bottom: 10px;
+}
+.text-content {
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 30px;
+}
+.buy-button {
+    display: inline-block;
+    width: 160px;
+    height: 110px;
+    background: url('/files/web/frame_buy.png') no-repeat center center;
+    background-size: contain;
+    border: none;
+    color: white;
+    font-size: 22px;
+    font-weight: bold;
+    padding: 15px;
+    cursor: pointer;
+    position: relative;
+}
+.quit-button {
+    display: inline-block;
+    width: 150px;
+    height: 30px;
+    background: url('/files/web/quit_button.png') no-repeat center center;
+    background-size: contain;
+    border: none;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    position: relative;
+}
+.coin-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+}
+.coin-icon {
+    width: 30px;
+    height: 30px;
+    margin-left: 5px;
+}
+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;
+}
+html{
+    overscroll-behavior: none;
+}
+.d_bl{display:block;}
+.a_left{text-align:left;}
+.a_center{text-align:center;}
+.w90{width:90%;}
+.w100{width:100%;}
+.d_ib{display:inline-block;}
+.mb10p{margin-bottom:10%;}
+.f90{font-size:90%;}
+.pt50{padding-top:50px;}
+.f60{font-size:60%;}
+.f70{font-size:70%;}
+.plr25{padding-left:25px;padding-right:25px;}
+.plr50{padding-left:50px;padding-right:50px;}
+.m_auto{margin: 0px auto;}
+#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%;
+    margin-bottom:-10%;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+}
+.ttl_height{
+    height:40px;
+    margin:20px 0px;
+}
+.bt_bg01 {
+    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;
+}
+.title-image {
+    width: 40vw;
+    height: auto;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+.mission-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 20px 0;
+    font-family: Arial, sans-serif;
+}
+
+.mission-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+}
+
+.mission-level {
+    font-weight: bold;
+    color: #DDD;
+}
+
+.mission-song {
+    color: #EEE;
+}
+
+.bt_bg01_narrow {
+    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:285px;
+    height: 61px;
+    color: #DDDDDD;
+    margin: 20px auto;
+}
+.input{
+    font-size: 1em;
+    background-color: #000000;
+    color: #dddddd;
+}
+
+.bt_bg01_xnarrow {
+    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;
+    margin-bottom: 20px;
+}
+.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;
+}
+.leaderboard-container {
+    height: calc(53vh);
+    overflow-y: auto; 
+    border: 1px solid #444; 
+    margin: 20px auto;
+    padding: 10px;
+    background-color: #111; 
+}
+
+.leaderboard-player {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #333; 
+    color: #ddd; 
+}
+
+.leaderboard-info {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 10px;
+}
+
+.leaderboard-score {
+    font-size: 40px;
+    font-weight: bold;
+    text-align: left;
+    margin-right: 100px;
+}
+
+.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-selected {
+    width: 40vw;
+    height: auto;
+    border: 3px solid lightgray;
+    pointer-events: none;
+}
+
+.title-image:hover {
+    transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/files/web_shop_1.html b/files/web_shop_1.html
index efddda5..5de2d15 100644
--- a/files/web_shop_1.html
+++ b/files/web_shop_1.html
@@ -3,72 +3,7 @@
     <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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
@@ -83,10 +18,10 @@
                 <div class="a_left w100 d_ib mb10p">
                       <ul style="list-style-type: none; padding: 0; margin-top: 100px; text-align: center;">
                         <li style="display: inline-block; margin: 0 30px;">
-                            <a href="wwic://web_shop?cnt_type=2" class="bt_bg01">Avatar</a>
+                            <a href="wwic://web_shop?cnt_type=2" class="bt_bg01_narrow">Avatar</a>
                         </li>
                         <li style="display: inline-block; margin: 0 30px;">
-                            <a href="wwic://web_shop?cnt_type=3" class="bt_bg01">Item</a>
+                            <a href="wwic://web_shop?cnt_type=3" class="bt_bg01_narrow">Item</a>
                         </li>
                     </ul>
                     <br>
diff --git a/files/web_shop_2.html b/files/web_shop_2.html
index a405605..39986dd 100644
--- a/files/web_shop_2.html
+++ b/files/web_shop_2.html
@@ -3,72 +3,7 @@
     <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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
@@ -83,10 +18,10 @@
                 <div class="a_left w100 d_ib mb10p">
                       <ul style="list-style-type: none; padding: 0; margin-top: 100px; text-align: center;">
                         <li style="display: inline-block; margin: 0 30px;">
-                            <a href="wwic://web_shop?cnt_type=1" class="bt_bg01">Tracks</a>
+                            <a href="wwic://web_shop?cnt_type=1" class="bt_bg01_narrow">Tracks</a>
                         </li>
                         <li style="display: inline-block; margin: 0 30px;">
-                            <a href="wwic://web_shop?cnt_type=3" class="bt_bg01">Item</a>
+                            <a href="wwic://web_shop?cnt_type=3" class="bt_bg01_narrow">Item</a>
                         </li>
                     </ul>
                     <br>
diff --git a/files/web_shop_3.html b/files/web_shop_3.html
index aab5d3f..f512ec2 100644
--- a/files/web_shop_3.html
+++ b/files/web_shop_3.html
@@ -3,72 +3,7 @@
     <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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
@@ -83,10 +18,10 @@
                 <div class="a_left w100 d_ib mb10p">
                       <ul style="list-style-type: none; padding: 0; margin-top: 100px; text-align: center;">
                         <li style="display: inline-block; margin: 0 30px;">
-                            <a href="wwic://web_shop?cnt_type=1" class="bt_bg01">Tracks</a>
+                            <a href="wwic://web_shop?cnt_type=1" class="bt_bg01_narrow">Tracks</a>
                         </li>
                         <li style="display: inline-block; margin: 0 30px;">
-                            <a href="wwic://web_shop?cnt_type=2" class="bt_bg01">Avatar</a>
+                            <a href="wwic://web_shop?cnt_type=2" class="bt_bg01_narrow">Avatar</a>
                         </li>
                     </ul>
                     <br>
diff --git a/files/web_shop_detail.html b/files/web_shop_detail.html
index f02aa40..50191c5 100644
--- a/files/web_shop_detail.html
+++ b/files/web_shop_detail.html
@@ -3,72 +3,7 @@
     <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%;
-              margin-bottom:-10%;
-              display: inline-block;
-              position: relative;
-              width: 100%;
-            }}
-            .ttl_height{{
-              height:40px;
-              margin:20px 0px;
-            }}
-            .bt_bg01 {{
-                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;
-            }}
-        </style>
+        <link rel="stylesheet" href="/files/style.css">
     </head>
     <body>
         <div id="header">
