body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#aquarium {
    width: 100vw;
    height: 100vh;
    position: relative;
    transition: background 1.5s ease;
    overflow: hidden;
    /* 开启 3D 视角 */
    perspective: 1000px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

/* 水体氛围层：在鱼/水草之下，持续缓慢运动 */
.water-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* 大块底色柔光：多段关键帧，避免「来回扫」的舞台感 */
.water-flow {
    position: absolute;
    inset: -28%;
    background:
        radial-gradient(ellipse 48% 36% at 28% 38%, rgba(120, 210, 255, 0.28), transparent 58%),
        radial-gradient(ellipse 42% 48% at 72% 62%, rgba(0, 140, 200, 0.22), transparent 52%),
        radial-gradient(ellipse 55% 38% at 48% 48%, rgba(255, 255, 255, 0.05), transparent 62%);
    filter: blur(56px);
    animation: water-drift-a 38s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    opacity: 0.78;
}

.water-flow-2 {
    background:
        radial-gradient(ellipse 40% 42% at 18% 72%, rgba(80, 180, 230, 0.2), transparent 55%),
        radial-gradient(ellipse 50% 34% at 82% 28%, rgba(200, 235, 255, 0.12), transparent 54%);
    filter: blur(52px);
    animation: water-drift-b 52s cubic-bezier(0.45, 0.02, 0.55, 0.98) infinite;
    animation-delay: -14s;
    opacity: 0.55;
    mix-blend-mode: screen;
}

