/* =========================================
   遊戲十四：步步驚心
   - 全獨立樣式表
   ========================================= */

.game14-overlay {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    background: radial-gradient(circle at center, hsl(210, 30%, 25%) 0%, hsl(0, 0%, 5%) 100%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: hsl(40, 50%, 80%);
    font-family: 'Noto Serif TC', serif;
    position: relative;
    zoom: 1;
}

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

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

.game14-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;
}

.game14-controls .nav-btn:hover {
    filter: brightness(1.5);
    box-shadow: 0 0px 8px rgba(255, 255, 255, 0.9);
}

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

.game14-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);
    background: linear-gradient(135deg, hsl(100, 40%, 40%) 0%, hsl(120, 40%, 30%) 100%);
    cursor: pointer;
    transition: all 0.2s;
}

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

.game14-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;
}

.game14-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /* 使用容器中心作為透視點 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 100px;
    perspective: 800px;
    perspective-origin: center 80%;
}

.game14-poem-info {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: hsla(0, 0%, 100%, 0.8);
    cursor: pointer;
    white-space: nowrap;
    z-index: 1002;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
}

.game14-poem-info:hover {
    color: hsl(45, 80%, 70%);
    text-decoration: underline;
}

/* 遊戲歷程顯示 (最左側直排) */
.game14-history {
    position: absolute;
    left: 10px;
    top: 15%;
    height: 80%;
    width: 44px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 12px;
    display: flex;
    writing-mode: vertical-lr;
    overflow: hidden;
    font-size: 24px;
    line-height: 1.2;
    pointer-events: none;
    z-index: 100;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.history-char.correct {
    color: hsl(120, 40%, 68%);
}

.history-char.wrong {
    color: hsl(0, 80%, 75%);
    font-weight: bold;
}

.history-char.waiting {
    color: rgba(255, 255, 255, 0.5);
}

.history-separator {
    color: rgba(255, 255, 255, 0.3);
}

/* 每一行按鍵的容器 */
.ladder-row-14 {
    position: absolute;
    bottom: 60px;
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center bottom;
    will-change: transform, opacity;
}

/* 按鍵樣式 */
.ladder-btn-14 {
    width: 180px;
    height: 140px;
    border-radius: 16px;
    background: linear-gradient(to bottom, hsl(40, 30%, 90%), hsl(40, 20%, 70%));
    border: 2px solid hsla(0, 0%, 0%, 0.3);
    font-size: 100px;
    font-weight: bold;
    /* 字型已由外層統一設定，此處保留註解供參考，不啟用 */
    /*font-family: 'Noto Serif TC', serif;*/
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4),
        inset 0 4px 4px rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.05s;
}

.ladder-btn-14:hover {
    filter: brightness(1.3);
}

/* 只能點擊最底下一行（active-row）：非目前作答行的按鈕禁用點擊事件並取消手指游標 */
.ladder-row-14:not(.active-row) .ladder-btn-14 {
    cursor: default;
    pointer-events: none;
}

/* 答對的視覺效果 */
.ladder-btn-14.correct {
    background: hsl(145, 60%, 35%);
    color: white;
    box-shadow: 0 0 10px hsl(145, 60%, 50%);
}

/* 答錯的視覺效果：黑底白字 (小學難度降低感，或是 user 要求的特別樣式) */
.ladder-btn-14.wrong {
    background: #000;
    color: #fff;
    animation: shake-14 0.2s;
    border: 1px solid #444;
}

/* 搖晃動畫 */
@keyframes shake-14 {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

/* 計時器外周 (參考 Game 8) */
#game14-timer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

#game14-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 → 完全不可見 */
    /* 過渡效果改由 JS（updateTimerRing）依情境動態套用，此處預設關閉以避免與 JS 控制衝突 */
    /*transition: stroke-dashoffset 0.1s linear, stroke 0.4s ease;*/
}

.timer-text-14 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    color: hsl(0, 60%, 80%);
    text-shadow: 0 0 4px black;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.4);
    padding: 0 8px;
    border-radius: 6px;
}

/* 雙倍寬度起始按鈕 */
.ladder-row-14.start-row .ladder-btn-14 {
    width: 400px;
    /* 約雙倍寬度 */
    height: 140px;
    background: linear-gradient(135deg, hsl(50, 40%, 80%) 0%, hsl(50, 30%, 60%) 100%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5),
        inset 0 4px 10px rgba(255, 255, 255, 0.8);
    border: 4px solid hsl(50, 100%, 30%);
}

.ladder-btn-14.double-wide {
    width: 400px;
}

/* 難度降低：提示錯誤選項 (黑底白字) */
.ladder-btn-14.wrong-hint {
    background: #000;
    color: #fff;
    border: 1px solid #444;
}

/* 點擊錯誤：轉為紅底 */
.ladder-btn-14.wrong-clicked {
    background: hsl(0, 80%, 40%) !important;
    color: white !important;
    animation: shake-14 0.2s;
    border: 2px solid hsl(0, 100%, 60%) !important;
    box-shadow: 0 0 20px hsl(0, 100%, 50%);
}