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

/* ========== 主题21：噬嗑卦·咬合 (火雷混合) ========== */
body[data-theme="21"] {
    --bg-gradient: linear-gradient(135deg, #6a4a3a 0%, #a87860 100%);
    --text-color: #ffffff;
    --primary-color: #ffd8b8;
    --secondary-color: #ffc098;
    --button-bg: linear-gradient(135deg, #d89870 0%, #c07850 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(216, 152, 112, 0.3);
    --border-color: rgba(255, 200, 152, 0.65);
    --cyan: #ffe8d8;
    --gold: #ffd8c8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

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

/* ========== 主题22：贲卦·装饰 (山火混合) ========== */
body[data-theme="22"] {
    --bg-gradient: linear-gradient(135deg, #5a4a3a 0%, #8a7860 100%);
    --text-color: #ffffff;
    --primary-color: #ffd8b8;
    --secondary-color: #ffb898;
    --button-bg: linear-gradient(135deg, #c89870 0%, #a87850 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(200, 152, 112, 0.3);
    --border-color: rgba(255, 200, 152, 0.65);
    --cyan: #ffe8d8;
    --gold: #ffd8c8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.26);
}

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

/* ========== 主题23：剥卦·剥落 (山地混合) ========== */
body[data-theme="23"] {
    --bg-gradient: linear-gradient(135deg, #5a5a4a 0%, #8a8a78 100%);
    --text-color: #ffffff;
    --primary-color: #ffffd8;
    --secondary-color: #fff8c8;
    --button-bg: linear-gradient(135deg, #fff8c8 0%, #f0e8b8 100%);
    --button-text: #1a1a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(255, 255, 216, 0.25);
    --border-color: rgba(255, 248, 200, 0.5);
    --cyan: #ffffd8;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.28);
}

body[data-theme="23"]::before {
    content: "";
    position: fixed;
    top: 20%;
    right: 28%;
    width: 182px;
    height: 182px;
    background-image: url('../../images/23.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp23 8s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(168, 168, 136, 0.85)) drop-shadow(0 0 70px rgba(136, 136, 112, 0.55)) contrast(1.06);
}

/* ========== 主题24：复卦·返回 (地雷混合) ========== */
body[data-theme="24"] {
    --bg-gradient: linear-gradient(135deg, #4a5a4a 0%, #7a8a7a 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.24);
}

body[data-theme="24"]::before {
    content: "";
    position: fixed;
    bottom: 18%;
    left: 22%;
    width: 186px;
    height: 186px;
    background-image: url('../../images/24.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp24 11s ease-in-out 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)) brightness(1.08);
}

/* ========== 主题25：无妄卦·无妄 (天雷混合) ========== */
body[data-theme="25"] {
    --bg-gradient: linear-gradient(135deg, #6a7a5a 0%, #9aaaa8 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.25);
}

body[data-theme="25"]::before {
    content: "";
    position: fixed;
    top: 45%;
    right: 18%;
    width: 190px;
    height: 190px;
    background-image: url('../../images/25.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp25 7s ease-in-out 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)) saturate(1.1);
}

/* ========== 主题26：大畜卦·大畜 (山天混合) ========== */
body[data-theme="26"] {
    --bg-gradient: linear-gradient(135deg, #6a7a6a 0%, #9aaaa0 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.25);
}

body[data-theme="26"]::before {
    content: "";
    position: fixed;
    bottom: 35%;
    left: 32%;
    width: 188px;
    height: 188px;
    background-image: url('../../images/26.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp26 9s ease-in-out 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)) brightness(1.1);
}

/* ========== 主题27：颐卦·颐养 (山雷混合) ========== */
body[data-theme="27"] {
    --bg-gradient: linear-gradient(135deg, #5a6a4a 0%, #8a9a7a 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.24);
}

body[data-theme="27"]::before {
    content: "";
    position: fixed;
    top: 15%;
    right: 40%;
    width: 192px;
    height: 192px;
    background-image: url('../../images/27.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp27 10s ease-in-out 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)) contrast(1.08);
}

/* ========== 主题28：大过卦·大过 (泽风混合) ========== */
body[data-theme="28"] {
    --bg-gradient: linear-gradient(135deg, #4a6a6a 0%, #7a9a9a 100%);
    --text-color: #ffffff;
    --primary-color: #c8e8d8;
    --secondary-color: #a8d8c8;
    --button-bg: linear-gradient(135deg, #d8fff8 0%, #c8e0e0 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(168, 200, 200, 0.3);
    --border-color: rgba(136, 168, 168, 0.65);
    --cyan: #f8fff8;
    --gold: #e0fff8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="28"]::before {
    content: "🦐";
    position: fixed;
    bottom: 25%;
    right: 15%;
    font-size: 70px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp28 8s ease-in-out infinite;
    filter: hue-rotate(180deg);
}

/* ========== 主题29：坎卦·水 (水属性·坎) ========== */
body[data-theme="29"] {
    --bg-gradient: linear-gradient(135deg, #2a4a5a 0%, #5a7a8a 100%);
    --text-color: #ffffff;
    --primary-color: #c0e8ff;
    --secondary-color: #90d8f8;
    --button-bg: linear-gradient(135deg, #60c0e8 0%, #40a8d0 100%);
    --button-text: #001122;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(192, 232, 255, 0.3);
    --border-color: rgba(144, 216, 248, 0.65);
    --cyan: #c0e8ff;
    --gold: #c0e8ff;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.32);
}

body[data-theme="29"]::before {
    content: "🦐";
    position: fixed;
    top: 30%;
    left: 25%;
    font-size: 66px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp29 11s ease-in-out infinite;
    filter: hue-rotate(200deg);
}

/* ========== 主题30：离卦·火 (火属性·离) ========== */
body[data-theme="30"] {
    --bg-gradient: linear-gradient(135deg, #7a4a2a 0%, #b87850 100%);
    --text-color: #ffffff;
    --primary-color: #e89870;
    --secondary-color: #d07850;
    --button-bg: linear-gradient(135deg, #e89870 0%, #d07850 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 152, 112, 0.3);
    --border-color: rgba(208, 120, 80, 0.65);
    --cyan: #ffe8d8;
    --gold: #ffd8c8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="30"]::before {
    content: "🦐";
    position: fixed;
    bottom: 35%;
    right: 28%;
    font-size: 62px;
    opacity: 0.27;
    z-index: 1;
    pointer-events: none;
    animation: shrimp30 9s ease-in-out infinite;
}

/* ========== 主题31：咸卦·感应 (泽山混合) ========== */
body[data-theme="31"] {
    --bg-gradient: linear-gradient(135deg, #5a6a5a 0%, #8a9a8a 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.24);
}

body[data-theme="31"]::before {
    content: "🦐";
    position: fixed;
    top: 18%;
    right: 20%;
    font-size: 68px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp31 10s ease-in-out infinite;
    filter: hue-rotate(270deg);
}

/* ========== 主题32：恒卦·恒久 (雷风混合) ========== */
body[data-theme="32"] {
    --bg-gradient: linear-gradient(135deg, #4a5a5a 0%, #7a8a8a 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.24);
}

body[data-theme="32"]::before {
    content: "🦐";
    position: fixed;
    bottom: 28%;
    left: 18%;
    font-size: 64px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp32 7s ease-in-out infinite;
}

/* ========== 虾仁动画定义 ========== */
@keyframes shrimp21 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(40px, -18px) rotate(15deg); }
    66% { transform: translate(-20px, 15px) rotate(-15deg); }
}

@keyframes shrimp22 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-38px) rotate(8deg); }
}

@keyframes shrimp23 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(28px, -18px) rotate(10deg); }
    50% { transform: translate(0px, -32px) rotate(0deg); }
    75% { transform: translate(-28px, -18px) rotate(-10deg); }
}

@keyframes shrimp24 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-42px) scale(1.12); }
}

@keyframes shrimp25 {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(18deg) translateX(22px); }
    50% { transform: rotate(0deg) translateX(0); }
    75% { transform: rotate(-18deg) translateX(-22px); }
}

@keyframes shrimp26 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(35px, 18px) rotate(-18deg) scale(0.95); }
    66% { transform: translate(-35px, -18px) rotate(18deg) scale(1.08); }
}

@keyframes shrimp27 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-40px) rotate(12deg); }
}

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

@keyframes shrimp29 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-28px, -22px) rotate(-14deg); }
    50% { transform: translate(0px, -42px) rotate(7deg); }
    75% { transform: translate(28px, -22px) rotate(-7deg); }
}

@keyframes shrimp30 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-36px) scale(1.1); }
}

@keyframes shrimp31 {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(14deg) translateX(18px); }
    50% { transform: rotate(0deg) translateX(0); }
    75% { transform: rotate(-14deg) translateX(-18px); }
}

@keyframes shrimp32 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(32px, 20px) rotate(-16deg) scale(0.92); }
    66% { transform: translate(-32px, -20px) rotate(16deg) scale(1.06); }
}