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

/* ========== 主题33：遁卦·隐遁 (天山混合) ========== */
body[data-theme="33"] {
    --bg-gradient: linear-gradient(135deg, #6a5a4a 0%, #9a8a78 100%);
    --text-color: #ffffff;
    --primary-color: #fff8d8;
    --secondary-color: #c0c0b0;
    --button-bg: linear-gradient(135deg, #b0a090 0%, #907a68 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(176, 160, 144, 0.3);
    --border-color: rgba(144, 122, 104, 0.65);
    --cyan: #dcc8b8;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.28);
}

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

/* ========== 主题34：大壮卦·大壮 (雷天混合) ========== */
body[data-theme="34"] {
    --bg-gradient: linear-gradient(135deg, #5a3a1a 0%, #c85020 100%);
    --text-color: #ffffff;
    --primary-color: #e88860;
    --secondary-color: #d85040;
    --button-bg: linear-gradient(135deg, #e88860 0%, #d85040 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 136, 96, 0.3);
    --border-color: rgba(216, 80, 64, 0.65);
    --cyan: #f8d8c8;
    --gold: #f0d0c0;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.24);
}

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

/* ========== 主题35：晋卦·晋升 (火地混合) ========== */
body[data-theme="35"] {
    --bg-gradient: linear-gradient(135deg, #6b4520 0%, #d87030 100%);
    --text-color: #ffffff;
    --primary-color: #e89870;
    --secondary-color: #d85848;
    --button-bg: linear-gradient(135deg, #e89870 0%, #d85848 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 152, 112, 0.3);
    --border-color: rgba(216, 88, 72, 0.65);
    --cyan: #f8dcd0;
    --gold: #f0d4cc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

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

/* ========== 主题36：明夷卦·明夷 (地火混合) ========== */
body[data-theme="36"] {
    --bg-gradient: linear-gradient(135deg, #7a5a3a 0%, #b8805a 100%);
    --text-color: #ffffff;
    --primary-color: #d09070;
    --secondary-color: #b87050;
    --button-bg: linear-gradient(135deg, #d09070 0%, #b87050 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(208, 144, 112, 0.3);
    --border-color: rgba(184, 112, 80, 0.65);
    --cyan: #f0d4c8;
    --gold: #e8c8bc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

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

/* ========== 主题37：家人卦·家人 (风火混合) ========== */
body[data-theme="37"] {
    --bg-gradient: linear-gradient(135deg, #5a4a2a 0%, #b89050 100%);
    --text-color: #ffffff;
    --primary-color: #e0a878;
    --secondary-color: #c88858;
    --button-bg: linear-gradient(135deg, #e0a878 0%, #c88858 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(224, 168, 120, 0.3);
    --border-color: rgba(200, 136, 88, 0.65);
    --cyan: #f0dcd8;
    --gold: #e8d0cc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.22);
}

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

/* ========== 主题38：睽卦·乖违 (火泽混合) ========== */
body[data-theme="38"] {
    --bg-gradient: linear-gradient(135deg, #6a4a2a 0%, #c87a3a 100%);
    --text-color: #ffffff;
    --primary-color: #e8985a;
    --secondary-color: #d86840;
    --button-bg: linear-gradient(135deg, #e8985a 0%, #d86840 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 152, 90, 0.3);
    --border-color: rgba(216, 104, 64, 0.65);
    --cyan: #f8d8cc;
    --gold: #f0ccc0;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.24);
}

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

/* ========== 主题39：蹇卦·艰难 (水山混合) ========== */
body[data-theme="39"] {
    --bg-gradient: linear-gradient(135deg, #3a5a6a 0%, #6a8a9a 100%);
    --text-color: #eff7fd;
    --primary-color: #c0d0b8c0;
    --secondary-color: #5090a8;
    --button-bg: linear-gradient(135deg, #70a8c0 0%, #5090a8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(112, 168, 192, 0.3);
    --border-color: rgba(80, 144, 168, 0.65);
    --cyan: #f8fff8;
    --gold: #a8cfe0;
    --input-text: #eff7fd;
    --shadow-color: rgba(0, 0, 0, 0.26);
}

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

/* ========== 主题40：解卦·解脱 (雷水混合) ========== */
body[data-theme="40"] {
    --bg-gradient: linear-gradient(135deg, #2a5a6a 0%, #5a9aaa 100%);
    --text-color: #eef8fd;
    --primary-color: #6ab8d0;
    --secondary-color: #4aa0b8;
    --button-bg: linear-gradient(135deg, #6ab8d0 0%, #4aa0b8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(106, 184, 208, 0.3);
    --border-color: rgba(74, 160, 184, 0.65);
    --cyan: #b0e0f0;
    --gold: #a0d4e8;
    --input-text: #eef8fd;
    --shadow-color: rgba(0, 0, 0, 0.24);
}

body[data-theme="40"]::before {
    content: "🦐";
    position: fixed;
    bottom: 28%;
    right: 52%;
    font-size: 56px;
    opacity: 0.27;
    z-index: 1;
    pointer-events: none;
    animation: shrimp40 8s ease-in-out infinite;
}

/* ========== 主题41：损卦·减损 (山泽混合) ========== */
body[data-theme="41"] {
    --bg-gradient: linear-gradient(135deg, #6a6a5a 0%, #9a9a88 100%);
    --text-color: #ffffff;
    --primary-color: #caffea;
    --secondary-color: #a8ffda;
    --button-bg: linear-gradient(135deg, #a8a898 0%, #888878 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(255, 255, 216, 0.25);
    --border-color: rgba(136, 136, 120, 0.65);
    --cyan: #d0d0c8;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.28);
}

body[data-theme="41"]::before {
    content: "🦐";
    position: fixed;
    top: 38%;
    left: 58%;
    font-size: 64px;
    opacity: 0.24;
    z-index: 1;
    pointer-events: none;
    animation: shrimp41 10s ease-in-out infinite;
    filter: hue-rotate(60deg);
}

/* ========== 主题42：益卦·增益 (风雷混合) ========== */
body[data-theme="42"] {
    --bg-gradient: linear-gradient(135deg, #4a6a3a 0%, #7a9a6a 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b870;
    --secondary-color: #c8f0b050;
    --button-bg: linear-gradient(135deg, #98b870 0%, #789850 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(152, 184, 112, 0.3);
    --border-color: rgba(120, 152, 80, 0.65);
    --cyan: #d0e0c0;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="42"]::before {
    content: "🦐";
    position: fixed;
    bottom: 45%;
    right: 18%;
    font-size: 60px;
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: shrimp42 7s ease-in-out infinite;
}

/* ========== 主题43：夬卦·决断 (泽天混合) ========== */
body[data-theme="43"] {
    --bg-gradient: linear-gradient(135deg, #5a5a4a 0%, #8a8a78 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b890;
    --secondary-color: #e0e0c870;
    --button-bg: linear-gradient(135deg, #a8a890 0%, #e0e0c8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(168, 168, 144, 0.3);
    --border-color: rgba(136, 136, 112, 0.65);
    --cyan: #d0c8b8;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.27);
}

body[data-theme="43"]::before {
    content: "🦐";
    position: fixed;
    top: 25%;
    left: 35%;
    font-size: 72px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp43 9s ease-in-out infinite;
    filter: hue-rotate(150deg);
}

/* ========== 主题44：姤卦·邂逅 (天风混合) ========== */
body[data-theme="44"] {
    --bg-gradient: linear-gradient(135deg, #6a6a4a 0%, #9a9a68 100%);
    --text-color: #ffffff;
    --primary-color: #fff8d8;
    --secondary-color: #c8f0b060;
    --button-bg: linear-gradient(135deg, #b0b080 0%, #909060 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(176, 176, 128, 0.3);
    --border-color: rgba(144, 144, 96, 0.65);
    --cyan: #d8d4c4;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.26);
}

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

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

@keyframes shrimp34 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-36px) scaleY(0.94); }
}

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

@keyframes shrimp36 {
    0%, 100% { transform: rotate(-7deg); }
    25% { transform: rotate(7deg) translateX(16px); }
    50% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg) translateX(-16px); }
}

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

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

@keyframes shrimp39 {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(42px) rotate(16deg) scaleX(-1); }
}

@keyframes shrimp40 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-28px, -26px) rotate(-16deg); }
    50% { transform: translate(0px, -44px) rotate(10deg); }
    75% { transform: translate(28px, -26px) rotate(-10deg); }
}

@keyframes shrimp41 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-34px) scale(1.14); }
}

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

@keyframes shrimp43 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(28px, 26px) rotate(-24deg) scale(0.94); }
    66% { transform: translate(-28px, -26px) rotate(24deg) scale(1.14); }
}

@keyframes shrimp44 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-36px) rotate(14deg); }
}