/* =================================================================
   主題：冒險者公會 (Adventurer's Guild)
   風格：溫暖、黃昏、復古、暗金
   ================================================================= */

/* --- 1. 字體導入與全域變數定義 --- */
@import url('https://fonts.googleapis.com/css2?family=Cwtex+Fangsong&display=swap');

:root {
    /* 色彩配置 */
    --color-background-start: #f4ead8; /* 背景漸層 - 亮部 (溫暖羊皮紙色) */
    --color-background-end: #d7c8a8;   /* 背景漸層 - 暗部 (陳舊羊皮紙色) */
    --color-text-primary: #4a3728;      /* 主要文字 (深烘焙咖啡色) */
    --color-text-secondary: #6b4f3a;    /* 次要文字 (拿鐵色) */
    --color-frame-gold: #b8860b;       /* 邊框與重點 (暗金色) */
    --color-frame-gold-light: #daa520; /* 亮金色 (用於漸層或滑鼠懸停) */
    --color-card-background: rgba(249, 245, 235, 0.8); /* 卡片背景 (半透明米色) */
    --color-shadow: rgba(74, 55, 40, 0.2); /* 陰影 (暖棕色調) */
    --color-cta-background: #8c6a4d;   /* 主要按鈕背景 (舊木頭色) */
    --color-cta-hover: #6b4f3a;         /* 主要按鈕滑鼠懸停 */
    --color-danger: #a94442;           /* 警告色 */

    /* 字體設定 */
    --font-primary: 'cwTeXFangSong', serif;
    --font-ui: 'Helvetica Neue', 'Arial', sans-serif; /* 用於UI元素，確保清晰 */
    
    /* 圓角與陰影 */
    --border-radius: 8px;
    --box-shadow: 0 4px 15px var(--color-shadow);
}

/* --- 2. 基礎與通用樣式 --- */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    padding-bottom: 80px; /* 避免內容被下方導航列遮擋 */
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    
    /* 核心：使用放射漸層營造黃昏的層次感 */
    background-color: var(--color-background-start);
    background-image: radial-gradient(circle at top, var(--color-background-start), var(--color-background-end));
    
    background-size: cover;
    background-attachment: fixed;
}

#app-content {
    padding: 10px 15px;
}

/* 標題樣式 */
h1, h2, h3 {
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; border-bottom-width: 1px; }

p {
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* --- 3. 主要導覽列 (Tab Bar) --- */
#tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 65px;
    background-color: rgba(243, 234, 203, 0.85); /* 半透明的亞麻色 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    border-top: 2px solid var(--color-frame-gold);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}

.tab-button {
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-grow: 1;
    text-align: center;
}

.tab-button.active {
    color: var(--color-frame-gold);
    font-weight: bold;
    transform: scale(1.1);
}

/* --- 4. 通用元件：按鈕 (Buttons) --- */

/* 主要操作按鈕 (Call to Action) */
.cta-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    background-color: var(--color-cta-background);
    border: 2px solid var(--color-frame-gold);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-shadow);
}

/* 返回按鈕 */
.details-back-button, .back-button {
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid var(--color-frame-gold);
    border-radius: 20px;
    padding: 8px 16px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.details-back-button:hover, .back-button:hover {
    background-color: var(--color-frame-gold);
    color: white;
}

/* --- 5. 通用元件：卡片 (Cards) --- */
.news-card, .game-card, .details-section, .booking-info-card, .exp-record-card, .rental-card, .summary-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-frame-gold);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(5px);
}

/* --- 6. 通用元件：表單 (Forms) --- */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
    width: 100%;
    padding: 12px;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-primary);
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-frame-gold);
    border-radius: var(--border-radius);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-frame-gold-light);
    box-shadow: 0 0 8px var(--color-frame-gold-light);
}

input[readonly] {
    background-color: rgba(200, 200, 200, 0.3);
    cursor: not-allowed;
}

