@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');

/* =====================================================================
   Game Sponsor 金流頁 — 「Aden 寶庫」暗曜石 + 天堂金 主題
   僅覆寫外觀，不更動任何欄位 / id / JS / 版面結構
   ===================================================================== */

:root {
    --gold:        #d8b563;
    --gold-bright: #f0d590;
    --gold-deep:   #9a7a32;
    --ink:         #f3ead6;   /* 暖白文字 */
    --muted:       #b3a888;   /* 次要文字 */
    --panel:       rgba(20, 17, 13, 0.78);
    --panel-edge:  rgba(216, 181, 99, 0.45);
    --field-bg:    rgba(0, 0, 0, 0.42);
    --field-edge:  rgba(216, 181, 99, 0.30);
    --field-edge-hover: rgba(216, 181, 99, 0.6);
}

/* 金色灰燼特效可見度（主題預設壓在 0.6） */
#slider #canvas-particle { opacity: 0.85 !important; }

/* ---- 背景氛圍：暖色暈影聚焦中央卡片 ---- */
#slider .overlay.dark-2,
#slider .overlay {
    background:
        radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.82) 100%) !important;
    opacity: 1 !important;
}

/* ============================  卡片  ============================ */
/* 主題把表單鎖在 60% 寬，放寬到滿版以免欄位過窄、placeholder 被截斷 */
#slider .main-form,
#slider .main-form form { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }

#slider .container {
    position: relative !important;
    max-width: 760px !important;
    margin: 44px auto !important;
    padding: 46px 48px 40px !important;
    background:
        linear-gradient(180deg, rgba(216,181,99,0.06), rgba(0,0,0,0) 32%),
        var(--panel) !important;
    border: 1px solid var(--panel-edge) !important;
    border-radius: 14px !important;
    box-shadow:
        0 30px 70px -20px rgba(0,0,0,0.8),
        0 0 0 1px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    animation: gsCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 四角金色裝飾托架 */
#slider .container::before,
#slider .container::after {
    content: "";
    position: absolute;
    width: 26px; height: 26px;
    pointer-events: none;
}
#slider .container::before {
    top: 12px; left: 12px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    border-top-left-radius: 6px;
}
#slider .container::after {
    bottom: 12px; right: 12px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    border-bottom-right-radius: 6px;
}

@keyframes gsCardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* ============================  標題  ============================ */
#slider .container h2 {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    letter-spacing: 4px !important;
    margin: 0 0 6px !important;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 2px 18px rgba(216,181,99,0.25) !important;
}

/* 副標（旋轉字） */
#slider .container h1 {
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 6px !important;
    color: var(--muted) !important;
    margin: 0 0 4px !important;
    text-transform: none !important;
}
#slider .container h1 .rotate { color: var(--gold) !important; }

#slider .container hr {
    width: 60px !important;
    margin: 18px auto 26px !important;
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

/* ====================  伺服器名稱列  ==================== */
.main-title {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--field-edge) !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    margin-bottom: 4px !important;
}

