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

/* ========== 主题57：巽卦·巽顺 (风属性) ========== */
body[data-theme="57"] {
    --bg-gradient: linear-gradient(135deg, #5a7a4a 0%, #8aaa7a 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b880;
    --secondary-color: #c8f0b060;
    --button-bg: linear-gradient(135deg, #98c080 0%, #78a860 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(152, 192, 128, 0.3);
    --border-color: rgba(120, 168, 96, 0.65);
    --cyan: #c8e0c0;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="57"]::before {
    content: "🦐";
    position: fixed;
    top: 22%;
    left: 38%;
    font-size: 66px;
    opacity: 0.27;
    z-index: 1;
    pointer-events: none;
    animation: shrimp57 8s ease-in-out infinite;
    filter: hue-rotate(120deg);
}

/* ========== 主题58：兑卦·兑悦 (泽属性) ========== */
body[data-theme="58"] {
    --bg-gradient: linear-gradient(135deg, #4a8a9a 0%, #7abacc 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b8e0;
    --secondary-color: #60b0c8;
    --button-bg: linear-gradient(135deg, #80c8e0 0%, #60b0c8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(128, 200, 224, 0.3);
    --border-color: rgba(96, 176, 200, 0.65);
    --cyan: #c0e8f8;
    --gold: #b0dce8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.22);
}

body[data-theme="58"]::before {
    content: "🦐";
    position: fixed;
    bottom: 35%;
    right: 38%;
    font-size: 58px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp58 10s ease-in-out infinite;
}

/* ========== 主题59：涣卦·涣散 (风水混合) ========== */
body[data-theme="59"] {
    --bg-gradient: linear-gradient(135deg, #3a7a8a 0%, #6aaa9a 100%);
    --text-color: #eef9fc;
    --primary-color: #70b8c8;
    --secondary-color: #50a0b8;
    --button-bg: linear-gradient(135deg, #70b8c8 0%, #50a0b8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(112, 184, 200, 0.3);
    --border-color: rgba(80, 160, 184, 0.65);
    --cyan: #b0e0e8;
    --gold: #a0d4e0;
    --input-text: #eef9fc;
    --shadow-color: rgba(0, 0, 0, 0.24);
}

body[data-theme="59"]::before {
    content: "🦐";
    position: fixed;
    top: 45%;
    left: 52%;
    font-size: 70px;
    opacity: 0.24;
    z-index: 1;
    pointer-events: none;
    animation: shrimp59 7s ease-in-out infinite;
    filter: hue-rotate(210deg);
}

/* ========== 主题60：节卦·节制 (水泽混合) ========== */
body[data-theme="60"] {
    --bg-gradient: linear-gradient(135deg, #4a7a8a 0%, #7aaaaa 100%);
    --text-color: #ffffff;
    --primary-color: #78b8c8;
    --secondary-color: #58a0b8;
    --button-bg: linear-gradient(135deg, #78b8c8 0%, #58a0b8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(120, 184, 200, 0.3);
    --border-color: rgba(88, 160, 184, 0.65);
    --cyan: #f8fff8;
    --gold: #a8d0e0;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="60"]::before {
    content: "🦐";
    position: fixed;
    bottom: 22%;
    right: 48%;
    font-size: 62px;
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: shrimp60 9s ease-in-out infinite;
}

/* ========== 主题61：中孚卦·中孚 (风泽混合) ========== */
body[data-theme="61"] {
    --bg-gradient: linear-gradient(135deg, #6a7a5a 0%, #9aaa8a 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b88a;
    --secondary-color: #c8f0b06a;
    --button-bg: linear-gradient(135deg, #a0b88a 0%, #80986a 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(160, 184, 138, 0.3);
    --border-color: rgba(128, 152, 106, 0.65);
    --cyan: #ccdcc8;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="61"]::before {
    content: "🦐";
    position: fixed;
    top: 32%;
    left: 15%;
    font-size: 54px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp61 11s ease-in-out infinite;
    filter: hue-rotate(300deg);
}

/* ========== 主题62：小过卦·小过 (雷山混合) ========== */
body[data-theme="62"] {
    --bg-gradient: linear-gradient(135deg, #5a6a4a 0%, #8a9a7a 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b888;
    --secondary-color: #c8f0b068;
    --button-bg: linear-gradient(135deg, #98b088 0%, #78a068 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(152, 176, 136, 0.3);
    --border-color: rgba(120, 160, 104, 0.65);
    --cyan: #caffea;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="62"]::before {
    content: "🦐";
    position: fixed;
    bottom: 45%;
    right: 12%;
    font-size: 68px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp62 6s ease-in-out infinite;
}

/* ========== 主题63：既济卦·既济 (水火混合) ========== */
body[data-theme="63"] {
    --bg-gradient: linear-gradient(135deg, #6a5a3a 0%, #c88050 100%);
    --text-color: #ffffff;
    --primary-color: #d89870;
    --secondary-color: #c86850;
    --button-bg: linear-gradient(135deg, #d89870 0%, #c86850 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(216, 152, 112, 0.3);
    --border-color: rgba(200, 104, 80, 0.65);
    --cyan: #f0d4c8;
    --gold: #e8c8bc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.24);
}

body[data-theme="63"]::before {
    content: "🦐";
    position: fixed;
    top: 55%;
    left: 28%;
    font-size: 74px;
    opacity: 0.23;
    z-index: 1;
    pointer-events: none;
    animation: shrimp63 12s ease-in-out infinite;
    filter: hue-rotate(30deg);
}

/* ========== 主题64：未济卦·未济 (火水混合) ========== */
body[data-theme="64"] {
    --bg-gradient: linear-gradient(135deg, #5a4a3a 0%, #b8704a 100%);
    --text-color: #ffffff;
    --primary-color: #e08070;
    --secondary-color: #c85850;
    --button-bg: linear-gradient(135deg, #e08070 0%, #c85850 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(224, 128, 112, 0.3);
    --border-color: rgba(200, 88, 80, 0.65);
    --cyan: #f0dcc8;
    --gold: #e8d0c0;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="64"]::before {
    content: "🦐";
    position: fixed;
    bottom: 12%;
    right: 35%;
    font-size: 60px;
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: shrimp64 8s ease-in-out infinite;
}

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

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

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

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

@keyframes shrimp61 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(36px, -24px) rotate(28deg); }
    66% { transform: translate(-24px, 28px) rotate(-28deg); }
}

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

@keyframes shrimp63 {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(34px) rotate(20deg) scaleX(-1); }
}

@keyframes shrimp64 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-24px, -28px) rotate(-20deg); }
    50% { transform: translate(0px, -48px) rotate(14deg); }
    75% { transform: translate(24px, -28px) rotate(-14deg); }
}