/* 易经64卦主题配色系统 - 主题0-8 + 虾仁动画 */

/* ========== 主题0：玄机（默认黑色主题） ========== */
body[data-theme="0"] {
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --text-color: #e8e8e8;
    --primary-color: #eebb55;
    --secondary-color: #d4a03a;
    --button-bg: linear-gradient(135deg, #eebb55 0%, #d4a03a 100%);
    --button-text: #000000;
    --card-bg: rgba(255, 255, 255, 0.05);
    --input-bg: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.15);
    --cyan: #88ffea;
    --gold: #eebb55;
    --input-text: #e8e8e8;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* ========== 主题1：乾卦·天 (金属性·天) ========== */
body[data-theme="1"] {
    --bg-gradient: linear-gradient(135deg, #d4b896 0%, #f5e8d8 40%, #c9a96e 100%);
    --text-color: #3d2817;
    --primary-color: #9a7c54;
    --secondary-color: #7a5f3e;
    --button-bg: linear-gradient(135deg, #c9a96e 0%, #9a7c54 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.55);
    --input-bg: rgba(201, 169, 110, 0.2);
    --border-color: rgba(122, 95, 62, 0.35);
    --cyan: #5a7a6a;
    --gold: #9a7c54;
    --input-text: #3d2817;
    --shadow-color: rgba(61, 40, 23, 0.2);
}

body[data-theme="1"]::before {
    content: "";
    position: fixed;
    top: 10%;
    right: 15%;
    width: 120px;
    height: 120px;
    background-image: url('../../images/1.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpFloat1 8s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 20px rgba(238, 187, 85, 0.6)) drop-shadow(0 0 40px rgba(201, 169, 110, 0.4));
}

body[data-theme="1"]::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse 400px 150px at 20% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 500px 180px at 80% 50%, rgba(255, 255, 255, 0.28) 0%, transparent 50%),
        radial-gradient(ellipse 350px 120px at 50% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
    animation: cloudsFloat 25s ease-in-out infinite;
}

/* ========== 主题2：坤卦·地 (土属性·地) ========== */
body[data-theme="2"] {
    --bg-gradient: linear-gradient(135deg, #8b7661 0%, #c9b5a0 50%, #6b5545 100%);
    --text-color: #2a1f15;
    --primary-color: #a68968;
    --secondary-color: #7a5f49;
    --button-bg: linear-gradient(135deg, #a68968 0%, #7a5f49 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.2);
    --input-bg: rgba(166, 137, 104, 0.25);
    --border-color: rgba(122, 95, 73, 0.4);
    --cyan: #6a8a7a;
    --gold: #a68968;
    --input-text: #2a1f15;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="2"]::before {
    content: "";
    position: fixed;
    bottom: 20%;
    left: 10%;
    width: 120px;
    height: 120px;
    background-image: url('../../images/2.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.65;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpBounce2 6s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 15px rgba(166, 137, 104, 0.5)) sepia(0.15);
}

body[data-theme="2"]::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(122, 95, 73, 0.18) 80px, rgba(122, 95, 73, 0.18) 82px),
        repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(139, 118, 97, 0.15) 100px, rgba(139, 118, 97, 0.15) 102px);
    z-index: -1;
    pointer-events: none;
    animation: earthShift 40s linear infinite;
}

/* ========== 主题3：屯卦·初生 (木水混合，生成色) ========== */
body[data-theme="3"] {
    --bg-gradient: linear-gradient(135deg, #2d5a3d 0%, #5a8f6f 100%);
    --text-color: #ffffff;
    --primary-color: #caffea;
    --secondary-color: #a8ffda;
    --button-bg: linear-gradient(135deg, #6fddaa 0%, #4adf86 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.25);
    --input-bg: rgba(202, 255, 234, 0.35);
    --border-color: rgba(168, 255, 218, 0.65);
    --cyan: #caffea;
    --gold: #caffea;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.5);
}

body[data-theme="3"]::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-image: url('../../images/3.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpSpin3 10s linear infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(168, 255, 218, 0.9)) drop-shadow(0 0 70px rgba(107, 184, 143, 0.5));
}

body[data-theme="3"]::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 30%, rgba(107, 184, 143, 0.08) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
    animation: gentleFloat 20s ease-in-out infinite;
}

/* ========== 主题4：蒙卦·启蒙 (土水混合) ========== */
body[data-theme="4"] {
    --bg-gradient: linear-gradient(135deg, #5a5a4a 0%, #7a7a6a 100%);
    --text-color: #ffffff;
    --primary-color: #fffacc;
    --secondary-color: #f0e8a0;
    --button-bg: linear-gradient(135deg, #f0e8a0 0%, #d4c870 100%);
    --button-text: #1a1a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(255, 250, 204, 0.25);
    --border-color: rgba(240, 232, 160, 0.5);
    --cyan: #fffacc;
    --gold: #fffacc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.32);
}

body[data-theme="4"]::before {
    content: "";
    position: fixed;
    top: 25%;
    right: 20%;
    width: 185px;
    height: 185px;
    background-image: url('../../images/4.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpWiggle4 5s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 30px rgba(240, 232, 160, 0.8)) drop-shadow(0 0 60px rgba(212, 200, 112, 0.5)) contrast(1.15);
}

/* ========== 主题5：需卦·等待 (水天混合) ========== */
body[data-theme="5"] {
    --bg-gradient: linear-gradient(135deg, #3a5a7a 0%, #6a8aaa 100%);
    --text-color: #ffffff;
    --primary-color: #d0f0ff;
    --secondary-color: #a8e0ff;
    --button-bg: linear-gradient(135deg, #78c8f0 0%, #58b0d8 100%);
    --button-text: #0a1a2a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(208, 240, 255, 0.28);
    --border-color: rgba(168, 224, 255, 0.52);
    --cyan: #d0f0ff;
    --gold: #d0f0ff;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

body[data-theme="5"]::before {
    content: "";
    position: fixed;
    bottom: 30%;
    right: 25%;
    width: 190px;
    height: 190px;
    background-image: url('../../images/5.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpDrift5 12s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(168, 224, 255, 0.9)) drop-shadow(0 0 70px rgba(120, 200, 240, 0.6)) saturate(1.25);
}

/* ========== 主题6：讼卦·争辩 (天水混合) ========== */
body[data-theme="6"] {
    --bg-gradient: linear-gradient(135deg, #4a6a8a 0%, #7a9abc 100%);
    --text-color: #ffffff;
    --primary-color: #d0f8ff;
    --secondary-color: #a8e8ff;
    --button-bg: linear-gradient(135deg, #78d8f0 0%, #58c8e0 100%);
    --button-text: #0a1a2a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(208, 248, 255, 0.28);
    --border-color: rgba(168, 232, 255, 0.52);
    --cyan: #d0f8ff;
    --gold: #d0f8ff;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

body[data-theme="6"]::before {
    content: "";
    position: fixed;
    top: 40%;
    left: 15%;
    width: 185px;
    height: 185px;
    background-image: url('../../images/6.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpJump6 7s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(168, 232, 255, 0.9)) drop-shadow(0 0 70px rgba(120, 216, 240, 0.6)) brightness(1.15);
}

/* ========== 主题7：师卦·军队 (地水混合) ========== */
body[data-theme="7"] {
    --bg-gradient: linear-gradient(135deg, #4a5a6a 0%, #6a7a8a 100%);
    --text-color: #ffffff;
    --primary-color: #d0e8ff;
    --secondary-color: #a8d8f0;
    --button-bg: linear-gradient(135deg, #a8d8f0 0%, #78b8d8 100%);
    --button-text: #0a1a2a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(208, 232, 255, 0.28);
    --border-color: rgba(168, 216, 240, 0.5);
    --cyan: #d0e8ff;
    --gold: #d0e8ff;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.32);
}

body[data-theme="7"]::before {
    content: "";
    position: fixed;
    top: 60%;
    right: 30%;
    width: 195px;
    height: 195px;
    background-image: url('../../images/7.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpMarch7 9s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(168, 216, 240, 0.85)) drop-shadow(0 0 70px rgba(120, 184, 216, 0.55)) contrast(1.1);
}

/* ========== 主题8：比卦·亲和 (水地混合) ========== */
body[data-theme="8"] {
    --bg-gradient: linear-gradient(135deg, #2a4a5a 0%, #5a7a8a 100%);
    --text-color: #ffffff;
    --primary-color: #c8f0ff;
    --secondary-color: #98e4f8;
    --button-bg: linear-gradient(135deg, #68c8e8 0%, #48b0d0 100%);
    --button-text: #0a1a2a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(200, 240, 255, 0.27);
    --border-color: rgba(152, 228, 248, 0.52);
    --cyan: #c8f0ff;
    --gold: #c8f0ff;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.32);
}

body[data-theme="8"]::before {
    content: "";
    position: fixed;
    bottom: 15%;
    right: 20%;
    width: 192px;
    height: 192px;
    background-image: url('../../images/8.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimpSwim8 11s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 38px rgba(152, 228, 248, 0.9)) drop-shadow(0 0 75px rgba(104, 200, 232, 0.6)) saturate(1.2);
}

/* ========== 虾仁动画定义 ========== */
@keyframes shrimpFloat1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -30px) rotate(15deg); }
    50% { transform: translate(0px, -50px) rotate(0deg); }
    75% { transform: translate(-20px, -30px) rotate(-15deg); }
}

@keyframes shrimpBounce2 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-40px) scaleY(0.9); }
}

@keyframes shrimpSpin3 {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes shrimpWiggle4 {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(5deg) translateX(10px); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg) translateX(-10px); }
}

@keyframes shrimpDrift5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(50px, -20px) rotate(20deg); }
    66% { transform: translate(-30px, 20px) rotate(-20deg); }
}

@keyframes shrimpJump6 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-60px) rotate(-30deg); }
    60% { transform: translateY(0px) rotate(30deg); }
}

@keyframes shrimpMarch7 {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(40px) rotate(10deg) scaleX(-1); }
}

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

/* 背景动画 */
@keyframes cloudsFloat {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 1; }
    50% { transform: translateX(50px) translateY(-30px); opacity: 0.7; }
}

@keyframes earthShift {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

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