.form-status {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

/* --- 7. 各頁面專屬樣式 --- */

/* A. 首頁 (page-home) */
.news-header {
    text-align: center;
    margin-bottom: 20px;
}

#news-filter-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.news-filter-btn { /* 動態生成 */
    font-family: var(--font-primary);
    padding: 8px 16px;
    border: 1px solid var(--color-frame-gold);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-filter-btn.active {
    background-color: var(--color-frame-gold);
    color: white;
}

/* 最新情報卡片 (由 script.js 生成) */
.news-card {
    padding: 0;
    overflow: hidden; /* 確保圖片圓角生效 */
}
.news-card-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: rgba(184, 134, 11, 0.1); /* 暗金色透明背景 */
}
.news-card-category {
    font-weight: bold;
    color: var(--color-frame-gold);
}
.news-card-date {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.news-card-content {
    padding: 15px;
}
.news-card-title {
    margin: 0 0 10px 0;
    border: none;
    padding: 0;
}
.news-card-image-container {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
}
.news-card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* B. 桌遊圖鑑 (page-games & page-game-details) */
/* B. 桌遊圖鑑 (page-games & page-game-details) */
#filter-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

/* 【修正】將所有篩選按鈕（標籤、收合、清除）都放在一個會自動換行的容器中 */
#tag-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center; /* 讓按鈕垂直置中對齊 */
}

/* 【修正】為所有標籤按鈕定義一個統一的樣式 */
.filter-tag-btn {
    font-family: var(--font-primary);
    padding: 6px 14px;
    border: 1px solid var(--color-frame-gold);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0; /* 防止按鈕被壓縮 */
}

/* 【修正】將主要和次要標籤容器改為只佔用內容寬度，以便換行 */
#primary-tags, #secondary-tags {
    display: contents; /* 讓裡面的按鈕直接繼承 #tag-filter-container 的 flex 排版 */
}

.filter-tag-btn.active {
    background: var(--color-frame-gold);
    color: white;
}

#more-tags-btn, #clear-filters {
    font-family: var(--font-primary);
    padding: 6px 14px;
    border: 1px solid var(--color-frame-gold);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto; /* 【新增】讓這兩個按鈕自動推到最右邊 */
}

#clear-filters {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
    margin-left: 8px; /* 與前一個按鈕的間距 */
}

