/**
 * 猫咪小屋占卜 - 全局样式文件
 * 
 * 第一阶段：基础架构、全局样式、通用组件、基础动画、移动端适配
 * 
 * 配色规范：
 * - 主色：奶白 #FFF9F2、浅橘 #FFE6D3、淡粉 #FFDFE6、浅灰蓝 #D6E8F5
 * - 辅助色：浅棕 #D9C7B8、奶黄 #FFF3C8
 * - 禁用深色、纯黑、暗沉冷色调
 * - 所有按钮使用纯纯色底色，禁止渐变、渐变阴影
 */

/* ==================== 全局基础样式 ==================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--theme-bg);
    color: var(--theme-text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* 禁止横向滚动，锁定竖屏 */
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==================== 视图切换样式 ==================== */

.page-view {
    display: none;
    min-height: 100vh;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    opacity: 0;
}

.page-view.active {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

/* 页面淡入淡出动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ==================== 顶部状态栏 ==================== */

.status-bar {
    padding: 12px 16px;
    background-color: var(--theme-bg);
    border-radius: 0 0 24px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.cat-avatar-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--theme-primary);
}

.cat-name-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
}

.fish-count-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--theme-secondary);
    border-radius: 20px;
    font-size: 14px;
    color: var(--theme-text);
}

.fish-count-num {
    font-weight: 600;
    color: var(--theme-highlight);
}

/* ==================== 页面头部 ==================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--theme-bg);
    border-radius: 0 0 24px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.page-title {
    font-size: 18px;
    font-weight: 500;
    color: #8B6914;
}

/* ==================== 返回按钮 ==================== */

.back-btn {
    padding: 8px;
    background-color: var(--theme-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn:active {
    transform: scale(0.95);
    background-color: var(--theme-secondary);
}

.back-btn.hidden {
    display: none;
}

/* ==================== 通用按钮样式 ==================== */

/**
 * 按钮规范：
 * - 三种造型：猫爪、小鱼干、猫耳朵
 * - 纯纯色填充，无渐变色
 * - 点击有缩小回弹动效
 */

/* 猫爪造型按钮 */
.cat-paw-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    background-color: var(--theme-primary);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.cat-paw-btn:active {
    transform: scale(0.96);
}

.cat-paw-btn .btn-icon {
    margin-bottom: 8px;
}

.cat-paw-btn .btn-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text);
}

.cat-paw-btn .btn-sub {
    font-size: 12px;
    color: var(--theme-text-light);
    margin-top: 4px;
}

/* 小鱼干造型按钮 */
.fish-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background-color: #FFF3C8;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    color: #8B4513;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.fish-btn:active {
    transform: scale(0.96);
}

.fish-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fish-btn.disabled:active {
    transform: none;
}

/* 猫耳朵造型标签 */
.cat-ear-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--theme-primary);
    border: 2px solid var(--theme-border);
    border-radius: 20px 20px 8px 8px;
    font-size: 14px;
    color: var(--theme-text);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.cat-ear-tag:active {
    transform: scale(0.96);
}

.cat-ear-tag.active {
    background-color: var(--theme-secondary);
    color: var(--theme-highlight);
}

/* ==================== 输入框样式 ==================== */

.input-area {
    padding: 16px;
}

.cat-paw-input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--theme-primary);
    border-radius: 24px;
    padding: 4px;
}

.cat-paw-input {
    flex: 1;
    padding: 12px 16px;
    background-color: var(--theme-bg);
    border: none;
    border-radius: 20px;
    font-size: 14px;
    color: var(--theme-text);
    outline: none;
}

.cat-paw-input::placeholder {
    color: var(--theme-text-light);
}

.clear-input-btn {
    padding: 8px;
    background-color: var(--theme-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--theme-text-light);
    font-size: 12px;
}

/* ==================== 弹窗样式 ==================== */

/**
 * 弹窗规范：
 * - 超大圆角
 * - 简约柔光阴影
 * - 边角点缀简约小猫简笔画
 */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 320px;
    background-color: var(--theme-bg);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(217, 199, 184, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 8px;
    background-color: var(--theme-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:active {
    transform: scale(0.95);
}

/* ==================== 对话气泡样式 ==================== */

/**
 * 对话气泡规范：
 * - 云朵造型
 * - 纯色填充，无渐变
 */

.cloud-bubble {
    background-color: var(--theme-bg);
    border-radius: 24px;
    padding: 16px;
    position: relative;
    box-shadow: 0 4px 16px rgba(217, 199, 184, 0.2);
}

.cloud-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20px;
    width: 16px;
    height: 16px;
    background-color: var(--theme-bg);
    border-radius: 50%;
}

/* ==================== 卡牌基础样式 ==================== */

/**
 * 卡牌规范：
 * - 统一尺寸
 * - 大圆角
 * - 纯色边框
 * - 卡牌背面为爪印图案
 * - 无渐变效果
 */

.card-container {
    position: relative;
    cursor: pointer;
    perspective: 1000px;
    width: 140px;
    height: 200px;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s ease;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    background: none;
}

.card-back {
    background-color: var(--theme-primary);
    border-radius: 12px;
}

.card-front {
    transform: rotateY(180deg);
    border-radius: 12px;
}

.card-container.flipped .card-back {
    transform: rotateY(-180deg);
}

.card-container.flipped .card-front {
    transform: rotateY(0deg);
}

.card-back-pattern {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0;
}

.card-name,
.card-summary {
    display: none;
}

.draw-hint {
    text-align: center;
    color: var(--theme-text-light);
    font-size: 14px;
    margin-top: 24px;
}

.draw-confirm-btn {
    display: block;
    margin: 32px auto 0;
    animation: fadeInUp 0.3s ease;
}

.result-card-img {
    width: 160px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    border: none;
}

.three-card-result {
    margin-bottom: 32px;
}

.card-position {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-primary);
    margin-bottom: 12px;
    text-align: center;
}

