/* ===== 字體定義 ===== */
@font-face {
    font-family: 'Cubic';
    src: url('fonts/Cubic-11.woff2') format('woff2'),
        url('fonts/Cubic-11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback; /* 使用 fallback，在短時間內顯示 fallback 字體，然後切換到 Cubic */
    unicode-range: U+0000-00FF, U+0100-01FF, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2200-22FF, U+2300-23FF, U+2400-243F, U+2440-245F, U+2460-24FF, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+3000-303F, U+3040-309F, U+30A0-30FF, U+3100-312F, U+3130-318F, U+3200-32FF, U+3300-33FF, U+4E00-9FFF, U+A000-A48F, U+A490-A4CF, U+AC00-D7AF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FE50-FE6F, U+FF00-FFEF;
}

@font-face {
    font-family: 'Cubic';
    src: url('https://cdn.jsdelivr.net/gh/TakWolf/fusion-pixel-font@12.5.0/Cubic-11/Cubic-11_1R.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback; /* 使用 fallback，在短時間內顯示 fallback 字體，然後切換到 Cubic */
}

/* ===== 全局重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
}

/* ===== 語言選擇畫面 (V2) ===== */
.language-selection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 27, 38, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.language-selection.hidden {
    display: none;
}

.language-selection-content {
    text-align: center;
    color: #edf2f4;
}

.language-selection-content h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: normal;
}

.language-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.lang-btn {
    padding: 1rem 3rem;
    font-size: 1.5rem;
    background: #FFEB3B;
    color: #1a1b26;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    transition: all 0.3s ease;
    pointer-events: auto; /* 確保一開始就可以點擊 */
    opacity: 1; /* 確保一開始就完全顯示 */
    font-weight: normal; /* 確保字體樣式一致 */
    text-rendering: optimizeLegibility; /* 優化文字渲染 */
    -webkit-font-smoothing: antialiased; /* 平滑字體 */
    -moz-osx-font-smoothing: grayscale; /* macOS 平滑字體 */
}

.lang-btn:hover {
    background: #FFD700;
    transform: scale(1.05);
}

.lang-btn:active {
    transform: scale(0.95);
}

body {
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    /* 使用漸層背景代替左右區塊的背景色，以便讓粒子層顯示 */
    /* 左邊是深色 #1a1823，右邊是黃色 #FFEB3B */
    background: linear-gradient(to right, #1a1823 50%, #FFEB3B 50%);
    color: #edf2f4;
    overflow: hidden;
    -webkit-user-drag: none;
    user-drag: none;
}

/* ===== 粒子系統背景層 ===== */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    /* 允許點擊粒子 */
    z-index: 15;
    /* 在歌手動畫之上 */
}

/* 當遊戲正在進行（播放音樂/動畫）時，提高粒子層級以便互動 */
body.playing #particleCanvas {
    z-index: 25;
    /* 確保在歌手動畫 (z-index: 10) 之上 */
}

/* ===== 主容器 ===== */
.game-wrapper {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
    /* z-index: 10;  <-- 移除這個，避免建立封閉的堆疊上下文 */
    pointer-events: none;
    /* 讓點擊穿透到粒子層 */
    /* V2: 黃色邊框，標示遊戲顯示範圍，避免被網址列遮擋 */
    /* 直接套用黃色四邊邊框 - 所有瀏覽器都會顯示 */
    border: 8px solid #FFEB3B !important;
    box-sizing: border-box;
}

/* 恢復遊戲內容的點擊事件 */
.game-wrapper>* {
    pointer-events: auto;
}

/* 確保所有子元素也能互動（但 overlayCanvas 優先） */
.game-wrapper * {
    pointer-events: auto;
}

/* V2: overlayCanvas 必須優先，確保液化功能正常 */
#overlayCanvas {
    pointer-events: auto !important; /* V2: 強制啟用，確保液化功能正常 */
    z-index: 50;
}

#overlayCanvas.dragging {
    pointer-events: auto;
}

/* V2: 確保 expressionCanvas 在正確的 z-index 層級 */
#expressionCanvas {
    z-index: 10;
    position: relative;
}

/* ===== 左側區域 ===== */
.left-side {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1a1823;
    /* V2: 使用主要顏色 #1a1823 (RGB: 26, 24, 35) */
}

/* ===== 歌手 Canvas ===== */
#singerCanvas {
    width: 45vw;  /* 使用視窗寬度的 45% */
    max-width: 600px;
    min-width: 300px;  /* 最小寬度，避免太小 */
    height: auto;
    aspect-ratio: 1;  /* 保持 1:1 的比例 */
    position: relative;
    z-index: 10;
    /* 內容層：在粒子之下 */
    /* 讓圖像自動縮放以適應容器 */
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

