/* ============================================================
 * Dujiao-Next 二次元樱花主题 overlay v2
 * 经 nginx sub_filter 注入，无需改动官方二进制
 * v2: 配色对齐 upload.html 原型 (#e84f83 系），圆角加大，
 *     主按钮粉渐变胶囊，价格深粉，骨架屏/loading 粉化
 * ============================================================ */

/* ---------- 主色调：原型粉 #e84f83 ---------- */
:root {
    --ui-accent: #e84f83 !important;
    --ui-accent-hover: #b92e5f !important;
    --ui-accent-soft: rgba(232, 79, 131, 0.14) !important;
    --ui-accent-warm: #e84f83 !important;
    --ui-accent-warm-hover: #b92e5f !important;
    --ui-accent-warm-soft: rgba(232, 79, 131, 0.12) !important;
    --ui-bg-page: #fff9fb !important;
    --ui-bg-soft: #fdeef4 !important;
    --ui-bg-muted: #f9dce7 !important;
    --ui-bg-elevated: #ffffff !important;
    --ui-bg-overlay: rgba(255, 249, 251, 0.88) !important;
    --ui-bg-overlay-strong: rgba(255, 249, 251, 0.95) !important;
    --ui-border: rgba(232, 79, 131, 0.16) !important;
    --ui-border-strong: rgba(232, 79, 131, 0.32) !important;
    --ui-focus-ring: rgba(232, 79, 131, 0.30) !important;
    --ui-price-primary: #b92e5f !important;
    /* 圆角加大：二次元柔和感 */
    --ui-radius-sm: .625rem !important;
    --ui-radius-md: .875rem !important;
    --ui-radius-lg: 1.25rem !important;
    --ui-radius-xl: 1.75rem !important;
    /* 阴影带粉调 */
    --ui-shadow-card: 0 24px 52px -32px rgba(185, 46, 95, 0.35) !important;
    --ui-shadow-soft: 0 12px 30px -24px rgba(185, 46, 95, 0.30) !important;
}

/* ---------- 樱花天幕背景（::before 固定层：iOS Safari 不支持 background-attachment:fixed） ---------- */
body {
    background-color: #fff9fb !important;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #fff9fb url('/anime/anime-bg.jpg') center top / cover no-repeat;
    pointer-events: none;
}

#app {
    background-color: transparent !important;
}

/* ---------- 主按钮：粉渐变胶囊 ---------- */
.bg-primary {
    background: linear-gradient(135deg, #e84f83, #b92e5f) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(232, 79, 131, 0.28) !important;
}
button.bg-primary,
a.bg-primary,
[role="button"].bg-primary {
    border-radius: 999px !important;
}
button.bg-primary:hover,
a.bg-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 24px rgba(232, 79, 131, 0.38) !important;
}
button.bg-primary:active,
a.bg-primary:active {
    transform: scale(0.97);
}

/* ---------- 输入框聚焦：粉色光环 ---------- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(232, 79, 131, 0.35) !important;
    outline-offset: 1px;
    border-color: #e84f83 !important;
}

/* ---------- 骨架屏：粉色微光 ---------- */
.theme-skeleton {
    background: linear-gradient(90deg, #f9dce7 25%, #fdeef4 50%, #f9dce7 75%) !important;
    background-size: 200% 100% !important;
}

/* ---------- loading 旋转体：粉色 ---------- */
.animate-spin {
    color: #e84f83 !important;
    border-top-color: #e84f83 !important;
}

/* ---------- 徽章/角标：粉色系 ---------- */
.badge-hot,
[class*="badge"][class*="hot" i] {
    background: linear-gradient(135deg, #e84f83, #b92e5f) !important;
    color: #fff !important;
}

/* ---------- 滚动条：粉色细条 ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #fdeef4;
}
::-webkit-scrollbar-thumb {
    background: #f3b8cd;
    border-radius: 8px;
    border: 2px solid #fdeef4;
}
::-webkit-scrollbar-thumb:hover {
    background: #e84f83;
}

/* ---------- 选中文本：粉色 ---------- */
::selection {
    background: rgba(232, 79, 131, 0.25);
}

/* ============================================================
 * 看板娘（v1 保留）
 * ============================================================ */
.anime-mascot {
    position: fixed;
    top: 42%;
    z-index: 1050;
    width: 168px;
}

.anime-mascot.right { right: 16px; }
.anime-mascot.left { left: 16px; }

.mascot-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid #ffd3e3;
    box-shadow: 0 10px 32px rgba(232, 79, 131, 0.28);
}

.mascot-card img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    object-position: top center;
    display: block;
    cursor: pointer;
    animation: mascot-float 4.5s ease-in-out infinite;
}

.anime-mascot.left .mascot-card img { animation-delay: 2.2s; }

@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mascot-caption {
    text-align: center;
    font-size: 13px;
    color: #b92e5f;
    font-weight: 600;
    padding: 8px 6px 10px;
    background: linear-gradient(180deg, rgba(255,240,246,0), #fdeef4);
}

.mascot-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #8a8a93;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.mascot-close:hover {
    background: #e84f83;
    color: #fff;
}

/* 点击看板娘弹出的说话气泡 */
.mascot-bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #fff;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 14px;
    border-radius: 14px;
    border: 2px solid #ffd3e3;
    box-shadow: 0 6px 18px rgba(232, 79, 131, 0.25);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 5;
}

.mascot-bubble.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mascot-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: #ffd3e3;
}

/* ---------- 右下角悬浮按钮组（v1 保留） ---------- */
.anime-fab {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fab-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #e84f83, #b92e5f);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(232, 79, 131, 0.35);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-btn:hover { transform: scale(1.12); }
.fab-btn:active { transform: scale(0.95); }

/* 音乐播放中的呼吸动画 */
.fab-btn.playing {
    animation: fab-pulse 1.2s ease-in-out infinite;
}

@keyframes fab-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(232, 79, 131, 0.35); }
    50% { transform: scale(1.12); box-shadow: 0 6px 22px rgba(232, 79, 131, 0.65); }
}

/* 移动端隐藏看板娘，保留悬浮按钮 */
@media (max-width: 1280px) {
    .anime-mascot { display: none; }
}