/* 三牌布局 */
.three-card-area {
    padding: 40px 16px;
}

.three-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.three-card-area .card-container {
    width: 90px;
    height: 130px;
}

.card-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-label {
    font-size: 12px;
    color: var(--theme-text-light);
    margin-top: 8px;
}

/* ==================== 底部牌堆区域 ==================== */

.card-deck-area {
    position: fixed;
    top: 55%;
    left: 0;
    right: 0;
    padding: 20px 16px;
    z-index: 50;
}

.card-deck {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 320px;
    margin: 0 auto;
}

.deck-card {
    width: 45px;
    height: 65px;
    background-color: var(--theme-primary);
    border-radius: 6px;
    border: 1px solid var(--theme-border);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background-image: none;
    background-size: cover;
    background-position: center;
}

.deck-card::before {
    content: none;
}

.deck-card:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 4px 12px rgba(217, 199, 184, 0.4);
}

.deck-card:active {
    transform: translateY(-3px) scale(1.05);
}

.deck-card.selected {
    opacity: 0;
    transform: translateY(-30px);
}

.deck-hint {
    text-align: center;
    font-size: 12px;
    color: var(--theme-text-light);
    margin-top: 12px;
}

/* 抽牌飞入动画 */
@keyframes cardFlyUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-150px) scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-250px) scale(1);
        opacity: 0;
    }
}

.deck-card.flying {
    animation: cardFlyUp 0.6s ease-out forwards;
}

/* ==================== 加载动画样式 ==================== */

/**
 * 加载动画规范：
 * - 抱着毛线球转圈的卡通小猫
 * - 替代默认加载图标
 */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-bg);
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-cat {
    text-align: center;
}

.loading-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.loading-text {
    font-size: 14px;
    color: var(--theme-text-light);
    margin-top: 12px;
}

/* ==================== 漂浮动画 ==================== */

/**
 * 漂浮动画规范：
 * - 云朵、毛线球、小鱼干缓慢浮动
 * - 持续缓慢浮动
 */

.floating-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.floating-cloud {
    position: absolute;
    width: 80px;
    height: 40px;
    background-color: var(--theme-accent);
    border-radius: 50%;
    opacity: 0.6;
    animation: floatCloud 8s ease-in-out infinite;
}

.floating-yarn {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: var(--theme-secondary);
    border-radius: 50%;
    animation: floatYarn 6s ease-in-out infinite;
}

.floating-fish {
    position: absolute;
    width: 30px;
    height: 20px;
    background-color: #FFB347;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: floatFish 7s ease-in-out infinite;
}

@keyframes floatCloud {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(20px) translateY(-10px);
    }
}

@keyframes floatYarn {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    50% {
        transform: rotate(15deg) translateY(-15px);
    }
}

@keyframes floatFish {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(30px) rotate(10deg);
    }
}

/* ==================== 猫咪基础动效 ==================== */

/**
 * 猫咪动效规范：
 * - 眨眼
 * - 摇尾巴
 * - 抖动
 * - 蹭屏幕
 */

.main-cat-area {
    position: relative;
    padding: 40px 0;
}

.main-cat-image {
    width: 180px;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 20px;
    object-fit: contain;
    display: block;
}

.main-cat-image:active {
    transform: scale(1.05);
}

.main-cat-image.petting {
    animation: petShake 0.5s ease;
}

.main-cat-bubble {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 10px 14px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 220px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--theme-text);
    text-align: center;
    z-index: 10;
    animation: bubblePop 0.3s ease forwards;
    white-space: normal;
}

.main-cat-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

@keyframes bubblePop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes petShake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

/* 摇尾巴动画 */
@keyframes tailWag {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(20deg);
    }
}

/* 眨眼动画 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ==================== 翻牌动画 ==================== */

.card-container {
    transition: transform 0.6s ease;
}

/* 翻牌柔光闪光效果 */
.card-container.flipping::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    animation: flash 0.3s ease;
}

@keyframes flash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ==================== 飘落特效 ==================== */

.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1000;
}

.particle {
    position: absolute;
    background-color: var(--theme-secondary);
    opacity: 0.4;
    border-radius: 50%;
    animation: floatParticle 8s ease-in-out infinite;
}

.particle-1 {
    width: 8px;
    height: 8px;
    left: 20%;
    top: 30%;
}

