/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: -apple-system, 'PingFang SC', sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== 背景 ===== */
.bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
    transition: opacity 1.5s;
}
.bg-day { background-image: url('assets/backgrounds/bg_day.png'); }
.bg-night { background-image: url('assets/backgrounds/bg_night.png'); opacity: 0; }
body.night .bg-day { opacity: 0; }
body.night .bg-night { opacity: 1; }

/* ===== 头部 ===== */
.header {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
}
.title {
    font-size: 22px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    font-weight: 700;
}
.lang-btn {
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ===== 主布局 ===== */
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

/* ===== 场景 ===== */
.scene {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: min(380px, 70vw);
    aspect-ratio: 1 / 1;
}

/* ===== 小鸡容器 ===== */
.chicken-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    z-index: 10;
}
.chicken-inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.chicken-wrap img.chick {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ===== 配件定位（默认 idle 锚点，JS 动态更新） ===== */
.accessory {
    position: absolute;
    pointer-events: none;
    display: none;
    object-fit: contain;
    transition: top 0.2s, left 0.2s, right 0.2s;
}
.accessory.active { display: block; }

/* 头顶配件（V4: idle head at 52.9%, 5.0%） */
.acc-crown     { width: 32%; left: 35%; top: -5%; }
.acc-santa-hat { width: 40%; left: 34%; top: -5%; }
.acc-wreath    { width: 34%; left: 34%; top: 2%;  }

/* 脖子配件 */
.acc-bow       { width: 22%; left: 40%; top: 56%; }
.acc-scarf     { width: 68%; left: 16%; top: 48%; }

/* 眼睛配件（V5: idle eye at 50.8%, 41.3%） */
.acc-glasses   { width: 36%; left: 33%; top: 33%; }

/* ===== 气泡 ===== */
.bubble {
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
}
.bubble.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bubble::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #fff;
}

/* ===== 状态徽章 ===== */
.status-badge {
    position: absolute;
    top: -5%;
    right: -5%;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 50;
}

/* ===== 动画（应用到 inner 使配件跟随） ===== */
.chicken-wrap.idle .chicken-inner      { animation: breathe 2.5s ease-in-out infinite; }
.chicken-wrap.jump .chicken-inner      { animation: jump 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.chicken-wrap.happy .chicken-inner     { animation: wiggle 0.3s ease-in-out 4; }
.chicken-wrap.comfy .chicken-inner     { animation: comfySway 1.6s ease-in-out infinite; }
.chicken-wrap.sleeping .chicken-inner  { animation: sleepRock 2s ease-in-out infinite; }
.chicken-wrap.hungry .chicken-inner    { animation: shake 0.4s ease-in-out infinite; }
.chicken-wrap.love .chicken-inner      { animation: heartbeat 1.2s ease-in-out infinite; }
.chicken-wrap.angry .chicken-inner     { animation: angryShake 0.3s ease-in-out infinite; }
.chicken-wrap.crying .chicken-inner    { animation: sobbing 0.8s ease-in-out infinite; }
.chicken-wrap.shy .chicken-inner       { animation: shyRock 2s ease-in-out infinite; }
.chicken-wrap.surprised .chicken-inner { animation: bounce 0.5s ease-in-out 3; }

@keyframes breathe    { 0%,100%{transform:scaleY(1) scaleX(1)} 50%{transform:scaleY(1.02) scaleX(0.99)} }
@keyframes jump       { 0%{transform:translateY(0) scale(1)} 40%{transform:translateY(-50px) scale(1.05)} 100%{transform:translateY(0) scale(1)} }
@keyframes wiggle     { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg) scale(1.05)} 75%{transform:rotate(10deg) scale(1.05)} }
@keyframes sleepRock  { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-3deg)} }
@keyframes shake      { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes heartbeat  { 0%,100%{transform:scale(1)} 15%{transform:scale(1.06)} 30%{transform:scale(1)} 45%{transform:scale(1.04)} }
@keyframes angryShake { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-4px) rotate(-1deg)} 75%{transform:translateX(4px) rotate(1deg)} }
@keyframes sobbing    { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-3px)} 60%{transform:translateY(2px)} }
@keyframes shyRock    { 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(-2deg) scale(0.98)} }
@keyframes bounce     { 0%{transform:translateY(0)} 50%{transform:translateY(-20px) scale(1.05)} 100%{transform:translateY(0)} }
@keyframes comfySway  { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-5deg) scale(1.02)} 50%{transform:rotate(0) scale(1.03)} 75%{transform:rotate(5deg) scale(1.02)} }

