/* =========================================
   遊戲八：一筆裁詩 (Poetry Path) 樣式
   ========================================= */

.game8-overlay {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    background: radial-gradient(circle at center, hsl(210, 30%, 25%) 0%, hsl(0, 0%, 10%) 100%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* 頂部對齊，確保主要內容在視覺中心 */
    color: hsl(40, 50%, 80%);
    font-family: 'Noto Serif TC', serif;
    overflow: hidden;
    /* 鎖定溢出，防止遊戲內容超出視窗範圍 */
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.game8-header {
    padding: 2px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 100%;
    height: 50px;
}

/*分數*/
.game8-score-board {
    color: hsl(50, 70%, 60%);
    font-size: 24px;
    font-weight: bold;
    padding-left: 50px;
}

/*控制按鈕*/
.game8-controls .nav-btn {
    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;
}

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

.game8-controls .nav-btn:disabled {
    background: hsl(0, 0%, 50%);
    color: hsl(45, 0%, 90%);
}

/* 難度標籤 */
.game8-difficulty-tag {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 20px;
    color: hsl(45, 30%, 85%);
    border: 0.6px solid hsla(40, 100%, 80%, 0.1);
    z-index: 100;
    cursor: pointer;
    transition: all 0.2s;
}

.game8-difficulty-tag[data-level="小學"] {
    background: linear-gradient(135deg, hsl(100, 40%, 40%) 0%, hsl(120, 40%, 30%) 100%);
}

.game8-difficulty-tag[data-level="中學"] {
    background: linear-gradient(135deg, hsl(210, 40%, 50%) 0%, hsl(230, 40%, 40%) 100%);
}

.game8-difficulty-tag[data-level="高中"] {
    background: linear-gradient(135deg, hsl(0, 50%, 50%) 0%, hsl(0, 50%, 35%) 100%);
}

.game8-difficulty-tag[data-level="大學"] {
    background: linear-gradient(135deg, hsl(290, 50%, 50%) 0%, hsl(270, 50%, 35%) 100%);
}

.game8-difficulty-tag[data-level="研究所"] {
    background: linear-gradient(135deg, hsl(50, 80%, 50%) 0%, hsl(40, 80%, 35%) 100%);
}

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

.game8-sub-header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 垂直居中 */
    background: rgba(0, 0, 0, 0.4);
    z-index: 9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 40px;
}

.hearts {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
}

.heart {
    color: hsl(4, 90%, 60%);
    font-size: 32px;
}

.heart.empty {
    opacity: 0.9;
}

.heart.score {
    color: hsl(36, 90%, 50%);
    opacity: 1;
}

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

/*詩名與進度區域*/
.game8-info {
    text-align: center;
    width: 100%;
    padding: 2px;
    font-size: 24px;
    color: hsl(40, 50%, 80%);
    min-height: 40px;
}

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

/*進度*/
.game8-progress-text {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4px;
    color: hsl(36, 80%, 50%);
    margin-bottom: 4px;
}

/*棋盤*/
.game8-grid-wrapper {
    position: relative;
    width: 96%;
    max-width: 560px;
    aspect-ratio: 7 / 9;
    background: hsl(40, 30%, 0%);
    /* 宣紙紋理質感設定 (可選) */
    /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.1"/></svg>');*/
    touch-action: none;
    /* 停用手勢捲動，確保拖曳畫線順暢 */
}

/* SVG 線條層：用於繪製玩家劃出的各種顏色路徑 */
.game8-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 穿透點擊，不干擾文字格的觸控 */
    z-index: 2;
}

/*繪製筆觸路徑*/
.game8-path {
    fill: none;
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: opacity 0.3s ease;
}

/*完成筆觸路徑*/
.game8-path.success-path {
    transition: opacity 0.5s ease;
    opacity: 0.95;
}


/* 第一筆：藍色 */
.game8-path.path-color-1 {
    stroke: hsl(230, 80%, 50%);
}

/* 第二筆：淺青色 */
.game8-path.path-color-2 {
    stroke: hsl(190, 80%, 35%);
}

/* 第三筆：綠色 */
.game8-path.path-color-3 {
    stroke: hsl(145, 68%, 30%);
}

/* 第四筆：淺黃色 */
.game8-path.path-color-4 {
    stroke: hsl(60, 80%, 25%);
}

/* 第五筆：粉紅色 */
.game8-path.path-color-5 {
    stroke: hsl(330, 80%, 65%);
}

/* 第六筆：紅色 */
.game8-path.path-color-6 {
    stroke: hsl(0, 60%, 55%);
}

/* 第七筆：紫色 */
.game8-path.path-color-7 {
    stroke: hsl(270, 60%, 55%);
}

/* 第八筆：金黃色 */
.game8-path.path-color-8 {
    stroke: hsl(45, 100%, 40%);
}

