.hidden { 
    display: none !important; 
}

.hidden-desktop { 
    display: none; 
}

/* 補回這 3 個被誤刪的關鍵 Class */
.mobile-hidden { 
    display: none !important; /* 加上 !important 才能壓過 #sidebar 的權重 */
}

.graduated-item { 
    border-left: 8px solid #8e44ad; 
}

.success-badge { 
    background: #27ae60; 
    color: white; 
    padding: 3px 10px; 
    border-radius: 12px; 
    font-size: 0.75em; 
    font-weight: bold; 
    margin-left: 10px; 
    vertical-align: middle; 
}

/* ================= 基礎設定 ================= */
body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background: #3e2723; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    touch-action: manipulation;
    overscroll-behavior: none; /* 🚫 封鎖蘋果/安卓的邊緣拉扯回彈特效 */
    position: fixed; /* 🚫 鎖死整個螢幕，絕對不允許拖曳 */
}

.hidden { 
    display: none !important; 
}

.hidden-desktop { 
    display: none; 
}

.mobile-hidden { 
    display: none !important; 
}

/* ================= 登入畫面 ================= */
#login-screen { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(135deg, #4e342e 0%, #3e2723 100%); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
    padding-bottom: 70px !important; /* 墊出空間避開深色頁腳 */
    box-sizing: border-box;
}

.login-box { 
    background: white; 
    padding: 35px; 
    border-radius: 20px; 
    text-align: center; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.8); 
    width: 90%; 
    max-width: 420px; 
    border: 6px solid #f39c12; 
    position: relative; 
    overflow-y: auto; 
    max-height: calc(100vh - 100px) !important; 
    margin: auto !important;
}

.login-logo { 
    width: 100px; 
    height: 100px; 
    background: #ecf0f1; 
    border-radius: 50%; 
    border: 4px solid #f39c12; 
    padding: 10px; 
    margin-bottom: 10px; 
    object-fit: contain; 
}

.epic-title { 
    color: #2c3e50; 
    margin-bottom: 10px; 
    font-size: 1.8em; 
    margin-top: 0; 
    font-weight: 900; 
    letter-spacing: 1px; 
}

.subtitle { 
    font-size: 0.65em; 
    color: #e67e22; 
    background: #fef5e7; 
    padding: 6px 14px; 
    border-radius: 12px; 
    display: inline-block; 
    margin-top: 5px; 
    font-weight: bold; 
}

.device-hint { 
    background: #e8f8f5; 
    color: #16a085; 
    padding: 10px; 
    border-radius: 8px; 
    font-size: 0.95em; 
    font-weight: bold; 
    margin: 12px 0; 
    border: 1px dashed #1abc9c; 
}

.game-highlights { 
    text-align: left; 
    background: #f8f9fa; 
    padding: 15px 15px 15px 35px; 
    border-radius: 12px; 
    margin: 15px 0; 
    color: #34495e; 
    font-size: 0.95em; 
    line-height: 1.6; 
    border-left: 5px solid #3498db; 
}

.game-highlights li { 
    margin-bottom: 8px; 
}

.login-box input { 
    width: 100%; 
    padding: 15px; 
    border: 2px solid #bdc3c7; 
    border-radius: 12px; 
    margin-bottom: 15px; 
    font-size: 1.2em; 
    text-align: center; 
    font-weight: bold; 
    background: #f4f6f7; 
    transition: 0.3s; 
    box-sizing: border-box; 
}

.login-box input:focus { 
    border-color: #3498db; 
    outline: none; 
    background: white; 
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.2); 
}

.start-btn { 
    padding: 15px; 
    background: linear-gradient(to bottom, #2ecc71, #27ae60); 
    color: white; 
    border: none; 
    border-radius: 12px; 
    font-size: 1.3em; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
    box-shadow: 0 6px 0 #1e8449; 
    width: 100%; 
    box-sizing: border-box; 
    letter-spacing: 1px; 
}

.start-btn:active { 
    transform: translateY(6px); 
    box-shadow: none; 
}

.author-tag { 
    margin-top: 20px; 
    font-size: 0.85em; 
    color: #7f8c8d; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* ================= 世界大廳 ================= */
#world-map-screen { 
    min-height: 100vh; 
    background: linear-gradient(135deg, #2c3e50, #4ca1af); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
    padding: 40px 20px; 
    box-sizing: border-box; 
}

.world-header { 
    text-align: center; 
    color: white; 
    margin-bottom: 30px; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
}

.world-header h2 { 
    font-size: 2.2em; 
    margin: 0 0 10px 0; 
    letter-spacing: 2px; 
}

.world-header p { 
    font-size: 1.2em; 
    margin: 0; 
    opacity: 0.9; 
}

.realm-container { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    width: 100%; 
    max-width: 500px; 
}

.realm-card { 
    background: white; 
    border-radius: 20px; 
    padding: 25px 20px; 
    text-align: center; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); 
    position: relative; 
    overflow: hidden; 
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.active-realm { 
    cursor: pointer; 
    border: 4px solid #2ecc71; 
}

.active-realm:hover { 
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 15px 25px rgba(0,0,0,0.4); 
}

.locked-realm { 
    background: #ecf0f1; 
    border: 4px solid #bdc3c7; 
    cursor: not-allowed; 
    opacity: 0.8; 
}

.locked-realm img { 
    filter: grayscale(100%); 
}

.realm-icon { 
    font-size: 3.5em; 
    margin-bottom: 10px; 
    line-height: 1; 
}

.realm-card h3 { 
    color: #2c3e50; 
    font-size: 1.5em; 
    margin: 0 0 8px 0; 
    font-weight: 900; 
}

.realm-card p { 
    color: #7f8c8d; 
    font-size: 0.95em; 
    margin: 0 0 15px 0; 
    font-weight: bold; 
}

.enter-btn { 
    background: linear-gradient(135deg, #27ae60, #2ecc71); 
    color: white; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 25px; 
    font-size: 1.1em; 
    font-weight: bold; 
    box-shadow: 0 4px 0 #1e8449; 
    width: 80%; 
    cursor: pointer; 
    transition: 0.1s; 
}

.active-realm:active .enter-btn { 
    transform: translateY(4px); 
    box-shadow: none; 
}

.locked-badge { 
    background: #7f8c8d; 
    color: white; 
    padding: 10px; 
    border-radius: 12px; 
    font-weight: bold; 
    width: 80%; 
    margin: 0 auto; 
}

#realm-opera, #realm-taiwanese-opera { 
    display: none !important; 
}

/* ================= 遊戲主體架構 ================= */
#game-container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 95vw; 
    max-width: 1200px; 
    height: 95vh; 
    height: 95dvh; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    border: 6px solid #5d4037; 
    border-radius: 24px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); 
    overflow: hidden; 
}