/* ===== 粒子提示（A區左下角） ===== */
.particle-hint {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.particle-hint:not(.hidden) {
    opacity: 1;
}

.particle-hint.hidden {
    display: none;
}

.particle-hint-text {
    font-size: 32px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 16px 32px;
    border-radius: 12px;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    }
}

/* Prompt container */
.prompt-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
    /* 讓點擊穿透 */
    user-select: none;
    /* 禁止選取文字 */
    -webkit-user-select: none;
    /* Safari/Chrome 兼容 */
}

/* Prompt text */
.prompt-text {
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    padding: 24px 40px;
    font-size: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: none;
    min-width: 500px;
    font-weight: bold;
    letter-spacing: 2px;
    white-space: pre-line; /* V2: 支援換行 */
    word-wrap: break-word;
    max-width: 90vw; /* V2: 限制最大寬度，避免超出畫框 */
    text-align: center;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    pointer-events: none;
    /* 確保子元素也不擋滑鼠 */
    user-select: none;
    -webkit-user-select: none;
}

/* Prompt hint (小字提示) - 第一題放大 */
.prompt-hint {
    font-size: 28px; /* 從 18px 放大到 28px */
    color: #edf2f4;
    text-align: center;
    margin-top: 12px;
    padding: 12px 32px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    opacity: 0.8;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    font-weight: 500;
}

/* 歌詞顯示區域 */
.lyrics-container {
    position: absolute;
    bottom: 100px;
    /* 位於歌手下方 */
    width: 80%;
    text-align: center;
    pointer-events: none;
    z-index: 20;
}