/* 【問題1 修正】遊戲卡片列表改為兩欄式 Grid */
#game-list-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* 遊戲卡片 (由 script.js 生成) */
.game-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}
.game-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-frame-gold);
}
.game-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 160px; /* 【新增】設定最小高度，確保卡片排版穩定 */
}
.game-title {
    margin: 0 0 8px 0;
    padding: 0;
    border: none;
    font-size: 1.1rem;
    white-space: normal;
    word-break: break-all;
}
/* 【新增】簡介的樣式 */
.game-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px 0;
}
.game-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.game-tags {
    /* 【修正】移除 margin-top: auto，讓標籤自然排列 */
    padding-top: 8px;
    border-top: 1px dashed rgba(184, 134, 11, 0.3); /* 加上分隔線增加層次感 */
    flex-wrap: wrap;
    line-height: 1.6;
}
.game-tag {
    display: inline-block;
    background-color: rgba(184, 134, 11, 0.2);
    color: var(--color-frame-gold);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* C. 冒險者資料 (page-profile) */
#qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}
#qrcode {
    padding: 15px;
    background: white;
    border: 2px solid var(--color-frame-gold);
    border-radius: var(--border-radius);
}
.profile-details-grid {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--color-card-background);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-frame-gold);
}
.profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--color-frame-gold);
}
.profile-stats h2 { margin: 0 0 8px 0; border: none; padding: 0; font-size: 1.8rem; }
.profile-stats p { margin: 4px 0; }
.perk-display {
    text-align: center;
    padding: 12px;
    margin-top: 20px;
    background-color: rgba(218, 165, 32, 0.15); /* 金色透明背景 */
    border: 1px dashed var(--color-frame-gold);
    border-radius: var(--border-radius);
}
.profile-actions {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.profile-actions .cta-button {
    font-size: 1rem;
    padding: 15px 5px; /* 增加垂直 padding */
}

/* --- 冒險者資料卡片 (上下分層版) --- */
.profile-card {
    background-color: #f9f4e8; /* 米色背景 */
    border: 2px solid #b8860b; /* 金色邊框 */
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 上半部：Flex 橫向排列 (頭像在左，資訊在右) */
.profile-header-section {
    display: flex;
    align-items: center; /* 垂直置中對齊 */
    gap: 20px;
    margin-bottom: 15px;
}

.profile-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #b8860b;
    object-fit: cover;
    background-color: #fff;
    flex-shrink: 0; /* 防止頭像被壓縮 */
}

.profile-basic-info {
    flex-grow: 1;
    font-family: var(--font-primary);
}

.profile-name {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 8px 0;
    color: #333;
    border: none; /* 移除預設標題底線 */
    text-align: left; /* 強制靠左 */
}

/* 等級與經驗值併排容器 */
.profile-level-container {
    display: flex;
    justify-content: space-between; /* 左右撐開 */
    margin-top: 5px;
    width: 100%;
}

/* 通用單行項目 (職業、等級、經驗值) */
.profile-row-item {
    display: flex;
    align-items: baseline;
}

/* 分隔虛線 */
.profile-divider {
    border-top: 1px dashed #b8860b;
    margin: 10px 0 15px 0;
    opacity: 0.6;
}

/* 下半部：詳細資料區 (技能、裝備) */
.profile-details-section {
    font-family: var(--font-primary);
}

/* 每一行資料的 Flex 設定 (用於對齊標題與內容) */
.profile-field {
    display: flex;
    align-items: flex-start; /* 內容多行時，標題固定在頂部 */
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 標題樣式 (技能：、裝備：) */
.profile-label {
    flex-shrink: 0;    /* 標題不壓縮 */
    margin-right: 2px; /* 標題與內容的間距 */
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

/* 內容數值樣式 */
.profile-value {
    color: #000;
    word-break: break-all; /* 避免長英文字串破版 */
    text-align: left;
}

/* D. 預約/經驗/租借歷史頁 */
/* 樣式已由通用 .card, h1, .details-back-button 覆蓋 */

/* E. 場地預約 (page-booking) */
#booking-wizard-container .booking-step { display: none; }
#booking-wizard-container .booking-step.active { display: block; }
.booking-header { text-align: center; }
.booking-subtitle { margin-top: -20px; }
.preference-btn {
    width: 100%;
    padding: 20px;
    margin-bottom: 15px;
    background: var(--color-card-background);
    border: 1px solid var(--color-frame-gold);
    border-radius: var(--border-radius);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}
.preference-btn:hover {
    transform: scale(1.02);
    border-color: var(--color-frame-gold-light);
}
.preference-btn h3 { border: none; padding: 0; margin: 0 0 10px 0; }
.discount-highlight, .booking-notice {
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    border-radius: var(--border-radius);
}
.discount-highlight {
    background-color: rgba(218, 165, 32, 0.15);
    border: 1px dashed var(--color-frame-gold);
}
.booking-notice {
    background-color: rgba(74, 55, 40, 0.05);
}

/* --- 預約頁公告樣式 --- */
.announcement-box {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-frame-gold);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-top: 15px;
    box-shadow: var(--box-shadow);
    white-space: pre-wrap; /* 讓換行符號生效 */
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* 日期選擇器 Flatpickr 樣式覆蓋 */
.flatpickr-calendar {
    background: var(--color-card-background) !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--color-frame-gold) !important;
    box-shadow: var(--box-shadow) !important;
}
#booking-datepicker-container {
    display: flex;
    justify-content: center;
}
.flatpickr-day.selected {
    background: var(--color-frame-gold) !important;
    border-color: var(--color-frame-gold) !important;
}
.flatpickr-day:hover {
    background: rgba(184, 134, 11, 0.2) !important;
}
.flatpickr-weekday, .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    color: var(--color-text-primary) !important;
    font-family: var(--font-primary) !important;
}
span.arrowUp:after { border-bottom-color: var(--color-text-primary) !important; }
span.arrowDown:after { border-top-color: var(--color-text-primary) !important; }

#booking-slots-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.slot-button { /* 動態生成 */
    padding: 12px 5px;
    font-family: var(--font-primary);
    border: 1px solid var(--color-frame-gold);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}