.particle-2 {
    width: 6px;
    height: 6px;
    left: 60%;
    top: 50%;
    animation-delay: 2s;
}

.particle-3 {
    width: 10px;
    height: 10px;
    left: 80%;
    top: 20%;
    animation-delay: 4s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-50px) rotate(180deg);
        opacity: 0.8;
    }
}

.butterfly {
    position: absolute;
    animation: butterflyFly 12s ease-in-out infinite;
}

.butterfly-1 {
    width: 30px;
    height: 20px;
    left: 10%;
    top: 40%;
}

.butterfly-2 {
    width: 25px;
    height: 16px;
    left: 70%;
    top: 60%;
    animation-delay: 4s;
}

@keyframes butterflyFly {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -20px) rotate(10deg);
    }
    50% {
        transform: translate(60px, 0) rotate(0deg);
    }
    75% {
        transform: translate(30px, 20px) rotate(-10deg);
    }
}

/* ==================== 底部导航栏 ==================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 249, 242, 0.95);
    border-top: 1px solid var(--theme-primary);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 16px;
}

.nav-item:active {
    transform: scale(0.95);
}

.nav-item.active {
    background-color: var(--theme-primary);
}

.nav-icon {
    width: 24px;
    height: 24px;
}

.nav-text {
    font-size: 10px;
    color: var(--theme-text-light);
    margin-top: 2px;
}

.nav-item.active .nav-text {
    color: var(--theme-highlight);
}

/* ==================== ICP备案页脚 ==================== */

.icp-footer {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    text-align: center;
    padding: 6px 16px;
    font-size: 11px;
    color: var(--theme-text-light);
    z-index: 50;
    pointer-events: auto;
}

.icp-footer a {
    color: var(--theme-text-light);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.icp-footer a:active {
    opacity: 0.6;
}

/* ==================== 设置页面样式 ==================== */

.settings-content {
    padding: 16px 0;
}

.settings-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--theme-text);
    text-align: center;
    margin-bottom: 16px;
}

/* 配色切换区域 */
.theme-selector {
    margin-bottom: 24px;
}

.theme-title {
    font-size: 14px;
    color: var(--theme-text-light);
    margin-bottom: 12px;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background-color: var(--theme-bg);
    border: 2px solid var(--theme-primary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-option:active {
    transform: scale(0.96);
}

.theme-option.active {
    border-color: var(--theme-highlight);
    background-color: var(--theme-secondary);
}

.theme-preview {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.theme-name {
    font-size: 12px;
}

/* ==================== 卡牌皮肤选择器样式 ==================== */

.card-skin-selector {
    margin-bottom: 24px;
}

.card-skin-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.card-skin-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background-color: var(--theme-bg);
    border: 2px solid var(--theme-primary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-skin-option:active {
    transform: scale(0.96);
}

.card-skin-option.active {
    border-color: var(--theme-highlight);
    background-color: var(--theme-secondary);
}

.card-skin-option.locked {
    opacity: 0.6;
}

.card-skin-preview {
    width: 60px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
    border: 2px solid var(--theme-border);
}

.card-skin-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.card-skin-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-text);
    margin-bottom: 4px;
}

.card-skin-status {
    font-size: 10px;
    color: var(--theme-text-light);
}

.card-skin-selector-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background-color: var(--theme-bg);
    border-radius: 12px;
}

.skin-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
}

.card-skin-options-inline {
    display: flex;
    gap: 8px;
}

.card-skin-option-small {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: var(--theme-bg);
    border: 2px solid var(--theme-primary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-skin-option-small:active {
    transform: scale(0.96);
}

.card-skin-option-small.active {
    border-color: var(--theme-highlight);
    background-color: var(--theme-secondary);
}

.card-skin-option-small.locked {
    opacity: 0.6;
}

.card-skin-preview-small {
    width: 36px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--theme-border);
}

.card-skin-preview-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lock-overlay-small {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

/* 其他设置项 */
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--theme-bg);
    border-radius: 16px;
    margin-bottom: 8px;
}

.settings-label {
    font-size: 14px;
    color: var(--theme-text);
}

.toggle-btn {
    padding: 8px 16px;
    background-color: #E8E8E8;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: var(--theme-text-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn:active {
    transform: scale(0.96);
}

.toggle-btn.active {
    background-color: var(--theme-secondary);
    color: var(--theme-highlight);
}

.settings-info {
    padding: 8px 16px;
}

.settings-desc {
    font-size: 12px;
    color: var(--theme-text-light);
}

.danger-btn {
    padding: 8px 16px;
    background-color: #FFE4E1;
    border: 1px solid #FFB3B3;
    border-radius: 20px;
    font-size: 13px;
    color: #FF6B6B;
    cursor: pointer;
    transition: all 0.3s ease;
}

.danger-btn:active {
    transform: scale(0.96);
}

/* ==================== 签到页面样式 ==================== */

.signin-content {
    padding: 16px;
}

.calendar-section {
    background-color: var(--theme-bg);
    border-radius: 24px;
    padding: 16px;
}

.calendar-header {
    text-align: center;
    margin-bottom: 16px;
}

.month-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text);
}