.lyrics-text {
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    font-size: 24px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.prompt-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.prompt-hint.hidden {
    display: none;
}

.prompt-text {
    white-space: pre-line; /* V2: 支援換行 */
    word-wrap: break-word;
    max-width: 90vw; /* V2: 限制最大寬度，避免超出畫框 */
    text-align: center;
}

.prompt-text.typing::after,
.prompt-hint.typing::after {
    content: '|';
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ===== 右側區域 ===== */
.right-side {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    /* 透明，讓 body 背景顯示 */
    overflow: hidden;
    /* V2: 確保內容不溢出 */
    padding: 0;
    /* V2: 移除內距，實現滿版 */
}

/* expression canvas */
#expressionCanvas {
    width: 90%;
    max-width: 512px;
    height: auto;
    cursor: crosshair;
    filter: contrast(1.2);
    position: relative;
    z-index: 10;
    /* 內容層：在粒子之下 */
    transform-origin: center center; /* 心跳動畫的中心點 */
}

/* Angry 情緒：快速 polygon 動畫效果（速度比原程式快10倍） */
#expressionCanvas.angry-polygon,
#overlayCanvas.angry-polygon {
    animation: angryPolygonEffect 0.05s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transform-origin: center center;
    filter: url(#angryPolygon);
}

@keyframes angryPolygonEffect {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
    10% {
        transform: scale(1.02) translate(1px, -1px);
        opacity: 0.98;
    }
    20% {
        transform: scale(0.98) translate(-1px, 1px);
        opacity: 1;
    }
    30% {
        transform: scale(1.01) translate(1px, 1px);
        opacity: 0.99;
    }
    40% {
        transform: scale(0.99) translate(-1px, -1px);
        opacity: 1;
    }
    50% {
        transform: scale(1.02) translate(1px, 0);
        opacity: 0.98;
    }
    60% {
        transform: scale(0.98) translate(-1px, 0);
        opacity: 1;
    }
    70% {
        transform: scale(1.01) translate(0, 1px);
        opacity: 0.99;
    }
    80% {
        transform: scale(0.99) translate(0, -1px);
        opacity: 1;
    }
    90% {
        transform: scale(1.01) translate(1px, -1px);
        opacity: 0.99;
    }
    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

/* Joy 心跳效果（響度超過 70% 時觸發） */
#expressionCanvas.joy-heartbeat,
#overlayCanvas.joy-heartbeat {
    animation: heartBeat 0.28s cubic-bezier(0.5, 0, 0.1, 1) infinite;
    transform-origin: center center;
}

@keyframes heartBeat {
    0% {
        transform: scale(1) translate(0.25px, -0.5px) rotate(-0.25deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1); /* 放大：非常快 */
    }
    2.5% {
        transform: scale(1.005) translate(-0.25px, 0.5px) rotate(-0.25deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    5% {
        transform: scale(1.01) translate(0.25px, 0.5px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    6.25% {
        transform: scale(1.015) translate(0.75px, 0.5px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    7.5% {
        transform: scale(1.02) translate(0.25px, 0.5px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    8.75% {
        transform: scale(1.03) translate(-0.25px, 0.25px) rotate(0.125deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    10% {
        transform: scale(1.035) translate(0.75px, 0.5px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    12.5% {
        transform: scale(1.04) translate(0.25px, -0.25px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    15% {
        transform: scale(1.044) translate(0.25px, 0.5px) rotate(0deg); /* 心跳最大值 */
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3); /* 回來：更慢 */
    }
    17.5% {
        transform: scale(1.03) translate(-0.25px, 0.25px) rotate(0.125deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3);
    }
    20% {
        transform: scale(1.02) translate(0.75px, 0.5px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3); /* 回來：更慢 */
    }
    22.5% {
        transform: scale(1.015) translate(0.25px, -0.25px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3);
    }
    25% {
        transform: scale(1.015) translate(0.25px, -0.25px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3); /* 回來：更慢 */
    }
    27.5% {
        transform: scale(1.01) translate(-0.25px, -0.5px) rotate(-0.25deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3);
    }
    30% {
        transform: scale(1.01) translate(-0.25px, -0.5px) rotate(-0.25deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3);
    }
    32.5% {
        transform: scale(1.005) translate(-0.75px, 0.25px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3);
    }
    35% {
        transform: scale(1.005) translate(-0.75px, 0.25px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.02, 0.005, 0.02, 0.3);
    }
    37.5% {
        transform: scale(1.002) translate(0.75px, 0.25px) rotate(-0.25deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3); /* 回來：更慢 */
    }
    40% {
        transform: scale(1.002) translate(0.75px, 0.25px) rotate(-0.25deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    42.5% {
        transform: scale(1.001) translate(-0.25px, -0.25px) rotate(0.125deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    45% {
        transform: scale(1.001) translate(-0.25px, -0.25px) rotate(0.125deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    47.5% {
        transform: scale(1) translate(-0.25px, -0.25px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    50% {
        transform: scale(1) translate(-0.25px, -0.25px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    52.5% {
        transform: scale(1) translate(-0.75px, 0px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3); /* 回來：更慢 */
    }
    55% {
        transform: scale(1) translate(-0.75px, 0px) rotate(0.25deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    57.5% {
        transform: scale(1) translate(-0.75px, 0px) rotate(0.25deg); /* 回到原始大小（確保不會小於1.0） */
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3); /* 回來：更慢（接近原始大小時更慢） */
    }
    60% {
        transform: scale(1) translate(0.25px, 0.25px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    62.5% {
        transform: scale(1) translate(0.25px, 0.25px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    65% {
        transform: scale(1) translate(-0.25px, 0.25px) rotate(-0.125deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    67.5% {
        transform: scale(1) translate(-0.25px, 0.25px) rotate(-0.125deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    70% {
        transform: scale(1) translate(0.25px, -0.25px) rotate(0.125deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3); /* 回來：更慢 */
    }
    72.5% {
        transform: scale(1) translate(0.25px, -0.25px) rotate(0.125deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    75% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    80% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    85% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    90% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    95% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3);
    }
    100% {
        transform: scale(1) translate(0px, 0px) rotate(0deg); /* 保持原始大小（確保不會跳針） */
        animation-timing-function: cubic-bezier(0.01, 0.002, 0.08, 0.3); /* 回來：更慢（越接近原始大小越慢） */
    }
}

/* overlay canvas - 用於顯示工具列和拖移中的眼淚 */
#overlayCanvas {
    width: 90%;
    max-width: 512px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto !important; /* V2: 強制啟用，確保液化功能正常 */
    /* 必須開啟，因為它是主要的互動層 */
    z-index: 50;
    /* Overlay層：在粒子之上，但在UI之下 */
    cursor: crosshair;
}

#overlayCanvas.dragging {
    pointer-events: auto;
    /* 拖移時啟用事件 */
    cursor: grabbing;
}

/* ===== 工具列提示 ===== */
.toolbar-hint {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* V2.0.4: 完全隱藏工具列提示 */
    display: none !important;
    visibility: hidden !important;
}

.toolbar-hint:not(.hidden) {
    opacity: 1;
}

.toolbar-hint.hidden {
    display: none !important;
    visibility: hidden !important;
}

.toolbar-arrow {
    font-size: 48px;
    color: #ffffff;
    animation: arrowBlink 1s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    font-weight: bold;
}

@keyframes arrowBlink {
    0%, 100% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-10px);
    }
}

.toolbar-hint-text {
    font-size: 20px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 12px 20px;
    border-radius: 8px;
    white-space: nowrap;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===== 表情工具列 ===== */
.emotion-toolbar {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
    /* UI層：絕對頂層 */
    pointer-events: auto;
    /* 確保接收點擊 */
    /* V2.0.4: 完全隱藏工具列 */
    display: none !important;
    visibility: hidden !important;
}

/* V2: 第一回合隱藏工具列時，確保不遮擋 overlayCanvas */
.emotion-toolbar.hidden {
    pointer-events: none !important;
    z-index: -1 !important;
    display: none !important;
    visibility: hidden !important;
}

.toolbar-item {
    width: 60px;
    height: 60px;
    background: #FFEB3B;
    /* 改為不透明黃色，遮擋背後的眼淚 */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 移除 backdrop-filter，因為背景已不透明 */
    padding: 4px;
    box-sizing: border-box;
}

.toolbar-item:hover {
    background: #FBC02D;
    /* Hover 時保持不透明（深黃色） */
    border-color: #8d99ae;
    transform: scale(1.1);
}

.toolbar-item.active {
    background: rgba(141, 153, 174, 0.3);
    border-color: #edf2f4;
    transform: scale(1.05);
}

.toolbar-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.toolbar-text {
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.toolbar-text div {
    display: block;
}

/* ===== 操作按鈕 ===== */
.action-bar {
    position: absolute;
    bottom: 40px;
    display: flex;
    gap: 20px;
    z-index: 100;
    /* UI層：絕對頂層 */
    pointer-events: auto;
    /* 確保接收點擊事件 */
}

.action-btn {
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    font-size: 16px;
    padding: 10px 30px;
    background: #edf2f4;
    color: #000000;
    /* 黑色字體 */
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    position: relative;
    /* 確保 z-index 生效 */
    z-index: 101;
    display: none; /* V2: 初始隱藏，液化後才顯示 */
}

.action-btn:hover {
    background: #8d99ae;
    color: #1a1b26;
}

.action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.action-btn:disabled:hover {
    background: transparent;
    color: #edf2f4;
}

/* ===== 回合指示器 ===== */
.round-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 20px;
    color: #edf2f4;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
}

/* ===== 載入遮罩 ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 27, 38, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-overlay.active {
    display: flex;
}

.loading-text {
    font-size: 24px;
    color: #edf2f4;
    animation: pulse 1.5s ease-in-out infinite;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ===== 遊戲結束 ===== */
.game-over-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 27, 38, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.game-over-overlay.active {
    display: flex;
}

.game-over-content {
    text-align: center;
}

.game-over-content h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #edf2f4;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
}

/* ===== 創作者推薦區 ===== */
.creators-section {
    margin: 40px 0;
    width: 100%;
    max-width: 600px;
}

.creators-title {
    font-size: 18px;
    color: #8d99ae;
    margin-bottom: 24px;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.creators-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.creator-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 140px;
}

.creator-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.creator-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
    position: relative;
}

.creator-card:hover .creator-avatar {
    border-color: #FFEB3B;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.2), rgba(255, 235, 59, 0.1));
    position: absolute;
    top: 0;
    left: 0;
}

.creator-info {
    text-align: center;
}

.creator-name {
    font-size: 14px;
    color: #edf2f4;
    font-weight: 500;
    margin-bottom: 4px;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
}

.creator-role {
    font-size: 12px;
    color: #8d99ae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Cubic', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', 'SimSun', 'Arial', sans-serif;
}

/* 響應式：創作者卡片 */
@media (max-width: 768px) {
    .creators-grid {
        gap: 16px;
    }
    
    .creator-card {
        min-width: 120px;
        padding: 12px;
    }
    
    .creator-avatar {
        width: 70px;
        height: 70px;
    }
    
    .creator-name {
        font-size: 12px;
    }
    
    .creator-role {
        font-size: 11px;
    }
    
    .creators-title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

/* ===== 響應式 ===== */
@media (max-width: 1024px) {
    body {
        /* 手機版改為上下分割 */
        background: linear-gradient(to bottom, #1a1b26 50%, #FFEB3B 50%);
    }

    .game-wrapper {
        flex-direction: column;
    }

    .left-side,
    .right-side {
        flex: none;
        height: 50vh;
    }

    /* 平板和手機直式的歌手 Canvas 調整 */
    #singerCanvas {
        width: 70vw;  /* 平板/手機直式用更多寬度 */
        max-width: 400px;
        min-width: 250px;
    }

    .prompt-text {
        font-size: 32px;
        min-width: 300px;
        padding: 20px 32px;
        letter-spacing: 1px;
    }

    .prompt-hint {
        font-size: 22px; /* 響應式：從 28px 縮小到 22px */
        padding: 10px 20px;
        margin-top: 10px;
    }
    
    .toolbar-hint {
        right: 80px;
    }
    
    .toolbar-arrow {
        font-size: 36px;
    }
    
    .toolbar-hint-text {
        font-size: 16px;
        padding: 10px 16px;
    }
    
    .particle-hint-text {
        font-size: 24px;
        padding: 12px 24px;
    }

    .action-bar {
        bottom: 20px;
    }

    .action-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .prompt-text {
        font-size: 24px;
        min-width: 250px;
        padding: 16px 24px;
        letter-spacing: 0.5px;
    }

    .prompt-hint {
        font-size: 18px; /* 響應式：從 28px 縮小到 18px */
        padding: 8px 16px;
        margin-top: 8px;
    }
    
    .toolbar-hint {
        right: 60px;
    }
    
    .toolbar-arrow {
        font-size: 28px;
    }
    
    .toolbar-hint-text {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .particle-hint-text {
        font-size: 20px;
        padding: 10px 20px;
    }
}

/* ===== 手機橫式支援 ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    body {
        /* 橫式恢復左右分割 */
        background: linear-gradient(to right, #1a1b26 50%, #FFEB3B 50%);
    }

    .game-wrapper {
        flex-direction: row;
    }

    .left-side,
    .right-side {
        flex: 1;
        height: 100vh;
        width: 50vw;
    }

    /* 手機橫向的歌手 Canvas 調整 */
    #singerCanvas {
        width: 40vw;  /* 橫向模式使用較小寬度 */
        max-width: 350px;
        min-width: 200px;
    }

    .prompt-text {
        font-size: 24px;
        min-width: 200px;
        padding: 12px 20px;
        letter-spacing: 1px;
    }

    .prompt-hint {
        font-size: 18px; /* 響應式：從 28px 縮小到 18px */
        padding: 8px 16px;
        margin-top: 8px;
    }
    
    .toolbar-hint {
        right: 60px;
    }
    
    .toolbar-arrow {
        font-size: 28px;
    }
    
    .toolbar-hint-text {
        font-size: 14px;
        padding: 8px 12px;
    }

    #expressionCanvas,
    #overlayCanvas {
        width: 85%;
        max-width: 400px;
    }

    .emotion-toolbar {
        right: 10px;
        gap: 10px;
    }

    .toolbar-icon {
        width: 40px;
        height: 40px;
    }

    .action-bar {
        bottom: 15px;
        gap: 15px;
    }

    .action-btn {
        padding: 6px 16px;
        font-size: 12px;
    }

    .round-indicator {
        top: 10px;
        right: 10px;
        font-size: 16px;
        padding: 6px 12px;
    }

    .lyrics-container {
        bottom: 60px;
    }

    .lyrics-text {
        font-size: 18px;
        padding: 8px 16px;
    }
}

/* ===== 極小螢幕 (手機直式) ===== */
@media (max-width: 480px) and (orientation: portrait) {
    /* 小螢幕手機的歌手 Canvas 調整 */
    #singerCanvas {
        width: 85vw;  /* 小手機使用更多螢幕寬度 */
        max-width: 320px;
        min-width: 200px;
    }

    .prompt-text {
        font-size: 20px;
        min-width: 90%;
        padding: 12px 16px;
        letter-spacing: 0px;
    }

    .prompt-hint {
        font-size: 16px; /* 響應式：從 28px 縮小到 16px */
        padding: 6px 12px;
        margin-top: 6px;
    }
    
    .toolbar-hint {
        right: 50px;
    }
    
    .toolbar-arrow {
        font-size: 24px;
    }
    
    .toolbar-hint-text {
        font-size: 12px;
        padding: 6px 10px;
    }

    .action-bar {
        bottom: 10px;
        gap: 10px;
    }

    .action-btn {
        padding: 6px 14px;
        font-size: 11px;
    }

    .emotion-toolbar {
        right: 5px;
        gap: 8px;
    }

    .toolbar-icon {
        width: 35px;
        height: 35px;
    }

    .round-indicator {
        top: 10px;
        right: 10px;
        font-size: 14px;
        padding: 4px 8px;
    }
}