#marquee-container { 
    height: 45px; 
    background: #5d4037; 
    color: #f1c40f; 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    border-bottom: 3px solid #3e2723; 
    flex-shrink: 0; 
}

#marquee-pig { 
    height: 28px; 
    margin-right: 12px; 
    object-fit: contain; 
}

.marquee-scroll { 
    flex: 1; 
    overflow: hidden; 
    white-space: nowrap; 
}

#marquee-msg { 
    display: inline-block; 
    padding-left: 100%; 
    animation: scrollText 25s linear infinite; 
    font-weight: bold; 
    font-size: 1.05em; 
}

@keyframes scrollText { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-100%); } 
}

#game-body { 
    display: flex; 
    flex: 1; 
    overflow: hidden; 
}

/* ================= 左側邊欄 ================= */
#sidebar { 
    width: 340px; 
    min-width: 340px; 
    background: #fff; 
    border-right: 5px solid #5d4037; 
    display: flex; 
    flex-direction: column; 
    padding: 15px; 
    box-sizing: border-box; 
    z-index: 10; 
    overflow-y: auto; 
}

.user-header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 10px; 
}

.pig-avatar-container { 
    position: relative; 
    width: 95px; 
    height: 95px; 
    background: #fdf2e9; 
    border: 4px solid #f39c12; 
    border-radius: 20px; 
    cursor: pointer; 
    flex-shrink: 0; 
    overflow: visible; 
    box-shadow: 0 4px 0 #d35400; 
}

#pig-img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    display: block; 
    border-radius: 15px; 
}

.switch-icon-hint {
    position: absolute !important; 
    bottom: -10px !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #f1c40f, #f39c12) !important; 
    color: white !important;
    padding: 4px 10px !important; 
    border-radius: 20px !important; 
    border: 2px solid white !important; 
    font-size: 0.8em !important; 
    font-weight: 900 !important; 
    white-space: nowrap !important; /* 保證四個字排在同一行 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    transition: 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10 !important;
}

.pig-avatar-container:active .switch-icon-hint {
    transform: translateX(-50%) scale(0.9) !important;
    background: linear-gradient(135deg, #f39c12, #d35400) !important;
}

.user-info { 
    flex: 1; 
    padding-left: 15px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.lv-badge { 
    font-weight: bold; 
    font-size: 1.1em; 
    color: #5d4037; 
    margin-bottom: 6px; 
}

#pro-badge { 
    background: #f1c40f; 
    color: #d35400; 
    padding: 3px 8px; 
    border-radius: 6px; 
    font-size: 0.85em; 
    font-weight: 900; 
    margin-left: 6px; 
    border: 1px solid #e67e22; 
    vertical-align: middle; 
}

.exp-bar-bg { 
    width: 100%; 
    height: 12px; 
    background: #eee; 
    border-radius: 6px; 
    overflow: hidden; 
    margin: 6px 0; 
}

#exp-fill { 
    height: 100%; 
    width: 0%; 
    background: #3498db; 
    transition: 0.5s; 
}

.money { 
    font-weight: bold; 
    font-size: 1.25em; 
    color: #f39c12; 
}

/* ================= 測驗區 ================= */
#quiz-panel { 
    flex: 1; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    margin: 10px 0; 
}

.tag { 
    font-size: 1em; 
    color: #7f8c8d; 
    font-weight: bold; 
    line-height: 1.4; 
    margin-bottom: 5px; 
}

.tag select { 
    background: transparent; 
    border: none; 
    color: #2980b9; 
    font-weight: bold; 
    font-size: 0.95em; 
    cursor: pointer; 
    outline: none; 
}

#word-display { 
    color: #222; 
    font-size: 1.8em; 
    margin: 5px 0 8px 0 !important; 
    line-height: 1.1 !important; 
    word-break: break-word; 
    font-weight: 900; 
}

#reward-hint {
    font-size: 0.9em !important;
}

#options-grid { 
    display: grid; 
    gap: 6px !important; 
    margin-bottom: 10px !important; 
    width: 100%; 
}

#options-grid button { 
    padding: 8px 5px !important; 
    border: 2px solid #bdc3c7; 
    border-radius: 10px !important; 
    background: white; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 0.95em !important; 
    transition: 0.2s; 
    touch-action: manipulation; 
    color: #2c3e50; 
    box-shadow: 0 4px 0 #ecf0f1; 
}

#options-grid button:last-child {
    padding: 6px !important;
    font-size: 0.85em !important;
}

#options-grid button:active { 
    background: #e0e0e0; 
    transform: translateY(4px); 
    box-shadow: none; 
}

/* 答題按鈕狀態 */
.quiz-btn-default {
    background-color: white !important;
    color: #2c3e50 !important;
    border-color: #bdc3c7 !important;
}

