* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft Jhenghei', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e0e0e0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    width: calc(100vw - 40px);
    max-width: none;
    height: calc(100vh - 40px);
    background: #0f0f23;
    border-radius: 15px;
    border: 3px solid #4a90d9;
    box-shadow: 0 0 30px rgba(74, 144, 217, 0.4);
    position: relative;
    overflow: auto; /* 重要：允許內容超出時捲動 */
}

/* 場景通用樣式 */
.scene {
    display: none;
    width: 100%;
    min-height: 650px; /* 確保場景有足夠高度 */
    padding: 20px;
}

.scene.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

h1, h2, h3 {
    text-align: center;
    margin-bottom: 15px;
}

h1 {
    color: #ffd700;
    font-size: 32px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

h2 {
    color: #4a90d9;
    font-size: 24px;
}

h3 {
    color: #7fb0e0;
    font-size: 18px;
}

/* 按鈕樣式 */
.btn {
    padding: 10px 20px;
    margin: 5px;
    border: 2px solid #4a90d9;
    background: linear-gradient(135deg, #1a3a5c, #2a5a8c);
    color: #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.btn:hover {
    background: linear-gradient(135deg, #2a5a8c, #4a90d9);
    box-shadow: 0 0 15px rgba(74, 144, 217, 0.5);
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, #2d5a2d, #4a8c4a);
    border-color: #6ab06a;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4a8c4a, #6ab06a);
}

.btn-danger {
    background: linear-gradient(135deg, #5a2d2d, #8c4a4a);
    border-color: #b06a6a;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #8c4a4a, #b06a6a);
}

/* 職業選擇場景 */
.class-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.class-card {
    background: linear-gradient(135deg, #1a3a5c, #0f2a4c);
    border: 2px solid #4a90d9;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.class-card:hover {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transform: translateY(-5px);
}

.class-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.class-name {
    font-size: 20px;
    color: #ffd700;
    margin-bottom: 10px;
}

.class-desc {
    font-size: 13px;
    color: #a0a0a0;
    line-height: 1.5;
}

/* 主場景佈局 */
.main-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 22px;
    margin-top: 14px;
}

.panel {
    background: #1a1a2e;
    border: 2px solid #2a2a4e;
    border-radius: 10px;
    padding: 18px;
}

.panel-title {
    color: #ffd700;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #4a90d9;
}

/* 導航列（面板底部按鈕） */
.nav-bar { display:flex; justify-content:center; align-items:center; padding-top:10px; }

/* 屬性顯示 */
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #2a2a4e;
}

.stat-label {
    color: #a0a0a0;
}

.stat-value {
    color: #4a90d9;
    font-weight: bold;
}

/* 商店商品 */
.shop-item {
    background: #0f0f23;
    border: 2px solid #2a2a4e;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-item:hover {
    border-color: #4a90d9;
    box-shadow: 0 0 10px rgba(74, 144, 217, 0.3);
}

/* 商店版面與 RWD 調整 */
.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 12px;
}

.gold-badge {
    font-size: 1.05em;
    background: #ffd700;
    color: #333;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
}

.shop-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    min-height: 60vh;
}

.shop-column {
    padding: 15px;
    border-radius: 10px;
    overflow-y: auto;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.03);
}

.shop-left { background: rgba(0,0,0,0.25); }
.shop-right { background: rgba(255,255,255,0.03); }

.shop-title {
    margin-top: 0;
    color: #ffd700;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    font-size: 16px;
}

.shop-right .shop-title { color: #4a90d9; }
.shop-items-list { display: flex; flex-direction: column; gap: 10px; }

.shop-group-title {
    font-size: 14px;
    color: #ffd700;
    margin: 12px 0 8px 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,215,0,0.06);
}

/* 在商店的「我的物品」容器中，使用與精選商品相同的垂直佈局
   避免商品在右側被壓縮成多欄或過於擁擠 */
