/* ===========================================================================
   brand.css — dg66net(dg66.net/th/action/)的品牌覆寫層
   ---------------------------------------------------------------------------
   只加不改(天條 49):新規則寫在這一支,既有的 style.css 一個字都不動。
   還原方式:把 includes/head.php 裡引用這一支的那一行拿掉,畫面立刻回到原樣。

   2026-09-13 Owner:頁尾、漂浮客服、回到頂部三個都不要。
   這個專案掛 noindex,頁尾那些品牌敘述與外站試玩連結純粹是行銷文字,
   在登入後的操作介面裡沒有作用(天條 53)。先用樣式隱藏,原始碼保留;
   要連 footer.php 的區塊一起刪再另外提。
   註:頁尾後面那幾支 <script> 不受影響,照常載入。
   =========================================================================== */

#footer,
.fixmenu,
.back-to-top { display: none !important; }

/* ===========================================================================
   2026-09-13 Owner:登入後的按鈕統一成一套(天條 55)
   ---------------------------------------------------------------------------
   改之前是五頁五套:
     account.php              btn-warning + btn-outline-danger
     deposit.php              btn-warning(快選金額跟送出同一個 class)
     deposit-new.php          btn2 / btn3(style.css 裡根本沒有這兩支,是瀏覽器預設灰鈕)
     withdrawal.php           btn-primary + btn-sm
     game_history_record.php  btn-white + btn-sm + btn-primary
   樣式來源改成泰文 WP 那一套:主要是金色漸層配深棕字,次要是透明底配金框。

   怎麼分主次:看 type,不看 class。
   deposit.php 的快選金額(100/200/500…)跟送出鈕都掛 btn-warning,
   只靠 class 分不開;快選是 type="button",送出是 type="submit"。
   account.php 的 bankBTN 是 type="button" 但它是主要動作,所以單獨列進主要那組。

   btn-sm 在 style.css 是寫死 120×30、字 10px,不到觸控底線(天條 34)。
   這裡只對登入後用到的那幾顆放寬,不動 btn-sm 本身,公開頁不受影響。
   還原:把 head.php 引用 brand.css 的那一行拿掉。
   =========================================================================== */

/* 共同底:尺寸、圓角、字重照泰文 WP */
.btn[type="submit"],
.btn[type="button"]:not(.close),
.btn2, .btn3,
.btn-white,
.btn-outline-primary,
.btn-outline-danger,
.btn.gr-open-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 9px 18px;
    border-radius: 9px; border-width: 1px; border-style: solid;
    font-size: 14px !important; font-weight: 700;
    letter-spacing: 0; text-transform: none;
    width: auto; height: auto; min-width: 0;
    transition: .2s;
}