@keyframes water-drift-a {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    27% { transform: translate(-5%, 3%) scale(1.06) rotate(1.4deg); }
    52% { transform: translate(3%, -4%) scale(0.96) rotate(-0.9deg); }
    78% { transform: translate(-2%, -2%) scale(1.03) rotate(0.5deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes water-drift-b {
    0% { transform: translate(0, 0) scale(1.02) rotate(0deg); }
    31% { transform: translate(6%, -3%) scale(0.94) rotate(-1.8deg); }
    59% { transform: translate(-4%, 5%) scale(1.08) rotate(1.1deg); }
    100% { transform: translate(0, 0) scale(1.02) rotate(0deg); }
}

/* 不规则碎光斑（无平行条纹），模拟水底漫反射 */
.water-mottle {
    position: absolute;
    inset: -35%;
    background:
        radial-gradient(ellipse 26% 40% at 19% 31%, rgba(255, 255, 255, 0.07), transparent 68%),
        radial-gradient(ellipse 38% 21% at 71% 58%, rgba(170, 220, 255, 0.08), transparent 64%),
        radial-gradient(ellipse 16% 48% at 91% 22%, rgba(255, 255, 255, 0.05), transparent 58%),
        radial-gradient(ellipse 44% 26% at 41% 81%, rgba(90, 185, 240, 0.06), transparent 66%),
        radial-gradient(ellipse 22% 28% at 7% 68%, rgba(255, 248, 235, 0.04), transparent 56%);
    filter: blur(70px);
    mix-blend-mode: soft-light;
    opacity: 0.65;
    animation: mottle-wander 56s cubic-bezier(0.4, 0, 0.25, 1) infinite;
}

.water-mottle-2 {
    background:
        radial-gradient(ellipse 34% 32% at 63% 37%, rgba(255, 255, 255, 0.06), transparent 62%),
        radial-gradient(ellipse 21% 44% at 33% 86%, rgba(140, 205, 255, 0.07), transparent 60%),
        radial-gradient(ellipse 36% 23% at 14% 46%, rgba(255, 255, 255, 0.045), transparent 58%),
        radial-gradient(ellipse 28% 36% at 86% 74%, rgba(100, 175, 230, 0.05), transparent 62%);
    filter: blur(78px);
    mix-blend-mode: overlay;
    opacity: 0.48;
    animation: mottle-wander-2 71s cubic-bezier(0.35, 0.05, 0.65, 0.95) infinite;
    animation-delay: -23s;
}

@keyframes mottle-wander {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    22% { transform: translate(5%, -4%) scale(1.05) rotate(1deg); }
    44% { transform: translate(-3%, 3%) scale(0.97) rotate(-0.7deg); }
    69% { transform: translate(4%, 5%) scale(1.04) rotate(0.4deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes mottle-wander-2 {
    0% { transform: translate(0, 0) scale(1.03) rotate(0deg); }
    29% { transform: translate(-5%, 2%) scale(0.95) rotate(-1.2deg); }
    53% { transform: translate(3%, -5%) scale(1.06) rotate(0.8deg); }
    81% { transform: translate(-2%, -3%) scale(1.01) rotate(-0.3deg); }
    100% { transform: translate(0, 0) scale(1.03) rotate(0deg); }
}

/* 水中微尘：更慢、略带折线位移，减少「匀速平移」感 */
.water-dust {
    position: absolute;
    inset: 0;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    animation: dust-move 52s ease-in-out infinite;
}

@keyframes dust-move {
    0% { background-position: 0 0; }
    31% { background-position: 80px 140px; }
    58% { background-position: -40px 220px; }
    100% { background-position: 0 0; }
}

/* 顶/底柔光：叠在动效之上、仍在鱼之下 */
#aquarium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 120% 50% at 50% -5%, rgba(255,255,255,0.14), transparent 52%),
        radial-gradient(ellipse 90% 45% at 40% 105%, rgba(0, 60, 100, 0.2), transparent 48%);
    pointer-events: none;
    z-index: 2;
    animation: water-shimmer 42s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes water-shimmer {
    0% { opacity: 0.94; filter: hue-rotate(-1.5deg) brightness(0.995); }
    38% { opacity: 0.98; filter: hue-rotate(1deg) brightness(1.01); }
    72% { opacity: 0.96; filter: hue-rotate(-0.5deg) brightness(1); }
    100% { opacity: 0.94; filter: hue-rotate(-1.5deg) brightness(0.995); }
}

/* 柔和暗角 */
#aquarium::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 32%, rgba(0, 20, 40, 0.38) 100%);
    pointer-events: none;
    z-index: 9200;
}

/* 3D 地板 */
#floor {
    position: absolute;
    bottom: -300px;
    left: -50vw;
    width: 200vw;
    height: 800px;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.1), rgba(0,0,0,0.5) 80%);
    transform: rotateX(75deg) translateZ(-200px);
    transform-origin: top center;
    pointer-events: none;
    z-index: 1;
    animation: floor-pulse 33s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes floor-pulse {
    0% { filter: brightness(0.96); }
    41% { filter: brightness(1.04); }
    100% { filter: brightness(0.98); }
}

#bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* 造景主题 */
.theme-ocean {
    background: linear-gradient(to bottom, #006994, #001f3f);
}
.theme-coral {
    background: linear-gradient(to bottom, #20B2AA, #006400);
}
.theme-river {
    background: linear-gradient(to bottom, #87CEEB, #4682B4);
}
.theme-night {
    background: linear-gradient(to bottom, #0a0a2a, #000000);
}
.theme-air {
    background: linear-gradient(to bottom, #ffffff, #e0f7fa);
}

/* 各主题下调水体层强度，避免过曝或太暗 */
.theme-air .water-flow,
.theme-air .water-flow-2 {
    opacity: 0.32;
    filter: blur(60px);
}
.theme-air .water-mottle,
.theme-air .water-mottle-2 {
    opacity: 0.22;
    filter: blur(80px);
}
.theme-air .water-dust { opacity: 0.012; }

.theme-night .water-flow {
    opacity: 0.48;
    filter: blur(54px) brightness(0.52);
}
.theme-night .water-mottle,
.theme-night .water-mottle-2 {
    opacity: 0.38;
    filter: blur(76px) brightness(0.45);
}

.theme-coral .water-flow {
    background:
        radial-gradient(ellipse 48% 36% at 28% 38%, rgba(130, 230, 180, 0.22), transparent 58%),
        radial-gradient(ellipse 42% 48% at 72% 62%, rgba(0, 110, 70, 0.2), transparent 52%),
        radial-gradient(ellipse 55% 38% at 48% 48%, rgba(255, 255, 255, 0.04), transparent 62%);
}
.theme-coral .water-mottle {
    background:
        radial-gradient(ellipse 26% 40% at 19% 31%, rgba(200, 255, 220, 0.06), transparent 68%),
        radial-gradient(ellipse 38% 21% at 71% 58%, rgba(100, 200, 150, 0.07), transparent 64%),
        radial-gradient(ellipse 16% 48% at 91% 22%, rgba(255, 255, 255, 0.04), transparent 58%),
        radial-gradient(ellipse 44% 26% at 41% 81%, rgba(60, 160, 120, 0.05), transparent 66%),
        radial-gradient(ellipse 22% 28% at 7% 68%, rgba(240, 255, 245, 0.035), transparent 56%);
}

.fish {
    position: absolute;
    user-select: none;
    transform-style: preserve-3d;
    will-change: transform, filter;
}

.fish-volume {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.fish-svg-back,
.fish-svg-front {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.fish-svg-back svg,
.fish-svg-front svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.fish-svg-back {
    transform: translateZ(-8px) scale(0.94);
    opacity: 0.62;
    pointer-events: none;
}

.fish-tail-back,
.fish-fin-back {
    animation: none;
}

.fish-svg-front {
    position: relative;
    transform: translateZ(7px);
    /* filter：亮度与阴影由 script.js updatePosition 按深度设置 */
}

.aquatic-specular {
    position: absolute;
    inset: 8% 10% 10% 8%;
    border-radius: 44% 56% 52% 48% / 48% 42% 58% 52%;
    pointer-events: none;
    transform: translateZ(12px) rotateZ(-3deg);
    background:
        radial-gradient(ellipse 58% 40% at 24% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 72%),
        radial-gradient(ellipse 30% 20% at 46% 58%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 82%);
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* 鱼鳍尾鳍：略慢、非对称，更接近真实划水 */
.fish-tail {
    animation: wag 0.55s infinite ease-in-out;
}
.fish-fin-side {
    animation: flap 0.45s infinite ease-in-out;
}

@keyframes wag {
    0% { transform: rotateZ(-14deg); }
    35% { transform: rotateZ(18deg); }
    70% { transform: rotateZ(-8deg); }
    100% { transform: rotateZ(-14deg); }
}

@keyframes flap {
    0% { transform: rotateX(8deg) rotateZ(-12deg); }
    45% { transform: rotateX(52deg) rotateZ(10deg); }
    100% { transform: rotateX(8deg) rotateZ(-12deg); }
}

/* 造景：外层只负责固定深度（避免 delay 期间丢 Z 导致刷新后“跳位”），摆动只在子层 */
.plant {
    position: absolute;
    bottom: -20px;
    transform: translateZ(var(--z, 0));
    transform-style: preserve-3d;
    user-select: none;
    filter: drop-shadow(5px 10px 10px rgba(0,0,0,0.45));
}

/* 慢摆：只做绕底旋转，不用 translateX，根部位置不动 */
.plant-sway {
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    animation: sway-plant var(--sway-slow, 5.5s) ease-in-out infinite;
    animation-delay: var(--sway-delay, 0s);
    animation-fill-mode: both;
}

.plant-inner {
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    animation: sway-inner var(--sway-fast, 2.2s) ease-in-out infinite;
    animation-delay: var(--sway-delay-inner, 0s);
    animation-fill-mode: both;
}

@keyframes sway-plant {
    0% { transform: rotate(-5deg); }
    33% { transform: rotate(4deg); }
    66% { transform: rotate(-2deg); }
    100% { transform: rotate(-5deg); }
}

@keyframes sway-inner {
    0% { transform: rotate(-2deg); }
    50% { transform: rotate(4deg); }
    100% { transform: rotate(-2deg); }
}

/* 气泡样式 */
.bubble {
    position: absolute;
    bottom: -20px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: rise infinite ease-in;
}

@keyframes rise {
    0% {
        transform: translate3d(var(--bx, 0), 0, var(--z, 0)) scale(1);
        opacity: 0.75;
    }
    25% {
        transform: translate3d(calc(var(--bx, 0) * -1.2), -25vh, var(--z, 0)) scale(1.08);
        opacity: 0.85;
    }
    55% {
        transform: translate3d(calc(var(--bx, 0) * 0.6), -55vh, var(--z, 0)) scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: translate3d(calc(var(--bx, 0) * -0.4), -100vh, var(--z, 0)) scale(1.45);
        opacity: 0;
    }
}

#fps-display {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9998;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    user-select: none;
}

#fps-value {
    display: inline-block;
    min-width: 2.2em;
    text-align: right;
}

#settings-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #e8eef5;
    background-color: rgba(28, 38, 58, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background-color 0.2s, color 0.2s, transform 0.1s, border-color 0.2s;
}

#settings-btn:hover {
    color: #ffffff;
    background-color: rgba(42, 54, 78, 0.96);
    border-color: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

#settings-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 10, 20, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#settings-modal.hidden {
    display: none;
}

#settings-modal .modal-content {
    background: rgba(28, 36, 54, 0.42);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    padding: 30px;
    border-radius: 18px;
    width: 320px;
    max-width: calc(100vw - 40px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#settings-modal #close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
    transition: color 0.2s;
}

#settings-modal #close-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}

#settings-modal .setting-group {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#settings-modal .setting-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#settings-modal h2 {
    margin-top: 0;
    color: #f0f4fa;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#settings-modal h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
}

#settings-modal .input-row {
    display: flex;
    gap: 8px;
}

#settings-modal select,
#settings-modal input[type="number"],
#settings-modal input.field-full {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: rgba(0, 0, 0, 0.28);
    color: #e8eef5;
    box-sizing: border-box;
}

#settings-modal select {
    color: #e8eef5;
}

#settings-modal select option {
    background: #1c2436;
    color: #e8eef5;
}

#settings-modal select optgroup {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 12px;
}

#settings-modal select:focus,
#settings-modal input:focus {
    border-color: rgba(100, 180, 255, 0.65);
    box-shadow: 0 0 0 2px rgba(80, 160, 255, 0.15);
}

#settings-modal input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#settings-modal #fish-type { flex: 2; }
#settings-modal #fish-count { flex: 1; width: 60px; }

#settings-modal .modal-select-full {
    width: 100%;
}

#settings-modal .modal-btn-block {
    width: 100%;
    margin-top: 10px;
}

#settings-modal .field-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.field-full {
    width: 100%;
    box-sizing: border-box;
}

#settings-modal button {
    padding: 10px 15px;
    background: rgba(52, 152, 219, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}

#settings-modal button:hover {
    background: rgba(41, 128, 185, 0.95);
    border-color: rgba(255, 255, 255, 0.28);
}

#settings-modal #clear-fish-btn {
    background: rgba(231, 76, 60, 0.82);
    border-color: rgba(255, 255, 255, 0.18);
}
#settings-modal #clear-fish-btn:hover {
    background: rgba(192, 57, 43, 0.92);
}

#settings-modal #clear-plant-btn {
    background: rgba(243, 156, 18, 0.82);
    border-color: rgba(255, 255, 255, 0.2);
}
#settings-modal #clear-plant-btn:hover {
    background: rgba(230, 126, 34, 0.9);
}