@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;overflow: hidden;
      height:100vh; font-family:Arial, sans-serif; background-color: #EED8CE; 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_bbt_gobker{ width:170px; height:58px; display:none;position: absolute;
    background:url(../images/gbbts/goback_up.png) no-repeat center left; 
    top:30px; left:50px !important;}
.mgame_bbt_gobker:hover,
.mgame_bbt_gobker:active{ background:url(../images/gbbts/goback_do.png) no-repeat center left;}

/* -- 登入 -- */
.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{line-height:45px; font-size:1.8em; font-weight:bold; color:#a66063; 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:20px;}

.mgame_top_bar{ display:flex; justify-content:space-between; align-items:center;
    width:100%; height:auto; font-family:'Arial Black', sans-serif; padding:0; margin:20px auto 100px auto; box-sizing:border-box;}

.mgame_top_ls{ display:flex; justify-content:flex-start; align-items:center;
    padding:0; margin:0; box-sizing:border-box;}
.mgame_top_time{ display:flex; justify-content:center; align-items:center;
    width:100px; height:100px; border-radius:50%;
    background:url(../images/time_bkere.png) no-repeat center center; background-size:cover;
     padding:0; margin:0 10px 0 0; box-sizing:border-box;}
.mgame_top_time p{ font-size:2.3em; font-weight:bold; text-shadow:1px 1px 0 #fff; color:#860000; padding:0; margin:0; box-sizing:border-box;}
.mgame_top_ls button{ border:none; background:rgba(0,0,0,0);}

.mgame_top_rs{ border:solid 10px #f9e2cb; border-radius:40px;
    background:#fff; padding:2px 20px; margin:0 20px 0 0; box-sizing:border-box; box-shadow:inset 3px 3px 10px #9bc9d9;}
.mgame_top_rs p{ font-size:2em; font-weight:bold; color:#83ad98; padding:0; margin:0; box-sizing:border-box;}



/* -- 中間文字 -- */
.mgame_main_txt{ display:flex; justify-content:center; align-items:center; border-radius:35px;
    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:55%; left:50%; transform:translate(-50%, -50%); z-index:20;}
.mgame_main_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_main_tc h3{ display:block; 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;}
    


/* -- 中間圖片 -- */
.mgame_main_pix{ width:35%; padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; top:30%; left:50%; transform:translate(-50%, -50%); z-index:10;}
.mgame_main_pix img{ width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}



/* -- 底部 -- */
.mgame_doe_bar{ display:flex; justify-content:space-between; align-items:center;
    width:100%; font-family:'Arial Black',; 
    background:#fff; padding:8px 20px; margin:0 auto; box-sizing:border-box; position:fixed; bottom:0; z-index:999;}
.mgame_doe_bar p{ display:flex; justify-content:space-between; align-items:center;
    font-size:1.2em; font-weight:bold; color:#a66063; padding:0; margin:0; box-sizing:border-box;}
.mgame_doe_bar p img{ width:30px; height:30px; padding:0; margin:0 5px 0 0; box-sizing:border-box;}
.mgame_doe_fc{ display:flex; justify-content:flex-end; align-items:center;
    padding:0; margin:0 10px 0 0; box-sizing:border-box;}
.timer{ font-size:1.2em; color:#a66063; padding:0; margin:0; box-sizing:border-box;}
.mgame_doe_fc button{ width:28px; height:auto; border:none; background:none; padding:0; margin:0 0 0 20px; box-sizing:border-box;}
.mgame_doe_fc button img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.next_bbt{ display:flex; justify-content:center; align-items:center;
    width:60px !important; height:30px !important; padding:0; margin:0; box-sizing:border-box; overflow:hidden;}
.next_bbt img{ width:100% !important; height:auto; padding:0; margin:0; box-sizing:border-box; overflow:hidden;}



/* -- 手機上列 -- */
.mgame_phone_bg{ background:url(../images/phone_background.jpg) no-repeat center center; background-size:cover;}
.mgame_phone_bg:after{ content:''; display:block; width:100%; height:100%;
    background:url(../images/game_pix/game_logo.png) no-repeat center 40%; background-size:40%; 
    position:absolute; top:-5%; right:0; bottom:0; left:0; opacity:.4; z-index:-1;}

.mgame_start_bg{ background:url(../images/phone_background.jpg) no-repeat center center; background-size:cover;}

.mgame_phone_top_bar{ display:flex; justify-content:center; align-items:center;
    width:100%; height:85px; font-family:'Arial Black', sans-serif; padding:0; margin:10px auto 30px auto; box-sizing:border-box;
    position:relative; z-index:100;}

.mgame_top_r_topic{ display:flex; justify-content:center; align-items:center;
    width:59px; height:52px; color:#ffe062;
    background:url(../images/game_pix/g_topic.png) no-repeat center center;
    padding:0; margin:0; box-sizing:border-box; position:absolute; right:10px;}
.mgame_top_r_topic p{ font-size:1.5em; font-weight:bold; padding:0; margin:-6px 0 0 0; box-sizing:border-box;}

.mgame_phone_game_top_bar{ display:flex; justify-content:center; align-items:center;
    width:100%; height:85px; font-family:'Arial Black', sans-serif; padding:0; margin:10px auto 30px auto; box-sizing:border-box;
    position:relative; z-index:100; opacity:0;}



/* -- 答題對錯 -- */
.mgame_phone_result_a,
.mgame_phone_result_b{ width:355px; height:373px; padding:0; margin:0 auto; box-sizing:border-box; position:relative; z-index:10;}
.mgame_phone_result_a{ background:url(../images/game_pix/g_correct.png) no-repeat center center;}
.mgame_phone_result_b{ background:url(../images/game_pix/g_mistake.png) no-repeat center center;}

.mgame_phone_result_score{ display:flex; justify-content:center; align-items:center;
    padding:0; margin:0 auto; box-sizing:border-box; position:absolute; bottom:55px; left:50%; transform:translate(-50%, -50%);}
.mgame_phone_result_score span{}
.mgame_phone_result_score p{ font-size:2em; font-weight:bold; color:#fff; padding:0; margin:0; box-sizing:border-box;}

.mgame_phone_result_txt{ display:flex; justify-content:center; align-items:center;
    width:80%; border:solid 4px rgba(255,255,255,.5); border-radius:15px; color:#fff; 
    background:#a93500; padding:6px 10px; margin:20px auto 0 auto; box-sizing:border-box;
    box-shadow:inset 3px 3px 10px rgba(0,0,0,.5);}
.mgame_phone_result_txt p{ font-size:1.2em; font-weight:bold; padding:0; margin:0; box-sizing:border-box;}



/* -- 手機開始 -- */
.mgame_start_logo{ width:25%; height:auto; padding:0; margin:50px auto 30px auto; box-sizing:border-box;}
.mgame_start_logo img{ width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_start_inpzone{ width:90%; height:auto; font-family:'Arial Black',; text-align:center; 
    padding:0; margin:0 auto 0 auto; box-sizing:border-box; z-index:500;}



/* -- 選擇頭像 -- */
.game_avatar_zone{ display:flex; justify-content:center; align-items:center;
    padding:0; margin:0 auto 20px auto; box-sizing:border-box; position:relative;}

.game_avatar_zone span{ display:flex; justify-content:center; align-items:center;
    font-size:1em; font-weight:bold; border:solid 4px #fff; border-radius:15px; color:#dfcd98; 
    background:#5c4d37; padding:5px 10px;; margin:0; box-sizing:border-box;
    box-shadow:inset 1px 1px 10px 3px rgba(0,0,0,.5), 2px 2px 5px 1px rgba(0,0,0,.1); 
    position:absolute; top:-5px; left:50%; transform:translate(-50%, -50%); z-index:50;}

.game_avatar_box{ width:160px; height:160px; border:solid 6px #fff; border-radius:30px; 
    box-shadow:inset 0 0 5px 2px rgba(0,0,0,.2), 2px 2px 10px 1px rgba(0,0,0,.2);
    overflow:hidden; position:relative;}
.avatar_container{ display:flex; transition:transform 0.5s ease-in-out;}
.avatar_container div{ flex:0 0 100%; /* 每個圖片佔滿父容器的寬度 */ width:100%; height:100%;}

.avt_a{ display:flex; justify-content:center; align-items:center;
    padding:0; margin:0; box-sizing:border-box; overflow:hidden;}
.avt_a img{ width:120%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.avt_lbbt,
.avt_rbbt{ width:90px; height:90px; border:none; padding:0; box-sizing:border-box; transition:0.4s;}
.avt_lbbt{ background:url(../images/game_pix/avatar_lbbt.png) no-repeat center center; margin:50px -6px 0 0;}
.avt_rbbt{ background:url(../images/game_pix/avatar_rbbt.png) no-repeat center center; margin:50px 0 0 -6px;}
.avt_lbbt:hover,
.avt_lbbt:active{ background:url(../images/game_pix/avatar_lbbts.png) no-repeat center center;}
.avt_rbbt:hover,
.avt_rbbt:active{ background:url(../images/game_pix/avatar_rbbts.png) no-repeat center center;}

.mgame_start_inpzone input,
.mgame_start_inpzone button{ display:flex; justify-content:center; align-items:center;
    width:100%; font-size:1.5em; border:solid 6px #fff; border-radius:20px; padding:8px 10px; margin:0 auto; box-sizing:border-box;}
.mgame_start_inpzone input{ text-align:center; text-shadow:1px 1px 0 rgba(255,255,255,.5); color:#4d3c00; 
    background:#dfcd98; margin:0 0 15px 0; box-shadow:inset 2px 2px 5px rgba(0,0,0,.2);}
.mgame_start_inpzone input::placeholder{ text-shadow:1px 1px 0 rgba(0,0,0,0); color:#f2ecd6;}
.mgame_start_inpzone button{ color:#fff; background:url(../images/game_pix/start_bbt.jpg) repeat-x center center;
    box-shadow:inset 0 0 5px 2px rgba(0,0,0,.5); transition:0.4s;}
.mgame_start_inpzone button:hover,
.mgame_start_inpzone button:active{ border:solid 6px #ffbe00; color:#ffbe00; box-shadow:inset 0 0 8px 5px #ffea00;}



/* -- 問答題目 -- */
.mgame_topic_pix{ display:block; width:80%; height:auto; padding:0; margin:50px auto 0 auto; box-sizing:border-box; z-index:10;}
.mgame_topic_pix img{ width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_topic_txt{ display:flex; justify-content:center; align-items:center; border-radius:35px;
    width:90%; background:#355065; padding:8px; margin:0 auto; box-sizing:border-box;
    box-shadow:5px 5px 15px #d0cab0, inset -2px -2px 2px #142233, inset 2px 2px 2px #bcc5cc;
    position:absolute; top:45%; left:50%; transform:translate(-50%, -50%); z-index:20;}
.mgame_topic_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_topic_tc h3{ display:block; width:100%; text-align:center; font-size:1.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;}



/* -- 加入中 -- */
.mgame_phone_joining{ display:flex; justify-content:center; align-items:center;
    width:355px; height:373px; background:url(../images/game_pix/g_data_txt.png) no-repeat center center;
    padding:0; margin:0 auto; box-sizing:border-box; position:relative;}
.mgame_joining_data{ width:90%; height:auto; text-align:center; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_joining_data h1,
.mgame_joining_data h2,
.mgame_joining_data h3,
.mgame_joining_data p{ width:100%; height:auto; text-align:center; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.2);
    padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_joining_data h1{ font-size:3.5em; color:#5c1800;}
.mgame_joining_data h2{ font-size:2.5em; color:#5c1800;}
.mgame_joining_data h3{ font-size:1.8em; color:#1a1300;}
.mgame_joining_data p{ font-size:1.1em; color:#3c2300;}
.mgame_joining_data img{ font-size:1.1em; color:#3c2300; padding:0; margin:10px auto; box-sizing:border-box;}

.loader{ width:70px; aspect-ratio:1; display:grid; border-radius:50%;
  background:
    linear-gradient(0deg ,rgb(255 255 255/50%) 30%,#0000 0 70%,rgb(255 255 255/100%) 0) 50%/8% 100%,
    linear-gradient(90deg,rgb(255 255 255/25%) 30%,#0000 0 70%,rgb(255 255 255/75% ) 0) 50%/100% 8%;
  background-repeat:no-repeat; animation:l23 1s infinite steps(12); margin:10px auto 15px auto;}
.loader::before,
.loader::after{ content:""; grid-area:1/1; border-radius:50%; background:inherit; opacity:0.915; transform:rotate(30deg);}
.loader::after{ opacity:0.83; transform:rotate(60deg);}
@keyframes l23{ 100% {transform: rotate(1turn)}}



/* -- 手機下排按鈕 -- */
.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:90px; 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% 15px 0;}
.mgame_phone_dbbt button:nth-child(even){ margin:0 0 15px .5%;}
.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;}

.mgame_phone_dbbt button span{ display:block; width:30px; height:30px;
    padding:0; margin:0 0 0 20px; 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.8em; 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.3);
    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:url(../images/game_pix/xq_x.png) no-repeat center center; 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;}

.q_play{border: solid !important;  border-color: white !important; border-width: 6px !important;color: black;  
    
    text-shadow:-1px -1px 0 #ffffff,1px 0px 0 #ffffff,-2px 1px 0 #ffffff,-3px 1px 0 #000000,-2px 2px 0 #000000;
   
}


/* -- 時間霸 -- */
.mgame_time_bar{ display:flex; justify-content:flex-start; align-items:center;
    width:95%; height:34px; border-radius:20px; 
    background:#fff; padding:0; margin:0 auto; box-sizing:border-box;
    position:fixed; bottom:390px; left:2.5%;}
.mgame_time_in{ display:flex; justify-content:flex-end; align-items:center;
    width:100%; height:34px; 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.2em; font-weight:bold; color:#fff; padding:0; margin:0; box-sizing:border-box;}



/* -- 開獎 -- */
.mgame_settl_pop{ display:flex; justify-content:center; align-items:flex-end;
    width:auto; font-family:'Arial Black', sans-serif; padding:0; margin:-20px auto 0 auto; box-sizing:border-box;}
.mgame_settl_pop span{ width:29px; height:37px; padding:0; margin:0; box-sizing:border-box;}
.mgame_settl_pop img{ width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_settl_pop p{ width:auto; font-size:1.5em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.5);
    color:#5c1800; padding:0; margin:0 0 -5px 8px; box-sizing:border-box;}

.mgame_settl_pix{ display:flex; justify-content:center; align-items:center;
    width:100%; padding:0; margin:-20px auto -35px auto; box-sizing:border-box; position:relative;}
.mgame_settl_pix img{ width:70%; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_settl_pix p{ font-size:2.5em; font-weight:bold; 
    color:#fff; padding:0; margin:0; box-sizing:border-box; position:absolute;
    top:42%; left:50%; transform:translate(-50%, -50%);}

.mgame_settl_nob{ display:inline-block; height:54px; text-align:center; border:solid 4px #fff; border-radius:15px;
    background:url(../images/game_pix/settl_bbt.jpg) repeat-x center center; 
    padding:0 15px; margin:0 auto; box-sizing:border-box; box-shadow:inset 0 0 5px 2px #3f2700,0 5px 8px #3f2700;}
.mgame_settl_nob span{ display:inline-block; width:31px; height:38px; padding:0; margin:0; box-sizing:border-box; vertical-align:middle;}
.mgame_settl_nob span img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_settl_nob p{ display:inline-block; width:auto; font-size:1.8em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.5);
    color:#fff; padding:0; margin:0; box-sizing:border-box; vertical-align:middle;}

.mgame_phone_dow{ display:flex; justify-content:space-between; align-items:center;
    width:99%; height:60px; font-family:'Arial Black',; border:solid 6px #fff; border-bottom:none; border-radius:20px 20px 0 0;
    background:url(../images/bbt_dow_bar.jpg) repeat-x center center;
    padding:10px; margin:0 auto; box-sizing:border-box; position:fixed; bottom:0; left:.5%;}

.mgame_phone_dow_l,
.mgame_phone_dow_r{ display:flex; justify-content:space-between; align-items:center;
    padding:0; margin:0; box-sizing:border-box;}
.mgame_phone_dow_l p,
.mgame_phone_dow_r p{ font-size:1.5em; font-weight:bold; color:#fff; padding:0; margin:0 0 0 5px; box-sizing:border-box;}





/* -- 遊戲大廳 -- */
.mans_zone{ width:100%; height:calc(100% - 200px); padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; top:140px; left:0; z-index:5;}
.man_box{ display:flex; justify-content:center; align-items:center;
    width:120px; height:120px; border-radius:8px;
    background:#ccc; padding:0; margin:0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.3);
    overflow:hidden;
    position:relative;}
.man_box img{ object-fit:cover; padding:0; margin:0; box-sizing:border-box;}
.man_box label{ display:flex; justify-content:center; align-items:center;
    width:100%; height:28px; font-size:1.3em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.8);
    background:rgba(255,255,255,.8); position:absolute; bottom:0; left:0;}

/* -- 舊的 -- */
.mans_qr_zone{ width:100%; height:100%; 
    background:rgba(0,0,0,.8); padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; top:0; left:0; z-index:200;}
.qr_box{ width:auto; height:85%; background:#ccc;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.qr_box img{ width:auto; height:100%; padding:0; margin:0; box-sizing:border-box;}

/* -- 新的 -- */
.qrcode_pop_up{ width:100%; height:100%; 
    background:rgba(0,0,0,.8); padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; top:0; left:0; z-index:200;}
.qrcode_pop_img{ width:auto; height:85%; background:#ccc;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.qrcode_pop_img img{ width:auto; height:100%; padding:0; margin:0; box-sizing:border-box;}
.qr_upimg{ width:30% !important; height:auto; padding:0; margin:0 auto; box-sizing:border-box;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); cursor:pointer;}



/* -- 遊戲排名 -- */
.mgame_ranking_list_zone{ width:100%; height:calc(100vh - 92px); text-align:center;
    background:rgba(0,0,0,.5); padding:20px 0 0 0; margin:0; box-sizing:border-box;
    position:absolute; top:45px; left:0;}
.mgame_ranking_list_zone ul{ width:auto; height:100%; 
    padding:0; margin:0 auto; box-sizing:border-box; overflow-y:auto;}
.mgame_listone_view{ width:800px !important;}
.mgame_ranking_list_zone ul li{ display:flex; justify-content:space-between; align-items:center;
    width:100%; height:80px; border-radius:8px;
    background:#fff; padding:0 15px 0 10px; margin:0 auto 8px auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0,0,0,.3);}
.mgame_ranking_list_zone ul li h5{ font-size:1.5em; font-weight:bold; padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_lbox{ display:flex; justify-content:flex-end; align-items:center; 
    padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_lbox p{ font-size:1.3em; font-weight:bold; color:#000; padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_pix{ display:flex; justify-content:center; align-items:center;
    width:60px; height:60px; border-radius:5px; padding:0; margin:0 10px 0 0; box-sizing:border-box; overflow:hidden;}
.mgame_rlist_pix img{ object-fit:cover; padding:0; margin:0; box-sizing:border-box;}



/* -- 遊戲開獎 -- */
.mgame_prizedraw_zone{ display:flex; justify-content:center; align-items:flex-start;
    width:100%; height:calc(100vh - 92px); text-align:center; 
    background:url(../images/game_pix/bk_flash.png) no-repeat center center,rgba(0,0,0,.5); 
    padding:0; margin:0; box-sizing:border-box;
    position:absolute; top:45px; left:0;}
.mgame_prizedraw_zone button{ display:flex; justify-content:center; align-items:center;
    width:620px; height:55px; font-size:1.7em; font-weight:bold; border:solid 2px #fff; border-radius:8px; color:#a66063; 
    background:#fff; padding:0; margin:0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.2);
    position:absolute; bottom:20px; left:50%; transform:translate(-50%, -50%); transition:0.4s; opacity:0;}
.mgame_prizedraw_zone button:hover,
.mgame_prizedraw_zone button:active{ color:#a66063; border:solid 2px #a66063; background:#eed8ce;}


.mgame_pw_a,
.mgame_pw_b,
.mgame_pw_c,
.mgame_pw_d,
.mgame_pw_e{ padding:0; margin:0; box-sizing:border-box; position:relative; transition:0.4s;}

.mgame_pw_a{ margin:50px 10px 0 10px;}
.mgame_pw_b{ margin:120px 0 0 20px;}
.mgame_pw_c{ margin:180px 20px 0 0;}
.mgame_pw_d,
.mgame_pw_e{ margin:400px 0 0 0; opacity:0;}

.mgame_pw_pix{ display:flex; justify-content:center; align-items:center;
    border:solid 2px #fff; border-radius:8px; 
    padding:0; margin:0; box-sizing:border-box; overflow:hidden;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.mgame_pw_a .mgame_pw_pix,
.mgame_pw_b .mgame_pw_pix,
.mgame_pw_c .mgame_pw_pix{ width:122px; height:122px; top:43%;}
.mgame_pw_d .mgame_pw_pix,
.mgame_pw_e .mgame_pw_pix{ width:102px; height:102px; top:41.5%;}
.mgame_pw_img{ object-fit:cover; padding:0; margin:0; box-sizing:border-box;}

.mgame_pw_txt{ font-size:1.5em; font-weight:bold; padding:0; margin:0; box-sizing:border-box;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.mgame_pw_a .mgame_pw_txt,
.mgame_pw_b .mgame_pw_txt,
.mgame_pw_c .mgame_pw_txt{ top:62.5%;}
.mgame_pw_d .mgame_pw_txt,
.mgame_pw_e .mgame_pw_txt{ top:68.5%;}

.mgame_pw_p{ font-family:'Arial Black', sans-serif; font-weight:bold; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.mgame_pw_a .mgame_pw_p,
.mgame_pw_b .mgame_pw_p,
.mgame_pw_c .mgame_pw_p{ font-size:3.3em; color:#000; top:76.5%; -webkit-text-stroke: 2px #fff;}
.mgame_pw_d .mgame_pw_p,
.mgame_pw_e .mgame_pw_p{ font-size:1.8em; color:#ac670c; top:84%;}



/* 初始化統一樣式 */ 
.mgame_pw_a,
.mgame_pw_b,
.mgame_pw_c,
.mgame_pw_d,
.mgame_pw_e{ position:relative; box-sizing:border-box; opacity:0; 

/* 初始透明，逐步顯示 */ } /* ➤ 進場動畫 - C */
.mgame_pw_c{ animation:c_enter 1.5s forwards;} 
@keyframes c_enter{ from{ margin:1000px 20px 0 0; opacity:1;} to { margin:180px 20px 0 0; opacity:1;}}

/* ➤ 進場動畫 - B（延遲1.5秒） */
.mgame_pw_b{ animation:b_enter 1.5s 1.5s forwards;}
@keyframes b_enter{ from{ margin:1000px 0 0 20px; opacity:1;} to { margin:120px 0 0 20px; opacity:1;}}

/* ➤ 進場動畫 - A（延遲3秒，持續2秒） */
.mgame_pw_a{ animation:a_enter 2s 3s forwards;}
@keyframes a_enter{ from{ margin:1000px 10px 0 10px; opacity:1;} to { margin:50px 10px 0 10px; opacity:1;}}

/* ➤ 進場動畫 - D & E（延遲4.5秒，變更 opacity） */
.mgame_pw_d,
.mgame_pw_e{ animation:fade_in 1.5s 4.5s forwards;}
@keyframes fade_in{ from{ opacity:0;} to { opacity:1;}}

/* ➤ 進場動畫 - button（延遲4.5秒，變更 opacity） */
.mgame_prizedraw_zone button{ animation:fade_in 1.5s 4.5s forwards;}
@keyframes fade_in{ from{ opacity:0;} to { opacity:1;}}

/* ➤ 進場動畫 - mgame_phone_game_top_bar.5秒，變更 opacity） */
.mgame_phone_game_top_bar{ animation:fade_in 1.5s 4.5s forwards;}
@keyframes fade_in{ from{ opacity:0;} to { opacity:1;}}




.rt_bbt{ margin:0 0 0 10px !important;}

.mgame_prizedraw_zone ul{ width:620px !important; height:calc(100% - 500px); 
    padding:0; margin:0 auto; box-sizing:border-box; overflow-y:auto;
    position:absolute; bottom:30px; left:50%; transform:translate(-50%, 0%);}
.mgame_prizedraw_zone ul li{ display:flex; justify-content:space-between; align-items:center;
    width:100%; height:80px; border-radius:8px;
    background:#fff; padding:0 15px 0 10px; margin:0 auto 8px auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0,0,0,.3);}
.mgame_prizedraw_zone ul li h5{ font-size:1.5em; font-weight:bold; padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_lbox{ display:flex; justify-content:flex-end; align-items:center; 
    padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_lbox p{ font-size:1.3em; font-weight:bold; color:#000; padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_pix{ display:flex; justify-content:center; align-items:center;
    width:60px; height:60px; border-radius:5px; padding:0; margin:0 10px 0 0; box-sizing:border-box; overflow:hidden;}
.mgame_rlist_pix img{ object-fit:cover; padding:0; margin:0; box-sizing:border-box;}
.mgame_rlist_lbox h4{ font-size:1.5em; font-weight:bold;
    padding:0; margin:0 10px 0 0; box-sizing:border-box;}


.mgame_prizedraw_lists { display:none; opacity:0; transform:translate(-50%, 100%);
    transition:opacity 0.4s ease, transform 0.4s ease;}
.mgame_prizedraw_lists.active{ display:block; opacity:1; transform:translate(-50%, 0);}





/* -- 視窗開始 -- */
.mgame_win_sbg{ background:url(../images/win_start_bk.jpg) no-repeat center center; background-size:cover;}
.mgame_start_mzone{ display:flex; justify-content:center; align-items:center;
    width:100%; height:100vh; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_start_mlogo{ width:20%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;
    opacity:0; transform:translateY(50px); animation:fadeInUp 2s ease-out forwards;}
.mgame_start_mlogo img{ width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}

@keyframes fadeInUp{
    0%{
        opacity:0;
        transform:translateY(50px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

/* -- 視窗題目 -- */
.mgame_win_tbg{ background:url(../images/win_game_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_countdown_zone{ padding:0; margin:0; box-sizing:border-box;}

.mgame_countdown_a,
.mgame_countdown_b,
.mgame_countdown_c,
.mgame_countdown_bk,
.mgame_countdown_logo{ height:auto; padding:0; margin:0; box-sizing:border-box;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.mgame_countdown_a{ z-index:8;}
.mgame_countdown_b{  opacity:0; z-index:7;}
.mgame_countdown_c{  opacity:0; z-index:6;}
.mgame_countdown_bk{ z-index:5;}
.mgame_countdown_logo{ opacity:0; z-index:9;}

.mgame_countdown_a img,
.mgame_countdown_b img,
.mgame_countdown_c img,
.mgame_countdown_bk img,
.mgame_countdown_logo img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}

/* 第一段動畫：數字置換與背景變化 */
@keyframes countdownNumber {
    0% {
        opacity: 0;
        transform: translate(-50%, 5%);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes countdownBackground {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1; /* 初始狀態可見 */
    }
    22.5% {
        transform: translate(-50%, -50%) scale(1.1);
        filter: brightness(1.5);
    }
    45% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1);
    }
    76.5% {
        transform: translate(-50%, -50%) scale(1.1);
        filter: brightness(1.5);
    }
    90% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1);
        opacity: 1; /* 保持可見 */
    }
    100% {
        opacity: 0; /* 最後消失 */
        transform: translate(-50%, -50%) scale(1);
    }
}

.mgame_countdown_a {
    animation: countdownNumber 1s ease-out forwards;
}

.mgame_countdown_b {
    animation: countdownNumber 1s ease-out 1s forwards;
}

.mgame_countdown_c {
    animation: countdownNumber 1s ease-out 2s forwards;
}

.mgame_countdown_bk {
    animation: countdownBackground 3s ease-out forwards;
}

/* 第二段動畫：logo 出現 */
@keyframes logoAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, 5%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.mgame_countdown_logo {
    animation: logoAppear 2s ease-out 2.5s forwards;
}



/* -- 視窗上列 -- */
.mgame_top_winr_topic{ display:flex; justify-content:center; align-items:center;
    width:96px; height:52px; border-radius:8px;
    background:#fff; padding:0; margin:0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.3);
    position:absolute; left:20px; cursor:pointer;}
.mgame_top_winr_topic p{ display:flex; justify-content:space-between; align-items:center;
    font-size:1.5em; font-weight:normal; color:#a66063; padding:0; margin:0; box-sizing:border-box;}
.mgame_top_winr_topic p img{ width:30px; height:30px; padding:0; margin:0 5px 0 0; box-sizing:border-box;}

.mgame_top_next_topic{ display:flex; justify-content:center; align-items:center;
    width:auto; height:52px; font-family:'Arial Black', sans-serif; border-radius:8px;
    background:#fff; padding:0 15px; margin:0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.3);
    position:absolute; right:20px; cursor:pointer; transition:0.4s;}
.mgame_top_next_topic p{ font-size:1.5em; font-weight:bold; color:#a66063; padding:0; margin:0 15px 0 0; box-sizing:border-box; transition:0.4s;}
.mtnt_b{ border:solid 2px #a66063; background:#a66063 !important; transition:0.4s;}
.mtnt_b p{ color:#fff !important;  transition:0.4s;}

.mtnt_b:hover,
.mtnt_b:active{ border:solid 2px #a66063; background:#fff !important;}

.mtnt_b:hover p,
.mtnt_b:active p{ color:#a66063 !important;}





.mgame_gamecode_box{ display:flex; justify-content:flex-end; align-items:flex-start; 
    border-radius:8px; background:#fff; padding:15px; margin:0; box-sizing:border-box; 
    box-shadow:0 2px 3px rgba(0,0,0,.3); position:absolute; top:17px; left:50%; transform:translate(-50%, 0%);}
.mgame_code_box{ width:100px; height:100px; background:#fff; 
    padding:0; margin:0 15px 0 0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.3);
    position:relative;}
.mgame_code_box img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_code_nob{ padding:0; margin:0; box-sizing:border-box;}
.mgame_code_nob h3{ font-size:2em; font-weight:bold; padding:0; margin:0; box-sizing:border-box;}
.mgame_code_nob p{ line-height:60px; font-size:3em; font-weight:bold; color:#a66063; padding:0; margin:0; box-sizing:border-box;}



/* -- 遊戲關口 -- */
.mgame_gentrance_box{ width:400px; height:456px; font-family:微軟正黑體; border-radius:8px; 
    padding:0; margin:0 auto; box-sizing:border-box;background: #fff;
    box-shadow:0 2px 3px rgba(0,0,0,.3);
    overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.mgame_gentrance_pix{ display:flex; justify-content:start; align-items:start; width:400px; height:auto;
    padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_gentrance_pix img{ width:400px; height:267px; object-fit:cover; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_gentrance_data{ width:100%; height:calc(100% - 400px);
    background:#fcf9f8; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_gentrance_data button{ display:flex; justify-content:center; align-items:center;
    width:90%; height:40px; font-size:1.2em; font-weight:bold; border:solid 2px #a66063; border-radius:8px; color:#fff; 
    background:#a66063; padding:0; margin:0 auto; box-sizing:border-box; transition:0.4s;}
.mgame_gentrance_data button:hover,
.mgame_gentrance_data button:active{ color:#a66063; border:solid 2px #a66063; background:#eed8ce;}
.mgame_gentrance_up{ display:flex; justify-content:space-between; align-items:center;
    width:90%; padding:20px 0; margin:auto; box-sizing:border-box;}
.mgame_gentrance_up h3{ font-size:1.5em; font-weight:bold; padding:0; margin:0; box-sizing:border-box;}
.mgame_gentrance_up button{ display:flex; justify-content:center; align-items:center;
    width:100px; height:40px; font-size:1.2em; font-weight:bold; border:solid 2px #fff; border-radius:8px; color:#a66063; 
    background:#fff; padding:0; margin:0; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,.3); transition:0.4s;}
.mgame_gentrance_up button:hover,
.mgame_gentrance_up button:active{ color:#a66063; border:solid 2px #a66063; background:#eed8ce;}

.mgame_qa_zone{ display:flex; justify-content:center; align-items:flex-start;
    width:100%; padding-bottom:1em; margin:0 auto; box-sizing:border-box;}
.mgame_qa_syl{ width:500px; height:calc(100vh - 92px); padding:0; margin:0; box-sizing:border-box; position:relative;}
.mgame_qa_sir{ width:calc(100% - 500px); height:calc(100vh - 0px); 
    padding:30px 30px 0 0; margin:0; box-sizing:border-box; overflow-y:scroll;}

.mgame_qa_sbox{ display:flex; justify-content:space-between; align-items:center;
    width:100%; height:200px; border-radius:8px; 
    background:#fff; padding:0; margin:0 0 10px 0; box-sizing:border-box; 
    box-shadow:0 2px 3px rgba(0,0,0,.3) ; overflow:hidden; position:relative;}
.mgame_qa_snob{ display:flex; justify-content:center; align-items:center;
    width:24px; height:200px; font-size:1.5em; font-weight:bold; color:#fff; 
    background:#a66063; padding:0; margin:0; box-sizing:border-box;}
.mgame_qa_sdata{ width:calc(100% - 246px); height:200px; padding:0; margin:0; box-sizing:border-box;}
.mgame_qa_sdata h3{ font-size:1.8em; font-weight:bold; color:#000; padding:0; margin:8px 0; box-sizing:border-box;}

.mgame_qa_sbbtsa{  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
    width:100%; font-family:'Arial Black', sans-serif; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_qa_sbbtsa button{ display:flex; justify-content:flex-start; align-items:center;
     width:49.5%; height:45px; border:none; border-radius:8px; 
    padding:0; margin:0 0 5px 0; box-sizing:border-box; box-shadow:0 2px 5px rgba(0,0,0,.3); position:relative;}
.mgame_qa_sbbtsa button:nth-child(odd){ margin:0 .5% 5px 0;}
.mgame_qa_sbbtsa button:nth-child(even){ margin:0 0 5px .5%;}

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


.qa_correct_0{ background:#f43545;}
.qa_correct_1{ background:#ff8a00;}
.qa_correct_2{ background:#faf715;}
.qa_correct_3{ background:#00ba72;}
.qa_correct_4{ background:#00c2de;}
.qa_correct_5{ background:#bb36ae;}


.mgame_qa_sdata .sixitems.qa_correct{}

.mgame_qa_sdata .sixitems.qa_correct p{ color:#000; position:relative; z-index:5;}
.mgame_qa_sdata .sixitems.qa_correct p:before{ content:""; color:transparent;
    position:absolute; top:0px; left:50%; transform:translate(-50%, 0%);
    -webkit-text-stroke:3px white; text-stroke:3px white; z-index:-1;} 

.mgame_qa_sdatb{ width:100%; padding:0; margin:0; box-sizing:border-box;}
.mgame_qa_sdatb button{ width:100%; height:45px; border:none; border-radius:8px;
    background:#ebebeb; padding:0; margin:0 0 5px 0; box-sizing:border-box; position:relative;}
.mgame_qa_sdatb button span{ width:30px; height:30px; padding:0; margin:0; box-sizing:border-box; position:absolute; top:8px; left:10px;}
.mgame_qa_sdatb button span img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box; }
.mgame_qa_sdatb p{ display:flex; justify-content:center; align-items:center;
    width:calc(100% - 40px); height:40px; font-size:1.3em; font-weight:bold; color:#a6a6a6; padding:0; margin:0; box-sizing:border-box;}
.mgame_qa_sdatb .sixitems.qa_correct{background: #f43545;}
.mgame_qa_sdatb .sixitems.qa_correct p{ color:#000; position:relative; z-index:5;}
.mgame_qa_sdatb .sixitems.qa_correct p:before{ content:""; color:transparent;
    position:absolute; top:4px; left:50%; transform:translate(-50%, 0%);
    -webkit-text-stroke:3px white; text-stroke:3px white; z-index:-1;}

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

.mgame_qa_spix{ display:flex; justify-content:center; align-items:center;
    width:200px; height:200px; padding:10px 0; margin:0; box-sizing:border-box; overflow:hidden;}
.mgame_qa_spix img{ object-fit:cover; padding:0; margin:0; box-sizing:border-box;max-width: 100%;max-height: 100%;}



/* -- 視窗題目與圖 -- */
.mgame_winmain_zone{ display:flex; justify-content:center; align-items:center;
    width:100%; max-height:calc(100% - 580px); min-height:calc(100% - 580px); 
    position:absolute; top:50px; left:0; z-index:20; flex:1;}

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

.mgame_winmain_txt{ display:flex; justify-content:center; align-items:center; 
    width:95%; border-radius:16px; background:#fff; padding:12px; margin:0 auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0,0,0,.3);  position:fixed; bottom:440px; 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:2.5em; 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_statistics_zone{ width:800px; height:calc(100vh - 500px);; text-align:center;
    position:absolute; bottom:500px; left:50%; transform:translate(-50%, 0%); 
    z-index:20; flex:1;}

.mgame_statistics_box{ display:flex; justify-content:center; align-items:flex-end;
    width:100%; height:70%; padding:0; margin:0 auto; box-sizing:border-box; position:absolute; bottom:0;}
.mgame_statistics_zone li{ width:16%; height:100%; padding:0; margin:0; box-sizing:border-box; position:relative; }
.mgame_stsbar_nob{ display:flex; justify-content:center; align-items:center;
    width:90%; height:100%; border-radius:16px 16px 0 0; padding:5px; margin:0 auto; box-sizing:border-box; 

    position:absolute; bottom:0; z-index:5;}
.mgame_stsbar_nob span{ padding:0; margin:0; box-sizing:border-box; 
    position:absolute; bottom:10px; z-index:5;}
.mgame_stsbar_nob img{ width:30px; height:30px; padding:0; margin:0; box-sizing:border-box;}

.mgame_statistics_box li:nth-child(1) .mgame_stsbar_nob{ background:#f43545;}
.mgame_statistics_box li:nth-child(2) .mgame_stsbar_nob{ background:#ff8a00;}
.mgame_statistics_box li:nth-child(3) .mgame_stsbar_nob{ background:#faf715;}
.mgame_statistics_box li:nth-child(4) .mgame_stsbar_nob{ background:#00ba72;}
.mgame_statistics_box li:nth-child(5) .mgame_stsbar_nob{ background:#00c2de;}
.mgame_statistics_box li:nth-child(6) .mgame_stsbar_nob{ background:#bb36ae;}

.msn_dr{ width:100%; height:100%; border-radius:16px 16px 0 0; background:rgba(0,0,0,.2); position:absolute; z-index:2}
.q_correct{ display:none;}

.mgresbker{ background:rgba(0,0,0,.5); }



/* -- 視窗分數排名 -- */
.mgame_scoreboard_zone{ display:flex; justify-content:center; align-items:center;
    width:95%; height:calc(100vh - 270px); font-family:'Arial Black', sans-serif; text-align:center; 
    position:absolute; bottom:160px; left:50%; transform:translate(-50%, 0%); z-index:20; flex:1;}
.mgame_scoreboard_title{ width:120px; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_scoreboard_title img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}

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

.mgame_scoreboard_box ul{ width:49%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_scoreboard_box ul:nth-child(odd){ margin:0 .5% 10px 0;}
.mgame_scoreboard_box ul:nth-child(even){ margin:0 0 10px .5%;}

.mgame_scoreboard_box ul li{ display:flex; justify-content:space-between; align-items:center;
    border:solid 5px #fff; border-radius:30px;
    background: linear-gradient(to bottom,  #eae8e7 0%,#eae9e7 32%,#e5e2e5 89%,#cdcdcb 100%);
    padding:20px; margin:0 0 6px 0; box-sizing:border-box; box-shadow:inset 0 0 10px 2px rgba(0,0,0,.5);}
.msas_l,
.msas_r{ display:flex; align-items:center; padding:0; margin:0; box-sizing:border-box;}
.msas_l{ justify-content:flex-start;}
.msas_l p{ font-size:3em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.5); 
    color:#4d3d25; padding:0; margin:0; box-sizing:border-box;}
.msas_l span{ width:70px; height:70px; border:solid 4px #fff; border-radius:15px;
    padding:0; margin:0 10px; box-sizing:border-box; overflow:hidden;}
.msas_l span img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;
    padding:0; margin:0; box-sizing:border-box;}
.msas_l h3{ font-size:2em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.5); 
    color:#4d3d25; padding:0; margin:0; box-sizing:border-box;}
.msas_r{ justify-content:flex-start; position:relative;}
.msas_r img{ width:50px; height:auto; padding:0; margin:0 -30px 0 0; box-sizing:border-box; z-index:3;}
.msas_r h4{ font-size:2em; font-weight:bold; border:solid 4px #e2ceae; border-radius:0 15px 15px 0; color:#fff; 
    background:#61523b; padding:3px 15px 3px 30px; margin:0; box-sizing:border-box; 
    box-shadow:inset 2px 2px 15px 2px rgba(0,0,0,.2); z-index:1;}

.mgame_scoreboard_msg{ display:flex; justify-content:center; align-items:center;
    width:85%; height:140px; border:solid 5px #fff; border-radius:50px 50px 0 0 ; 
    background:#dfcd98; padding:0; margin:0; box-sizing:border-box; box-shadow:inset 2px 2px 10px 2px rgba(0,0,0,.3); 
    position:fixed; bottom:0; left:50%; transform:translate(-50%, 0%)}
.mgame_scoreboard_msg span{ padding:0; margin:-40px 10px 0 10px; box-sizing:border-box;}
.mgame_scoreboard_msg span img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_scoreboard_msg p{ font-size:2em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,.3); 
    color:#642d00; padding:0; margin:-40px 10px 0 10px; box-sizing:border-box;}



/* -- 視窗排名展示 -- */
.mgame_sett_toptxt{ text-align:center; padding:0; margin:0 auto; box-sizing:border-box;}

.mgame_ranking_zone{ width:100%; height:calc(100vh - 280px);; font-family:'Arial Black', sans-serif;
    padding:0; margin:0; box-sizing:border-box; position:fixed; bottom:0; left:0;}

.mgame_ranking_box{ width:384px; height:auto; text-align:center; padding:0; margin:0; box-sizing:border-box; position:absolute;}
.mgame_ranking_pop{ display:flex; justify-content:center; align-items:center;
    width:100px; height:100px; border:solid 5px #fff; border-radius:20px;
    padding:0; margin:0 auto 20px auto; box-sizing:border-box; box-shadow:0 0 15px 3px rgba(255,215,118,.7); overflow:hidden;}
.mgame_ranking_pop img{ width:100%; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_ranking_pix{ width:100%; height:500px; text-align:center;
    background:url(../images/movie/sett_bkere_a.png) no-repeat top center; background-size:cover;
    padding:0; margin:0; box-sizing:border-box;}
.mgame_ranking_pix h3{ font-size:2em; font-weight:bold; color:#fff; 
    padding:0; margin:-30px auto 10px auto; box-sizing:border-box;}
.mgame_ranking_nob{ width:50%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_ranking_nob img{ width:100%; height:auto; padding:0; margin:30px 0 0 0; box-sizing:border-box;}
.mgame_ranking_s{ display:flex; justify-content:center; align-items:center;
    width:100%; height:auto; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_ranking_s img{ width:40px; height:auto; padding:0; margin:0; box-sizing:border-box;}
.mgame_ranking_s p{ font-size:2.5em; font-weight:bold; color:#fff; 
    padding:0; margin:0; box-sizing:border-box;}

.mgame_ranking_box:nth-child(1){ bottom:0; left:50%; transform:translate(-50%, 0%); z-index:9;}
.mgame_ranking_box:nth-child(2){ bottom:-5%; left:39%; transform:translate(-50%, 0%); z-index:8;}
.mgame_ranking_box:nth-child(3){ bottom:-10%; left:61%; transform:translate(-50%, 0%); z-index:7;}
.mgame_ranking_box:nth-child(4){ bottom:-15%; left:28%; transform:translate(-50%, 0%); z-index:6;}
.mgame_ranking_box:nth-child(5){ bottom:-20%; left:72%; transform:translate(-50%, 0%); z-index:5;}

.msn_dr{ width:100%; height:100%; border-radius:16px 16px 0 0; background:rgba(0,0,0,.2); position:absolute; z-index:2}
.q_correct{ display:none;}

.mgresbker{ background:rgba(0,0,0,.5); }



/* -- 照片展示 -- */
.mgame_view_bk_zone{ display:flex; justify-content:center; align-items:center;
    width:100%; height:100vh; 
     background:url(../images/view_bkere.png) no-repeat center center; background-size:cover; 
     padding:0; margin:0; box-sizing:border-box;
    position:absolute; bottom:0; left:0;}

#box{ display:flex; justify-content:center; align-items:center;
    width:1170px; height:786px; position:relative; overflow: hidden;}
#box::before{ content:""; width:100%; height:100%;
    background-image:url('https://p038.paponta.com/images/home/1697108219_60.png?_=1701914230');
    background-size:cover; background-position:center center; filter:blur(11px); 
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index: 0;}
#image{ display:flex; justify-content:center; align-items:center;
    width:100%; height:100%; position:relative; z-index:1;}
#image img{ display:block; max-width:100%; max-height:100%;}

.view_boxs_zone{ display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap;
    width:100%; max-width:1500px; padding:0; margin:0; box-sizing:border-box;}
#boxs{ display:flex; justify-content:center; align-items:center;
    width:468px; height:314px; flex:0 0 calc(33.33% - 50px); margin:20px; position:relative; overflow:hidden;}
#boxs::before{ content:""; width:100%; height:100%;
    background-image:url('https://p038.paponta.com/images/home/1697108219_60.png?_=1701914230');
    background-size:cover; background-position:center center; filter:blur(11px); 
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index: 0;}






/* -- 登入視窗 -- */
.mgame_login_zone{ width:100%; height:auto; text-align:center; font-family:微軟正黑體;
    padding:0; margin:0 auto; box-sizing:border-box;
    overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.mgame_login_zone p{ width:100%; height:auto; text-align:center; font-size:1.1em; font-weight:bold; 
    color:#d10000; padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_login_box{ width:400px; height:auto; border-radius:8px; 
    background:#fff; padding:25px; margin:30px auto 5px auto; box-sizing:border-box;
    box-shadow:0 2px 3px rgba(0, 0, 0, .3);}
.mgame_login_box h3{ font-size:1.3em; font-weight:bold; 
    padding:0; margin:0 auto 10px auto; box-sizing:border-box;}

.mgame_log_box{ width:100%; height:auto; 
    padding:0; margin:0 auto; box-sizing:border-box;}
.mgame_log_box label{ font-size:1em; padding:0; margin:0 0 10px 0; box-sizing:border-box;}
.mlog_bbt{ width:100%; height:40px; border-radius:8px; margin:0 auto; box-sizing:border-box;}

.mlog_bbt{ font-size:1.2em; font-weight:bold; border:solid 1px #a66063; 
    color:#fff; background:#a66063; padding:0 8px; margin:0 auto; transition:0.4s;}
.mlog_bbt:hover,
.mlog_bbt:active{ color:#a66063; border:solid 2px #a66063; background:#eed8ce;}


.mlog_inp{ 
    width:100%; height:40px; border-radius:8px; margin:0 auto; box-sizing:border-box; 
    font-size:1.2em; font-weight:bold;   
    background:#fff; /* 初始狀態 a6a6a6 */
    border:solid 1px #a7a7a7;  
    color:#000; padding:8px; margin:0 auto 12px auto; transition: all 0.3s ease;
}
  
.mlog_inp:focus {
    background-color:#ebebeb; /* 焦點時的顏色 */
    border:solid 1px #a66063 !important;
    outline:none;
}

  .mlog_inp::placeholder {
    font-weight: 500; /* placeholder 文字為細體 */
    color: #aaa; /* 可視需求調整顏色 */
  }

.password_error{ background:#EED8CE; /* 有輸入時的顏色 */
    border:solid 1px #a66063 !important;}












@media (max-width: 1366px) {
/* -- 視窗排名展示 -- */
.mgame_ranking_box:nth-child(1){ left:50%;}
.mgame_ranking_box:nth-child(2){ left:33%;}
.mgame_ranking_box:nth-child(3){ left:67%;}
.mgame_ranking_box:nth-child(4){ left:16%;}
.mgame_ranking_box:nth-child(5){ left:83%;}
}




@media (max-width: 1024px) {
/* -- 視窗開始 -- */
.mgame_start_mlogo{ width:50%;}

.mp_win_top{ top:250px !important;}

/* -- 視窗排名展示 -- */
.mgame_ranking_box:nth-child(1){ left:50%;}
.mgame_ranking_box:nth-child(2){ left:33%;}
.mgame_ranking_box:nth-child(3){ left:67%;}
.mgame_ranking_box:nth-child(4){ left:16%;}
.mgame_ranking_box:nth-child(5){ left:83%;}
}


@media (max-width: 820px) {
/* -- 手機開始 -- */
.mgame_start_logo{ display:none;}

/* -- 選擇頭像 -- */
.game_avatar_zone{ margin:40px auto 15px auto;}

/* -- 視窗分數排名 -- */
.mgame_scoreboard_msg p{ font-size:1.5em;}
}


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


@media (max-width: 475px) {
/* -- 手機開始 -- */
.mgame_start_logo{ display:block; width:30%; margin:30px auto 50px auto;}
}


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


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