/* 主要動作:送出、確認、取得代碼 */
.btn[type="submit"],
.btn.bankBTN,
.btn2, .btn3 {
    background: linear-gradient(180deg, #e7c987, #c0983e) !important;
    border-color: transparent !important;
    color: #3a2c0a !important;
    box-shadow: none;
}
.btn[type="submit"]:hover,
.btn.bankBTN:hover,
.btn2:hover, .btn3:hover {
    color: #3a2c0a !important;
    filter: brightness(1.06);
}

/* 次要:快選金額、日期篩選、開視窗 */
.btn[type="button"]:not(.close):not(.bankBTN),
.btn-white,
.btn-outline-primary {
    background: transparent !important;
    background-image: none !important;
    border-color: #ffc107 !important;
    color: #ffce3a !important;
    box-shadow: none;
}
.btn[type="button"]:not(.close):not(.bankBTN):hover,
.btn-white:hover,
.btn-outline-primary:hover {
    background: rgba(255, 193, 7, .12) !important;
    border-color: #ffdd66 !important;
    color: #ffdd66 !important;
}

/* 篩選列的按鈕比較密,高度收一點,但仍高於 32 的次要底線 */
.btn-group1 .btn { min-height: 40px; padding: 7px 14px; font-size: 13px !important; }

/* 取消、關閉:不要用紅色,那會讓人以為是危險動作 */
.btn-outline-danger,
.btn.gr-open-btn {
    background: transparent !important;
    border-color: #4a4a4a !important;
    color: #cfcfcf !important;
}
.btn-outline-danger:hover,
.btn.gr-open-btn:hover {
    border-color: #6a6a6a !important;
    color: #ffffff !important;
}

/* ===========================================================================
   2026-09-13 Owner:彈窗樣式也對齊泰文 WP
   ---------------------------------------------------------------------------
   站上一共 11 個彈窗:authModal(登入/註冊)、ContactBox、indexShowBox、
   notice、forgot、re_word、joint、welcome、login-window、forget-window、
   myModal-mail、myModal-sendmail。前三個是自製的 .modal-box,其餘走 bootstrap
   的 .modal-content,所以兩套都要蓋,只改一套會剩一半是舊樣子。

   舊的問題:
     .modal-box   底是 #222 中灰,跟站上的純黑對不起來
     .tab-btn     未選是 #333 方塊,選中是 #ffcc00 —— 那是另一個黃,
                  站上的主黃是 #ffc107,兩個黃擺在一起看得出來不一樣
     input        #333 底配 #555 框,圓角 5,高度不足 44
     送出鈕       #ffcc00 平色、圓角 5、padding 20,跟首頁的膠囊鈕是兩回事
     .modal-header 金色漸層上面壓白字,對比 1.9,字幾乎看不見(天條 41)

   一律改成首頁那套:近黑面板 + 金色細框,主要鈕金色漸層配深棕字,
   輸入框用 5% 白底 + 中性灰框,圓角 9、高 44。
   =========================================================================== */

/* ---- 面板本體:自製與 bootstrap 兩套 ---- */
#authModal .modal-box,
.modal-content {
    background: #0b0b0b !important;
    border: 1px solid rgba(255, 193, 7, .38) !important;
    border-radius: 14px;
    color: #dddddd;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .7);
}
@media (max-width: 767px) {
    /* 手機從底部升起,下緣不要圓角 */
    #authModal .modal-box { border-radius: 14px 14px 0 0; }
}

/* ---- bootstrap 的標題列:漸層留著,白字改深棕 ---- */
.modal-header {
    background: linear-gradient(180deg, #e7c987, #c0983e) !important;
    color: #3a2c0a !important;
    border-bottom: 0;
}
h4.modal-title, .modal-header .modal-title { color: #3a2c0a !important; font-weight: 700; }
.modal-header .close { color: #3a2c0a !important; opacity: .85; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }

/* ---- 關閉鈕(自製那顆)---- */
#authModal .close_m {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    color: #dddddd;
}
#authModal .close_m:hover { border-color: var(--gold, #ffc107); color: #ffce3a; }

/* ---- 登入/註冊的頁籤:做成分段控制,不是兩塊方磚 ---- */
#authModal .tab-header {
    gap: 8px; margin: 0 18px 6px; padding: 5px;
    background: rgba(255, 255, 255, .05); border-radius: 11px;
}
#authModal .tab-btn {
    min-height: 42px; padding: 9px 14px;
    background: transparent; border: 0; border-radius: 8px;
    color: #b9b9b9; font-size: 14.5px; font-weight: 700;
    transition: .18s;
}
#authModal .tab-btn:hover { color: #ffce3a; }
#authModal .tab-btn.active {
    background: linear-gradient(180deg, #e7c987, #c0983e);
    color: #3a2c0a;
}

/* ---- 表單欄位 ---- */
#authModal .tab-content input,
#authModal .tab-content select,
.modal-content .form-control {
    min-height: 44px; padding: 10px 13px; margin: 9px 0;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid #2f2f2f !important; border-radius: 9px !important;
    color: #ffffff !important; font-size: 15px;
}
#authModal .tab-content input:focus,
#authModal .tab-content select:focus,
.modal-content .form-control:focus {
    border-color: var(--gold, #ffc107) !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, .16) !important;
    outline: 0;
}
#authModal .tab-content input::placeholder,
.modal-content .form-control::placeholder { color: #8a8a8a; }

/* login_form 的欄位在 style.css 是只有底線的樣式,一併收進上面那套 */
.login_form .form-control {
    border: 1px solid #2f2f2f !important; border-radius: 9px !important;
    background: rgba(255, 255, 255, .05) !important;
}

/* ---- 彈窗裡的主要按鈕 ---- */
#authModal .login,
#authModal .register,
.login_form .button-red {
    min-height: 48px; padding: 12px 18px;
    background: linear-gradient(180deg, #e7c987, #c0983e) !important;
    border: 0 !important; border-radius: 9px !important;
    color: #3a2c0a !important; font-size: 15px; font-weight: 700;
    margin-top: 14px;
}
#authModal .login:hover,
#authModal .register:hover,
.login_form .button-red:hover { color: #3a2c0a !important; filter: brightness(1.06); }

/* 送簡訊那顆是次要動作,原本用 btn-danger 的紅,改成金框 */
#authModal #smsBTN, #smsBTN.btn-danger {
    background: transparent !important; background-image: none !important;
    border: 1px solid var(--gold, #ffc107) !important;
    color: #ffce3a !important;
    min-height: 44px; border-radius: 9px !important;
}

/* ---- 標題文字 ---- */
#authModal h5 { color: #ffffff; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
#authModal .tab-content > form > span { color: #a9a9a9; font-size: 13px; }

/* ===========================================================================
   2026-09-13 Owner:彈窗置中,寬高各佔螢幕八成
   ---------------------------------------------------------------------------
   原本 style.css 的 .modal-box 在電腦版是 top:25% 配 translate(-50%,-50%),
/* ===========================================================================
   彈窗尺寸(Owner 2026-09-13 第二版)
   ---------------------------------------------------------------------------
   第一版把面板鎖成 80vw x 80vh。登入表單只有標題、兩個欄位、一顆按鈕,
   撐到 80vh 之後上下各留一大片空白,面板比內容高了一倍 —— 這就是
   Owner 說的「比例不對」。改成寬度收窄、高度依內容長,
   超過 86vh 才在面板裡捲。註冊分頁欄位多會自然比登入高,兩邊都不留空洞。

   style.css 的 .modal-box 掛了 animation:slideUp,keyframes 收在
   translateY(100%) 又停在結束影格,會蓋掉置中的 transform,所以換成
   只動透明度的淡入。
   =========================================================================== */
#authModal .modal-box {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: dg-modal-in .22s ease-out both;
    width: min(92vw, 420px); max-width: min(92vw, 420px);
    height: auto; max-height: 86vh;
    margin: 0; padding: 0 0 18px;
    border-radius: 14px;
    overflow: visible;
    touch-action: pan-y; overscroll-behavior: contain;
    display: flex; flex-direction: column;
}
@media (max-width: 767px) {
    #authModal .modal-box { border-radius: 14px; bottom: auto; }
}

/* ---- 關閉鈕掛在面板外面的右上角(Owner 2026-09-13)----
   收在面板裡會壓到第二個頁籤,而且擋住內容。改掛到面板上緣外面。
   面板因此不能自己捲(overflow 要 visible,否則按鈕會被裁掉),
   捲動改交給 .tab-content。頁籤列也拿回整個寬度。 */
#authModal .close_m {
    position: absolute; right: 0; top: -52px; z-index: 2;
    width: 42px; height: 42px; line-height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.6em;
}
#authModal .tab-header { margin: 14px 18px 0; flex: 0 0 auto; }

/* 裡面用固定節奏排,不靠置中撐版面 */
#authModal .tab-content {
    padding: 18px 18px 4px; text-align: center;
    flex: 1 1 auto; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain;
    display: flex; flex-direction: column; justify-content: center;
}
/* 登入那個 form 掛了 bootstrap 的 m-3(margin:1rem !important),
   我設的 margin:0 壓不過,結果表單被往右推 16、寬度又照容器算,
   整組欄位右緣溢出 —— 實測左縮 35、右縮 3。覆寫要跟著加 important。 */
#authModal .tab-content > form {
    width: 100% !important; max-width: none;
    margin: 0 !important; padding: 0 !important;
}
#authModal h5 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #ffffff; }
#authModal .tab-content > form > span { display: block; margin: 0 0 14px; color: #a9a9a9; font-size: 13px; }
#authModal .tab-content input,
#authModal .tab-content select { margin: 0 0 10px; }
#authModal .login,
#authModal .register { margin: 6px 0 0; }
#authModal .tab-content a { display: inline-block; margin-top: 14px; font-size: 13.5px; }

/* bootstrap 那八個彈窗也不鎖死高度 */
.modal-dialog {
    width: min(92vw, 560px); max-width: min(92vw, 560px);
    height: auto; margin: 7vh auto;
}
.modal-content { width: 100%; max-height: 86vh; display: flex; flex-direction: column; }
.modal-header, .modal-footer { flex: 0 0 auto; }
.modal-body { flex: 1 1 auto; max-height: none !important; overflow-y: auto; }

@keyframes dg-modal-in { from { opacity: 0 } to { opacity: 1 } }

/* ===========================================================================
   2026-09-13 Owner:頁首(含登入後)也對齊泰文 WP
   ---------------------------------------------------------------------------
   .navbar-bg 的漸層本來就跟 WP 首頁同一條,底色不用動。要動的是那兩顆鈕。

   舊的問題(實際規則比第一次掃到的多,補正):
     .btn-login   灰漸層 #a1a6b8→#7d7d7d→#58626e,白字
     .btn-register 金漸層 #fbca37→#ffc107→#ab8000,白字
     兩條都寫 color:#fff !important,而且 width:100px、height:85px 寫死,
     display:flex 也帶 !important。所以覆寫這幾項一定要跟著加 !important,
     只靠權重壓不過去 —— 線上實測不加就是字還是白的、高度還是 85。
     白字壓在那條金漸層上對比只有 1.9,本來就看不清楚。
     圓角 20px 0 0 20px 配 0 20px 20px 0,兩顆黏成一條長膠囊,
     跟 WP 首頁的兩顆獨立膠囊不一樣。
   登入後這兩個 class 換裝成「ข้อมูลสมาชิก(會員資料)」與「ออกจากระบบ(登出)」,
   所以同一組規則登入前後都吃得到。

   圖示拿掉:那幾張 PNG 是白色的,放在金色漸層的按鈕上會整個看不見,
   而且 WP 首頁的頁首鈕本來就是純文字。

   手機抽屜另外處理:style.css 在 768 以下給這兩顆 width:200px、
   font-size:2rem(32px),在抽屜裡是兩塊大色磚。收成同一套配色,
   維持整列寬度方便點。
   =========================================================================== */

#header { background: #000000; }

#header .btn-login,
#header .btn-register {
    display: inline-flex !important;
    flex-direction: row !important; align-items: center !important; justify-content: center !important;
    width: auto !important; height: auto !important; min-height: 44px;
    padding: 9px 18px;
    border-radius: 9px; border: 1px solid transparent;
    font-size: 14px !important; font-weight: 700; white-space: nowrap;
    box-shadow: none; transition: .2s;
}
#header .btn-login {
    background: transparent !important; background-image: none !important;
    border-color: #ffc107; color: #ffce3a !important;
}
#header .btn-login:hover {
    background: rgba(255, 193, 7, .12) !important;
    background-image: none !important;
    border-color: #ffdd66; color: #ffdd66 !important;
}
#header .btn-register {
    background: linear-gradient(180deg, #e7c987, #c0983e) !important;
    border-color: transparent; color: #3a2c0a !important;
}
#header .btn-register:hover {
    background: linear-gradient(180deg, #e7c987, #c0983e) !important;
    color: #3a2c0a !important; filter: brightness(1.06);
}
/* 白色圖示在金底上看不見,而且 WP 的頁首鈕是純文字 */
#header .btn-login .btn-icon,
#header .btn-register .btn-icon { display: none; }

