@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&display=swap');

*:focus { outline: none; }
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all .2s linear; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -ms-transition: all .2s linear; }

body { background: url(../img/bg.webp) no-repeat 50% 0; }
body:before , body:after { position: absolute; width: 100vw; height: 100vh; background: url(../img/bg_top.webp) no-repeat 50% 0; top: 0; left: 0; content: ""; }
body:after { background: url(../img/bg_bottom.webp) no-repeat 50% bottom; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; word-wrap: break-word; word-break: break-word; line-height: 170%; border-width: 0; font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-size: 16px; color: #111; }

ul , ol { list-style: none; }

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }
a.tblink { vertical-align: baseline; cursor: auto; }

.left_txt { text-align: left; }
.center_txt { text-align: center; }

/* game_info */
#game_info { position: relative; margin: auto; width: min(100%, 1160px); min-height: 90vh; display: flex; justify-content: center; align-items: center; z-index: 5; }

/* game_box */
#game_box { margin: 3vmax auto 5vmax; padding: 14% 10% 0; width: min(100%, 694px); aspect-ratio: 1/.825; background: url(../img/img_game_background.webp) no-repeat 50% / cover; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
#game_box .title { position: relative; width: 10em; height: 4em; display: flex; align-items: center; justify-content: center; letter-spacing: .1em; font-weight: 900; font-size: 1.5em; color: transparent;  }
#game_box .title:before , #game_box .title:after { position: absolute; width: 100%; text-shadow: 4px 4px 2px #790802; text-align: center; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: attr(data-text); }
#game_box .title:after { background: linear-gradient(left, rgba(255,240,167,1) 0%, rgba(250,176,118,1) 12%, rgba(255,240,167,1) 42%, rgba(250,176,118,1) 84%, rgba(255,240,167,1) 100%); background: -webkit-linear-gradient(left, rgba(255,240,167,1) 0%, rgba(250,176,118,1) 12%, rgba(255,240,167,1) 42%, rgba(250,176,118,1) 84%, rgba(255,240,167,1) 100%); background-clip: text; -webkit-background-clip: text; text-shadow: none; z-index: 5; }

/* game_list */
#game_list { width: 100%; display: flex; justify-content: space-evenly; align-items: center; }
#game_list a { position: relative; margin: 2%; display: block; }
#game_list a:before { position: absolute; width: 100%; height: 100%; border-radius: 50%; box-shadow: 3px 5px 10px rgb(121 8 2 / 71%); top: 0; left: 0; z-index: 1; content: ""; }
#game_list a img { position: relative; z-index: 2; }
#game_list .active:before { background: #ff1f1f; background: -moz-linear-gradient(45deg, #ff1f1f 0%, #ff7b33 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ff1f1f), color-stop(100%,#ff7b33)); background: -webkit-linear-gradient(45deg, #ff1f1f 0%,#ff7b33 100%); background: -o-linear-gradient(45deg, #ff1f1f 0%,#ff7b33 100%); background: -ms-linear-gradient(45deg, #ff1f1f 0%,#ff7b33 100%); background: linear-gradient(45deg, #ff1f1f 0%,#ff7b33 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1f1f', endColorstr='#ff7b33',GradientType=1); box-shadow: 0 0 13px rgb(0 0 0 / 67%); -webkit-transform: scale(1.1); transform: scale(1.1); }

#game_list a[data-type="3"] { transition: all 0.6s ease; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
#game_list a[data-type="3"]:before { border-radius: 4%; box-shadow: -3px 4px 0 #c3c4c5; }
#game_list a[data-type="3"] img { z-index: 3; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#game_list a[data-type="3"] img.back { position: absolute; top: 0; left: 0; z-index: 2; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
#game_list a.showcard[data-type="3"] { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
#game_list a.active[data-type="3"]:before { box-shadow: none; -webkit-transform: scale(1.1, 1.08); transform: scale(1.1, 1.08); }

/* win_box */
#win_box { position: fixed; width: 100%; height: 100%; background: rgb(0 0 0 / 85%); display: none; flex-direction: column; justify-content: center; align-items: center; top: 0; left: 0; z-index: 9999; }
#win_box .envelope { position: relative; margin-bottom: 1.5em; width: min(90vw, 357px); aspect-ratio: 1/1.03; }
#win_box .envelope:before { position: absolute; width: 100%; height: 100%; background: url(../img/img_celebrate.webp) no-repeat 50% 0 / 100% auto; top: 10%; left: 50%; z-index: 3; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); content: ""; }
#win_box .envelope:after { position: absolute; width: 100%; height: 100%; background: url(../img/img_win_background.webp) no-repeat 50% / cover; top: 0; left: 0; z-index: 4; content: ""; }
#win_box .envelope .txt { position: absolute; width: 50%; height: 45%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; top: 27%; left: 50%; z-index: 5; -webkit-transform: translateX(-52%); transform: translateX(-52%);}
#win_box .envelope .txt p { display: flex; align-items: baseline; line-height: 1.3; text-align: center; font-size: 20px; color: #fff; }
#win_box .envelope .txt p font { color: #ffd89b; }
#win_box .envelope .txt #winprice { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; line-height: 1.3; font-size: 2em; color: #ffd89b; }
#win_box .envelope .txt #winprice b { line-height: 1.2; font-weight: bold; font-size: .8em; color: #ffd89b; }
#win_box .envelope .txt #winprice b:after { font-size: .6em; content: "、"; }

#win_box .envelope .txt font { font-size: .9em; }
#win_box[data-type="2"] { display: flex; }
#win_box[data-type="2"] .envelope:before { -webkit-animation: celebrate 1s infinite alternate ease-in-out; animation: celebrate 1s infinite alternate ease-in-out; }

/* animation */
@-webkit-keyframes celebrate { 0% , 100% { -webkit-transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateX(-50%) scale(.8); } }
@keyframes celebrate { 0% , 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(.8); } }

@media screen and (max-width: 550px){
	#game_box { padding: 30vw 9vw 0; height: 450px; }
	#game_box .title { font-size: 1.3em; }
	#game_list a { width: 29%; }
	#game_list a[data-type="3"] { margin: 2% 5%; width: 40%; }
	#next { margin-top: 5%; width: 40%; }
}