/* ====================  法規提示列（原藍色，改同色系）  ==================== */
.main-form [style*="#1a3a5c"] {
    background: linear-gradient(135deg, rgba(40,33,20,0.9), rgba(20,17,13,0.9)) !important;
    border: 1px solid var(--field-edge) !important;
}
.main-form [style*="#2980b9"] {
    background: linear-gradient(135deg, var(--gold-deep), #6f5523) !important;
    color: #1a140a !important;
}
.main-form a[onclick*="showKycLawModal"] { color: var(--gold-bright) !important; }

/* ============================  輸入框  ============================ */
.form-control {
    height: 46px !important;
    background: var(--field-bg) !important;
    border: 1px solid var(--field-edge) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.form-control::placeholder { color: var(--muted) !important; opacity: 0.85 !important; }
.form-control:hover { border-color: var(--field-edge-hover) !important; }
.form-control:focus {
    background: rgba(0,0,0,0.5) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(216,181,99,0.18), inset 0 1px 3px rgba(0,0,0,0.3) !important;
    outline: none !important;
    color: #fff !important;
}
.form-control[readonly] { color: var(--gold-bright) !important; font-weight: 600 !important; }

/* 隱藏 number 輸入的上下箭頭，視覺更乾淨 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ====================  下拉選單  ==================== */
select.form-control {
    cursor: pointer !important;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gold) 50%),
        linear-gradient(135deg, var(--gold) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 20px) calc(50% - 2px),
        calc(100% - 15px) calc(50% - 2px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 38px !important;
}
select.form-control option { background: #14110d !important; color: var(--ink) !important; }

#server_selector {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 8px !important;
    padding: 4px 30px 4px 10px !important;
}

/* ============================  按鈕  ============================ */
/* 換算（次要）：金色描邊 */
#read_bi_btn {
    height: 46px !important;
    background: rgba(216,181,99,0.08) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 8px !important;
    color: var(--gold-bright) !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}
#read_bi_btn:hover {
    background: rgba(216,181,99,0.18) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(216,181,99,0.25) !important;
    transform: translateY(-1px) !important;
}

/* 確定開單（主要 CTA）：金色印璽 + hover 流光 */
.btn-default[type="submit"],
input[type="submit"].btn-default {
    position: relative !important;
    width: 100% !important;
    height: 46px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%) !important;
    border: 1px solid var(--gold-bright) !important;
    border-radius: 8px !important;
    color: #221a0c !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 3px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25) !important;
    box-shadow: 0 6px 20px -6px rgba(216,181,99,0.6), inset 0 1px 0 rgba(255,255,255,0.4) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.btn-default[type="submit"]::after,
input[type="submit"].btn-default::after {
    content: "";
    position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-default[type="submit"]:hover,
input[type="submit"].btn-default:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px -8px rgba(216,181,99,0.75), inset 0 1px 0 rgba(255,255,255,0.5) !important;
    color: #221a0c !important;
}
.btn-default[type="submit"]:hover::after,
input[type="submit"].btn-default:hover::after { left: 130%; }
.btn-default[type="submit"]:active,
input[type="submit"].btn-default:active { transform: translateY(0) !important; }

/* ====================  驗證碼圖片  ==================== */
#index_psn_img {
    height: 46px !important;
    width: auto !important;
    max-width: 100% !important;     /* 防止溢出被按鈕覆蓋 */
    vertical-align: middle !important;
    border: 1px solid var(--field-edge) !important;
    border-radius: 8px !important;
    /* 把淺底驗證碼染成暖色羊皮紙質感融入深色主題，數字仍清楚 */
    filter: sepia(0.5) brightness(0.94) contrast(1.08) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
#index_psn_img:hover {
    border-color: var(--gold) !important;
    filter: sepia(0.3) brightness(1) contrast(1.05) !important;
    box-shadow: 0 0 0 3px rgba(216,181,99,0.18) !important;
}

/* ====================  說明文字 / 頁尾  ==================== */
.padding-top-20 {
    background: rgba(0,0,0,0.32) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-top: 18px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}
.padding-bottom-20 { color: var(--muted) !important; font-size: 12px !important; padding-top: 8px !important; }

#footer {
    background: transparent !important;
    color: var(--muted) !important;
}
#footer * { color: var(--muted) !important; }

/* ====================  字體  ==================== */
body, .form-control, .btn, select, input, button {
    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

/* ====================  響應式  ==================== */
@media (max-width: 768px) {
    #slider .container {
        max-width: none !important;
        margin: 16px !important;
        padding: 34px 22px 28px !important;
    }
    #slider .container h2 { font-size: 30px !important; letter-spacing: 2px !important; }
    #server_selector { width: 100% !important; margin: 10px 0 !important; display: block !important; }
}