.quiz-btn-correct {
    background-color: #2ecc71 !important;
    color: white !important;
    border-color: #27ae60 !important;
}

.quiz-btn-wrong {
    background-color: #e74c3c !important;
    color: white !important;
    border-color: #c0392b !important;
}

.quiz-btn-idk {
    grid-column: span 2;
    padding: 10px;
    font-size: 0.95em;
    background-color: #f8f9fa;
    color: #7f8c8d;
    border: 2px dashed #bdc3c7;
    border-radius: 14px;
    box-shadow: none;
    cursor: pointer;
    transition: 0.2s;
}

.quiz-btn-idk:active {
    background-color: #e0e0e0;
}

.special-quiz-btn {
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border: 2px solid #bdc3c7;
    border-radius: 12px;
    background-color: white;
    cursor: pointer;
    color: #2c3e50;
    transition: 0.2s;
}

.special-quiz-btn:active {
    background-color: #e0e0e0;
    transform: translateY(4px);
}

/* ================= 模式切換與發音按鈕 ================= */
.mode-label { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 6px 10px !important; 
    border-radius: 15px; 
    font-weight: 900; 
    font-size: 0.85em !important; 
    cursor: pointer; 
    transition: 0.1s; 
    width: 95% !important; 
    box-shadow: 0 4px 0 rgba(0,0,0,0.1); 
}

.mode-label:active { 
    transform: translateY(4px); 
    box-shadow: none !important; 
}

.mode-label input[type="checkbox"] { 
    transform: scale(1.4); 
    margin-right: 8px; 
    cursor: pointer; 
    accent-color: currentColor; 
}

.sound-btn { 
    border: none; 
    border-radius: 8px !important; 
    color: white; 
    font-weight: bold; 
    font-size: 0.9em !important; 
    padding: 8px 15px !important; 
    cursor: pointer; 
    transition: 0.1s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 5px; 
}

.sound-btn:active { 
    transform: translateY(4px); 
    box-shadow: none !important; 
}

/* ================= 活力條 ================= */
.energy-panel { 
    margin-top: auto; 
}

.label { 
    font-weight: bold; 
    font-size: 1.05em; 
    color: #333; 
    margin-bottom: 5px; 
    display: block; 
}

.bar-bg { 
    width: 100%; 
    height: 16px; 
    background: #eee; 
    border-radius: 8px; 
    overflow: hidden; 
    margin: 5px 0; 
}

#energy-fill { 
    width: 100%; 
    height: 100%; 
    background: #e67e22; 
    transition: 0.3s; 
}

/* ================= 右側農場區 ================= */
#farm-viewport {
    flex: 1; 
    position: relative; 
    overflow: hidden;
    background-image: linear-gradient(rgba(45, 90, 39, 0.35), rgba(45, 90, 39, 0.35)), url('farm-bg.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    border-top-right-radius: 18px; 
    border-bottom-right-radius: 18px;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.55), inset 10px 0 20px -5px rgba(0,0,0,0.6);
}

#gameCanvas { 
    display: block; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; /* ✨ 新增這行 */
    image-rendering: pixelated; 
    touch-action: none; 
}

/* ================= 農場上方與快捷按鈕 ================= */


.overlay-btn { 
    background: rgba(0,0,0,0.8); 
    color: white; 
    padding: 12px 20px; 
    border-radius: 12px; 
    cursor: pointer; 
    font-size: 1.05em; 
    font-weight: bold; 
    text-align: center; 
    transition: 0.1s; 
    border: 2px solid rgba(255,255,255,0.2); 
}

.overlay-btn:active { 
    transform: scale(0.95); 
}

#quick-actions { 
    position: absolute; 
    bottom: 30px; 
    right: 30px; 
    display: flex; 
    gap: 15px; 
    z-index: 50; 
}

.quick-btn { 
    padding: 15px 25px; 
    border-radius: 30px; 
    color: white; 
    font-weight: bold; 
    font-size: 1.2em; 
    cursor: pointer; 
    border: 3px solid rgba(255,255,255,0.8); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); 
    transition: 0.15s; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.quick-btn:active { 
    transform: scale(0.92); 
}

.plant-btn { 
    background: linear-gradient(135deg, #27ae60, #2ecc71); 
}

.harvest-btn { 
    background: linear-gradient(135deg, #8e44ad, #9b59b6); 
}

/* ================= 左下角種子選擇列 ================= */
#seed-selector-container {
    position: absolute;
    bottom: 25px;
    left: 20px;
    z-index: 99;
    display: flex;
    flex-direction: column-reverse; 
    align-items: flex-start;
}

#seed-selection-bar {
    position: absolute;
    bottom: 25px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.seed-select-item {
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid #bdc3c7;
    border-radius: 12px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 100px;
}

.seed-select-item.active {
    border-color: #f1c40f;
    background: #fff9c4;
    transform: scale(1.05) translateX(5px);
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.6);
}

.seed-icon { 
    font-size: 1.4em; 
}

.seed-label { 
    font-weight: bold; 
    color: #2c3e50; 
    font-size: 0.9em; 
    flex: 1; 
}

.seed-price { 
    font-size: 0.75em; 
    color: #e67e22; 
    font-weight: 900; 
}

.seed-main-btn {
    width: 65px; 
    height: 65px; 
    border-radius: 50%;
    background: #f39c12; 
    border: 4px solid white;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4); 
    cursor: pointer;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    transition: 0.2s; 
    padding: 0; 
    outline: none; 
    text-align: center;
}

.seed-main-btn:active { 
    transform: scale(0.9) translateY(5px); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); 
}

