html {
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
}

/* 基礎全螢幕 UI 樣式 (如果你還沒有定義) */
.full-screen-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 確保它在大部分 UI 之上 */
    background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色 */
    color: white;
}

/* hidden 類別用於隱藏 UI */
.hidden {
    display: none !important;
}

/* 載入字體 */
@font-face {
    font-family: 'MinecraftFont';
    src: url('https://geometricgame-studio.github.io/2dmc/minecraft/fonts/MinecraftRegular.otf') format('opentype');
}
@font-face {
    font-family: 'GNUFont';
    src: url('https://geometricgame-studio.github.io/2dmc/minecraft/fonts/GNURegular.otf') format('opentype');
}
@font-face {
    font-family: 'MinecraftTen';
    src: url('https://geometricgame-studio.github.io/2dmc/minecraft/fonts/MinecraftTen.ttf') format('truetype');
}

body {
    background-color: #222;
    color: #eee;
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
h1 {
    font-family: 'MinecraftTen', 'MinecraftFont', 'GNUFont', sans-serif;
    font-size: 0.5cm;
}
h2 {
    font-family: 'MinecraftTen', 'MinecraftFont', 'GNUFont', sans-serif;
}
.group_title {
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
    font-size: 0.75cm;
}
.page_title {
    font-family: 'MinecraftTen', 'MinecraftFont', 'GNUFont', sans-serif;
    font-size: 1cm;
}

#navbar {
    height: 50px;
    width: 100%;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
    box-sizing: border-box;
    padding: 0 20px;
}

#coords-display {
    font-size: 1rem;
    color: #fff;
}

canvas {
    border: 2px solid #555;
    background-color: #87CEEB;
    flex-grow: 1;
    z-index: 0;
}

/* 3. HTML UI 層 - 堆疊在 Canvas 上方 */
#html-ui-layer {
    /* 這是關鍵：絕對定位，疊在 Canvas 上 */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 確保滑鼠事件預設穿透，讓玩家可以與遊戲世界互動 */
    pointer-events: none; 
    /* 將 HTML UI 放在最頂層，確保它覆蓋 Canvas UI */
    z-index: 10; 
}

/* 死亡介面 (Death Screen) */
#death-screen {
    /* --- 佔滿整個 Canvas 空間 --- */
    width: 100%;
    height: 100%;
    
    /* --- 背景與顏色 --- */
    background-color: rgba(139, 0, 0, 0.7); /* 暗紅色 (70% 不透明度) */
    color: white; /* 確保介面文字是白色的 */

    /* --- 內容居中佈局 --- */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 讓內容垂直堆疊 */

    /* --- 淡入/淡出效果 --- */
    opacity: 0; /* 初始狀態：完全透明 */
    transition: opacity 1s ease-out; /* 關鍵：設定 1.5 秒平滑過渡 */
    
    /* 預設隱藏且不能點擊 */
    pointer-events: none; 
}

/* 觸發顯示和淡入的 class */
.is-visible {
    /* 最終狀態：完全不透明，CSS transition 會自動執行動畫 */
    opacity: 0.75 !important; 
    /* 顯示時，允許滑鼠點擊按鈕 */
    pointer-events: auto !important; 
}

.hidden {
    display: none !important;
}

/* 6. 互動修正：當死亡介面顯示時，才允許點擊 */
#death-screen:not(.hidden) {
    pointer-events: auto; 
}

button {
    /* --- 尺寸與字體 (保留原有設定) --- */
    padding: 12px 30px;
    min-width: 7cm;
    margin-top: 20px;
    outline: none;
    font-size: 1.1em;
    font-weight: bold;
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
    letter-spacing: 1px;
    color: rgb(30, 30, 30); 
    cursor: pointer;
    opacity: 1;

    /* --- 核心灰白外觀 --- */
    background-color: #bcbcbc; /* 基礎中灰色 */
    border: 3px solid #dadada; /* 厚深灰色邊框 */
    border-radius: 0;
    
    /* 【3D 陰影層次】: 頂部/底部高光 + 6px 深度陰影 */
    box-shadow:
        0 6px 0 0 #3e3e3e;        /* 6px 深度陰影 */
    /* 無動畫，確保按壓即時 */
    transition: none; 
    transform: none; 
}

/* 按鈕懸停 (Hover) 效果 */
button:hover {
    /* 懸停時主色調輕微變亮 */
    background-color: #aeaeae;
}

/* 按鈕按壓 (Active) 效果：無動畫，直接到位 */
button:active {
    /* 移除所有陰影 */
    box-shadow: none;
        
    /* 向下位移 6px，填補陰影留下的空間 (深度按壓感) */
    transform: translateY(6px); 
    
    /* 按下時背景調成深灰色 */
    background-color: #909090; 
}

.longbtn {
    min-width: 14.2cm;
}
.shortbtn {
    min-width: 2cm;
}

/* 1. 容器：定位在螢幕上方中央 */
#toast-container {
    position: absolute;
    top: 0;
    left: 50%; /* 水平置中 */
    transform: translateX(-50%); /* 實際置中 */
    z-index: 1001; /* 確保在所有 UI 上方 */
    width: 98.5vw; /* 限制寬度 */
}

