/* ==========================================
   🐸 青蛙村莊生態風專用全域變數
   ========================================== */
:root {
    --frog-green: #52b788;       /* 翠綠青蛙色 */
    --frog-dark: #2d6a4f;        /* 深森林綠 */
    --frog-light: #d8f3dc;       /* 嫩荷葉綠 */
    --mud-brown: #6c584c;        /* 土壤木紋褐 */
    --soft-cream: #f4f9f4;       /* 舒適有機白 */
    --warning-red: #ff8787;      /* 污染警告色 */
}

header {
    background-color: #ffffff;
    padding: 15px 30px;
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #52b788;
    z-index: 10;
}

body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), url('../img/bg01.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #3e2723;
    font-size: var(--base-font-size);
    line-height: 1.8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;       /* 新增：確保 body 內的所有直接子元素（如 wrapper）水平居中 */
    padding-top: 95px;         /* 保留給固定導覽列的空間 */
    box-sizing: border-box;
}

/* ==========================================
    🏡 左右並排大包裝（修正置中版）
   ========================================== */
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;       /* 修正：由 flex-start 改為 center，讓左右兩欄高度垂直居中對齊 */
    gap: 30px;
    max-width: 1100px;         /* 微調：讓寬度稍微緊湊，視覺更集中 */
    width: 100%;
    margin: 40px auto 0 auto;  /* 修正：加上 auto 讓整個 wrapper 在大螢幕下絕對水平置中，並加高頂部間距 */
    padding: 0 20px;           /* 增加安全內邊距，防止緊貼邊緣 */
    box-sizing: border-box;
}

/* ==========================================
   🏡 左側主控制面板
   ========================================== */
.container {
    flex: 1;
    max-width: 650px;
    background: #ffffff;
    padding: 35px;
    border-radius: 40px; /* 仿生物超圓潤邊角 */
    border: 5px solid var(--frog-green);
    box-shadow: 0 15px 35px rgba(45, 106, 79, 0.2);
    position: relative;
}

/* 大標題 */
.container h1 {
    color: var(--frog-dark);
    text-align: center;
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

/* ==========================================
   🧪 故事敘述區塊 (生態木屋木藤風)
   ========================================== */
.story-box {
    background: var(--frog-light);
    border-left: 8px solid var(--frog-green);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    color: var(--mud-brown);
}
.story-box h2 {
    margin-top: 0;
    color: var(--frog-dark);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}
.frog-list {
    padding-left: 20px;
    margin: 10px 0;
}
.frog-list li {
    margin-bottom: 6px;
    list-style-type: "🐸 "; /* 特製青蛙清單圖示 */
}

/* ==========================================
   🧪 荷葉水樣燒杯區 (Beaker Zone)
   ========================================== */
#beaker-zone {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* 燒杯本體 - 這次設計得像一朵倒立的胖荷花花苞 */
.beaker {
    width: 75px;
    height: 95px;
    border: 4px solid var(--mud-brown);
    border-radius: 15px 15px 35px 35px; /* 上平下圓的水壺構造 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--mud-brown);
    background: linear-gradient(to top, #e8f5e9, #ffffff);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    user-select: none;
}

/* 燒杯內文字標籤 */
.beaker-label {
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-brown);
}

/* 滑鼠移上去時浮動（像水上漂浮一樣） */
.beaker:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--frog-green);
    color: var(--frog-green);
}

/* 被選中時的發光活性狀態（變為亮綠色，荷葉完全展開感） */
.beaker.selected {
    background: linear-gradient(to top, #74c69d, #d8f3dc);
    border-color: var(--frog-dark);
    color: white;
    box-shadow: 0 0 20px rgba(82, 183, 136, 0.8);
}
.beaker.selected .beaker-label {
    background: var(--frog-dark);
    color: white;
    border-color: var(--frog-light);
}

/* ==========================================
   🟢 青蛙村莊風味按鈕與連結
   ========================================== */
button.btn-frog {
    display: block;
    margin: 0 auto 25px;
    padding: 14px 40px;
    border: 3px solid var(--frog-dark);
    border-radius: 40px;
    background: var(--frog-green);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(45, 106, 79, 0.3);
    transition: all 0.2s ease;
}
button.btn-frog:hover {
    background: var(--frog-dark);
    transform: scale(1.04);
    box-shadow: 0 8px 16px rgba(45, 106, 79, 0.4);
}

/* 跳轉超連結 */
.btn-link {
    display: block;
    text-align: center;
    margin-top: 25px;
    padding: 10px;
    background: var(--soft-cream);
    color: var(--frog-dark);
    border: 2px solid var(--frog-green);
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    transition: 0.2s;
}
.btn-link:hover {
    background: var(--frog-green);
    color: white;
}

/* ==========================================
   🖼️ 青蛙表情圖像展示區 (附帶藤蔓自然外框)
   ========================================== */
#robot-display {
    text-align: center;
    margin: 25px auto;
    width: 170px;
    height: 170px;
    border-radius: 50%; /* 圓形外框 */
    border: 6px double var(--mud-brown);
    background: var(--soft-cream);
    padding: 5px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#robot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
#robot-display:hover #robot-img {
    transform: scale(1.1) rotate(5deg); /* 互動微動效 */
}

/* ==========================================
   📜 生態石碑主控台 (Console)
   ========================================== */
#console {
    background: #2b2d42; /* 深色岩石底，方便看清彩色系統字 */
    color: #a7c957;      /* 螢光苔蘚綠 */
    padding: 20px;
    border-radius: 25px;
    border: 3px dashed var(--frog-green);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.05rem;
    min-height: 100px;
    line-height: 1.6;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

/* ==========================================
   📋 右側參考資訊面板
   ========================================== */
.info-panel {
    width: 360px;
    background: #ffffff;
    border-radius: 35px;
    padding: 30px;
    border: 4px solid var(--mud-brown);
    box-shadow: 0 12px 25px rgba(108, 88, 76, 0.15);
}
.info-panel h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--mud-brown);
    font-size: 1.3rem;
    border-bottom: 2px dashed var(--mud-brown);
    padding-bottom: 10px;
}
.info-panel table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.info-panel th, 
.info-panel td {
    border: 1px solid #e0ede0;
    padding: 12px 10px;
    text-align: center;
    font-size: 0.95rem;
}
.info-panel th {
    background: var(--frog-light);
    color: var(--frog-dark);
    font-weight: bold;
}
.info-panel tr:last-child td:first-child { border-bottom-left-radius: 15px; }
.info-panel tr:last-child td:last-child { border-bottom-right-radius: 15px; }

/* 表格重點顏色突顯 */
.td-accent { color: #d90429; font-weight: bold; }
.td-success { color: var(--frog-dark); font-weight: bold; }

/* 讓 a 標籤做成的按鈕也能完美套用青蛙按鈕樣式 */
a.btn-frog {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}

/* 響應式：手機版自動垂直重排 */
@media (max-width: 850px) {
    .wrapper { flex-direction: column; align-items: center; }
    .container, .info-panel { width: 100%; max-width: 100%; box-sizing: border-box; }
}