/* ================= 專業版按鈕 ================= */
#pro-upgrade-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #f1c40f, #f39c12) !important; 
    color: #fff !important; 
    padding: 12px 20px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    border: 2px solid #fff !important; 
    z-index: 100 !important;
    cursor: pointer !important;
    text-shadow: none !important; 
    animation: smoothScaleGlow 1.5s infinite ease-in-out !important;
}

body.is-pro #pro-upgrade-btn { 
    display: none !important; 
}

@keyframes smoothScaleGlow {
    0% { 
        transform: scale(1); 
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4); 
    }
    50% { 
        transform: scale(1.08); 
        box-shadow: 0 0 20px rgba(243, 156, 18, 0.8), 0 0 10px rgba(255, 255, 255, 0.6); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4); 
    }
}

/* ================= 彈窗與功能面板 (Modal & Floating) ================= */
.overlay-modal { 
    position: fixed !important; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 10000 !important; 
}

.modal-content { 
    background: white; 
    padding: 30px; 
    border-radius: 20px; 
    width: 90%; 
    max-width: 450px; 
    max-height: 85vh; 
    overflow-y: auto; 
    position: relative; 
    text-align: center; 
    border: 5px solid #3498db; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.modal-close-btn { 
    margin-top: 15px; 
    background: #95a5a6; 
    color: white; 
    border: none; 
    padding: 12px 20px; 
    border-radius: 12px; 
    font-size: 1.1em; 
    font-weight: bold; 
    cursor: pointer; 
    width: 100%; 
}

#floating-panel { 
    position: fixed !important; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    max-width: 400px; 
    max-height: 80vh; 
    background: white; 
    border: 4px solid #5d4037; 
    border-radius: 20px; 
    padding: 25px; 
    z-index: 9999 !important; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); 
    overflow-y: auto; 
}

.panel-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 12px; 
    margin-bottom: 18px; 
    font-weight: bold; 
    font-size: 1.3em; 
    color: #333; 
}

.panel-header button { 
    background: none; 
    border: none; 
    font-size: 1.6em; 
    cursor: pointer; 
    color: #e74c3c; 
    font-weight: bold; 
    padding: 5px; 
    line-height: 1; 
}

.shop-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 12px 0; 
    border-bottom: 1px solid #eee; 
    font-size: 1.05em; 
}

.shop-item button { 
    padding: 10px 18px; 
    border: none; 
    border-radius: 10px; 
    color: white; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 1em; 
    transition: 0.1s;
}

.shop-item button:active { 
    transform: scale(0.95); 
}

.shop-item button:disabled { 
    background: #ccc !important; 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none !important; 
    border: none !important;
}

/* ================= 選單與各種按鈕 ================= */
.menu-btn { 
    padding: 15px; 
    border: none; 
    border-radius: 15px; 
    color: white; 
    font-weight: bold; 
    font-size: 1.2em; 
    cursor: pointer; 
    box-shadow: 0 6px 0 rgba(0,0,0,0.2); 
    transition: 0.1s; 
}

.menu-btn:active { 
    transform: translateY(6px); 
    box-shadow: none; 
}

.seed-btn { 
    background: #f8f9fa; 
    border: 3px solid #bdc3c7; 
    border-radius: 12px; 
    padding: 15px; 
    font-size: 1.2em; 
    font-weight: bold; 
    color: #2c3e50; 
    cursor: pointer; 
    transition: 0.1s; 
    box-shadow: 0 5px 0 #ecf0f1; 
}

.seed-btn:active { 
    transform: translateY(5px); 
    box-shadow: none; 
    background: #e8f8f5; 
    border-color: #2ecc71; 
}

.small-btn { 
    border: none; 
    border-radius: 12px; 
    color: white; 
    font-weight: bold; 
    font-size: 1.1em; 
    padding: 12px; 
    cursor: pointer; 
    transition: 0.1s; 
}

.small-btn:active { 
    transform: translateY(4px); 
    box-shadow: none !important; 
}

#btn-shield-false { 
    box-shadow: 0 4px 0 #7f8c8d; 
}

#new-hero-name-input { 
    width: 100%; 
    padding: 12px; 
    border: 2px solid #bdc3c7; 
    border-radius: 10px; 
    margin-bottom: 15px; 
    font-size: 1.2em; 
    text-align: center; 
    font-weight: bold; 
    background: #f4f6f7; 
    box-sizing: border-box; 
    transition: 0.3s; 
}

#new-hero-name-input:focus { 
    border-color: #3498db; 
    outline: none; 
    background: white; 
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.2); 
}

/* ================= 系統預設 Modal (Tutorial, Paywall, Coming Soon) ================= */
#tutorial-modal, #paywall-modal, #coming-soon-modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 2000; 
}

.tutorial-box, .paywall-box, .coming-soon-box { 
    background: white; 
    padding: 30px; 
    border-radius: 20px; 
    width: 85%; 
    max-width: 420px; 
    max-height: 85vh; 
    overflow-y: auto; 
    position: relative; 
    text-align: left; 
}

.tutorial-box { 
    border: 5px solid #3498db; 
}

.paywall-box { 
    border: 5px solid #f39c12; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.coming-soon-box { 
    border: 5px solid #9b59b6; 
}

.close-btn { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: none; 
    border: none; 
    font-size: 1.8em; 
    cursor: pointer; 
    color: #aaa; 
    transition: 0.2s; 
    line-height: 1; 
}

.close-btn:hover { 
    color: #e74c3c; 
}

.tutorial-box h3, .roadmap-title { 
    text-align: center; 
    color: #2980b9; 
    margin-top: 0; 
    font-size: 1.5em; 
    border-bottom: 2px dashed #eee; 
    padding-bottom: 12px; 
}

.roadmap-title { 
    color: #8e44ad; 
}

.tutorial-text p { 
    margin-bottom: 15px; 
    font-size: 1.05em; 
    color: #2c3e50; 
    line-height: 1.6; 
}