.day-names {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    border-bottom: 1px solid var(--theme-primary);
}

.day-names span {
    font-size: 12px;
    color: var(--theme-text-light);
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--theme-text);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.day.signed {
    background-color: var(--theme-secondary);
    color: var(--theme-highlight);
}

.day.today {
    background-color: var(--theme-highlight);
    color: #FFF9F2;
    font-weight: 600;
}

.signin-streak {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.streak-badge {
    background-color: var(--theme-secondary);
    border-radius: 24px;
    padding: 20px;
    text-align: center;
    flex: 1;
    max-width: 140px;
}

.streak-number {
    width: 48px;
    height: 48px;
    background-color: var(--theme-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-highlight);
    margin: 0 auto 8px;
}

.total-signin {
    background-color: var(--theme-secondary);
    border-radius: 24px;
    padding: 20px;
    text-align: center;
    flex: 1;
    max-width: 140px;
}

.total-number {
    width: 48px;
    height: 48px;
    background-color: var(--theme-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-highlight);
    margin: 0 auto 8px;
}

.total-label {
    font-size: 14px;
    color: var(--theme-text);
    margin: 0;
}

.streak-label {
    font-size: 14px;
    color: var(--theme-text);
    font-weight: 500;
}

.streak-reward {
    font-size: 12px;
    color: var(--theme-text-light);
    margin-top: 4px;
}

.signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background-color: var(--theme-secondary);
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-highlight);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 24px;
}

.signin-btn:active {
    transform: scale(0.98);
}

/* ==================== 历史记录样式 ==================== */

.history-content {
    padding: 16px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.empty-history {
    text-align: center;
    padding: 60px 20px;
    color: var(--theme-text);
    opacity: 0.7;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-hint {
    font-size: 14px;
    margin-top: 8px;
    opacity: 0.6;
}

.history-item {
    padding: 16px;
    background-color: var(--theme-bg);
    border-radius: 16px;
    margin-bottom: 12px;
    border: 2px solid var(--theme-primary);
}

.history-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.history-type {
    font-size: 12px;
    padding: 2px 8px;
    background-color: var(--theme-primary);
    border-radius: 10px;
    font-weight: bold;
}

.history-category {
    font-size: 12px;
    padding: 2px 8px;
    background-color: var(--theme-secondary);
    border-radius: 10px;
}

.history-date {
    font-size: 12px;
    color: var(--theme-text);
    opacity: 0.6;
    margin-left: auto;
}

.history-question {
    font-size: 14px;
    color: var(--theme-text);
    margin-bottom: 8px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.history-cards {
    font-size: 12px;
    color: var(--theme-text);
    opacity: 0.8;
}

.cards-label {
    font-weight: bold;
}

.history-view-btn {
    text-align: right;
    color: var(--theme-highlight);
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    cursor: pointer;
}

.history-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
}

.history-detail-modal .modal-content {
    position: fixed;
    top: 20px;
    left: 5%;
    width: 90%;
    max-width: 420px;
    height: calc(100vh - 40px);
    background-color: var(--theme-bg);
    border-radius: 24px;
    border: 3px solid var(--theme-primary);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    z-index: 2001;
}

.history-detail-modal .modal-header {
    padding: 16px 20px;
    background-color: var(--theme-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-detail-modal .modal-header h3 {
    margin: 0;
    color: var(--theme-bg);
    font-size: 18px;
}

.history-detail-modal .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background-color: transparent;
    color: var(--theme-bg);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-detail-modal .modal-body {
    padding: 16px;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 140px);
}

.history-detail-modal .detail-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.history-detail-modal .detail-type,
.history-detail-modal .detail-category,
.history-detail-modal .detail-date {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 10px;
}

.history-detail-modal .detail-type {
    background-color: var(--theme-secondary);
}

.history-detail-modal .detail-category {
    background-color: var(--theme-highlight);
    color: var(--theme-bg);
}

.history-detail-modal .detail-date {
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
}

.history-detail-modal .detail-question {
    font-size: 16px;
    color: var(--theme-text);
    margin-bottom: 16px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
}

.history-detail-modal .detail-fortune {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history-detail-modal .result-card-image-wrapper {
    text-align: center;
    margin-bottom: 12px;
}

.history-detail-modal .result-card-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 200px;
    min-height: 150px;
    object-fit: contain;
    border-radius: 12px;
    background-color: var(--theme-secondary);
    display: block;
}

.history-detail-modal .result-card-image.card-image-fallback {
    opacity: 0.6;
    padding: 20px;
}

.history-detail-modal .three-card-result-item {
    background-color: var(--theme-secondary);
    border-radius: 16px;
    padding: 12px;
}

.history-detail-modal .card-position-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-highlight);
    text-align: center;
    margin-bottom: 8px;
}

.history-detail-modal .fortune-summary {
    text-align: center;
    margin-bottom: 12px;
}

.history-detail-modal .fortune-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--theme-highlight);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
}

.history-detail-modal .result-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text);
    margin: 0;
}

.history-detail-modal .result-short-comment {
    font-size: 14px;
    color: var(--theme-text-light);
    margin: 4px 0 0 0;
}

