@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; min-height: 90vh; display: flex; justify-content: center; align-items: center; z-index: 5; }

/* redrain_box */
#redrain_box { position: fixed; width: 100vw; height: var(--doc-height); background: rgb(0 0 0 / 85%); display: flex; justify-content: center; align-items: center; top: 0; left: 0; opacity: 1; z-index: 999; pointer-events: auto; }
#redrain_box .game_item { position: absolute; background: no-repeat 50% / cover; display: flex; justify-content: center; align-items: center; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; pointer-events: none; }
#redrain_box .game_item b { background: linear-gradient(to bottom, rgba(255,130,29,1) 0%,rgba(174,24,27,1) 100%); background: -webkit-linear-gradient(to bottom, rgba(255,130,29,1) 0%,rgba(174,24,27,1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 2em; }
#redrain_box .time_box { width: 280px; aspect-ratio: 1/.364; background-image: url(../img/img_showtime_background.webp); top: 1%; }
#redrain_box .time_box b { margin-bottom: 10%; }
#redrain_box .time_box b:first-child { margin-left: 1em; }
#redrain_box .rain { overflow: hidden; position: absolute; max-width: 95vw; width: 95vw; height: var(--doc-height); top: 0; left: 2.5vw; }
#redrain_box .rain .redpack { position: absolute; display: block; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; pointer-events: auto; }
#redrain_box .rain .redpack img { opacity: 1; }
#redrain_box .rain .redpack.redpacked { pointer-events: none; }
#redrain_box .rain .redpack.redpacked img { opacity: 0; }
#redrain_box .bonus_box { width: 180px; aspect-ratio: 1/1.25; background-image: url(../img/img_bonus_background.webp); align-items: flex-end; bottom: 1%; }
#redrain_box .bonus_box b { position: relative; padding-bottom: 18%; font-size: 1.9em; }
#redrain_box .bonus_box b:before { position: absolute; -webkit-text-stroke: 6px #f5d6b8; text-stroke: 6px #f5d6b8; text-shadow: 0 0 .2em rgb(0 0 0 / 20%); content: attr(data-storke); z-index: -1; }
#redrain_box[data-type="1"] { opacity: 0; z-index: -1; pointer-events: none; }

/* 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(100vw, 550px); aspect-ratio: 1/.92; -webkit-transform: translateX(-5%); transform: translateX(-5%); }
#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: 40%; display: flex; flex-direction: column; align-items: center; top: 50%; left: 50%; -webkit-transform: translateX(-41%); transform: translateX(-41%); z-index: 5; }
#win_box .envelope .txt p { display: flex; align-items: baseline; line-height: 1.3; }
#win_box .envelope .txt * , #win_box .envelope .txt p.account { color: #fde79b; }
#win_box .envelope .txt #winprice { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; line-height: 1.3; font-size: 2em; color: #f2b450; }
#win_box .envelope .txt #winprice b { line-height: 1.2; font-weight: bold; font-size: .8em; color: #a50000; }
#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){
	#redrain_box .time_box { width: 45vw; }
	#redrain_box .time_box b { margin-bottom: 4vw; font-size: 6vw; }
	#redrain_box .bonus_box { width: 33vw; }
	#redrain_box .bonus_box b { padding-bottom: 5vw; font-size: 7vw; }
}