/* ============================================================ */
/* style.css - 寶可夢學習宇宙 全域樣式                           */
/* ============================================================ */

/* ========== 🛡️ 第一道防護：CSS 封印滑動行為 ========== */
/* 徹底封印手機瀏覽器的「下拉重新整理」與「邊緣滑動返回」      */
html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
}

/* ========== 基礎樣式 ========== */
body {
    font-family: "Microsoft JhengHei", "Heiti TC", sans-serif;
    background-color: #f0f9ff;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* ========== 寶可夢卡片陰影 ========== */
.poke-card-img { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.2)); }

/* ========== 按鈕按壓效果 ========== */
.btn-press:active { transform: scale(0.92); transition: transform 0.1s; }

/* ========== 隱藏捲軸 ========== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ========== 載入動畫 ========== */
.loader { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========== 錯誤遮罩 ========== */
#error-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fee2e2; z-index: 9999; padding: 20px; overflow: auto; color: #b91c1c; }

/* ========== 標題文字 ========== */
.title-poke { color: #3b82f6; text-shadow: 2px 2px 0px #fff; }
.title-master { color: #f97316; text-shadow: 2px 2px 0px #fff; }

/* ========== 傳說神獸金框動效 ========== */
.legendary-border { border: 4px solid #fbbf24; box-shadow: 0 0 15px #fbbf24, 0 0 5px #f59e0b inset; animation: goldPulse 2s infinite; }
@keyframes goldPulse { 0% { box-shadow: 0 0 10px #fbbf24; border-color: #fbbf24; } 50% { box-shadow: 0 0 25px #fcd34d; border-color: #fcd34d; } 100% { box-shadow: 0 0 10px #fbbf24; border-color: #fbbf24; } }

/* ========== PWA 安裝橫幅動效 ========== */
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#pwa-install-banner { animation: slideDown 0.4s ease-out; }

/* ========== PWA standalone 模式 ========== */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}