.history-detail-modal .result-detail {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 1.7;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
}

.history-detail-modal .cat-message {
    margin-top: 12px;
    text-align: center;
}

.history-detail-modal .cloud-bubble {
    display: inline-block;
    background-color: var(--theme-bg);
    border-radius: 20px;
    padding: 12px 16px;
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(217, 199, 184, 0.2);
}

.history-detail-modal .cat-message-text {
    font-size: 13px;
    color: var(--theme-text);
    margin: 0;
    font-style: italic;
}

.history-detail-modal .lucky-elements {
    margin-top: 16px;
}

.history-detail-modal .lucky-grid {
    background-color: var(--theme-bg);
    border-radius: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.history-detail-modal .lucky-item {
    text-align: center;
    padding: 8px 4px;
    background-color: var(--theme-primary);
    border-radius: 12px;
}

.history-detail-modal .lucky-icon {
    margin-bottom: 4px;
    font-size: 16px;
}

.history-detail-modal .lucky-label {
    font-size: 10px;
    color: var(--theme-text-light);
    margin: 0 0 4px 0;
}

.history-detail-modal .lucky-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text);
    margin: 0;
}

.history-detail-modal .modal-footer {
    padding: 16px 20px;
    background-color: var(--theme-secondary);
    text-align: center;
}

.history-detail-modal .modal-close-btn {
    padding: 10px 30px;
    background-color: var(--theme-highlight);
    color: var(--theme-bg);
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.cards-names {
    word-break: break-all;
}

/* ==================== 移动端适配 ==================== */

/**
 * 移动端适配规范：
 * - 锁定手机竖屏
 * - 禁止横向滚动
 * - 适配320px-480px主流手机尺寸
 * - 布局简洁，元素不拥挤
 * - 留白合理
 * - 保证触屏点击区域大小合适
 */

@media (max-width: 320px) {
    html {
        font-size: 14px;
    }
    
    .cat-paw-btn {
        padding: 16px 20px;
    }
    
    .btn-text {
        font-size: 14px;
    }
    
    .btn-sub {
        font-size: 11px;
    }
    
    .three-cards {
        gap: 8px;
    }
    
    .theme-options {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 321px) and (max-width: 480px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 481px) {
    html {
        font-size: 18px;
    }
    
    #app-container {
        max-width: 480px;
    }
}

/* 确保触屏点击区域足够大 */
button, .nav-item, .cat-ear-tag, .theme-option, .card-container, .card-item-small, .cat-item {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#app-container {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ==================== 配色主题变量 ==================== */

/**
 * 配色切换系统
 * 通过CSS变量实现全局配色切换
 * 所有配色均为马卡龙浅色系
 * 所有按钮依旧无渐变
 */

:root {
    /* 默认马卡龙配色 */
    --theme-bg: #FFF9F2;
    --theme-primary: #FFE6D3;
    --theme-secondary: #FFDFE6;
    --theme-accent: #D6E8F5;
    --theme-text: #5D4037;
    --theme-text-light: #8B7355;
    --theme-border: #D9C7B8;
    --theme-highlight: #FF69B4;
}

/* 薰衣草紫配色 */
[data-theme="lavender"] {
    --theme-bg: #F5F0FF;
    --theme-primary: #E8D5FF;
    --theme-secondary: #D4C4FF;
    --theme-accent: #B8A8E8;
    --theme-text: #5D4037;
    --theme-text-light: #8B7355;
    --theme-border: #C8B8D8;
    --theme-highlight: #9B8DC8;
}

/* 薄荷绿配色 */
[data-theme="mint"] {
    --theme-bg: #F0FFF4;
    --theme-primary: #D4F5E0;
    --theme-secondary: #B8E8D0;
    --theme-accent: #9CD8C0;
    --theme-text: #5D4037;
    --theme-text-light: #8B7355;
    --theme-border: #A8D8B8;
    --theme-highlight: #7BC8A8;
}

/* 樱花粉配色 */
[data-theme="sakura"] {
    --theme-bg: #FFF5F8;
    --theme-primary: #FFE8ED;
    --theme-secondary: #FFD8E4;
    --theme-accent: #FFC8D8;
    --theme-text: #5D4037;
    --theme-text-light: #8B7355;
    --theme-border: #FFB8C8;
    --theme-highlight: #FF98B8;
}

/* 柠檬黄配色 */
[data-theme="lemon"] {
    --theme-bg: #FFFEF5;
    --theme-primary: #FFF8E0;
    --theme-secondary: #FFF0C8;
    --theme-accent: #FFE8B0;
    --theme-text: #5D4037;
    --theme-text-light: #8B7355;
    --theme-border: #FFE0A0;
    --theme-highlight: #FFD080;
}

/* 蜜桃橙配色 */
[data-theme="peach"] {
    --theme-bg: #FFF8F0;
    --theme-primary: #FFE8D8;
    --theme-secondary: #FFD8C0;
    --theme-accent: #FFC8A8;
    --theme-text: #5D4037;
    --theme-text-light: #8B7355;
    --theme-border: #FFB898;
    --theme-highlight: #FFA878;
}

/* 应用配色变量 */
body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

.status-bar,
.page-header,
.modal-content,
.loading-overlay {
    background-color: var(--theme-bg);
}

.cat-paw-btn,
.cat-ear-tag,
.back-btn,
.modal-close,
.nav-item.active {
    background-color: var(--theme-primary);
}

.fish-btn {
    background-color: var(--theme-secondary);
}

.card-back {
    background-color: var(--theme-primary);
}

.card-front {
    background-color: var(--theme-secondary);
}

.bottom-nav {
    border-top-color: var(--theme-primary);
}

.cat-paw-input-wrapper {
    background-color: var(--theme-primary);
}

.cloud-bubble {
    background-color: var(--theme-bg);
}

.floating-cloud {
    background-color: var(--theme-accent);
}

/* ==================== 磨砂柔光材质效果 ==================== */

/**
 * 材质规范：
 * - 全局磨砂柔光质感
 * - 柔和毛绒阴影
 * - 云朵渐变背景
 */

.modal-content,
.card-container,
.cat-paw-btn,
.fish-btn {
    box-shadow: 0 8px 24px rgba(217, 199, 184, 0.2);
}

/* 磨砂效果 */
.modal-overlay:not(.history-detail-modal .modal-overlay) {
    backdrop-filter: blur(4px);
}

/* ==================== 辅助样式 ==================== */

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.p-4 {
    padding: 16px;
}

.px-4 {
    padding-left: 16px;
    padding-right: 16px;
}

.py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.w-full {
    width: 100%;
}

.max-w-md {
    max-width: 448px;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-super {
    border-radius: 28px;
}

.rounded-ultra {
    border-radius: 24px;
}

/* ==================== 网格布局 ==================== */

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

/* ==================== 卡牌收藏网格 ==================== */

.cards-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0;
    width: 100%;
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 4px;
}

.card-group-title.good {
    background-color: var(--theme-accent);
    color: var(--theme-text);
}

.card-group-title.normal {
    background-color: var(--theme-secondary);
    color: var(--theme-text);
}

.card-group-title.hint {
    background-color: var(--theme-primary);
    color: var(--theme-text);
}

.group-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
}

.card-group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    justify-items: center;
}