.tutorial-text b { 
    color: #d35400; 
}

.price-tag { 
    font-size: 1.6em; 
    color: #e74c3c; 
    font-weight: 900; 
    margin: 15px 0; 
    background: #fdf2f2; 
    padding: 15px; 
    border-radius: 12px; 
}

.old-price { 
    font-size: 0.7em; 
    text-decoration: line-through; 
    color: #95a5a6; 
    margin-left: 10px; 
    font-weight: normal; 
}

.pro-features { 
    text-align: left; 
    background: #fef9e7; 
    padding: 15px 15px 15px 35px; 
    border-radius: 12px; 
    margin: 15px 0; 
    color: #d35400; 
    font-weight: bold; 
    font-size: 1em; 
    border-left: 5px solid #f39c12; 
    line-height: 1.6; 
}

.pro-features li { 
    margin-bottom: 8px; 
}

.line-contact { 
    background: #e8f8f5; 
    border: 2px solid #a3e4d7; 
    border-radius: 12px; 
    padding: 15px; 
    margin-bottom: 15px; 
}

#license-input { 
    width: 100%; 
    padding: 15px; 
    border: 2px solid #ccc; 
    border-radius: 10px; 
    margin-bottom: 15px; 
    font-size: 1.2em; 
    text-align: center; 
    font-weight: bold; 
    background: #f9f9f9; 
    box-sizing: border-box; 
}

#license-input:focus { 
    border-color: #f39c12; 
    outline: none; 
    background: white; 
}

.unlock-btn { 
    width: 100%; 
    padding: 16px; 
    background: linear-gradient(to bottom, #f1c40f, #f39c12); 
    color: white; 
    border: none; 
    border-radius: 12px; 
    font-size: 1.3em; 
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 0 6px 0 #d35400; 
    transition: 0.1s; 
    letter-spacing: 1px; 
}

.unlock-btn:active { 
    transform: translateY(6px); 
    box-shadow: none; 
}

.roadmap-content { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.roadmap-item { 
    background: #f4ecf7; 
    border-left: 6px solid #9b59b6; 
    padding: 12px 15px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.roadmap-item h4 { 
    margin: 0 0 5px 0; 
    color: #2c3e50; 
    font-size: 1.15em; 
    font-weight: 900; 
}

.roadmap-item p { 
    margin: 0; 
    font-size: 0.95em; 
    color: #555; 
    line-height: 1.5; 
    font-weight: bold; 
}

/* ================= 錯題本與畢業區 ================= */
#review-screen, #graduated-screen { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #fdf2e9; 
    z-index: 1000; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

.review-header { 
    background: #c0392b; 
    color: white; 
    padding: 20px 25px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}

.review-header h2 { 
    margin: 0; 
    font-size: 1.6em; 
}

.close-review-btn { 
    background: rgba(0,0,0,0.2); 
    border: none; 
    color: white; 
    font-weight: bold; 
    padding: 10px 15px; 
    border-radius: 10px; 
    cursor: pointer; 
    font-size: 1em; 
    transition: 0.2s; 
}

.close-review-btn:active { 
    background: rgba(0,0,0,0.4); 
}

.review-info { 
    background: #fdebd0; 
    color: #d35400; 
    text-align: center; 
    padding: 15px; 
    font-size: 1.05em; 
    font-weight: bold; 
    border-bottom: 3px solid #f39c12; 
}

#review-list, #graduated-list { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.review-item { 
    background: white; 
    padding: 18px; 
    border-radius: 15px; 
    box-shadow: 0 6px 10px rgba(0,0,0,0.08); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-left: 8px solid #e74c3c; 
}

.review-lv-header { 
    background: linear-gradient(90deg, #34495e, #2c3e50); 
    color: #f1c40f; 
    padding: 10px 15px; 
    border-radius: 8px; 
    font-size: 1.1em; 
    margin: 15px 0 5px 0; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    border-left: 5px solid #f1c40f; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

.review-word-info { 
    flex: 1; 
    padding-right: 15px; 
}

.review-word { 
    font-size: 1.5em; 
    font-weight: 900; 
    color: #2c3e50; 
    margin-bottom: 8px; 
}

.error-count-badge { 
    background: #e74c3c; 
    color: white; 
    padding: 3px 10px; 
    border-radius: 12px; 
    font-size: 0.75em; 
    font-weight: bold; 
    margin-left: 10px; 
    vertical-align: middle; 
}

.review-mean { 
    color: #7f8c8d; 
    font-size: 1.15em; 
    font-weight: bold; 
}

.master-btn { 
    background: #27ae60; 
    color: white; 
    border: none; 
    padding: 14px 20px; 
    border-radius: 12px; 
    font-weight: bold; 
    font-size: 1.05em; 
    cursor: pointer; 
    box-shadow: 0 5px 0 #1e8449; 
    transition: 0.1s; 
    white-space: nowrap; 
}

.master-btn:active { 
    transform: translateY(5px); 
    box-shadow: none; 
}

.empty-review { 
    text-align: center; 
    color: #95a5a6; 
    font-size: 1.3em; 
    font-weight: bold; 
    margin-top: 60px; 
    line-height: 1.6; 
}

.forced-next-btn { 
    margin-top: 20px; 
    padding: 15px; 
    font-size: 1.2em; 
    font-weight: bold; 
    background-color: #34495e; 
    color: white; 
    border: none; 
    border-radius: 12px; 
    cursor: pointer; 
    width: 100%; 
    box-shadow: 0 5px 0 #2c3e50; 
    transition: 0.1s; 
}

.forced-next-btn:active { 
    transform: translateY(5px); 
    box-shadow: none; 
}

/* ================= 圖鑑卡片 ================= */
.graduated-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    padding-bottom: 20px; 
    padding-top: 10px; 
}

.graduated-card { 
    padding: 15px 10px; 
    border-radius: 16px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    text-align: center; 
    position: relative; 
    margin-top: 5px; 
}

.graduated-lv-badge { 
    position: absolute; 
    top: -12px; 
    left: -5px; 
    background: #34495e; 
    color: white; 
    font-size: 0.75em; 
    font-weight: bold; 
    padding: 4px 10px; 
    border-radius: 10px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

.graduated-word { 
    font-size: 1.3em; 
    font-weight: 900; 
    color: #2c3e50; 
    margin-bottom: 5px; 
    word-break: break-word; 
}

.graduated-meaning { 
    font-size: 0.85em; 
    color: #7f8c8d; 
    font-weight: bold; 
    margin-bottom: 10px; 
    line-height: 1.3; 
}

.graduated-star-badge { 
    font-size: 0.85em; 
    font-weight: bold; 
    padding: 4px; 
    border-radius: 8px; 
    background: white; 
    color: #333; 
    margin-bottom: 8px; 
}

.btn-revive { 
    width: 100%; 
    background: #e74c3c; 
    color: white; 
    border: none; 
    padding: 8px; 
    border-radius: 10px; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 0.85em; 
    box-shadow: 0 3px 0 #c0392b; 
    transition: 0.1s; 
}

.btn-revive:active { 
    transform: translateY(3px); 
    box-shadow: none; 
}

/* ================= Toast 通知與動效 ================= */
#game-toast { 
    position: fixed; 
    top: 10%; 
    left: 50%; 
    transform: translateX(-50%); 
    color: white; 
    padding: 12px 30px; 
    border-radius: 30px; 
    font-size: 1.1em; 
    font-weight: bold; 
    z-index: 9999; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, transform 0.3s; 
    text-align: center; 
    white-space: nowrap; 
    pointer-events: none; 
}

#game-toast.toast-show { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(-50%) translateY(20px); 
}

#game-toast.toast-error { 
    background: #c0392b; 
    border: 2px solid #e74c3c; 
}

#game-toast.toast-success { 
    background: #27ae60; 
    border: 2px solid #2ecc71; 
}