/* 兩顆之間留空隙,不再黏成一條 */
#header .navbar ul > li:has(> .btn-login) { margin-right: 8px; }

/* 手機抽屜:維持整列寬度,字級收到看得下去的大小 */
@media (max-width: 991px) {
    #header .btn-login,
    #header .btn-register {
        width: 100%; max-width: 260px;
        font-size: 16px !important; min-height: 48px;
        margin: 6px auto; border-radius: 10px;
    }
}


/* ---- 對齊修正(Owner 回報「內容排版還是不整齊」)----
   關閉鈕早期收在面板裡,所以頁籤列右邊留了 56px 讓位。
   關閉鈕已經移到面板外,那 56px 沒拿掉,整條頁籤往左偏,
   跟底下的輸入框對不齊 —— 實測頁籤列左縮 38、右縮 138,輸入框只縮 12。
   兩邊統一用 18px,跟 .tab-content 的左右 padding 一致。

   行內 display:block 那條要留:openAuthModal() 用 tab.style.display 寫行內樣式,
   行內贏過樣式表,不靠屬性選擇器挑出來就轉不成 flex。 */
#authModal .tab-header { margin: 14px 18px 0 !important; }

#authModal .tab-content[style*="block"] {
    display: flex !important;
    flex-direction: column;
}

