@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

body { background: #fff4dc; }

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

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; }

button { background: none; border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }

/* 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_box */
#game_box { overflow: hidden; position: relative; width: 100%; height: 100vh; background: url(img/img_game_background.webp) no-repeat 50% bottom / cover; border-radius: 1em; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* slot_box */
#slot_box { position: relative; margin-top: 2%; width: min(90%, 802px); aspect-ratio: 401/227; }
#slot_box >img { position: relative; width: 100%; z-index: 2; }
.slot_wrap { overflow: hidden; position: absolute; margin: 0 auto; height: 72%; aspect-ratio: 662/327; background: url(img/img_slot_background.webp) #fff; top: 14%; left: 0; right: 0; bottom: 0; z-index: 1; }
.slot_list { overflow: hidden; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.slot_bonus { overflow: hidden; position: relative; width: 100%; height: 100%; z-index: 10; }
.slot_bonus_box { position: absolute; margin: auto; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.slot_bonus_ul { position: relative; top: 0; font-size: 0; z-index: 10; }
.slot_bonus_ul li { position: relative; width: 100%; background: no-repeat 50% / 75% auto; }
.play { transition-duration: 5500ms; transform: translate(0px, -3263.91px) translateZ(0px); }

/* [data-action="go"] */
[data-action="go"] { position: absolute; margin: 0 auto; width: 40%; aspect-ratio: 284/110; border: 0; display: block; background: url(img/img_start_background.webp) no-repeat 50% bottom / 100% auto; left: 0; right: 0; bottom: -11%; -webkit-transition: none; transition: none; z-index: 30; cursor: pointer; }
[data-action="go"] img { width: 65%; aspect-ratio: 65/31; -webkit-transform: translateY(-4%); transform: translateY(-4%); -webkit-transition: transform 0.1s ease; transition: transform 0.1s ease; }
[data-action="go"]:active img { -webkit-transform: translateY(6%); transform: translateY(6%); }

/* win_box */
#win_box { position: absolute; background: rgb(0 0 0 / 85%); display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; opacity: 0; pointer-events: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; }
#win_box .win_content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#win_box .win_content .closewin { position: absolute; width: 25px; aspect-ratio: 1/1; background: #000; border-radius: 50%; outline: 2px #fff solid; display: flex; justify-content: center; align-items: center; top: 20%; right: 20%; }
#win_box .win_content .closewin svg { width: 50%; aspect-ratio: 1/1; }
#win_box .win_content * { color: #fff; }
#win_box .win_content >h4 { position: absolute; top: 20%; }
#win_box .win_content .txt { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; top: calc(50% + 1em); left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#win_box .win_content .txt * { text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; font-size: 22px; color: #2f2222; }
#win_box .win_content .txt p { display: flex; align-items: baseline; line-height: 1.3; gap: .3em; }
#win_box .win_content .txt p span { color: #9d0112; }
#win_box .win_content .txt p.bouns_txt { font-weight: bold; font-size: 1em; color: #9d0112; }
#win_box .win_content .txt p.bouns_txt b { line-height: 1; font-size: 2.5em; color: #9d0112; }
#win_box .win_content .txt font { font-size: .9em; }
#win_box .win_content .txt #winprice { margin-right: .2em; line-height: 1.3; font-size: 2em; }
#win_box .win_content #btnOK { position: absolute; width: 33%; text-align: center; bottom: 0; }

#win_box[data-type="2"] { opacity: 1; pointer-events: auto; }

/* win_box */
#win_box .win_content .txt #win_txt { margin: .5em 0 35%; display: flex; flex-direction: column; align-items: center; gap: .5em; }
#win_box .win_content .txt p.bouns_txt b { font-size: 2em; }

/* bonus_list */
#bonus_list table { width: min(100%, 610px); }

@media screen and (max-width: 768px){
	#game_box { padding-bottom: 2vmax; }
}
@media screen and (max-width: 480px){
	#win_box .win_content .txt #win_txt { margin: 0 0 50%; }
	#win_box .win_content .txt p.bouns_txt b { font-size: 9vw; }
	#win_box .win_content .txt span { font-size: .9em; }
}