#game-toast.toast-info { 
    background: #2980b9; 
    border: 2px solid #3498db; 
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.shake-animation { 
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; 
}

.floating-text { 
    position: absolute; 
    font-weight: 900; 
    font-size: 2em; 
    pointer-events: none; 
    animation: floatUpAndFade 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; 
    z-index: 9999; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 5px rgba(255,255,255,0.8); 
}

@keyframes floatUpAndFade { 
    0% { transform: translateY(0) scale(0.5); opacity: 0; } 
    15% { transform: translateY(-20px) scale(1.2); opacity: 1; } 
    80% { transform: translateY(-80px) scale(1); opacity: 1; } 
    100% { transform: translateY(-100px) scale(1); opacity: 0; } 
}

@keyframes chromaGlow { 
    0% { box-shadow: 0 0 10px #ff3b3b, inset 0 0 10px #ff3b3b; border-color: #ff3b3b; } 
    33% { box-shadow: 0 0 10px #3498db, inset 0 0 10px #3498db; border-color: #3498db; } 
    66% { box-shadow: 0 0 10px #f1c40f, inset 0 0 10px #f1c40f; border-color: #f1c40f; } 
    100% { box-shadow: 0 0 10px #ff3b3b, inset 0 0 10px #ff3b3b; border-color: #ff3b3b; } 
}

.chroma-card { 
    animation: chromaGlow 3s linear infinite !important; 
    background: linear-gradient(135deg, #fffbea, #ffffff) !important; 
    transform: scale(1.03); 
    z-index: 10; 
}

.chroma-card .dex-word-title { 
    background: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71, #3498db, #9b59b6); 
    background-size: 200% auto; 
    -webkit-text-fill-color: transparent; 
    animation: flowColors 3s linear infinite; 
}

@keyframes flowColors { 
    to { background-position: 200% center; } 
}

/* ================= 抽卡 (Gacha) 與動畫 ================= */
#gacha-modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    z-index: 25000 !important; 
}

#gacha-result-modal:not(.hidden) { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
}

#gacha-result-modal .modal-content { 
    position: relative !important; 
    top: auto !important; 
    left: auto !important; 
    transform: none !important; 
    margin: 0 !important; 
    width: 90% !important; 
    max-width: 500px !important; 
    max-height: 80vh !important; 
    overflow-y: auto !important; 
    padding: 20px !important; 
    border-radius: 20px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
    text-align: center; 
}

#gacha-results-grid { 
    width: 100% !important; 
    display: grid !important; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 12px !important; 
    margin-top: 10px; 
}

.gacha-result-item { 
    background: #f8f9fa; 
    border-radius: 12px; 
    padding: 10px 5px; 
    text-align: center; 
    border: 1px solid #eee; 
}



.egg-panic-grow { 
    animation: eggPanickingAndGrowing 2.8s ease-in-out forwards; 
    transform-origin: center !important; 
}

/* style.css */

/* ✨ 耀眼光芒 + 螢幕爆炸版 CSS 動畫 */
/* style.css */

/* ✨ 溫暖香檳金過場动画 - 降低亮度、保護眼睛版 */
@keyframes eggPanickingAndGrowing { 
    0%   { transform: scale(1) rotate(0deg); opacity: 1; filter: none; } 
    /* ... 0%-80% 保持溫和顫動 + 放大 ... */
    5%   { transform: scale(1.1) rotate(-5deg); } 
    10%  { transform: scale(1.2) rotate(5deg); } 
    15%  { transform: scale(1.3) rotate(-7deg); } 
    20%  { transform: scale(1.5) rotate(7deg); } 
    25%  { transform: scale(1.7) rotate(-8deg); } 
    30%  { transform: scale(1.9) rotate(8deg); } 
    35%  { transform: scale(2.1) rotate(-10deg); } 
    40%  { transform: scale(2.3) rotate(10deg); } 
    45%  { transform: scale(2.5) rotate(-10deg); } 
    50%  { transform: scale(2.8) rotate(10deg); } 
    55%  { transform: scale(3.1) rotate(-12deg); } 
    60%  { transform: scale(3.4) rotate(12deg); } 
    65%  { transform: scale(3.7) rotate(-12deg); } 
    70%  { transform: scale(4.0) rotate(12deg); } 
    80%  { transform: scale(4.8) rotate(0deg); filter: drop-shadow(0 0 10px rgba(241,196,15,0.5)); } 

    /* 🌟 85%-100%: 關鍵轉折！開始爆發溫暖金光 (不再使用純白) */
    85%  { 
        transform: scale(6.0) rotate(0deg); 
        opacity: 1; 
        /* 溫和的金色光暈，最高亮度大幅降低 (原本亮度3 -> 現在1.8) */
        filter: brightness(1.8) drop-shadow(0 0 30px #f39c12); 
    } 
    90%  { 
        transform: scale(9.0) rotate(0deg); 
        opacity: 1; 
        /* 轉向香檳金，亮度保底 (原本亮度20+ -> 現在3) */
        filter: brightness(3.0) sepia(0.8) hue-rotate(0deg) blur(2px) drop-shadow(0 0 60px #e67e22); 
    } 
    95%  { 
        /* 金蛋擴張，融入溫暖琥珀色光芒中，不再是模糊的死白 */
        transform: scale(15.0) rotate(0deg); 
        opacity: 0.9; 
        filter: brightness(3.5) sepia(0.9) blur(10px); 
    } 
    100% { 
        /* 最終狀態：金蛋徹底化作純白光芒覆蓋全螢幕，然後 vanishing */
        transform: scale(25.0) rotate(0deg); 
        opacity: 0; 
        /* 降低最終模糊度和尺寸，減少視覺衝擊 */
        filter: brightness(4.0) blur(30px); 
    } 
}

.gacha-explosion-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 20000; 
    pointer-events: none; 
    opacity: 0; 
}

.gacha-flash-effect { 
    animation: explosionFlash 0.3s ease-out forwards; 
}

@keyframes explosionFlash { 
    0% { opacity: 0; } 
    50% { opacity: 1; background-color: white; } 
    100% { opacity: 0; } 
}

/* ================= 系統機制 (iOS, 兒童模式) ================= */
#ios-install-modal { 
    position: fixed !important; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.8); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 20000 !important; 
}

