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

/* ========== 主题9：小畜卦·蓄养 (风天混合) ========== */
body[data-theme="9"] {
    --bg-gradient: linear-gradient(135deg, #5a6a4a 0%, #8a9a7a 100%);
    --text-color: #ffffff;
    --primary-color: #e0ffc8;
    --secondary-color: #c8f0a0;
    --button-bg: linear-gradient(135deg, #a8d880 0%, #88c060 100%);
    --button-text: #1a2a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(224, 255, 200, 0.3);
    --border-color: rgba(200, 240, 160, 0.65);
    --cyan: #e0ffc8;
    --gold: #e0ffc8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.28);
}

body[data-theme="9"]::before {
    content: "";
    position: fixed;
    top: 18%;
    left: 10%;
    width: 190px;
    height: 190px;
    background-image: url('../../images/9.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp9 9s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(200, 240, 160, 0.85)) drop-shadow(0 0 70px rgba(168, 216, 128, 0.55)) hue-rotate(10deg);
}

/* ========== 主题10：履卦·行路 (天泽混合) ========== */
body[data-theme="10"] {
    --bg-gradient: linear-gradient(135deg, #7a8a6a 0%, #aabaa0 100%);
    --text-color: #ffffff;
    --primary-color: #e8ffd8;
    --secondary-color: #d8f8b8;
    --button-bg: linear-gradient(135deg, #b8e098 0%, #98d078 100%);
    --button-text: #1a2a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 255, 216, 0.3);
    --border-color: rgba(216, 248, 184, 0.65);
    --cyan: #e8ffd8;
    --gold: #e8ffd8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.27);
}

body[data-theme="10"]::before {
    content: "";
    position: fixed;
    bottom: 25%;
    right: 18%;
    width: 185px;
    height: 185px;
    background-image: url('../../images/10.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp10 11s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 36px rgba(216, 248, 184, 0.85)) drop-shadow(0 0 72px rgba(184, 224, 152, 0.55)) brightness(1.1);
}

/* ========== 主题11：泰卦·通泰 (天地混合) ========== */
body[data-theme="11"] {
    --bg-gradient: linear-gradient(135deg, #6a7a5a 0%, #9aaaa8 100%);
    --text-color: #ffffff;
    --primary-color: #d8ffe8;
    --secondary-color: #b8f0d8;
    --button-bg: linear-gradient(135deg, #88d8b8 0%, #68c098 100%);
    --button-text: #0a1a1a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(216, 255, 232, 0.3);
    --border-color: rgba(184, 240, 216, 0.65);
    --cyan: #d8ffe8;
    --gold: #d8ffe8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.29);
}

body[data-theme="11"]::before {
    content: "";
    position: fixed;
    top: 35%;
    left: 25%;
    width: 195px;
    height: 195px;
    background-image: url('../../images/11.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp11 8s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 38px rgba(184, 240, 216, 0.9)) drop-shadow(0 0 76px rgba(136, 216, 184, 0.6)) saturate(1.15);
}

/* ========== 主题12：否卦·闭塞 (地天混合) ========== */
body[data-theme="12"] {
    --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.27);
}

body[data-theme="12"]::before {
    content: "";
    position: fixed;
    bottom: 40%;
    right: 30%;
    width: 180px;
    height: 180px;
    background-image: url('../../images/12.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp12 10s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(128, 128, 104, 0.85)) drop-shadow(0 0 70px rgba(160, 160, 136, 0.55)) contrast(1.05);
}

/* ========== 主题13：同人卦·同心 (天火混合) ========== */
body[data-theme="13"] {
    --bg-gradient: linear-gradient(135deg, #7a5a3a 0%, #b88850 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.24);
}

body[data-theme="13"]::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 40%;
    width: 190px;
    height: 190px;
    background-image: url('../../images/13.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp13 7s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(216, 152, 112, 0.85)) drop-shadow(0 0 70px rgba(192, 120, 80, 0.55)) hue-rotate(-20deg);
}

/* ========== 主题14：大有卦·大富 (火天混合) ========== */
body[data-theme="14"] {
    --bg-gradient: linear-gradient(135deg, #8a6a3a 0%, #c89060 100%);
    --text-color: #ffffff;
    --primary-color: #ffd8b8;
    --secondary-color: #ffb898;
    --button-bg: linear-gradient(135deg, #d89870 0%, #c86850 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="14"]::before {
    content: "🦐";
    position: fixed;
    bottom: 15%;
    right: 45%;
    font-size: 74px;
    opacity: 0.23;
    z-index: 1;
    pointer-events: none;
    animation: shrimp14 12s ease-in-out infinite;
}

/* ========== 主题15：谦卦·谦逊 (地山混合) ========== */
body[data-theme="15"] {
    --bg-gradient: linear-gradient(135deg, #6a6a5a 0%, #9a9a88 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.28);
}

body[data-theme="15"]::before {
    content: "";
    position: fixed;
    top: 22%;
    left: 15%;
    width: 175px;
    height: 175px;
    background-image: url('../../images/15.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp15 6s 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);
}

/* ========== 主题16：豫卦·悦乐 (雷地混合) ========== */
body[data-theme="16"] {
    --bg-gradient: linear-gradient(135deg, #5a5a4a 0%, #8a8a7a 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.26);
}

body[data-theme="16"]::before {
    content: "";
    position: fixed;
    bottom: 32%;
    right: 22%;
    width: 188px;
    height: 188px;
    background-image: url('../../images/16.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    animation: shrimp16 9s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 35px rgba(160, 160, 136, 0.85)) drop-shadow(0 0 64px rgba(128, 128, 112, 0.55)) saturate(1.1);
}

/* ========== 主题17：随卦·追随 (泽雷混合) ========== */
body[data-theme="17"] {
    --bg-gradient: linear-gradient(135deg, #4a6a7a 0%, #7a9aaa 100%);
    --text-color: #ffffff;
    --primary-color: #c8e8f8;
    --secondary-color: #a8d8e8;
    --button-bg: linear-gradient(135deg, #78a8c8 0%, #5890b0 100%);
    --button-text: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(120, 168, 200, 0.3);
    --border-color: rgba(200, 232, 248, 0.65);
    --cyan: #e8f8ff;
    --gold: #d8f0ff;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="17"]::before {
    content: "🦐";
    position: fixed;
    top: 45%;
    left: 35%;
    font-size: 68px;
    opacity: 0.24;
    z-index: 1;
    pointer-events: none;
    animation: shrimp17 11s ease-in-out infinite;
    filter: hue-rotate(150deg);
}

/* ========== 主题18：蛊卦·整治 (山风混合) ========== */
body[data-theme="18"] {
    --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.23);
}

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

/* ========== 主题19：临卦·临近 (地泽混合) ========== */
body[data-theme="19"] {
    --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.24);
}

body[data-theme="19"]::before {
    content: "🦐";
    position: fixed;
    top: 12%;
    left: 50%;
    font-size: 72px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp19 10s ease-in-out infinite;
    filter: hue-rotate(240deg);
}

/* ========== 主题20：观卦·观察 (风地混合) ========== */
body[data-theme="20"] {
    --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.23);
}

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

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

@keyframes shrimp10 {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(-30px) scaleX(0.95); }
}

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

@keyframes shrimp12 {
    0%, 100% { transform: rotate(-8deg); }
    25% { transform: rotate(8deg) translateX(12px); }
    50% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg) translateX(-12px); }
}

@keyframes shrimp13 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(45px, -15px) rotate(18deg); }
    66% { transform: translate(-25px, 15px) rotate(-18deg); }
}

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

@keyframes shrimp15 {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(35px) rotate(12deg) scaleX(-1); }
}

@keyframes shrimp16 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-25px, -25px) rotate(-12deg); }
    50% { transform: translate(0px, -45px) rotate(6deg); }
    75% { transform: translate(25px, -25px) rotate(-6deg); }
}

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

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

@keyframes shrimp19 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(30px, 20px) rotate(-20deg) scale(0.9); }
    66% { transform: translate(-30px, -20px) rotate(20deg) scale(1.1); }
}

@keyframes shrimp20 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-35px) rotate(10deg); }
}