/* =========================================
   花月共用主題：墨色（Dark / Deep-Ink）深色系
   ----------------------------------------
   設計目標：
   - 以「深墨舞台」為主底色（暗藍→黑徑向漸層），供三消／連線類等
     需要鮮豔字塊在深底上跳出的遊戲共用（game24 三字成珠為範本）。
   - 本檔提供跨遊戲「上半部外殼（chrome）」的共用樣式，前綴一律 .fmd-
     （FlowerMoon Dark），與淺色主題 theme_xuanzhi.css 的 .fm- 完全獨立，
     兩者互不干擾、可同時載入。

   使用方式：
   - 於 index.html 以 <link> 載入本檔（各遊戲 CSS 之前）。
   - 遊戲 gameXX.js 於 createDOM() 掛上對應 .fmd-* class 即享有一致外殼。
   - 下半部的遊戲區內容（字塊、粒子、特效等）仍留在各自 gameXX.css。

   涵蓋範圍（共用外殼）：
     1. overlay 覆蓋層          → .fmd-overlay
     2. 頂部分數列 + 控制鈕      → .fmd-header / .fmd-score-board / .fmd-controls / .nav-btn / .fmd-difficulty-tag
     3. 副標（步數 + 詩名）      → .fmd-sub-header / .fmd-moves-label / .fmd-poem-info
     4. 資訊列                  → .fmd-info-bar
     5. 遊戲區與棋盤外框         → .fmd-area / .fmd-board-wrapper
     6. 計時／步數 SVG 外框      → .fmd-timer-ring / .fmd-timer-path / .fmd-moves-path-red / .fmd-moves-path-white

   ⚠️ 本檔內容自 game24.css 原樣搬移（視覺完全等同），不得更動既有外觀；
      新增 game25~game30 時比照 game24 掛上 .fmd-* class 即可統一風格。
   ========================================= */

/* ── overlay 主容器：固定鋪滿、頂部對齊 ── */
.fmd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    /* 暗藍至黑徑向漸層，營造深邃舞台感 */
    background: radial-gradient(ellipse at center, hsl(210, 30%, 25%) 0%, hsl(220, 40%, 10%) 70%, hsl(0, 0%, 3%) 100%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: hsl(40, 50%, 85%);
    font-family: 'Noto Serif TC', serif;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── 標頭：分數 + 控制按鈕列 ── */
.fmd-header {
    padding: 2px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    z-index: 10;
    width: 100%;
    height: 50px;
}

/* 分數顯示 */
.fmd-score-board {
    color: hsl(50, 75%, 62%);
    font-size: 24px;
    font-weight: bold;
    padding-left: 50px;
    text-shadow: 0 0 6px hsla(45, 90%, 55%, 0.5);
}

/* 控制按鈕區 */
.fmd-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.fmd-controls .nav-btn {
    padding: 0px 10px;
    background: linear-gradient(180deg, hsl(0, 55%, 32%) 0%, hsl(0, 60%, 22%) 100%);
    border: 0.6px solid hsla(40, 100%, 80%, 0.35);
    color: hsl(45, 80%, 75%);
    border-radius: 12px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 hsla(45, 80%, 70%, 0.25);
}

.fmd-controls .nav-btn:hover {
    background: linear-gradient(180deg, hsl(0, 60%, 50%) 0%, hsl(0, 65%, 38%) 100%);
    color: hsl(45, 80%, 92%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.fmd-controls .nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.fmd-controls .nav-btn:disabled {
    background: hsl(0, 0%, 35%);
    color: hsl(45, 0%, 80%);
    cursor: not-allowed;
}

/* 難度標籤（內聯樣式由 JS 動態設定底色） */
.fmd-difficulty-tag {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 20px;
    color: hsl(45, 30%, 90%);
    border: 0.6px solid hsla(40, 100%, 80%, 0.2);
    background: hsl(120, 30%, 35%);
    cursor: pointer;
    transition: all 0.2s;
}

.fmd-difficulty-tag:hover {
    box-shadow: 0 0px 8px rgba(255, 255, 255, 0.9);
    filter: brightness(1.3);
}

/* ── 副標頭：步數標籤（左）＋ 詩名資訊（置中） ── */
.fmd-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9;
    border-bottom: 1px solid hsla(45, 80%, 60%, 0.2);
    width: 100%;
    height: 36px;
    padding: 0 12px;
    box-sizing: border-box;
    gap: 8px;
}

/* 步數標籤：移至 sub-header 左側；詩名 absolute 置中以避免被推擠 */
.fmd-sub-header .fmd-moves-label {
    flex: 0 0 auto;
}

/* 詩名靠右並預留 20px */
.fmd-sub-header .fmd-poem-info {
    flex: 1 1 auto;
    text-align: right;
    margin-right: 20px;
}

/* 詩名 */
.fmd-poem-info {
    font-size: 18px;
    color: hsl(40, 55%, 82%);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── 資訊列：當前句與字頻進度燈的容器 ── */
.fmd-info-bar {
    width: 100%;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* ── 遊戲區域：包覆棋盤的彈性區 ── */
.fmd-area {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;
    padding: 6px;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
}

/* 棋盤包裝器：相對定位，容納計時 SVG 與粒子層 ──
   ⚠️ 高度不再用固定 aspect-ratio：改由 JS 依「列數/欄數」計算（確保每格為正方形）
*/
.fmd-board-wrapper {
    position: relative;
    width: 99%;
    max-width: 490px;
    /* 暗紅木紋紙質背景，反襯鮮豔字塊（深色舞台） */
    background:
        radial-gradient(circle at 30% 20%, hsla(20, 50%, 25%, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, hsla(0, 40%, 18%, 0.5) 0%, transparent 50%),
        linear-gradient(180deg, hsl(0, 30%, 18%) 0%, hsl(0, 20%, 12%) 100%);
    border: 1px solid hsla(45, 80%, 60%, 0.5);
    border-radius: 10px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px hsla(45, 60%, 50%, 0.15),
        inset 0 0 30px hsla(0, 0%, 0%, 0.3);
    touch-action: none;
    /* 棋盤 4 邊預留 14px 給「步數紅白外框」與「時限外框」當外框線 */
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── 計時器 SVG 環（順時鐘環繞棋盤） ── */
.fmd-timer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    display: none;
    overflow: visible;
}

/* 計時邊框線 */
.fmd-timer-path {
    fill: none;
    stroke: hsl(0, 50%, 22%);
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10000;
    stroke-dashoffset: 10000;
}

/* 步數紅白倒數框（仿 game9 詩韻鎖扣） — 兩個重疊矩形以 dasharray 分段染色 */
.fmd-moves-path-red,
.fmd-moves-path-white {
    fill: none;
    stroke-width: 8px;
    stroke-linecap: butt;
    transition: stroke-dasharray 0.3s ease;
    display: none;
}

.fmd-moves-path-red {
    stroke: hsl(0, 100%, 45%);
}

.fmd-moves-path-white {
    stroke: hsl(33, 50%, 78%);
}