/* KanColleAuto 全站自定义样式（Tailwind 之上的补充） */

body {
    font-family: "Microsoft Yahei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
    /* 避免出现/消失滚动条导致的横向跳动 */
    scrollbar-gutter: stable;
}

/* Valine 评论区与上方内容留出间距 */
#vcomments {
    margin-top: 1.5rem;
}

/* ---- 浮动提示（登录等页面 AJAX 反馈） ---- */
.alert-float {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    max-width: 500px;
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.alert-float.slide-out {
    animation: slideOut 0.3s ease-in;
}
@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0);      opacity: 1; }
    to   { transform: translateX(400px); opacity: 0; }
}

/* ---- 按钮加载态 ---- */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}
.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Turnstile 小部件居中容器 ---- */
.turnstile-row {
    display: flex;
    justify-content: center;
    overflow: visible;
}
@media (max-width: 360px) {
    .turnstile-row {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}