#shop-inventory-container > .inventory-grid,
.shop-right > #shop-inventory-container > .inventory-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 確保每個物品列滿寬並有一致間距 */
#shop-inventory-container .inventory-item,
.shop-right #shop-inventory-container .inventory-item {
    width: 100%;
    box-sizing: border-box;
}

/* 商店欄位最大高度以避免整頁過長，並在小螢幕縮短 */
.shop-column { max-height: calc(70vh - 120px); }

@media (max-width: 768px) {
    .shop-container { grid-template-columns: 1fr; }
    .shop-header { flex-direction: column; align-items: stretch; }
    .shop-header .gold-badge { margin-bottom: 8px; align-self: start; }
    .shop-column { max-height: calc(60vh - 140px); }
}

@media (max-width: 420px) {
    .gold-badge { font-size: 0.95em; padding: 6px 10px; }
    .shop-column { padding: 10px; }
}

/* 裝備欄 */
/* 裝備欄 */
#equipment-panel {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 8px;
}

.equip-slot {
    background: #0f0f23;
    border: 2px solid #2a2a4e;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.equip-slot:hover {
    border-color: #4a90d9;
}

.equip-slot.filled {
    border-color: #6ab06a;
}

.equip-slot-label {
    font-size: 12px;
    color: #a0a0a0;
    margin-bottom: 5px;
}

.equip-slot-item {
    font-size: 14px;
    color: #ffd700;
}

/* 戰鬥場景 */
.wave-indicator {
    text-align: center;
    font-size: 18px;
    color: #ffd700;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.battle-arena {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 20px 0;
    padding: 30px;
    background: #1a1a2e;
    border-radius: 10px;
    position: relative;
}

.battle-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px;
    background: rgba(26, 26, 46, 0.95);
    border-radius: 15px;
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    z-index: 10;
    min-width: 300px;
}

.result-title {
    font-size: 32px;
    margin-bottom: 15px;
}