/* ===========================================================================
   2026-09-13 Owner:儲值頁的付款通道補上泰文名稱
   ---------------------------------------------------------------------------
   原本每個通道只有一張灰階圖示,沒有文字,會員得用猜的。
   member.css 把 .payicon 做成圓形(border-radius:50% 加 5px 外框),
   文字塞進去會被圓形裁掉,所以名稱用 ::before 掛在圓形下方,
   內容取自 deposit.php 新加的 data-name,樣板結構沒有動。

   .pay .current::after 是選中時下方 30px 處的三角形指標,位置正好跟名稱打架。
   指標拿掉 —— 選中時外框會變色、圖示也從灰階變彩色,辨識度已經夠。
   還原:移除本段,並把 deposit.php 的 data-name 拿掉。
   =========================================================================== */

.pay .payicon {
    position: relative;
    margin-bottom: 30px !important;
    vertical-align: top;
}
.pay .payicon::before {
    content: attr(data-name);
    position: absolute; left: 50%; top: calc(100% + 7px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px; line-height: 1.2; font-weight: 500;
    color: #bdbdbd;
}
.pay .payicon:hover::before { color: #ffce3a; }
.pay .current::before { color: #ffce3a; font-weight: 700; }
.pay .current::after { display: none !important; }

/* ---- bootstrap 那八個彈窗的關閉鈕也移到面板外右上角 ---- */
.modal-dialog { position: relative; }
.modal-content { overflow: visible; }
.modal-header { border-radius: 14px 14px 0 0; position: static; }
.modal-header .close {
    position: absolute; right: 0; top: -52px; z-index: 2;
    width: 42px; height: 42px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: #1a1a1a !important; border: 1px solid #3a3a3a !important;
    border-radius: 50%; color: #dddddd !important; opacity: 1; font-size: 1.6em;
}
.modal-header .close:hover { border-color: #ffc107 !important; color: #ffce3a !important; }
.modal-body { border-radius: 0 0 14px 14px; }

/* ===========================================================================
   2026-09-13 Owner:action 的頁首對齊 WP 頁首
   ---------------------------------------------------------------------------
   量到的差距(左 action / 右 WP):
     橫幅高      85 / 84
     LOGO        126x80(佔橫幅 94%) / 54
     容器        1320 寬、padding 12 / 1180 寬、padding 24
     選單連結    高 85、字 16、大寫 / 高 auto、字 14.5、字重 600
     按鈕        102x44 與 119x44(兩顆不等寬) / 96x34 等寬
   .navbar a 寫死 height:85px,.btn-login/.btn-register 帶 !important,
   所以覆寫要跟著加 important,單靠權重壓不過。
   還原:移除本段。
   =========================================================================== */

#header, #header .navbar-bg { height: 84px; }
#header .container { max-width: 1180px; padding: 0 24px; }
#header .logo { display: flex; align-items: center; }
#header .logo img { height: 54px !important; max-height: 54px !important; width: auto; padding: 0 !important; }

#header .navbar ul { gap: 22px; }
#header .navbar > ul > li > a:not(.btn-login):not(.btn-register) {
    height: auto !important; flex-direction: row !important;
    font-size: 14.5px !important; font-weight: 600;
    text-transform: none !important; color: #e8e8e8 !important;
    padding: 4px 0 !important;
}
#header .navbar > ul > li > a:not(.btn-login):not(.btn-register):hover { color: #ffce3a !important; }

/* 按鈕改成 WP 的等寬膠囊 */
#header .btn-login,
#header .btn-register {
    width: 96px !important; min-width: 96px !important;
    height: 34px !important; min-height: 34px !important;
    padding: 0 8px !important; border-radius: 8px;
    font-size: 12.5px !important;
}

/* 手機:橫幅與 LOGO 收到跟 WP 一樣,選單鈕做成同款方形外框 */
@media (max-width: 991px) {
    #header, #header .navbar-bg { height: 64px; }
    #header .logo img { height: 38px !important; max-height: 38px !important; }
    #header .mobile-nav-toggle {
        display: flex !important; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin: 0;
        border: 1px solid rgba(255, 193, 7, .45); border-radius: 9px;
        font-size: 1.35rem !important; color: #ffce3a !important;
        background: transparent;
    }
}

/* ---- 手機那兩顆在 .navbar 外面(Owner 回報「頁首還是沒換」)----
   header.php 的結構是:<nav class="navbar d-none d-md-block"> 裡面一組給桌機,
   nav 外面另有 <div class="d-flex ... d-block d-md-none"> 一組給手機。
   原本規則寫 #header .navbar .btn-login,只蓋得到桌機那組,手機那組完全沒吃到,
   所以手機上還是舊的黏成一條的灰金膠囊加圖示。選擇器放寬成 #header .btn-login。

   .btn-sm 在 style.css 是 120x30 圓角 20,手機那組有掛,所以要一起壓過去。
   順帶一提:手機的 nav 整個被 d-none 藏起來,連漢堡都看不到,
   等於手機沒有選單。要補漢堡得動 header.php,另外提。 */
@media (max-width: 991px) {
    #header .btn-login,
    #header .btn-register {
        width: auto !important; min-width: 0 !important;
        height: auto !important; min-height: 44px !important;
        padding: 9px 14px !important;
        font-size: 13px !important; border-radius: 10px !important;
    }
    #header .d-md-none.d-flex { gap: 8px; justify-content: flex-end !important; }
}

