/**
 * 用户名悬浮 Steam 卡片。
 * 卡片由 steam-card.js 动态插入 body 末尾，避免被模板父容器的 overflow: hidden 裁掉。
 */

/* 触发区：加下划虚线暗示可悬浮，不改变原有排版。 */
.steam-card-trigger {
    position: relative;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: help;
}

a.steam-card-trigger:hover {
    text-decoration-style: dotted;
}

.steam-card-popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1080; /* 高于 Argon 的 navbar(1030) 与 modal-backdrop(1040) */
    width: 400px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(50, 50, 93, 0.1);
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none; /* 卡片自身不拦鼠标，避免遮住触发区导致闪烁 */
}

.steam-card-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 图片区：按卡片真实尺寸 400x150 占位，图片加载期间高度不跳动。 */
.steam-card-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 150;
    border-radius: 6px;
    overflow: hidden;
    background: #f6f9fc;
}

/* 不支持 aspect-ratio 的浏览器退回内边距撑高。 */
@supports not (aspect-ratio: 400 / 150) {
    .steam-card-frame {
        height: 0;
        padding-bottom: 37.5%;
    }
}

.steam-card-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.steam-card-popover.is-loaded .steam-card-frame img {
    opacity: 1;
}

/* 加载动画：图片就绪或失败后由 JS 隐藏。 */
.steam-card-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid rgba(50, 50, 93, 0.15);
    border-top-color: #5e72e4;
    border-radius: 50%;
    animation: steamCardSpin .8s linear infinite;
}

.steam-card-popover.is-loaded .steam-card-spinner,
.steam-card-popover.is-failed .steam-card-spinner {
    display: none;
}

@keyframes steamCardSpin {
    to {
        transform: rotate(360deg);
    }
}

/* 加载失败时给一句提示，不留空白卡片。 */
.steam-card-error {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.85rem;
    color: #8898aa;
}

.steam-card-popover.is-failed .steam-card-error {
    display: block;
}

/* ---- 夜间模式：跟随系统，与 sidebar.php / home.css 的做法一致 ---- */
@media (prefers-color-scheme: dark) {
    .steam-card-popover {
        background: #1f2937;
        border-color: #374151;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .steam-card-frame {
        background: #111827;
    }

    .steam-card-spinner {
        border-color: rgba(255, 255, 255, 0.15);
        border-top-color: #66c0f4;
    }

    .steam-card-error {
        color: #9ca3af;
    }
}

@media (prefers-reduced-motion: reduce) {
    .steam-card-popover {
        transition: none;
        transform: none;
    }

    .steam-card-popover.is-visible {
        transform: none;
    }

    .steam-card-frame img {
        transition: none;
    }

    .steam-card-spinner {
        animation-duration: 2s;
    }
}

/* 窄屏不展示：悬浮交互在触屏上没有意义，也放不下 400px。 */
@media (max-width: 575px) {
    .steam-card-popover {
        display: none;
    }

    .steam-card-trigger {
        text-decoration-line: none;
        cursor: inherit;
    }
}