/* =========================================
   遊戲十一：翻墨識蹤（Poetry Memory）
   - 序列記憶與視覺留影益智遊戲
   ========================================= */

/* ⚠️ 介面「上半部」（overlay 背景、頂列、分數、控制鈕、難度標籤、
   紅心副標、詩詞出處連結）之樣式已抽至 theme_xuanzhi.css 的 .fm-* 共用區塊。
   本檔僅保留 .game11-area 及以下的遊戲區私有樣式。 */

.hidden {
    display: none !important;
}

/* 遊戲主區域 */
.game11-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

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

/*狀態訊息*/
.game11-status-msg {
    color: var(--fm-gold, #8a6a1e);
    font-size: 28px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    min-height: 30px;
}

/* Grid Area */
.game11-grid-container {
    display: grid;
    gap: 6px;
    justify-content: center;
    align-content: center;
    margin: 6px;
}

/* 單個字塊容器：設定 3D 視角深度 (perspective) */
.game11-tile {
    width: 80px;
    height: 80px;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 內層容器：執行真正的翻轉動畫，保持 3D 空間關係 */
.game11-tile-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.25s;
    /* 翻轉的立體效果時長 */
    transform-style: preserve-3d;
}

.game11-tile.flipped .game11-tile-inner {
    transform: rotateY(180deg);
}

/* 字塊正反面共有設定：隱藏背面以防止翻轉時看到反向內容 */
.game11-tile-front,
.game11-tile-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* 關鍵：隱藏背面 */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 56px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 背面 (預設，彩色且不顯示文字) */
.game11-tile-front {
    border: 4px solid hsl(0, 0%, 10%);
}

.game11-grid-container.is-player-phase .game11-tile-front {
    border: 2px solid hsl(51, 100%, 90%);
}

/* 正面 (宣紙底，黑字) */
.game11-tile-back {
    background: #fdfaf0;
    color: #111;
    transform: rotateY(180deg);
    border: 2px solid #bd9b70;
}

@keyframes game11-shake {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(-5deg);
    }

    50% {
        transform: scale(1.05) rotate(5deg);
    }

    75% {
        transform: scale(1.05) rotate(-5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.game11-tile.error .game11-tile-inner {
    animation: game11-shake 0.3s ease-out;
}

/* 錯誤提示：潑墨效果 (Ink Splash) */
.game11-tile.error::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background: radial-gradient(circle, hsla(0, 0%, 10%, 0.5) 0%, transparent 60%);
    pointer-events: none;
    animation: game11-ink-splash 0.5s forwards;
    z-index: 10;
}

@keyframes game11-ink-splash {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

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