.slot-button:hover:not(:disabled) {
    background: var(--color-frame-gold);
    color: white;
}
.slot-button:disabled {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.1);
    cursor: not-allowed;
}
#contact-summary {
    font-weight: bold;
    font-size: 1.2rem;
}
.summary-card p {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-frame-gold);
}
.summary-card p span:last-child {
    font-weight: bold;
}

/* F. 店家資訊 (page-info) */
.info-section {
    margin-bottom: 25px;
}
.info-section h2 {
    border: none;
    padding: 0;
    margin-bottom: 10px;
}
#store-hours {
    white-space: pre-wrap;
    font-family: var(--font-primary);
}

/* =================================================================
   追加樣式 v5 (最終修正版)
   ================================================================= */

/* --- 1. 統一頁面主標題樣式 --- */
.page-main-title {
    text-align: center;
    font-size: 2.2rem; 
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-frame-gold);
    margin-top: 10px;
    margin-bottom: 25px;
    padding-bottom: 10px;
}


/* --- 2. 導覽列文字排版優化 --- */
#tab-bar {
    height: 70px;
}
.tab-button {
    line-height: 1.4;
    font-size: 0.9rem;
    padding: 5px;
}

/* --- 3. 冒險者資料頁面全版面優化 --- */
#page-templates > #page-profile {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px - 10px); 
    padding: 8px 15px;
    box-sizing: border-box;
}
#page-profile > h1 {
    flex-shrink: 0;
}
#page-profile #qrcode-container {
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    margin: 5px 0;
}
#page-profile #qrcode {
    padding: 8px;
}
.profile-details-grid {
    flex-shrink: 0;
    margin-top: 5px;
    margin-bottom: 8px;
}

#page-profile .profile-actions {
    flex-shrink: 0;
    margin-top: 8px;
    gap: 8px;
}
.profile-actions .cta-button {
    font-size: 0.9rem;
    padding: 8px 5px;
    line-height: 1.3;
}

/* =================================================================
   追加樣式 - 需求修改
   ================================================================= */
/* --- 遊戲詳情頁 (page-game-details) --- */

/* 圖片展示區 */
.details-gallery {
    margin-bottom: 15px;
}
.details-image-main {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* 維持比例 */
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 2px solid var(--color-frame-gold);
    margin-bottom: 10px;
}
.details-image-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.details-image-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--border-radius) / 2);
    border: 1px solid var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.details-image-thumbnail:hover, .details-image-thumbnail.active {
    opacity: 1;
    border: 2px solid var(--color-frame-gold);
}


/* 核心資訊網格 */
.core-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
    padding: 10px;
}
.core-info-grid .info-item {
    display: flex;
    flex-direction: column;
}
.core-info-grid .info-item span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.core-info-grid .info-item strong {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-text-primary);
}

/* 遊戲詳情頁的標籤容器 */
#game-tags-container {
    padding: 10px;
    text-align: center;
}

/* 遊戲詳情頁價格 */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    text-align: center;
    justify-content: flex-start; /* 【** 新增這一行 **】 */
}
.price-item p {
    margin: 4px 0;
}
.price-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text-primary);
}
.price-tag { /* 取代原本的 .stock-info */
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* public/style.css */

/* --- 修正：租借紀錄頁面排版 --- */
.rental-card {
    display: flex;
    align-items: center; /* 讓圖片和文字垂直置中對齊 */
    gap: 15px;
}

.rental-game-image {
    width: 80px;      /* 設定固定寬度 */
    height: 80px;     /* 設定固定高度 */
    flex-shrink: 0;   /* 防止圖片被壓縮 */
    object-fit: cover;/* 確保圖片等比例填滿空間不變形 */
    border-radius: var(--border-radius);
}

.rental-info {
    flex-grow: 1; /* 讓文字區域佔滿剩餘空間 */
}

.rental-info h3, .rental-info p {
    margin: 5px 0; /* 調整文字間的垂直距離 */
}

/* ---【新增】冒險者檔案編輯頁 - 偏好遊戲類型標籤 --- */
.tag-selection-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.preference-tag-btn {
    font-family: var(--font-primary);
    padding: 8px 16px;
    border: 1px solid var(--color-frame-gold);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preference-tag-btn.active {
    background-color: var(--color-frame-gold);
    color: white;
    font-weight: bold;
}