/* ---- action 手機選單(Owner 2026-09-13:補漢堡,底下放登出)----
   標記在 header.php,結構與 WP 那份一致:checkbox + label + 面板。
   #header 是 fixed,所以面板用 absolute 掛在它底下對得準。
   桌機一律不顯示,免得跟原本的 <nav> 重複。 */
#header .dgnavchk { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
#header .dgburger { display: none; }
#header .dgmnav { display: none; }

@media (max-width: 991px) {
    #header .dgburger {
        display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0 11px; margin-left: 8px;
        border: 1px solid rgba(255, 193, 7, .45); border-radius: 9px;
        background: transparent; cursor: pointer;
    }
    #header .dgburger span {
        display: block; height: 2px; border-radius: 2px; background: #ffce3a;
        transition: transform .22s ease, opacity .18s ease;
    }
    #header .dgnavchk:checked ~ .dgburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #header .dgnavchk:checked ~ .dgburger span:nth-child(2) { opacity: 0; }
    #header .dgnavchk:checked ~ .dgburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    #header .dgnavchk:focus-visible ~ .dgburger { outline: 2px solid #ffdd66; outline-offset: 2px; }

    #header .dgmnav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; gap: 0; margin: 0; padding: 4px 24px 12px;
        background: #000000; border-top: 1px solid #2f2f2f;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
    }
    #header .dgnavchk:checked ~ .dgmnav { display: flex; }
    #header .dgmnav a {
        display: flex; align-items: center; min-height: 46px;
        padding: 6px 2px; font-size: 15px; color: #e8e8e8; text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    #header .dgmnav a:last-child { border-bottom: 0; }
    /* 登出獨立一行,顏色跟其他項目分開,不會誤按 */
    #header .dgmnav a.out { margin-top: 6px; color: #ffce3a; font-weight: 700; }
}