/* ===== Zzz ===== */
.zzz {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 22px;
    opacity: 0;
    z-index: 30;
}
.scene.show-zzz .zzz { opacity: 1; animation: zFloat 2s ease-in-out infinite; }
@keyframes zFloat { 0%{opacity:0;transform:translate(0,0) scale(0.7)} 50%{opacity:1;transform:translate(8px,-12px) scale(1)} 100%{opacity:0;transform:translate(16px,-24px) scale(0.8)} }

/* ===== 粒子 ===== */
.particle {
    position: absolute;
    pointer-events: none;
    font-size: 22px;
    animation: particleFly 0.9s ease-out forwards;
    z-index: 60;
}
@keyframes particleFly { 0%{opacity:1;transform:translateY(0) scale(0.5)} 100%{opacity:0;transform:translateY(-60px) scale(1.2)} }

/* ===== 控制面板 ===== */
.controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 12px 16px;
    width: 300px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    z-index: 100;
}

/* Tab 栏 */
.tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 8px;
}
.tab {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: #888;
    transition: all 0.2s;
}
.tab.active {
    background: rgba(171, 71, 188, 0.12);
    color: #AB47BC;
}

/* Tab 内容 */
.tab-content {
    display: none;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.tab-content.active { display: flex; }

/* 按钮 */
.btn {
    padding: 8px 14px;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.15s;
    color: #fff;
}
.btn:active { transform: scale(0.94); }
.btn-action { background: linear-gradient(135deg, #FFB74D, #FF9800); }
.btn-mood   { background: linear-gradient(135deg, #80DEEA, #26C6DA); }
.btn-outfit { background: linear-gradient(135deg, #CE93D8, #AB47BC); }
.btn-outfit.active { box-shadow: 0 0 0 3px #FFD54F, 0 2px 6px rgba(0,0,0,0.1); }
.btn-reset  { background: linear-gradient(135deg, #E0E0E0, #BDBDBD); color: #666; }

/* ===== Ko-fi 打赏按钮 ===== */
.kofi-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(135deg, #FF5E5B, #FF9966);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(255, 94, 91, 0.35);
    z-index: 200;
    transition: all 0.2s;
    animation: kofiPulse 3s ease-in-out infinite;
}
.kofi-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 94, 91, 0.45);
}
.kofi-btn:active { transform: scale(0.96); }
.kofi-icon { font-size: 18px; }
@keyframes kofiPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(255, 94, 91, 0.35); }
    50% { box-shadow: 0 4px 24px rgba(255, 94, 91, 0.55); }
}

/* ===== 电脑端（默认） ===== */
@media (min-width: 768px) {
    .scene {
        left: 40%;
        width: min(380px, 45vw);
    }
    .controls {
        right: 5%;
        bottom: 50%;
        transform: translateY(50%);
    }
}

/* ===== 手机竖屏 ===== */
@media (max-width: 767px) {
    .main { flex-direction: column; }
    .scene {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 60vw;
        margin: 0 auto;
        margin-top: 15vh;
    }
    .controls {
        position: relative;
        bottom: auto;
        right: auto;
        width: 92vw;
        margin: 12px auto 16px;
    }
    .main {
        height: auto;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
        padding-bottom: 70px;
    }
    /* Ko-fi 按钮手机端缩小 */
    .kofi-btn {
        padding: 8px 14px;
        font-size: 12px;
        bottom: 14px;
        left: 14px;
    }
    .kofi-icon { font-size: 16px; }
}