.result-title.victory { color: #6ab06a; }
.result-title.defeat { color: #b06a6a; }

.battle-result p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #e0e0e0;
}

.battle-result .btn {
    margin: 5px;
    font-size: 16px;
    padding: 12px 30px;
}

.combatant {
    text-align: center;
    flex: 1;
    max-width: 300px;
}

.combatant-icon {
    font-size: 80px;
    margin-bottom: 15px;
}

.combatant-name {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.hp-bar-container {
    width: 200px;
    height: 24px;
    background: #0f0f23;
    border-radius: 12px;
    overflow: hidden;
    margin: 10px auto;
    border: 2px solid #2a2a4e;
}

/* 回復血條樣式 */
.hp-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff4444, #ff6666);
    transition: width 0.3s ease;
    border-radius: 12px;
    width: 0%;
}

.hp-bar.player {
    background: linear-gradient(90deg, #44ff44, #66ff66);
}

.equip-slot {
    background: #0f0f23;
    border: 2px solid #2a2a4e;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.equip-slot:hover {
    border-color: #4a90d9;
    transform: translateY(-2px);
}
.equip-slot.filled {
    border-color: #6ab06a;
}
.equip-slot-label {
    font-size: 13px;
    color: #a0a0a0;
}
.equip-slot-item {
    font-size: 14px;
    color: #ffd700;
}

.battle-log {
    height: 180px;
    overflow-y: auto;
    background: #0f0f23;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
    border: 2px solid #2a2a4e;
}

.battle-log p {
    margin-bottom: 6px;
}

.log-player { color: #6ab06a; }
.log-enemy { color: #b06a6a; }
.log-system { color: #ffd700; }

/* 戰鬥按鈕 */
.battle-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.battle-actions .btn {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
}

/* 物品欄 */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* 讓背包/商店格在內容超出時可滾動 */
.inventory-grid {
    overflow-y: auto;
    padding-right: 6px;
}

/* 固定主行動按鈕（開始戰鬥）——尺寸穩定，不隨容器縮放 */
.fixed-action {
    padding: 16px 36px;
    font-size: 18px;
    min-width: 180px;
    max-width: 260px;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 物品與裝備格可縮放 */
.inventory-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.inventory-item {
    padding: 10px;
    font-size: clamp(12px, 1.6vw, 14px);
    border-radius: 8px;
}
.equip-slot {
    font-size: clamp(12px, 1.2vw, 14px);
}

@media (max-width: 768px) {
    .fixed-action { min-width: 140px; padding: 12px 26px; font-size: 16px; }
}

@media (max-width: 420px) {
    .fixed-action { min-width: 120px; padding: 10px 18px; font-size: 15px; }
}

.inventory-item {
    background: #0f0f23;
    border: 2px solid #2a2a4e;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
}

/* 稀有度徽章 */
.rarity-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.15);
}
.rarity-badge.small {
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 6px;
}
.rarity-badge.common {
    background: transparent;
    color: #a0a0a0;
    border: 1px solid #2a2a4e;
}

/* 各稀有度樣式（用於 .rarity-badge.<rarity>） */
.rarity-badge.uncommon {
    background: #1aff1a;
    color: #ffffff;
    border-color: rgba(0,0,0,0.12);
}
.rarity-badge.rare {
    background: #4a90d9;
    color: #ffffff;
    border-color: rgba(0,0,0,0.12);
}
.rarity-badge.epic {
    background: #b06aff;
    color: #ffffff;
    border-color: rgba(0,0,0,0.12);
}
.rarity-badge.legendary {
    background: #ffd700;
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.12);
}

/* 物品屬性行 */
.item-stats {
    font-size: 11px;
    color: #c0c0c0;
    margin-top: 4px;
}

/* 等級顯示 */
.level-badge {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a2e;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.exp-bar-container {
    width: 100%;
    height: 12px;
    background: #0f0f23;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}

.exp-bar {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transition: width 0.3s;
    border-radius: 6px;
}

/* 動畫 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.scene.active {
    animation: fadeIn 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.3s ease;
}

/* ------------------
   Responsive (RWD)
   ------------------ */

/* 手機與小螢幕基底調整 */
@media (max-width: 768px) {
    body {
        align-items: flex-start; /* 讓容器靠上，避免手機垂直置中造成看不到上方 */
        padding: 20px 0;
    }

    #game-container {
        width: calc(100% - 24px);
        border-radius: 12px;
        padding: 12px;
    }

    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }

    .class-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .main-layout {
        grid-template-columns: 1fr; /* 直欄堆疊 */
        gap: 12px;
    }

    .panel { padding: 12px; }

    .combatant-icon { font-size: 56px; }
    .battle-arena { flex-direction: column; padding: 16px; gap: 12px; }
    .battle-vs { font-size: 28px; }
    .hp-bar-container { width: 160px; }

    .battle-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .battle-actions .btn { padding: 12px; font-size: 15px; }

    .inventory-grid { grid-template-columns: repeat(3, 1fr); }
    .class-icon { font-size: 40px; }

    /* 位置調整區（保留其他回饋用） */
}

/* 極小螢幕優化 (小手機) */
@media (max-width: 420px) {
    #game-container { padding: 10px; }
    .class-grid { grid-template-columns: 1fr; }
    .inventory-grid { grid-template-columns: repeat(2, 1fr); }
    .battle-actions { grid-template-columns: 1fr; }
    .btn { padding: 14px 12px; font-size: 16px; }

    /* 增加點擊目標高度 */
    .equip-slot, .inventory-item, .btn { min-height: 44px; }
}

/* 觸控優化：增大可點擊區域，避免被系統縮放影響 */
@media (hover: none) and (pointer: coarse) {
    .btn { padding: 14px 18px; font-size: 16px; }
    .class-card { padding: 18px; }
}

/* 浮動傷害文字 */
.damage-float {
    pointer-events: none;
    color: #ff4d4d;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
    animation: floatUp 0.9s ease forwards;
    z-index: 9999;
}
.damage-crit {
    color: #ffd700;
    font-size: 22px;
    transform-origin: center;
    text-shadow: 0 0 8px rgba(255,215,0,0.9);
}

@keyframes floatUp {
    0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    70% { transform: translate(-50%, -40px) scale(1.05); opacity: 0.9; }
    100% { transform: translate(-50%, -70px) scale(1.0); opacity: 0; }
}

/* 屬性分配模態視窗 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.modal-content {
    width: 420px;
    max-width: calc(100% - 40px);
    background: #101226;
    border: 2px solid #2a2a4e;
    padding: 18px;
    border-radius: 10px;
    text-align: center;
}
.alloc-rows { display: grid; gap: 8px; margin-top: 12px; }
.alloc-row { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:6px; background:#0f1220; }
.alloc-controls { display:flex; gap:8px; align-items:center; }
.alloc-value { min-width:28px; display:inline-block; text-align:center; font-weight:700; color:#ffd700; }
.alloc-remaining { margin-top:10px; color:#a0a0a0; }

/* 遊戲標題旁的齒輪選單 */
.game-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.game-settings { position: relative; }
.icon-btn { background: transparent; border: none; color: #e0e0e0; font-size: 18px; padding: 6px; border-radius: 6px; cursor: pointer; }
.icon-btn:focus { outline: 2px solid #4a90d9; }
.game-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #0f1220; border: 1px solid #2a2a4e; padding: 6px; border-radius: 8px; min-width: 160px; box-shadow: 0 8px 20px rgba(0,0,0,0.45); z-index: 12000; display: none; }
.game-menu.show { display: block; }
.game-menu .menu-item { display: block; width: 100%; text-align: left; background: transparent; color: #ffffff; padding: 8px 10px; border: none; cursor: pointer; border-radius: 6px; }
.game-menu .menu-item:hover { background: rgba(255,255,255,0.03); }

/* 自動刷怪外掛的懸浮停止按鈕（預設 hidden，由 JS 控制顯示） */
.floating-stop {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 14000;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg,#d9534f,#c12e2e);
    color: #fff;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    font-weight: 700;
    cursor: pointer;
}

/* 神秘商店樣式 */
.mystery-shop-container {
    background: linear-gradient(135deg, rgba(106, 17, 103, 0.15), rgba(74, 144, 217, 0.1));
    border: 2px solid #b06aff;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    text-align: center;
}

.mystery-shop-container h3 {
    margin: 0 0 15px 0;
    color: #b06aff;
    font-size: 18px;
}

.mystery-box {
    background: #0f0f23;
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}

.mystery-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(176, 106, 255, 0.1) 0%, transparent 70%);
    animation: mystery-glow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mystery-glow {
    0%, 100% { transform: rotate(0deg); opacity: 0.5; }
    50% { transform: rotate(180deg); opacity: 1; }
}

.mystery-box-icon {
    font-size: 60px;
    display: block;
    margin-bottom: 10px;
    animation: mystery-bounce 2s ease-in-out infinite;
}

@keyframes mystery-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mystery-box-title {
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 8px;
}

.mystery-box-desc {
    font-size: 14px;
    color: #a0a0a0;
    margin-bottom: 15px;
}

.mystery-box-price {
    font-size: 16px;
    color: #ffd700;
    margin-bottom: 15px;
    font-weight: bold;
}

.btn-buy-mystery {
    background: linear-gradient(135deg, #b06aff, #4a90d9);
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-buy-mystery:hover {
    background: linear-gradient(135deg, #c08aff, #6ab0d9);
    box-shadow: 0 0 20px rgba(176, 106, 255, 0.5);
    transform: translateY(-2px);
}

.btn-buy-mystery:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.floating-stop:hover { transform: translateY(-2px); }