/* style.css */
body { 
    font-family: "Microsoft JhengHei", sans-serif; background: #f0f2f5; text-align: center; 
    user-select: none; -webkit-user-select: none; margin: 0; padding: 20px;
}

.grid { 
    display: flex; justify-content: center; flex-wrap: wrap; 
    gap: 40px; padding: 40px; position: relative; 
}

.card { 
    background: white; border-radius: 12px; padding: 20px; 
    width: 220px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    position: relative; z-index: 1;
}

/* 連通管：對準魚缸底部高度 */
.card:not(:first-child)::before {
    content: ""; position: absolute;
    left: -43px; top: 165px; 
    width: 43px; height: 12px;
    background: #bdc3c7; border: 2px solid #7f7f8d;
    border-radius: 4px; z-index: -1;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}

.tank-visual { 
    width: 80px; height: 120px; border: 3px solid #333; margin: 15px auto; 
    position: relative; background: #eee; border-radius: 0 0 10px 10px; overflow: hidden;
}

.water { width: 100%; position: absolute; bottom: 0; transition: height 0.5s, background-color 0.5s; }
.status-text { font-weight: bold; margin: 10px 0; min-height: 24px; }
.status-dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; margin-left: 5px; }
.mac-label { font-size: 0.75em; color: #95a5a6; margin: -10px 0 15px 0; user-select: text; }

.home-btn {
        position: fixed;
        top: 20px;
        left: 20px;
        padding: 10px 18px;
        background-color: #34495e;
        color: white;
        text-decoration: none;
        border-radius: 6px;
        font-weight: bold;
        font-size: 0.9em;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        transition: background-color 0.2s, transform 0.1s;
        z-index: 999; /* 確保按鈕永遠在最上層不被遮擋 */
    }
.home-btn:hover {
    background-color: #2c3e50;
}
.home-btn:active {
    transform: scale(0.97);
}

.btn { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; margin: 3px; font-weight: bold; color: white; transition: 0.3s; }
.btn-on { background: #0099ff; } .btn-off { background: #95a5a6; }

/* 動畫 */
@keyframes wave-low { 0%, 33% { height: 20%; } 34%, 66% { height: 35%; } 67%, 99% { height: 50%; } }
@keyframes wave-normal { 0%, 33% { height: 60%; } 34%, 66% { height: 75%; } 67%, 99% { height: 90%; } }
@keyframes wave-blink { 0%, 49% { height: 0%; opacity: 0; } 50%, 100% { height: 100%; opacity: 1; } }

.filling-low { animation: wave-low 1.5s infinite steps(1); }
.filling-normal { animation: wave-normal 1.2s infinite steps(1); }
.filling-emergency { animation: wave-blink 0.2s infinite steps(1); transition: none !important; }
.alert-blink { animation: red 0.3s infinite; }