/* 2. 單個 Toast 訊息的樣式 */
.toast {
    /* Minecraft UI 樣式 */
    background-color: rgba(30, 30, 30, 0.95); /* 深色半透明背景 */
    border-radius: 4px;
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
    font-size: 20px;
    margin-top: 2px;
    color: white;
    padding: 12px 20px;
    border: 2px solid white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 輕微陰影 */
    width: 95vw;

    /* 初始狀態：位於上方（被藏起來） */
    opacity: 1; 
    transform: translateY(-100%); 
    
    /* 關鍵：設置動畫過渡 */
    transition: transform 0.5s linear;
}

/* 3. 顯示狀態：滑落到螢幕上 */
.toast.show {
    transform: translateY(0); /* 歸位到正常位置 */
}

.toast-achievement {
    /* 模仿 Minecraft 的成就邊框和背景 */
    background-color: #2c2c2c; /* 深灰底色 */
    border: 3px solid gold; /* 醒目的金色邊框 */
    color: white;
    
    /* 內容排版：圖標在左，文字在右 */
    display: flex;
    align-items: center;
    padding: 8px 15px;
    position: fixed;
    right: 0px;
    width: 8cm;
    text-align: left;
}

.achievement-icon {
    /* 這個容器現在只是圖片的父級，它不再直接顯示文字 */
    /* 保持 margin-right，但可以移除 font-size 和 color */
    /* font-size: 28px; */ /* 這個現在是由 img 標籤控制 */
    margin-right: 15px;
    /* color: gold; */ /* 這個現在是由 img 標籤控制 */
    flex-shrink: 0; 

    /* 可選：為圖片提供一個固定的容器大小 */
    width: 32px; /* 圖片的期望寬度 */
    height: 32px; /* 圖片的期望高度 */
    display: flex; /* 讓圖片在容器中居中 */
    justify-content: center;
    align-items: center;
}

/* 💥 新增：圖片本身的樣式 */
.achievement-image {
    width: 100%; /* 讓圖片填滿 .achievement-icon 容器 */
    height: 100%;
    object-fit: contain; /* 確保圖片不變形，同時適應容器 */
    /* object-fit: cover; */ /* 如果圖片需要填滿容器並可能裁切，使用 cover */
    border-radius: 2px; /* 可選：給圖片一點圓角 */
}

.achievement-text-container {
    /* 確保標題和訊息垂直堆疊 */
    display: flex;
    flex-direction: column;
}

.achievement-title {
    /* 標題文字：通常為黃色/金色，醒目 */
    color: yellow; 
    font-weight: bold;
    font-size: 18px;
    text-shadow: 1px 1px 0px black; /* 增加立體感 */
    margin-bottom: 2px;
}

.achievement-message {
    /* 訊息文字：通常為較淡的顏色 */
    color: #cccccc;
    font-size: 17px;
}

.dialog-box {
    background-color: rgb(30, 30, 30); /* 完全不透明的深色背景 */
    color: white;
    border: 2px solid #555;
    padding: 25px;
    width: 90%;
    max-width: 500px; /* 限制對話框寬度 */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* 確保它在遮罩層之上 */
}

.dialog-title {
    margin-top: 0;
    font-size: 1.5em;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.dialog-content {
    margin: 15px 0;
    text-align: left;
}

.dialog-buttons {
    display: flex;
    flex-direction: column; /* 關鍵：垂直排列 */
    justify-content: center;
    align-items: center; /* 讓整個按鈕區塊在父容器中置中 */
    margin-top: 1cm;
}

/* 2. 讓按鈕佔滿容器的寬度 */
.dialog-buttons button {
    min-width: 120px;
    width: 100%; /* 關鍵：讓按鈕佔滿 #dialog-buttons 容器的寬度 */
    margin: 5px 0; /* 在按鈕之間新增上下間距 */
}

.settings-panel {
    display: block;
    max-height: 80vh;
    overflow-y: auto;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 40px;
    width: 100vw;
    text-align: center;
    color: white;
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
    z-index: 1001;
}

.setting-group {
    font-size: 0.6cm;
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
}

#full-chat-screen, #full-chat-screen * {
    font-family: 'MinecraftFont', 'GNUFont', sans-serif;
    font-size: 16px; 
}

.full-chat-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 輕微的半透明背景，但不如設定畫面那麼暗 */
    background-color: rgba(0, 0, 0, 0.65); 
    display: flex;
    flex-direction: column; /* 垂直排列：歷史訊息在上，輸入框在下 */
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    z-index: 90;
}

#chat-history {
    flex-grow: 1; /* 佔據大部分空間 */
    max-height: 75vh; /* 限制歷史訊息的高度 */
    width: 100vw;
    margin-left: 0px;
    overflow-y: auto; /* 啟用捲動條 */
    margin-bottom: 10px;
    padding-right: 15px; /* 為捲軸預留空間 */
}

