@charset "UTF-8";


BODY{  font-family:'微軟正黑體 Noto Sans TC',sans-serif; font-size:1em; font-weight:normal;
    padding:0; margin:0 auto !important; box-sizing:border-box; position:relative;}



body{ display:flex; justify-content:center; align-items:center;
      height:100vh; font-family:Arial, sans-serif; background-color: #f0f0f0; margin:0;}
.container-fluid{ padding:0 !important;}
.container{ text-align:center; border-radius:10px;
    background-color:#fff; padding:20px; box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}
.timer{ font-size:24px; font-weight:bold; margin-bottom:20px;}
.options{ display:flex; flex-direction:column; gap:10px;}
.option-button{ font-size:18px; border:none; border-radius:5px; color:#fff; background-color:#007bff; padding:10px 20px; cursor:pointer;}
.option-button:hover{ background-color:#0056b3;}
.info{ margin-top: 20px; font-size:16px;}



/* -- 登入 -- */
.mgame_bg{ background:url(../images/background.jpg) no-repeat center center; background-size:cover;}

.backfu_zone{  background:#fff; padding:0 !important; margin:0 auto; box-sizing:border-box;}

.mgame_topup_bar{ display:flex; justify-content:center; align-items:center; width:100%; height:45px; 
    background:#fff; padding:0; margin:0 auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0,0,0,.3); box-sizing:border-box; z-index:999;}
.mgame_topup_bar h2{ font-size:1.3em; font-weight:bold; color:#bc9e57; padding:0; margin:0 auto; box-sizing:border-box;} 
.mgame_topup_bar img{ width:35px; height:35px; padding:0; margin:0; box-sizing:border-box;
    position:absolute; top:5px; left:10px;}






/* -- 底部 -- */
.mgame_doe_bar{ display:flex; justify-content:space-between; align-items:center;
    width:99%; height:56px; border-radius:8px; background:#fff; padding:0 15px 0 10px; margin:0 auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0,0,0,.3); position:fixed; bottom:.5%; left:0.5%; z-index:999;}
.mgame_user_box{ display:flex; justify-content:flex-start; align-items:center;
    padding:0; margin:0; box-sizing:border-box;}
.mgame_user_box p{ font-size:1.5em; font-weight:bold; color:#000; padding:0; margin:0; box-sizing:border-box;}
.mgame_user_pix{ display:flex; justify-content:center; align-items:center;
    width:40px; height:40px; border-radius:50%; padding:0; margin:0 10px 0 0; box-sizing:border-box; 
    box-shadow:0 2px 3px rgba(0,0,0,.3); overflow:hidden;}
.mgame_user_pix img{ width:100%; height:auto; object-fit:cover; padding:0; margin:0; box-sizing:border-box;}
.mgame_user_score{ display:flex; justify-content:center; align-items:center; 
    width:auto; height:30px; border-radius:4px; background:#bc9e57; padding:0 10px; margin:0; box-sizing:border-box;}
.mgame_user_score p{ font-size:1.2em; font-weight:bold; color:#fff; padding:0; margin:0; box-sizing:border-box;}



/* -- 手機下排按鈕 -- */
.mgame_phone_dbbt{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
    width:95%; font-family:'Arial Black', sans-serif; padding:0; margin:0 auto; box-sizing:border-box;
    position:fixed; bottom:60px; left:2.5%;}
.mgame_phone_dbbt button{ display:flex; justify-content:flex-start; align-items:center;
     width:49.5%; height:70px; border:none; border-radius:10px; 
    padding:0; margin:0 0 15px 0; box-sizing:border-box; box-shadow:0 2px 5px rgba(0,0,0,.3);}
.mgame_phone_dbbt button:nth-child(odd){ margin:0 .5% 10px 0;}
.mgame_phone_dbbt button:nth-child(even){ margin:0 0 10px .5%;}

.mgame_phone_dbbt button:nth-child(1){ background:#FF6773;}
.mgame_phone_dbbt button:nth-child(2){ background:#FFDE2A;}
.mgame_phone_dbbt button:nth-child(3){ background:#6FDFEF;}
.mgame_phone_dbbt button:nth-child(4){ background:#AAE92D;}
.mgame_phone_dbbt button:nth-child(5){ background:#FFAD4C;}
.mgame_phone_dbbt button:nth-child(6){ background:#C397FC;}


/*
.mgame_phone_dbbt button:nth-child(1){ background:#f43545;}
.mgame_phone_dbbt button:nth-child(2){ background:#ff8a00;}
.mgame_phone_dbbt button:nth-child(3){ background:#faf715;}
.mgame_phone_dbbt button:nth-child(4){ background:#00ba72;}
.mgame_phone_dbbt button:nth-child(5){ background:#00c2de;}
.mgame_phone_dbbt button:nth-child(6){ background:#bb36ae;}
紅 #FF6773     黃 #FFDE2A   藍 #6FDFEF     綠 #AAE92D  橘 #FFAD4C    紫 #C397FC
*/


.mgame_phone_dbbt button span{ display:block; width:30px; height:30px;
    padding:0; margin:0 0 0 10px; box-sizing:border-box;}
.mgame_phone_dbbt button span img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box; vertical-align:baseline;}
.mgame_phone_dbbt button p{ width:calc(100% - 50px); text-align:center; font-size:1.3em; font-weight:bold; 
    color:#000; padding:0; margin:0; box-sizing:border-box; position:relative;}

.outline-effect{ position:absolute; color:black; z-index:5;}
.sixitems.q_play .outline-effect:before{ content:""; color:transparent;
    position:absolute; top:0; left:50%; transform:translate(-50%, 0%); z-index:-1;
    -webkit-text-stroke: 3px white; text-stroke: 3px white;}

.sixitems{ width:16%;}

.mgame_phone_dbbt .sixitems{ position:relative; overflow:hidden;}

.mgame_phone_dbbt .sixitems:not(.q_right){ position:relative; overflow:hidden;}
.mgame_phone_dbbt .sixitems:not(.q_right)::before{ content:""; background:rgba(0, 0, 0, 0.5);
    position:absolute; top:0; left:0; width:100%; height:100%; }
/*
.mgame_phone_dbbt .sixitems::after{ content:""; width:36px; height:36px; 
    background:url(../images/game_pix/q_a.png) no-repeat center center; background-size:cover;
    position:absolute; top:12px; right:10px}
*/
.mgame_phone_dbbt .sixitems:not(.q_right)::after{
    content:""; width:36px; height:36px;  
    background-size:cover;
    position:absolute; top:12px; right:10px}

.mgame_phone_dbbt .sixitems.q_play::after,
.mgame_phone_dbbt .sixitems.q_play::before{ opacity:0;}



/* -- 時間霸 -- */
.mgame_time_bar{ display:flex; justify-content:flex-start; align-items:center;
    width:95%; height:20px; border-radius:20px; 
    background:#fff; padding:0; margin:0 auto; box-sizing:border-box;
    position:fixed; bottom:310px; left:2.5%;}
.mgame_time_in{ display:flex; justify-content:flex-end; align-items:center;
    width:100%; height:20px; border-radius:30px; background:url(../images/game_pix/time_bar_a.jpg) repeat;
    padding:0 10px; margin:0; box-sizing:border-box;
    ransition:width 0.1s linear, background 0.5s ease;}
.mgame_time_in p{ font-size:1.1em; font-weight:bold; color:#fff; padding:0; margin:0; box-sizing:border-box;}



/* -- 視窗題目 -- */
.mgame_win_tbg{ background:url(../images/phone_page_bk.jpg) no-repeat center center; background-size:cover;}
.mgame_ing_tbg{ background:url(../images/ing_bk.jpg) no-repeat center center; background-size:cover;}
.mgame_mwain_txt{ display:flex; justify-content:center; align-items:center; border-radius:35px;
    width:auto; background:#355065; padding:12px; margin:0 auto; box-sizing:border-box;
    box-shadow:5px 5px 15px #d0cab0, inset -3px -3px 3px #142233, inset 3px 3px 3px #bcc5cc;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:20;
    opacity:0; animation:slideInLeft 2s ease-out forwards;}
.mgame_mwain_tc{ display:flex; justify-content:center; align-items:center;
    width:100%; height:100%; border-radius:25px; 
    background:#eba6ab; padding:6px; margin:0 auto; box-sizing:border-box; 
    box-shadow:3px 3px 3px #bcc5cc, -3px -3px 3px #142233, inset -2px -2px 2px #c66e17, inset 2px 2px 2px #f7dadc;
    Wposition:relative;}
.mgame_mwain_tc h3{ display:block; width:100%; text-align:center; font-size:2.5em; font-weight:bold; text-shadow:1px 1px 0 #fff; 
    border-radius:20px; color:#004d26; 
    background: linear-gradient(to bottom,  #fd96a3 0%,#fdd080 53%,#f0eadb 100%);
    padding:15px 30px; margin:0 auto; box-sizing:border-box;
    box-shadow:2px 2px 2px #ef9e3c, -2px -2px 2px #b7682b; white-space:nowrap;}

@keyframes slideInLeft{
    0%{
        opacity:0;
        transform:translate(-30%, -50%); /* 開始時往右偏移 30% */
    }
    100%{
        opacity:1;
        transform:translate(-50%, -50%); /* 結束時回到原位 */
    }
}



/* -- 手機上列 -- */
.mgame_phone_top_bar{ display:flex; justify-content:center; align-items:center;
    width:100%; height:27px; font-family:'Arial Black', sans-serif; 
    padding:0; margin:10px auto 0 auto; box-sizing:border-box;
    position:relative; z-index:100;}
.mgame_top_box{ display:flex; justify-content:center; align-items:center;
    width:auto; height:27px; border-radius:20px;
    background:#fff; padding:0 12px; margin:0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2)}
.mgame_top_box p{ font-size:1em; padding:0; margin:0; box-sizing:border-box;}



/* -- 視窗題目與圖 -- */
.mgame_winmain_zone{ display:flex; justify-content:center; align-items:center;
    width:100%; height:260px; margin:0 auto; box-sizing:border-box;
    position:fixed; bottom:390px; left:0; z-index:20; flex:1;}

.mgame_winmain_pix{ display:flex; justify-content:center; align-items:center;
    width:100%; height:100%; padding:0; margin:0 auto; box-sizing:border-box; overflow:hidden;}
.mgame_winmain_pix img{ width:90%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}

.mgame_winmain_txt{ display:flex; justify-content:center; align-items:center; 
    width:95%; height:38px; border-radius:8px; background:#fff; padding:12px; margin:0 auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0,0,0,.1);  position:fixed; bottom:340px; left:2.5%; z-index:10;}

.mgame_winmain_tc{ display:flex; justify-content:center; align-items:center;
    width:100%; height:100%; margin:0 auto; box-sizing:border-box;}

.mgame_winmain_tc h3{ display:block; width:100%; text-align:center; font-size:1.3em; font-weight:bold; text-shadow:1px 1px 0 #fff; 
    color:#000; padding:0; margin:0 auto; box-sizing:border-box;white-space:nowrap;}

.mgame_container{ display:flex; flex-direction:column; height:100vh;}

.mp_win_top{ top:350px !important;}
.answers_tit{ bottom:390px !important;}



/* -- 遊戲代號輸入 -- */
.mgame_code_zone{ width:273px; height:50px; text-align:center; padding:0; margin:0; box-sizing:border-box; 
    position:absolute; top:30%; left:50%; transform:translate(-50%, -0%);}
.mgame_code_zone img{ padding:0; margin:0 auto 15px auto; box-sizing:border-box;}
.mgame_code_zone p{ font-size:1em; color:#d10000; padding:0; margin:8px auto 0 auto; box-sizing:border-box;}
.mgame_code_box{ width:275px; height:145px; border-radius:8px; 
    background:#fff; padding:0; margin:0 auto; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2);}
.mgame_code_box input{ width:80%; height:40px; font-size:1.3em; font-weight:bold; border:none; border-bottom:solid 2px #a6a6a6; 
    color:#000; background:#ebebeb; padding:0 10px; margin:25px auto 15px auto; box-sizing:border-box;}
.mgame_code_box input::placeholder{ color:#a6a6a6;}
.mgame_code_box button{ width:100px; height:40px; font-size:1.2em; font-weight:bold; border:none; border-radius:4px; color:#fff; 
    background:#bc9e57; padding:0; margin:0 auto; box-sizing:border-box;}



/* -- 輸入錯誤 -- */
.mgame_code_zone .inputerror{ border-bottom:solid 2px #bc9e57; background:#eed8ce;}
.box-shadow{  
	box-sizing:border-box; 
	box-shadow:0 2px 3px rgba(0,0,0,.2);
	}
.mgame_puser_box{ 
	width:275px; height:auto; border-radius:8px; 
    background:#fff; padding:20px 0; margin:0 auto; 
	box-sizing:border-box;  
	}
.mgame_puser_box h2{ font-size:1.3em; font-weight:bold; color:#000; padding:0; margin:0 auto 15px auto; box-sizing:border-box;}
.mgame_puser_head{ display:flex; justify-content:center; align-items:center;
    width:160px; height:160px; border-radius:50%; 
    padding:0; margin:0 auto 15px auto; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2); overflow:hidden;}
.mgame_puser_head img{ width:100%; height:auto; object-fit:cover; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_puser_head p{ font-size:1em; color:#d10000; padding:0; margin:8px auto 0 auto; box-sizing:border-box;}


.mgame_puser_box.error input{ 
    background: #EED8CE; 
    border: solid 1px #A66063; 
}
.mgame_puser_box input{ 
	width:80%; height:40px;  
	border-radius: 2px;
    box-sizing: border-box;
    font-size: 1.2em;
    font-weight: bold;
    background: #fff;
    border: solid 1px #a6a6a6;
    color: #000;
    padding: 8px;
    margin: 0 auto 12px auto;
    transition: all 0.3s ease;}

.mgame_puser_box input:focus {
	border-radius: 2px;
    background-color:#ebebeb; /* 焦點時的顏色 */
    border: solid 1px #a6a6a6 !important;
    outline:none;
}

.mgame_puser_box input::placeholder{ }
.mgame_puser_box input:not(:placeholder-shown){ }

/*
.mgame_puser_box input{ width:80%; height:40px; font-size:1.3em; font-weight:bold; border:none; border-bottom:solid 2px #a6a6a6; 
    color:#000; background:#ebebeb; padding:0 10px; margin:0 auto 15px auto; box-sizing:border-box;}
.mgame_puser_box input::placeholder{ color:#a6a6a6;}
.mgame_puser_box input:not(:placeholder-shown){ border-bottom:solid 2px #a66063; background:#eed8ce;}
*/

.mgame_puser_box button{ display:block; width:80%; height:40px; font-size:1.2em; font-weight:bold; border:none; border-radius:4px; color:#fff; 
    background:#bc9e57; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_puser_box .g_confirm{ width:100px;}

@keyframes blinkBorder {
  0% {
    border-color: red;
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: red;
  }
}
.mgame_add_head.error {
    border: solid 1px #EED8CE;
	animation: blinkBorder 1s infinite;
}
.mgame_add_head{ display:flex; justify-content:center; align-items:center;
    width:160px; height:160px; border-radius:50%; 
    padding:0; margin:0 auto 15px auto; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2); overflow:hidden;
    position:relative;}
.mgame_add_head img{ width:100%; height:auto; object-fit:cover; padding:0; margin:0 auto; box-sizing:border-box;}
.m_add_head_pix{ padding:0; margin:0; box-sizing:border-box;
    position:absolute; top:0%; left:50%; transform:translate(-50%, 0%); z-index:10; opacity:.1;}
.m_add_head_txt{ width:70% !important; padding:0; margin:0; box-sizing:border-box;
    position:absolute; top:48%; left:50%; transform:translate(-50%, 0%); z-index:20;}

.mgame_login_logo{ display:flex; justify-content:center; align-items:center;
    width:209px; height:148px; padding:0; margin:0 auto 15px auto; box-sizing:border-box;}
.mgame_login_logo img{ width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}


/* -- 頭像照片選擇 -- */
.m_add_headsel_zone{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start;
    width:100%; height:100vh; background:rgba(0,0,0,.8); padding:0; margin:0 auto; 
    box-sizing:border-box; z-index:50; overflow-y:auto;}

.m_add_headsel_box{ display:flex; justify-content:center; align-items:center;
    width:calc(33.33% - 10px); aspect-ratio:1 / 1; border:solid 3px #d9d9d9; 
    background:#d9d9d9; margin:0px; overflow:hidden; transition:0.4s;}
.m_add_headsel_box img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.m_add_headsel_box:hover,
.m_add_headsel_box:active{ border:solid 3px #bc9e57; background:#bf9d55; box-shadow:inset 0 0 10px 1px rgba(255,255,255,.5);}



/* -- 已加入遊戲 -- */
.mgame_wait_zone{ width:85%; height:auto; text-align:center; padding:0; margin:0; box-sizing:border-box; 
    position:absolute; top:30%; left:50%; transform:translate(-50%, -0%);}
.mgame_wait_box{ display:flex; justify-content:flex-start; align-items:center;
    width:100%; height:auto; border-radius:8px; 
    background:#fff; padding:10px 0 10px 10px; margin:30px auto 50px auto; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2);}
.mgame_wait_box p{ line-height:26px; text-align:left; font-size:1.5em; font-weight:bold; color:000; padding:0; margin:0; box-sizing:border-box;}
.mgame_waits_head{ display:flex; justify-content:center; align-items:center;
    width:80px; height:80px; border-radius:50%; 
    padding:0; margin:0 15px 0 0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2); overflow:hidden;
    position:relative;}
.mgame_waits_head img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}


.mgw_topic{ width:80%; height:50px; left:10%;}
.loading_mov{ padding:0; margin:100px auto 0 auto; animation: spin 1s linear infinite;}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



/* -- 遊戲對錯 -- */
.mgame_ptanswer{ display:flex; justify-content:center; align-items:center; 
    width:100%; height:auto; font-family:'Arial Black', sans-serif; padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; top:49%; left:50%; transform:translate(-50%, -50%);}
.mgame_ptanswer span{ width:100%; height:auto; text-align:center; font-size:1.1em; font-weight:bold; 
    color:#bc9e57; padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; bottom:63px; left:0;}
.mgame_ptanswer p{ width:100%; height:auto; text-align:center; font-size:2em; font-weight:bold; 
    color:#bc9e57; padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; bottom:25px; left:0;}



/* -- 遊戲名次 -- */
.mgame_wins_zone{ width:100%; height:90%; text-align:center; font-family:'Arial Black', sans-serif; 
    padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; bottom:0px; left:0px;}
.mgame_wins_bar{ display:flex; justify-content:center; align-items:flex-end;
    width:100%; height:auto; padding:0; margin:-90px 0 30px 0; box-sizing:border-box; z-index:50px;}
.mgame_wins_bar p{ font-size:4.2em; font-weight:bold; 
   text-shadow:-4px -4px 0 #ffffff, 4px -4px 0 #ffffff, -4px  4px 0 #ffffff, 4px  4px 0 #ffffff,
   -4px  0px 0 #ffffff, 4px  0px 0 #ffffff, 0px  4px 0 #ffffff, 0px -4px 0 #ffffff;
   color:#bc9e57; padding:0; margin:0 10px -25px 0; box-sizing:border-box;}
.mgame_wins_bar img{ padding:0; margin:0; box-sizing:border-box;}
















@media (max-width: 1366px) {
}


@media (max-width: 1024px) {
}


@media (max-width: 820px) {
}


@media (max-width: 768px) {
}

@media (max-width: 475px) {
}

@media (max-width: 414px) {  
}

@media (max-width: 393px) { 
}
@media (max-width: 375px) {
    .mgame_phone_dbbt button p {1.3em}
}


@media (max-width: 360px) {
    .mgame_phone_dbbt button p {font-size:1.2em}
}


@media (max-width: 320px) {
    .mgame_phone_dbbt button p {font-size:1.1em}
}


@media (max-height: 1200px) {   
    .mgame_winmain_pix img{max-height:100%}
    .mgame_winmain_pix img{width:auto}
    .mgame_wins_zone img {max-width:100%;}
}


@media (max-height: 900px) {  
    .mgame_winmain_pix {height:auto}  
    .mgame_winmain_pix img{max-height:100%}
    .mgame_winmain_pix img{width:auto}
}


@media (max-height: 800px) {  
    .mgame_wins_zone {top:10px;bottom: auto;}
    .mgame_winmain_pix {height:240px}
    .mgame_phone_dbbt button { height: 60px}
    .mgame_time_bar {bottom: 278px;}
    .mgame_winmain_zone {bottom: 400px;}
    .mgame_winmain_txt {bottom: 306px;}
    .mgame_wins_bar p {font-size: 3em;margin: 0px 10px -15px 0;}
}


@media (max-height: 700px) {  
    .mgame_winmain_pix {height:195px}
    .mgame_phone_dbbt button { height: 53px}
    .mgame_time_bar {bottom: 254px;}
    .mgame_winmain_zone {bottom: 330px;}
    .mgame_winmain_txt {bottom: 282px;} 
}


@media (max-height: 600px) { /* iPhone-15 320*515 */
    .mgame_winmain_pix {height:168px}
    .mgame_phone_dbbt button { height: 44px}
    .mgame_time_bar {bottom: 228px;}
    .mgame_winmain_zone {bottom: 248px;}
    .mgame_winmain_txt {bottom: 252px;} 
}




@media (max-height: 500px) {
/* -- 遊戲代號輸入 -- */
.mgame_code_zone{ top:20%;}

/* -- 已加入遊戲 -- */
.mgame_wait_zone{ top:20%;}
.mgame_wait_box p{ line-height:26px; font-size:1.2em;}
}



@media (max-height: 667px) {
/* -- 遊戲代號輸入 -- */
.mgame_code_zone{ top:20%; }

/* -- 已加入遊戲 -- */
.mgame_wait_zone{ top:20%;}
}


@media (max-height: 736px) {
/* -- 遊戲代號輸入 -- */
.mgame_code_zone{ top:20%;}

/* -- 已加入遊戲 -- */
.mgame_wait_zone{ top:20%;}
}