/* =========================================
   遊戲九：詩韻鎖扣 (Nuts & Bolts: Verse) 樣式
   ========================================= */

/* ⚠️ 介面「上半部」（overlay 背景、頂列、分數、控制鈕、難度標籤、
   紅心副標、詩詞出處連結）之樣式已抽至 theme_xuanzhi.css 的 .fm-* 共用區塊。
   本檔僅保留 .game9-area 及以下的遊戲區私有樣式（螺絲樁/螺帽配色維持原樣不動）。
   註：game9 沒有紅心生命值系統，fm-hearts 容器恆為空。 */

.hidden {
    display: none !important;
}

.game9-area {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;
    padding: 6px;
    width: 100%;
    align-items: center;
}

.game9-undo-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0px 10px;
    background: hsl(0, 60%, 25%);
    border: 0.6px solid hsla(40, 100%, 80%, 0.3);
    color: hsl(45, 80%, 70%);
    border-radius: 12px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;

}

.game9-undo-btn:hover {
    background: hsl(0, 60%, 50%);
    color: hsl(45, 80%, 90%);
}

.game9-undo-btn:disabled {
    background: hsl(0, 0%, 50%);
    color: hsl(45, 0%, 90%);
}

/* 訊息區域 (提示步數/目標) */
.game9-info {
    text-align: center;
    width: 100%;
    padding: 2px;
    font-size: 24px;
    color: var(--fm-ink, #2e241b);
    min-height: 40px;
    margin-bottom: 10px;
}

/* 詩詞出處連結：樣式已上移至 theme_xuanzhi.css 的 .fm-poem-info（位於 fm-sub-header 右側）*/

.game9-progress-text {
    /* 靠左顯示 */
    /*display: flex;*/
    text-align: left;
    justify-content: flex-start;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--fm-gold, #8a6a1e);
}

/* 計時器防呆用 */
#game9-timer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    display: none;
}

/* 紅白相間雙計時框：樣式已移至 theme_xuanzhi.css 的 .fm-timer-path-red / .fm-timer-path-white
   （紅＝--fm-timer-red、白＝--fm-timer-white，與其他遊戲統一）。
   game9 的計時框顏色為靜態（updateTimerRing 只改 dasharray、不改 stroke）。*/

.game9-play-area {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 垂直居中 */
    z-index: 5;
}

.game9-bolt-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    flex-wrap: wrap;
    align-content: center;
    /* 垂直居中盤面 */
    padding: 20px 0;
}

/* 單根螺絲樁（畫面上垂直站立、可以疊放螺帽文字的那根柱子） */
.game9-bolt {
    position: relative;
    width: 40px;
    /* ⚠️ 這裡故意不寫死 height，因為每根螺絲樁能放幾顆螺帽（幾個字）不一定一樣多，
       所以高度改由 game9.js 的 renderLevel() 依「這句詩最長有幾個字」動態計算後
       用 JavaScript 設定（搜尋 boltEl.style.height 即可找到那段程式碼）。 */
    background: linear-gradient(to right, hsl(40, 20%, 50%), hsl(40, 30%, 70%), hsl(40, 20%, 50%));
    border-radius: 6px 6px 0 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.3);
    display: flex;
    /* flex-direction: column-reverse 的意思是：子元素（螺帽）由「下往上」排列，
       這樣我們在程式碼裡用 appendChild 依序把螺帽加進去時，
       畫面上第一個加入的螺帽就會自然疊在最底部，符合「螺絲從底部往上鎖」的視覺效果。 */
    flex-direction: column-reverse;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* 螺絲樁底座 */
.game9-bolt::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -15px;
    width: 70px;
    height: 10px;
    background: hsl(40, 20%, 40%);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

/* 目標亮起動畫 */
.game9-bolt.target-highlight {
    filter: brightness(1.3) drop-shadow(0 0 10px hsla(60, 100%, 70%, 0.8));
}

.game9-bolt.completed {
    animation: boltCompleted 0.6s ease-out;
}

@keyframes boltCompleted {
    0% {
        transform: translateY(0);
        filter: brightness(1);
    }

    20% {
        transform: translateY(-10px) scale(1.05);
        filter: brightness(1.5) drop-shadow(0 0 20px gold);
    }

    40% {
        transform: translateY(0) scale(1.05);
    }

    60% {
        transform: translateY(-4px) scale(1.02);
        filter: brightness(1.5) drop-shadow(0 0 20px gold);
    }

    100% {
        transform: translateY(0);
        filter: brightness(1);
    }
}