/*棋盤*/
.game8-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    /* 必須用 minmax(0, 1fr) 強制等分，否則 target-hint/start-hint 的 50px 大字會撐大該列，
       造成各列高度不均、SVG 線條與字體中心錯位（提示越多錯位越嚴重） */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    z-index: 3;
}

/*棋盤格包括字體*/
.game8-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: hsl(0, 0%, 80%);
    position: relative;
    user-select: none;
    cursor: pointer;
}

/*棋盤格畫線時的圓圈*/
.game8-cell::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.3);
    z-index: -1;
    transition: transform 0.2s ease;
}

/*棋盤格選取時的圓圈*/
.game8-cell.selected::before {
    transform: translate(-50%, -50%) scale(1.2);
}

/*棋盤格目標提示字粗體*/
.game8-cell.target-hint {
    color: hsl(0, 0%, 100%);
    font-size: 50px;
    font-weight: bold;
}

/*棋盤格-起始提示字粗體黃色*/
.game8-cell.start-hint {
    font-size: 50px;
    font-weight: bold;
    text-shadow: 0 0 10px hsl(36, 80%, 50%);
    color: hsl(0, 0%, 100%);
}

/*棋盤格-起始提示字粗體黃色的圓圈*/
.game8-cell.start-hint::before {
    transform: translate(-50%, -50%) scale(1.2);
    background: hsla(36, 90%, 66%, 0.4);
    animation: pulse 1.5s infinite;
}

/* 完成後的狀態 */
.game8-cell.permanent-selected {
    font-weight: normal;
    /* 預設為一般，除非有 stroke-start 或 target-hint */
}

/* 完成筆劃的第一個字加粗 */
.game8-cell.stroke-start {
    font-weight: bold !important;
}

/* Cell 底色，第一筆藍色 */
.game8-cell.permanent-selected.cell-color-1::before {
    background: hsla(230, 80%, 45%, 0.5);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第二筆淺青色 */
.game8-cell.permanent-selected.cell-color-2::before {
    background: hsla(190, 80%, 45%, 0.4);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第三筆綠色 */
.game8-cell.permanent-selected.cell-color-3::before {
    background: hsla(145, 68%, 30%, 0.4);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第四筆淺黃色 */
.game8-cell.permanent-selected.cell-color-4::before {
    background: hsla(60, 80%, 25%, 0.3);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第五筆粉紅色 */
.game8-cell.permanent-selected.cell-color-5::before {
    background: hsla(330, 80%, 65%, 0.4);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第六筆紅色 */
.game8-cell.permanent-selected.cell-color-6::before {
    background: hsla(0, 60%, 55%, 0.4);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第七筆紫色 */
.game8-cell.permanent-selected.cell-color-7::before {
    background: hsla(270, 60%, 55%, 0.4);
    transform: translate(-50%, -50%) scale(1.2);
}

/* 第八筆金黃色 */
.game8-cell.permanent-selected.cell-color-8::before {
    background: hsla(45, 100%, 50%, 0.3);
    transform: translate(-50%, -50%) scale(1.2);
}

/*障礙格*/
.game8-cell.obstacle {
    background: repeating-linear-gradient(45deg,
            hsla(0, 0%, 0%, 0.1),
            hsla(0, 0%, 0%, 0.1) 10px,
            hsla(0, 0%, 0%, 0.2) 10px,
            hsla(0, 0%, 0%, 0.2) 20px);
    color: transparent;
    border-radius: 4px;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.4;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

/*計時器外環 (SVG方式實現)*/
#game8-timer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    display: none;
    /* 預設隱藏，由程式切換 */
}

/*計時器外環的線*/
#game8-timer-path {
    fill: none;
    stroke: hsl(0, 50%, 22%);
    /* 初始暗紅色（由 JS 插值到鮮紅）*/
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10000;
    /* 預設隱藏：JS 初始化前不顯示框線，避免閃爍 */
    stroke-dashoffset: 10000;
    /* 預設隱藏：offset=dasharray → 完全不可見 */
    /*transition: stroke-dashoffset 0.1s linear, stroke 0.4s ease;*/
}

/* .game8-message 樣式已移除，改用統一的 GameMessage 元件 */

/* 文字預覽圓圈 (解決手指遮擋問題) */
.game8-char-preview {
    position: absolute;
    /* 使用 absolute 代替 fixed，配合 container 的變形效果 */
    width: 72px;
    height: 72px;
    background: white;
    color: black;
    border: 3px solid #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    padding-bottom: 6px;
    font-weight: bold;
    pointer-events: none;
    /* 穿透點擊 */
    z-index: 3000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transform: translate(0, 0);
    /* 這裡是根據 left/top 定位 */
}