.card-item-small {
    aspect-ratio: 2/3;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    background: none;
    box-shadow: none;
}

.card-item-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
}

.card-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.card-item-name,
.card-item-type {
    display: none;
}

.card-item-small.locked {
    filter: grayscale(100%);
    opacity: 0.5;
}

.card-item-name {
    font-size: 9px;
    font-weight: 500;
    color: var(--theme-text);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 2px;
}

.card-item-type {
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-highlight);
    text-align: center;
}

/* ==================== 图鉴分类标签 ==================== */

.collection-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}

.tab-btn {
    padding: 10px 24px;
    background-color: var(--theme-primary);
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:active {
    transform: scale(0.96);
}

.tab-btn.active {
    background-color: var(--theme-secondary);
    color: var(--theme-highlight);
}

.tab-content {
    padding: 0 16px;
}

.tab-content.hidden {
    display: none;
}

/* ==================== 猫咪图鉴网格 ==================== */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 0;
    width: 100%;
    box-sizing: border-box;
    justify-items: center;
    max-width: 480px;
    margin: 0 auto;
}

.cat-card {
    background-color: var(--theme-bg);
    border-radius: 24px;
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cat-card.locked {
    opacity: 0.6;
}

.cat-card-image {
    width: 80px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    background-color: var(--theme-secondary);
}

.cat-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-card-info {
    text-align: center;
}

.cat-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 4px;
}

.cat-card-desc {
    font-size: 12px;
    color: var(--theme-text-light);
    margin-bottom: 4px;
}

.cat-card-unlock {
    font-size: 11px;
    color: var(--theme-highlight);
}

.unlock-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 4px 10px;
    background-color: var(--theme-highlight);
    border-radius: 12px;
    font-size: 10px;
    color: #FFF9F2;
}

.lock-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background-color: #E8E8E8;
    border-radius: 12px;
    font-size: 10px;
    color: #A0A0A0;
}

/* ==================== 幸运元素样式 ==================== */

.lucky-elements {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out 0.2s forwards;
}

.lucky-grid {
    background-color: var(--theme-bg);
    border-radius: 20px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.lucky-item {
    text-align: center;
    padding: 12px 8px;
    background-color: var(--theme-primary);
    border-radius: 16px;
}

.lucky-icon {
    margin-bottom: 8px;
}

.lucky-label {
    font-size: 11px;
    color: var(--theme-text-light);
    margin-bottom: 4px;
}

.lucky-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
}

/* ==================== 结果页样式 ==================== */

.result-content {
    padding: 16px;
}

.fortune-summary {
    text-align: center;
    margin-bottom: 16px;
}

.fortune-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--theme-secondary);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-highlight);
}

.result-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--theme-text);
    margin-top: 12px;
}

.result-short-comment {
    font-size: 14px;
    color: var(--theme-text-light);
    margin-top: 4px;
}

.result-detail {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 1.7;
    margin-top: 16px;
    padding: 12px 16px;
    background-color: var(--theme-secondary);
    border-radius: 16px;
}