#chat-history p {
    padding: 3px 5px;
    margin: 2px 0;
    word-wrap: break-word;
    font-size: 20px;
    user-select: all;
}

#chat-input-area {
    position: relative;
    top: 50px;
    display: flex;
    align-items: center;
    width: 100%;
    /* 保持在底部 */
}

#chat-input {
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid #5A5A5A;
    padding: 8px 10px;
    outline: none;
}

.window-title {
    height: 50px;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #929292;
    font-family: 'MinecraftTen', 'MinecraftFont', "GNUFont", sans-serif;
    text-align: center;
    margin: 0;
}

.error-message {
    color: rgb(242, 46, 46);
}
.success-message {
    color: rgb(105, 239, 105);
}

/* --- 通用滑桿主體 (Slider Body) --- */

.minecraft-slider {
    font-family: 'MinecraftFont', 'GNUFont', sans-serif; 
    -webkit-appearance: none;
    appearance: none; 
    width: 15cm;
    height: 22px; 
    background: transparent; 
    margin-top: 5px;
}

/* --- 樣式化軌道 (Track) --- */

/* 軌道：Webkit (Chrome/Safari) 樣式 */
.minecraft-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 14px; 
    background: #8B8B8B; /* 深灰色 */
    border: 2px solid #000;
    border-radius: 0; 
    /* 凸起效果：淺色高光在左上，深色陰影在右下 */
    box-shadow: 
        inset 1px 1px 0 #A8A8A8,  /* <=== 修正：淺色高光 (左上) */
        inset -1px -1px 0 #555;   /* <=== 修正：深色陰影 (右下) */
}

/* 軌道：Firefox 樣式 */
.minecraft-slider::-moz-range-track {
    width: 100%;
    height: 14px; 
    background: #8B8B8B; 
    border: 2px solid #000;
    border-radius: 0; 
    box-shadow: 
        inset 1px 1px 0 #A8A8A8, 
        inset -1px -1px 0 #555;
}


/* --- 樣式化滑塊 (Thumb/按鈕) --- */

/* 滑塊：Webkit 樣式 */
.minecraft-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 22px; 
    width: 18px; 
    
    /* <=== 修正：調整 margin-top 以配合更厚的陰影，保持垂直居中 */
    margin-top: -8px; 
    
    background: #C6C6C6; /* 淺灰色 */
    border: 2px solid #000;
    border-radius: 0;
    cursor: pointer;
    
    /* <=== 修正：將陰影偏移量增加到 2px，創造更強烈的像素感 */
    box-shadow: 
        -2px -2px 0 #bdbdbd, /* 亮色高光 (左上) */
        2px 2px 0 #555;   /* 深色陰影 (右下) */
}

/* 滑塊：Firefox 樣式 */
.minecraft-slider::-moz-range-thumb {
    height: 22px;
    width: 18px; 
    
    /* <=== 修正：調整 margin-top */
    margin-top: -8px; 
    
    background: #C6C6C6; /* 淺灰色 */
    border: 2px solid #000;
    border-radius: 0;
    cursor: pointer;
    
    /* <=== 修正：將陰影偏移量增加到 2px */
    box-shadow: 
        -2px -2px 0 #bdbdbd, 
        2px 2px 0 #555;
}

/* --- 1. 隱藏原生的 Checkbox --- */
.minecraft-checkbox {
    /* 絕對隱藏，但保持功能性 */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* --- 2. 視覺化滑動開關 (Track) --- */
.minecraft-switch {
    position: relative;
    display: inline-block;
    width: 1.2cm; /* 軌道寬度 */
    height: 20px; /* 軌道高度 */
    background: #8B8B8B; /* 預設 OFF 狀態為深灰色 */
    border: 2px solid #000;
    border-radius: 0; 
    cursor: pointer;
    transition: background-color 0.2s; 
    
    /* 軌道凸起效果 */
    box-shadow: 
        inset 1px 1px 0 #A8A8A8,  /* 淺色高光 (左上) */
        inset -1px -1px 0 #555;   /* 深色陰影 (右下) */
    
    vertical-align: middle;
}

/* --- 3. 滑塊 (Thumb) --- */
.minecraft-switch::before {
    content: "";
    position: absolute;
    height: 24px; 
    width: 17px; 
    left: 1px; 
    bottom: -4px;
    background: #C6C6C6; /* 滑塊預設淺灰色 */
    border: 2px solid #000;
    border-radius: 0;
    transition: transform 0.05s; 
    
    /* 滑塊凸起效果 */
    box-shadow: 
        -2px -2px 0 #bdbdbd, 
        2px 2px 0 #555;  
}

/* --- 4. ON 狀態：當 Checkbox 被選中時 --- */

/* 1. 軌道顏色切換到綠色 */
.minecraft-checkbox:checked + .minecraft-switch {
    background-color: #55AA55; /* ON 狀態：綠色 */
}

/* 2. 滑塊滑動到右側 */
.minecraft-checkbox:checked + .minecraft-switch::before {
    transform: translateX(24px); 
}