.ios-prompt-box { 
    background: white; 
    padding: 25px; 
    border-radius: 20px; 
    width: 80%; 
    max-width: 350px; 
    text-align: center; 
    border: 4px solid #3498db; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.ios-prompt-box h3 { 
    color: #2980b9; 
    margin-top: 0; 
    font-size: 1.4em; 
}

.ios-prompt-box p { 
    color: #34495e; 
    font-weight: bold; 
    line-height: 1.5; 
}

.ios-prompt-box button { 
    margin-top: 15px; 
    padding: 12px 20px; 
    border-radius: 12px; 
    border: none; 
    color: white; 
    font-weight: bold; 
    font-size: 1.1em; 
    cursor: pointer; 
    width: 100%; 
}

body.kids-mode-active #energy-container { 
    display: none !important; 
}

/* ================= 手機/平板 RWD 適配 (橫向按鈕優化版) ================= */
@media (max-width: 1024px), (orientation: portrait) {
    
    #game-container { 
        width: 100%; /* 已修正：避免超出螢幕 */
        height: 100%; 
        max-width: none; max-height: none; 
        border: none; border-radius: 0; 
        display: flex; flex-direction: column; 
    }
    
    #game-body { 
        flex: none; flex-direction: column; 
        height: calc(100% - 60px) !important; 
        overflow: hidden; 
    }
    
    .hidden-desktop { display: flex; }
    #mobile-nav { 
        height: 60px; background: #3e2723; width: 100%; z-index: 100; 
        box-shadow: 0 -4px 10px rgba(0,0,0,0.4); flex-shrink: 0; 
    }
    
    .nav-btn { 
        flex: 1; background: #5d4037; color: #bdc3c7; border: none; 
        font-size: 1.1em; font-weight: bold; cursor: pointer; 
        transition: 0.2s; border-radius: 15px 15px 0 0; margin: 0 5px; 
    }
    .nav-btn.active { background: #f39c12; color: white; box-shadow: inset 0 -4px 0 #d35400; }

    #sidebar { width: 100%; min-width: 100%; height: 100%; border: none; padding: 15px 20px; overflow-y: auto; }
    .user-header { margin-bottom: 5px !important; }
    .pig-avatar-container { width: 70px !important; height: 70px !important; }
    .epic-title { font-size: 1.6em; }
    #quiz-panel { margin: 5px 0 !important; }
    .tag { line-height: 1.4 !important; margin-bottom: 5px; }
    #word-display { font-size: 1.8em !important; margin: 8px 0 !important; }
    #options-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    #options-grid button { padding: 10px 8px !important; font-size: 1em !important; }
    
    #farm-viewport { width: 100%; height: 100%; border-radius: 0; position: relative; }
    
    /* --- 🚀 核心改動：底部按鈕一列式排版 --- */

    #seed-selection-bar { 
        bottom: 15px !important; 
        left: 15px !important; 
        z-index: 101 !important;
        width: 65px !important; 
        height: 65px !important; 
        pointer-events: none; /* 解決擋住按鈕的問題 */
    }
    #seed-selection-bar * { pointer-events: auto; }

    #quick-actions { 
        bottom: 15px !important; 
        left: 90px !important; 
        right: 15px !important; 
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        z-index: 100 !important;
        pointer-events: none; 
    }

    .quick-btn { 
        flex: 1 !important; 
        height: 50px !important; 
        font-size: 1em !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 12px !important;
        justify-content: center !important; 
        gap: 5px !important; 
        pointer-events: auto; 
    }

    #pro-upgrade-btn { 
        top: auto !important; 
        bottom: 80px !important; 
        left: 15px !important; 
        padding: 10px 15px !important; 
        font-size: 0.95em !important; 
        z-index: 100 !important; 
    }
    
    #marquee-container { display: none !important; }

    /* --- 第一與第二組整合：頂部按鈕 --- */
    #ui-overlays { 
        top: 15px !important; 
        left: auto !important;   
        right: 15px !important;  
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important; 
        gap: 8px !important;
        transform: none !important;
    }

    .overlay-btn { 
        padding: 8px 12px !important; 
        font-size: 0.85em !important; 
        flex: none !important; 
    }
}

