/* =========================================
   Global Styles (全局樣式)
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Chakra Petch', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4; /* 記得這裡保留你後來改的背景顏色 */
    color: #333;
}

/* 2. 所有的標題與 Logo 統一使用 Orbitron 科幻字體 */
h1, h2, h3, .logo-text {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px; /* 把字距稍微拉開一點，更有星際史詩感！ */
    text-transform: uppercase; /* 自動把大標題變成全大寫，看起來更霸氣 */
}

/* =========================================
   Header & CSS Menu (頂部導航與 CSS 選單)
   ========================================= */
header {
    background-color: #1a1a2e;
    color: #fff;
    padding: 15px 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.logo-text {
    font-size: 24px;
    font-weight: bold;
    color: #e94560;
    text-decoration: none;
}

/* CSS Menu Implementation */
.nav-menu {
    list-style: none;
    display: flex;
}

.nav-menu li {
    margin-left: 20px;
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}

/* Hover effect for CSS menu */
.nav-menu a:hover {
    background-color: #e94560;
    color: #fff;
}

/* =========================================
   Layout & Containers (佈局與容器)
   ========================================= */
.main-content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    /* --- 這裡開始改變 --- */
    background-color: #1a1a2e; /* 用跟你的 header 一樣的深藍色 */
    color: #ffffff; /* 背景變暗了，字體一定要改成白色才看得見！ */
    border: 2px solid #d4af37; /* 加上星軌專票那種金色邊框 */
    /* ------------------ */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 把陰影調深一點 */
}

/* =========================================
   連結樣式 (解決紫色連結的問題)
   ========================================= */
.main-content a {
    color: #d4af37; /* 把連結改成跟邊框一樣的星軌金色 */
    text-decoration: none; /* 去掉預設的底線，看起來更乾淨 */
}

.main-content a:visited {
    color: #d4af37; /* 點擊過後（visited）一樣保持金色，絕對不變紫！ */
}

.main-content a:hover {
    color: #f1c40f; /* 滑鼠游標放上去時（hover），變成比較亮的黃色 */
    text-decoration: underline; /* 滑鼠放上去時才出現底線，增加互動感 */
}

.hero-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #0f3460;
    color: white;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Character Grid Layout */
.character-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 20px;
}

.character-card {
    flex: 1 1 30%; 
    /* --- 這裡開始改變 --- */
    background-color: #0f3460; /* 用稍微亮一點點的藍色，做出層次感 */
    color: #ffffff; /* 字體一樣改白色 */
    border: 1px solid #d4af37; /* 比較細的金色邊框 */
    /* ------------------ */
    padding: 15px;
    text-align: center;
    border-radius: 8px;
}

.character-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* =========================================
   Form Styles (表單樣式)
   ========================================= */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input, 
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.submit-btn {
    display: inline-block;
    background: #e94560;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
}

.submit-btn:hover {
    background: #d6344d;
}

#error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
}

/* =========================================
   Footer (頁腳)
   ========================================= */
footer {
    text-align: center;
    padding: 20px;
    background-color: #1a1a2e;
    color: #fff;
    margin-top: 40px;
}

/* =========================================
   Responsive Layout (響應式設計)
   ========================================= */
/* When screen width is 768px or less */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
    }
    
    .nav-menu {
        margin-top: 15px;
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .nav-menu li {
        margin: 5px 0;
    }

    .character-card {
        flex: 1 1 100%; /* Force cards to take full width on mobile */
    }
}

/* =========================================
   Gacha Simulator Styles (抽卡模擬器樣式)
   ========================================= */
.gacha-container {
    text-align: center;
    margin-top: 40px;
    padding: 30px;
    background-color: #1a1a2e; /* 配合標題的深藍色 */
    color: white;
    border-radius: 8px;
}

.gacha-btn {
    background-color: #d4af37; /* 星軌車票的金色 */
    color: #1a1a2e;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 20px 0;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.gacha-btn:hover {
    background-color: #f1c40f;
    transform: scale(1.05); /* 滑鼠懸停時稍微放大 */
}

.gacha-result {
    margin: 20px auto;
    padding: 20px;
    max-width: 400px;
    background-color: #fff;
    color: #333;
    border: 3px solid #ccc; /* 預設邊框顏色 */
    border-radius: 8px;
    font-size: 20px;
    transition: all 0.3s ease; /* 讓顏色變換有過渡動畫 */
}

/* =========================================
   Gacha Simulator & Animations (抽卡與動畫)
   ========================================= */
.gacha-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.ten-pull-btn {
    background-color: #9b59b6; /* 十連抽按鈕用不同顏色 */
    color: white;
}

.ten-pull-btn:hover {
    background-color: #8e44ad;
}

/* 抽卡結果的網格佈局 (Flexbox) */
.gacha-result-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    min-height: 250px;
    padding: 20px;
    background-color: #0f3460;
    border-radius: 8px;
    border: 3px solid #ccc;
}

/* 單張卡片的樣式 */
.gacha-card {
    width: 120px;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    color: #333;
    /* 動畫設定：初始狀態是隱藏並縮小的 */
    opacity: 0;
    transform: scale(0.5);
    /* 呼叫名為 popIn 的動畫，持續 0.5 秒，停留在最後一格 */
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.gacha-card img {
    width: 100%;
    height: 120px;
    object-fit: cover; /* 讓圖片填滿且不變形 */
    border-radius: 4px;
    margin-bottom: 5px;
}

.gacha-card h4 {
    font-size: 12px;
    margin-bottom: 5px;
}

/* 不同星級的卡片邊框與發光 */
.card-5star { border: 3px solid #ffcc00; box-shadow: 0 0 15px #ffcc00; }
.card-4star { border: 3px solid #cc00ff; box-shadow: 0 0 10px #cc00ff; }
.card-3star { border: 3px solid #00ccff; }

/* 簡單的新手級 CSS 動畫：從縮小隱藏，變成正常大小顯示 */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* =========================================
   Currency Dashboard (資源面板樣式)
   ========================================= */
.currency-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
    /* 如果沒有圖片，給個預設的圓角背景顯示 alt 文字 */
    background-color: #555; 
    border-radius: 50%;
    display: inline-block;
    line-height: 30px;
    font-size: 10px;
    text-align: center;
    color: white;
    overflow: hidden;
}

/* =========================================
   高級設計感 Logo 樣式 (包含漸層色彩與全寬金線)
   ========================================= */
.logo-text {
    /* 1. 俐落的科技感字體與寬字距 */
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 6px; 
    text-transform: uppercase;
    text-decoration: none;
    
    background: linear-gradient(to right, #5aaef8 0%, #5aaef8 60%, #ffffff 66%, #ffd64e 60%, #ffd64e 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 3. 準備放入裝飾線 */
    position: relative;
    padding-bottom: 8px; /* 稍微把底線往下推，才不會跟文字黏在一起 */
}

/* 4. 【修改長度】完整覆蓋文字長度的金色底線 */
.logo-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 這裡改成 100%，金線就會包含整個單字的長度 */
    height: 3px;
    background-color: #d4af37; /* 星軌的金色 */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* 5. 滑鼠移過去時的動態互動效果 */
.logo-text:hover::after {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.9); /* 金線發出強烈光芒 */
    height: 5px; /* 金線稍微變粗，增加點擊的實體感 */
}