/* ===========================================================================
   2026-09-14 Owner:試玩頁(Opengame/freegame3)風格對齊其他頁
   ---------------------------------------------------------------------------
   原本那支樣板走的是舊的 www 殼(site-navbar 那一套),而且區塊掛 bg-light、
   標題用 inline style 寫死 font-size:30px line-height:120px,跟站上其他頁
   完全不同。新樣板 www2/freegame_v2 改吃 www2 殼,這裡補內容區的樣式。

   iframe 原本寫死 height:640px,在手機上會露出大片空白;改成用比例撐,
   窄螢幕自動變高一點,桌台才不會被壓扁。
   還原:控制器換回 www/freegame,這一段刪掉。
   =========================================================================== */

.dgfg { padding: 34px 0 56px; background: #000000; }
.dgfg .container { max-width: 1180px; }
.dgfg h1 {
    font-size: 26px; font-weight: 700; color: #ffffff;
    text-align: center; margin: 0 0 20px; line-height: 1.3;
}
.dgfg-frame {
    position: relative; width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #2f2f2f; border-radius: 14px; overflow: hidden;
    background: #000000; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.dgfg-frame #ifrm {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0; display: block;
}
.dgfg-note { text-align: center; margin: 22px 0 0; }
.dgfg-note a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 12px 28px; border-radius: 10px;
    background: linear-gradient(180deg, #e7c987, #c0983e);
    color: #3a2c0a; font-size: 15px; font-weight: 700; text-decoration: none;
}
.dgfg-note a:hover { color: #3a2c0a; filter: brightness(1.06); }

@media (max-width: 900px) {
    .dgfg { padding: 22px 0 40px; }
    .dgfg h1 { font-size: 21px; }
    .dgfg-frame { aspect-ratio: 3 / 4; border-radius: 12px; }
}

/* ===========================================================================
   2026-09-14 Owner:首頁登入後的系統公告彈窗(#indexShowBox)改成會員中心那套
   深色面板。只鎖這一個 id,其他彈窗(登入、改密碼、LINE 驗證)維持原樣。
   footer2.php 的 .modal-body / .modal-footer 帶 inline padding:0,所以這裡要 !important。
   =========================================================================== */
#indexShowBox .modal-dialog { width: min(92vw, 520px); max-width: min(92vw, 520px); margin: 6vh auto; }
#indexShowBox .modal-content {
    background: #0b0b0b !important;
    border: 1px solid rgba(255, 193, 7, .36) !important;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .7);
}
#indexShowBox .modal-header {
    background: #0b0b0b !important;
    border-bottom: 1px solid #2f2f2f !important;
    border-radius: 16px 16px 0 0;
    padding: 16px 18px;
    position: relative; display: flex; align-items: center; gap: 12px;
}
#indexShowBox .modal-title { margin: 0 !important; flex: 1 1 auto; min-width: 0; text-align: left; }
#indexShowBox .modal-title h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: #ffce3a !important; }
#indexShowBox .modal-header .close {
    position: static !important; float: none; flex: 0 0 auto;
    width: 36px; height: 36px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.3em; line-height: 1; opacity: 1;
    background: #1a1a1a !important; border: 1px solid #3a3a3a !important; color: #dddddd !important;
}
#indexShowBox .modal-header .close:hover { border-color: #ffc107 !important; color: #ffce3a !important; }
#indexShowBox .modal-body { padding: 4px 18px 4px !important; border-radius: 0; background: #0b0b0b; }
#indexShowBox .news-lists { list-style: none; margin: 0; padding: 0; }
#indexShowBox .news-lists li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
#indexShowBox .news-lists li:last-child { border-bottom: 0; }
#indexShowBox .news-lists a { display: block; color: #dcdcdc; text-decoration: none; }
#indexShowBox .news-lists h5 { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; line-height: 1.4; color: #ffffff; }
#indexShowBox .news-lists p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #c9c9c9; word-break: break-word; }
#indexShowBox .news-lists p img { max-width: 100%; height: auto; }
#indexShowBox .modal-footer {
    padding: 14px 18px 18px !important;
    border-top: 1px solid #2f2f2f !important;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
#indexShowBox .modal-footer .btn {
    margin: 0; min-width: 0 !important; min-height: 46px; padding: 0 12px !important;
    border-radius: 11px; font-weight: 700; font-size: 14.5px;
    display: inline-flex; align-items: center; justify-content: center;
}
#indexShowBox .modal-footer .btn-danger { background: transparent !important; border: 1px solid #ffc107 !important; color: #ffce3a !important; }
#indexShowBox .modal-footer .btn-danger:hover { background: rgba(255, 193, 7, .1) !important; }
#indexShowBox .modal-footer .btn-warning { background: linear-gradient(180deg, #e7c987, #c0983e) !important; border-color: transparent !important; color: #3a2c0a !important; }