@media (max-width: 480px) {
    /* 極限手機版登入畫面 */
    #login-screen { 
        padding-bottom: 90px !important; 
    }
    
    .login-box { 
        padding: 15px 20px; 
        margin: 10px auto; 
        max-height: calc(100vh - 120px) !important; 
    }
    
    #login-pet-img { 
        width: 55px; 
        height: auto !important; 
        aspect-ratio: 1 / 1; 
        margin-bottom: 0; 
        display: block; 
        margin-left: auto; 
        margin-right: auto; 
    }
    
    .epic-title { font-size: 1.4em; margin: 5px 0; line-height: 1.2; }
    .subtitle { font-size: 0.65em; }
    .device-hint { display: none; }
    .game-highlights { font-size: 0.8em; padding-left: 20px; margin: 8px 0; }
    .game-highlights li { margin-bottom: 3px; }
    
    #auth-form-area { margin-bottom: 10px; }
    #auth-form-area input { padding: 8px; margin-bottom: 6px; }
    .start-btn, .future-btn, button[onclick="showTutorial()"] { padding: 10px !important; margin-top: 8px !important; font-size: 1em !important; }
    .author-tag { margin-top: 10px; font-size: 0.7em; }
    
    .paywall-box { width: 92% !important; padding: 20px 15px !important; max-height: 95vh !important; display: flex; flex-direction: column; justify-content: center; }
    .paywall-box h3 { font-size: 1.3em !important; margin-bottom: 5px !important; }
    .price-tag { font-size: 1.2em !important; padding: 10px !important; margin: 8px 0 !important; }
    .pro-features { padding: 10px 10px 10px 25px !important; margin: 8px 0 !important; font-size: 0.85em !important; }
    .pro-features li { margin-bottom: 5px !important; }
    .line-contact { padding: 8px !important; margin-bottom: 8px !important; }
    .line-contact img { width: 80px !important; }
    .line-contact p { font-size: 0.85em !important; margin: 3px 0 !important; }
    #license-input { padding: 10px !important; margin-bottom: 10px !important; font-size: 1em !important; height: 45px !important; }
    #paywall-modal .unlock-btn { padding: 12px !important; font-size: 1.1em !important; height: 50px !important; margin-bottom: 0 !important; }
}

@media (min-width: 480px) {
    /* 桌機與平版：擴展 Gacha 網格 */
    #gacha-result-list { 
        grid-template-columns: repeat(5, 1fr); 
    }
    
    #gacha-results-grid { 
        grid-template-columns: repeat(5, 1fr) !important; 
    }
}


/* ============================================================
   🚀 最終版 UI 佈局：全設備自動避讓與置左對齊
   ============================================================ */

/* 1. 電腦版預設 (螢幕寬度 > 1024px) */
#ui-overlays { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    left: auto;  /* 👈 加上這行，強制取消原本的 left 設定 */
    display: flex; 
    flex-direction: row; 
    gap: 12px; 
    z-index: 50; 
    transition: all 0.4s ease-out; 
}

/* 2. 電腦版 - 當升級專業版後 (黃色按鈕消失) */
body.is-pro #ui-overlays { 
    right: 20px; 
    left: auto; /* 確保在專業版狀態下依然維持靠右 */
}

/* 4. 極限小畫面 (寬度 < 480px) */
@media (max-width: 480px) {
    #ui-overlays {
        gap: 5px !important;
    }
    .overlay-btn {
        padding: 8px 6px !important;
        font-size: 0.8em !important;
    }
}

/* 4. 專業版按鈕：移至右上角 */
#pro-upgrade-btn { 
    top: 15px !important; /* 改靠上 */
    bottom: auto !important; 
    left: auto !important; 
    left: 15px !important; /* 改靠右 */
    padding: 8px 12px !important; 
    font-size: 0.9em !important; 
    z-index: 100 !important; 
}

/* ...上面是你原本的程式碼... */

/* 4. 專業版按鈕：移至右上角 */
#pro-upgrade-btn { 
    top: 15px !important; /* 改靠上 */
    bottom: auto !important; 
    left: auto !important; 
    left: 15px !important; /* 改靠右 */
    padding: 8px 12px !important; 
    font-size: 0.9em !important; 
    z-index: 100 !important; 
}

/* 👇 直接把新的程式碼接在最下面 👇 */
/* 確保一鍵播種/收成區域絕對不被透明遮罩擋住 */
#quick-actions {
    z-index: 1000 !important;
    pointer-events: auto !important;
}

@media (max-width: 1024px), (orientation: portrait) {
    #quick-actions {
        /* 覆寫原本可能導致失效的 pointer-events: none */
        pointer-events: auto !important; 
    }
}