.cat-message {
    margin-top: 16px;
}

.cat-message-text {
    font-size: 13px;
    color: var(--theme-text);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    justify-content: center;
}

.confirm-back-container {
    padding: 0 16px 24px;
}

.confirm-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    background-color: var(--theme-accent);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.confirm-back-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background-color: var(--theme-bg);
    border: 2px solid var(--theme-primary);
    border-radius: 20px;
    font-size: 13px;
    color: var(--theme-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:active {
    transform: scale(0.96);
    background-color: var(--theme-primary);
}

.action-btn.fish-action {
    background-color: var(--theme-secondary);
    border-color: #FFD700;
}

/* ==================== 分享弹窗样式 ==================== */

.share-content {
    text-align: center;
    padding: 16px 0;
}

.share-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--theme-text);
}

.share-desc {
    font-size: 12px;
    color: var(--theme-text-light);
    margin-top: 8px;
}

.share-options {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background-color: var(--theme-bg);
    border: 2px solid var(--theme-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-option:active {
    transform: scale(0.96);
    background-color: var(--theme-primary);
}

.share-icon {
    width: 40px;
    height: 40px;
}

.share-option span {
    font-size: 12px;
    color: var(--theme-text);
}

/* ==================== 星空背景 ==================== */

#view-draw {
    padding-bottom: 120px;
}

.draw-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.single-card-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px 16px;
}

.three-card-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 40px 16px;
}

.star-bg {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* ==================== 侧边悬浮小猫 ==================== */

.side-cat {
    position: fixed;
    bottom: 100px;
    right: 16px;
    z-index: 100;
}

.side-cat-placeholder {
    width: 80px;
    height: 100px;
}

.side-cat.happy {
    animation: catHappy 0.5s ease-in-out infinite;
}

@keyframes catHappy {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ==================== 猫咪详情弹窗 ==================== */

.cat-detail-content {
    text-align: center;
}

/* ==================== 双人合占样式 ==================== */

.duo-input-area {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.duo-card-area {
    padding: 16px;
}

/* ==================== 占卜次数提示 ==================== */

.fish-count-placeholder,
.divine-count-placeholder {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background-color: var(--theme-secondary);
    border-radius: 20px;
    font-size: 14px;
    color: var(--theme-text);
}

/* ==================== 抚摸小猫区域 ==================== */

.pet-cat-area {
    padding: 32px 16px;
    text-align: center;
}

.pet-hint-text {
    font-size: 14px;
    color: var(--theme-text-light);
    margin-bottom: 16px;
}

.pet-cat-image {
    width: 180px;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 20px;
    object-fit: contain;
}

.pet-cat-image:active {
    transform: scale(1.08);
}

.pet-cat-image.petting {
    animation: petShake 0.5s ease;
}

.pet-feedback {
    font-size: 14px;
    color: var(--theme-highlight);
    margin-top: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pet-feedback.show {
    opacity: 1;
}

/* ==================== 分类标签区域 ==================== */

.category-tags {
    display: flex;
    gap: 8px;
    padding: 16px;
    overflow-x: auto;
    flex-wrap: wrap;
}

/* ==================== 动作按钮区域 ==================== */

.action-buttons-area {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==================== 结果页猫咪插画 ==================== */

.result-cat-illustration {
    padding: 8px 0;
    text-align: center;
    min-height: auto;
}

.result-cat-placeholder {
    width: 160px;
    height: 180px;
    margin: 0 auto;
}

/* ==================== 结果页卡牌展示 ==================== */

.result-card-display {
    padding: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.three-card-display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.card-plush-border {
    display: inline-flex;
    padding: 0;
    background: none;
    border-radius: 16px;
    max-width: 200px;
    margin: 0 auto;
}

.result-card-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.result-card-placeholder {
    width: 160px;
    height: 200px;
    background-color: var(--theme-bg);
    border-radius: 16px;
    overflow: hidden;
}

/* ==================== 三牌结果卡牌 ==================== */

.three-card-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto 24px;
    padding: 0 16px;
    box-sizing: border-box;
}

.card-position {
    text-align: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--theme-text);
    opacity: 0.7;
}

/* ==================== 收藏统计 ==================== */

.collection-stats {
    font-size: 14px;
    color: var(--theme-text);
    padding: 16px;
}

.collected-count {
    color: var(--theme-highlight);
    font-weight: 600;
}

/* ==================== 卡牌详情弹窗样式 ==================== */

.card-detail-modal {
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
}

.card-detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

.card-detail-image-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.card-detail-image {
    width: 180px;
    height: 240px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(217, 199, 184, 0.3);
}

/* 卡牌抽出动画 */
.card-item-small.card-drawing {
    animation: cardDrawOut 0.4s ease-out forwards;
    z-index: 100;
}

@keyframes cardDrawOut {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) translateY(-20px);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) translateY(-100px);
        opacity: 0;
    }
}

/* 卡牌详情弹窗中的卡牌飞入动画 */
.card-detail-image-wrapper.card-flying-in {
    animation: cardFlyIn 0.4s ease-out forwards;
}

@keyframes cardFlyIn {
    0% {
        transform: scale(0.5) translateY(-100px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(10px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.card-detail-info {
    width: 100%;
    text-align: center;
}

.card-detail-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--theme-secondary);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-highlight);
    margin-bottom: 8px;
}

.card-detail-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 8px;
}

.card-detail-short {
    font-size: 14px;
    color: var(--theme-text-light);
    margin-bottom: 16px;
}

.card-detail-section {
    background-color: var(--theme-primary);
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-highlight);
    margin-bottom: 8px;
}

