/**
 * 全站共用的載入指示元件
 *
 * 這兩組原本分別住在 pages/builds.css 與 pages/batch-build/loading.css，
 * 但實際使用者橫跨多頁——其中 game-carousels / roles / games 不在
 * js/utils/page-styles.js 的 PAGES_WITH_STYLES 內，永遠不會載入頁面樣式，
 * 只能靠 idle 預取碰運氣（requestIdleCallback，timeout 4 秒）。在預取完成前
 * 觸發遮罩會渲染出無樣式的全屏 div。故提升為全域樣式表。
 *
 * 載入位置見 src/lib/assets.ts 的 ADMIN_STYLES：排在 admin-* 元件層最後、
 * responsive 與頁面樣式之前，頁面樣式仍可覆寫此處的定義。
 *
 * @keyframes spin 由 admin-base.css 提供，不在此重複定義。
 */

/* ==================== 刷新遮罩 ==================== */
/* 使用者：brands / builds / cdn / env / game-carousels / game-versions /
   games / roles / users（皆透過 js/utils/helpers.js 的 startRefresh 切換 .active） */

.refresh-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(18, 18, 18, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 收起時稍慢：資料到齊的那一刻，底下的新內容從遮罩後方浮現，而不是一閃換掉 */
    transition:
        opacity var(--motion-medium) var(--ease-out-quart),
        visibility 0s linear var(--motion-medium);
    border-radius: inherit;
}

.refresh-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--motion-fast) var(--ease-out-quart),
        visibility 0s;
}

.light-theme .refresh-overlay {
    background-color: rgba(240, 242, 245, 0.9);
}

.refresh-overlay i {
    font-size: 2.5rem;
    color: #d4a520;
    animation: spin 1s linear infinite;
    /* 轉圈圖示隨遮罩出現時由小放大（scale 與 spin 的 transform 疊加，互不干擾） */
    scale: 0.6;
    transition: scale var(--motion-spring) var(--ease-spring);
}

.refresh-overlay.active i {
    scale: none;
}

.refresh-overlay span {
    font-size: 0.9375rem;
    color: #b0b0b0;
    font-weight: 500;
}

.light-theme .refresh-overlay span {
    color: #666;
}

/* ==================== 環形載入動畫 ==================== */
/* 使用者：batch-build / builds / game-carousels / game-versions /
   one-click-deploy / source-code（各頁自備定位用的外層遮罩容器） */

.batch-build-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.loading-spinner-ring {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
}

.spinner-ring:nth-child(1) {
    border-top-color: #d4a520;
    animation: spin 1.5s linear infinite;
}

.spinner-ring:nth-child(2) {
    width: 85%;
    height: 85%;
    border-right-color: #f5c542;
    animation: spin 1.2s linear infinite reverse;
}

.spinner-ring:nth-child(3) {
    width: 70%;
    height: 70%;
    border-bottom-color: #b8860b;
    animation: spin 1s linear infinite;
}

.loading-icon {
    font-size: 2rem;
    color: #d4a520;
    animation: rocketPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes rocketPulse {
    0%, 100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) translateY(-5px);
        opacity: 0.8;
    }
}

.light-theme .loading-icon {
    color: #8b6914;
}

/* 載入文字 */
.loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.loading-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}

.light-theme .loading-title {
    color: #1e293b;
}

.loading-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loading-subtitle::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #64748b;
    border-radius: 50%;
    animation: loadingDots 1.5s ease-in-out infinite;
}

@keyframes loadingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ==================== 骨架列（載入佔位） ==================== */
/*
 * 使用者：儀表板的「熱門遊戲」與「近期異動」——兩區的節點在 shell 首屏就渲染，
 * 資料則要等各自的 API 回來。原本兩區都只放一行「載入中…」，卡片高度僅一列，
 * 資料到齊後撐成 5／10 列，把儀表板下半部整個往下推。改用等高的骨架列後
 * 載入前後高度接近，不再有版面跳動，空白期也看得出「這裡會有一份清單」。
 *
 * 只有初始狀態用得到：重新整理（切回儀表板、操作後重抓）採「失敗時保留舊值」
 * 策略，不會退回載入中，所以骨架只寫在 index.html，JS 端無需重建。
 */

.dashboard-skeleton {
    /* 為 .dashboard-skeleton-sr 的絕對定位建立容器，免得它跑到版面外 */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 讀屏器用的狀態文字：骨架列本身無語意，這一行才播得出「載入中」 */
.dashboard-skeleton-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dashboard-skeleton-row {
    /* 實測 .dashboard-play-item 為 48px（名稱＋代號＋橫條疊起來比 40px 的縮圖高），
       列距同 .dashboard-play-list 的 0.5rem，載入前後高度才對得上 */
    position: relative;
    overflow: hidden;
    height: 3rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.04);
}

/* 亮帶由左掃到右。原本是補間 background-position，每一幀都要重繪整列；
   改成移動偽元素（transform），只在合成層位移。每列稍微錯開起跑，
   整片骨架像一道光斜斜掃過，而不是十列同步閃爍 */
.dashboard-skeleton-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
    translate: -100% 0;
    animation: motion-shimmer 1.4s var(--ease-in-out-quart) infinite;
}

.dashboard-skeleton-row:nth-child(3)::after { animation-delay: 60ms; }
.dashboard-skeleton-row:nth-child(4)::after { animation-delay: 120ms; }
.dashboard-skeleton-row:nth-child(5)::after { animation-delay: 180ms; }
.dashboard-skeleton-row:nth-child(6)::after { animation-delay: 240ms; }
.dashboard-skeleton-row:nth-child(n + 7)::after { animation-delay: 300ms; }

.light-theme .dashboard-skeleton-row {
    background-color: rgba(0, 0, 0, 0.05);
}

.light-theme .dashboard-skeleton-row::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 100%
    );
}

/* 近期異動一列比熱門遊戲矮（沒有 2.5rem 縮圖），列距也較密 */
.dashboard-skeleton-audit {
    gap: 0.25rem;
}

/* 實測 .dashboard-audit-item 為 41px（含 1px 分隔線），扣掉 0.25rem 列距 */
.dashboard-skeleton-audit .dashboard-skeleton-row {
    height: 2.3rem;
}

/* 減少動態偏好下留住佔位高度，只拿掉掃光 */
@media (prefers-reduced-motion: reduce) {
    .dashboard-skeleton-row::after {
        animation: none;
        display: none;
    }
}