/* 螺帽文字（每一顆疊在螺絲樁上、寫著一個詩詞文字的方塊） */
/* ⚠️ 重要：height 這個值「不能」單獨在這裡改完就沒事！
   game9.js 的 renderLevel() 裡有一段計算「每顆螺帽疊放的間隔（bottom 位置）」與
   「整根螺絲樁要多高」的程式碼，那段程式碼裡有跟這裡的 height 對應的常數
   （搜尋 NUT_HEIGHT 即可找到）。如果只改這裡的 height，卻沒有同步改 game9.js
   裡的 NUT_HEIGHT，螺帽疊起來就會「間隔跑掉」（黏在一起變不出縫隙，
   或是縫隙太大看起來鬆散）。
   目前 height: 72px 已經同步更新過 NUT_HEIGHT: 72，兩邊是一致的，
   之後如果還要再調整螺帽高度，記得「這裡」跟「game9.js 的 NUT_HEIGHT」要一起改。 */
.game9-nut {
    position: absolute;
    width: 64px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    font-weight: bold;
    color: hsl(40, 50%, 90%);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5), inset 0 2px 4px hsla(0, 0%, 100%, 0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 讓螺帽被選取（浮起）或放下時的位移動畫更平滑、有點彈跳感 */
    pointer-events: auto;
    /* 允許直接點擊「某一顆」螺帽（而不是只能點整根螺絲樁），
       這樣玩家才能點中間某顆螺帽，一次選取它跟它上面的所有螺帽 */
    cursor: pointer;
}

/* 螺帽顏色分級 (根據詩句順序定色) */
.game9-nut.nut-color-1 {
    background: linear-gradient(to bottom, hsl(0, 60%, 45%), hsl(0, 60%, 30%));
}

.game9-nut.nut-color-2 {
    background: linear-gradient(to bottom, hsl(210, 60%, 45%), hsl(210, 60%, 30%));
}

.game9-nut.nut-color-3 {
    background: linear-gradient(to bottom, hsl(120, 40%, 40%), hsl(120, 40%, 25%));
}

.game9-nut.nut-color-4 {
    background: linear-gradient(to bottom, hsl(45, 80%, 45%), hsl(45, 80%, 30%));
}

.game9-nut.nut-color-5 {
    background: linear-gradient(to bottom, hsl(300, 40%, 45%), hsl(300, 40%, 30%));
}

.game9-nut.nut-color-6 {
    background: linear-gradient(to bottom, hsl(180, 60%, 40%), hsl(180, 60%, 25%));
}

.game9-nut.nut-color-7 {
    background: linear-gradient(to bottom, hsl(30, 80%, 50%), hsl(30, 80%, 35%));
}

/* 大學難度：全為不同深度的青色系 */
.game9-nut.nut-color-hard-1 {
    background: linear-gradient(to bottom, hsl(180, 50%, 35%), hsl(180, 50%, 20%));
}

.game9-nut.nut-color-hard-2 {
    background: linear-gradient(to bottom, hsl(180, 60%, 25%), hsl(180, 60%, 15%));
}

.game9-nut.nut-color-hard-3 {
    background: linear-gradient(to bottom, hsl(180, 40%, 45%), hsl(180, 40%, 30%));
}

.game9-nut.nut-color-hard-4 {
    background: linear-gradient(to bottom, hsl(180, 70%, 15%), hsl(180, 70%, 5%));
}

/* 研究所難度：全黑金屬 */
.game9-nut.nut-color-expert {
    background: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 10%));
    border: 1px solid hsl(0, 0%, 40%);
}

/* 選取時浮起發光 */
.game9-nut.selected {
    /* 透過 JS translateY 控制動畫，但在 class 內增強效果 */
    z-index: 10;
    filter: brightness(1.2);
    box-shadow: 0 16px 20px rgba(0, 0, 0, 0.8), 0 0 20px hsla(60, 100%, 50%, 0.8), inset 0 2px 4px hsla(0, 0%, 100%, 0.5);
}

/* 螺帽上的提示數字 */
.game9-nut-hint {
    position: absolute;
    bottom: -12px;
    right: 0px;
    font-size: 24px;
    color: hsla(0, 0%, 100%, 1.0);
    font-weight: bold;
}

/* .game9-message Styles Removed - Using Unified GameMessage Component */

/* 撤銷按鈕的附加控制 */
.game9-undo-btn {
    background: hsl(40, 60%, 30%) !important;
}

.game9-undo-btn:hover {
    filter: brightness(1.5);
}

.game9-undo-btn:disabled {
    background: hsl(0, 0%, 30%) !important;
    color: hsl(0, 0%, 50%) !important;
    cursor: not-allowed;
    border-color: transparent !important;
}

.shake {
    animation: shakeAnim 0.3s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shakeAnim {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}