.card-detail-full {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 1.7;
    text-align: left;
}

.cat-message-section {
    background-color: var(--theme-secondary);
}

.card-detail-message {
    font-size: 13px;
    color: var(--theme-text);
    text-align: left;
}

/* 卡牌图鉴中可点击的卡牌样式 */
.card-item-small.clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-item-small.clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(217, 199, 184, 0.3);
}

.card-item-small.clickable:active {
    transform: scale(0.95);
}

/* ==================== 小鱼干说明弹窗 ==================== */

#fish-info-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
}

#fish-info-btn:active {
    transform: scale(0.95);
}

.fish-info-modal {
    max-width: 360px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.fish-info-content {
    padding: 20px;
}

.fish-info-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--theme-primary);
}

.fish-info-icon {
    font-size: 32px;
    color: var(--theme-highlight);
    margin-bottom: 8px;
}

.fish-info-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 8px;
}

.fish-info-current {
    font-size: 14px;
    color: var(--theme-text);
}

.fish-info-current span {
    color: var(--theme-highlight);
    font-weight: 600;
    font-size: 16px;
}

.fish-info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fish-info-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background-color: var(--theme-primary);
    border-radius: 12px;
}

.fish-info-item-icon {
    font-size: 20px;
    color: var(--theme-highlight);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fish-info-item-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 6px;
}

.fish-info-item-content p {
    font-size: 12px;
    color: var(--theme-text);
    line-height: 1.6;
    opacity: 0.8;
}

.fish-info-item-content strong {
    color: var(--theme-highlight);
    font-weight: 600;
}

/* ==================== 猫咪详情弹窗样式 ==================== */

.cat-detail-modal {
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
}

.cat-detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

.cat-detail-image-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.cat-detail-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 50%;
    background-color: var(--theme-primary);
    padding: 10px;
}

.cat-detail-info {
    width: 100%;
    text-align: center;
}

.cat-detail-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 4px;
}

.cat-detail-breed {
    font-size: 14px;
    color: var(--theme-text-light);
    margin-bottom: 16px;
}

.cat-detail-section {
    background-color: var(--theme-primary);
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-highlight);
    margin-bottom: 8px;
}

.cat-detail-description {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 1.6;
    text-align: left;
}

.cat-detail-bias {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
    margin-bottom: 4px;
}

.cat-detail-bias-detail {
    font-size: 13px;
    color: var(--theme-text-light);
}

.cat-detail-buff {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 1.6;
    text-align: left;
}

.unlock-section {
    background-color: var(--theme-secondary);
}

.unlock-status {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.unlock-status.locked {
    color: #999;
}

.unlock-status.unlocked {
    color: var(--theme-highlight);
}

.progress-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-bar-bg {
    width: 100%;
    height: 12px;
    background-color: var(--theme-bg);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--theme-highlight);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-bar-text {
    font-size: 12px;
    color: var(--theme-text-light);
}

.cat-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.cat-detail-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cat-detail-btn:active {
    transform: scale(0.95);
}

.cat-detail-btn.select-btn {
    background-color: var(--theme-highlight);
    color: #fff;
}

.cat-detail-btn.unlock-btn {
    background-color: var(--theme-primary);
    color: var(--theme-text);
}

.cat-detail-btn.hidden {
    display: none;
}

/* 猫咪图鉴卡片样式 */
.cat-item-small {
    aspect-ratio: 3/4;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--theme-primary);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cat-item-small:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(217, 199, 184, 0.3);
}

.cat-item-small:active {
    transform: scale(0.95);
}

.cat-item-small.locked {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed;
}

.cat-item-small.locked:hover {
    transform: none;
    box-shadow: none;
}

.cat-item-small.current {
    border: 2px solid var(--theme-highlight);
}

.cat-item-image {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.cat-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.current-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background-color: var(--theme-highlight);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 183, 178, 0.4);
}

.cat-item-info {
    margin-top: 10px;
    text-align: center;
}

.cat-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 6px;
}

.cat-item-status {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.status-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.status-tag.unlocked {
    background-color: var(--theme-secondary);
    color: var(--theme-highlight);
}

.status-tag.locked {
    background-color: #eee;
    color: #999;
}

.status-tag.current {
    background-color: var(--theme-highlight);
    color: #fff;
}

.cat-item-unlock {
    margin-top: 8px;
}

.unlock-condition {
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
}

.unlock-progress {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unlock-progress .progress-bar-bg {
    width: 100%;
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.unlock-progress .progress-bar-fill {
    height: 100%;
    background-color: var(--theme-highlight);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-text {
    font-size: 10px;
    color: #999;
    text-align: center;
}