/* =========================================
   卡片（默背）頁面樣式（cards.css）
   架構：固定邏輯畫布（500×850px）+ transform:scale()
   所有尺寸使用 px — 在 scale 容器內不受系統字體/縮放影響
          原來的1.0rem=現在的20px
   ========================================= */

:root {
    --bg-color: hsl(0, 60%, 24%);
    --font-main: 'Noto Serif TC', serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
}

body {
    background-color: var(--bg-color);
    font-family: var(--font-main);
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* 防止瀏覽器縮放影響佈局 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ★ 這裡也要確保與 calendar.css 一致，避免切換頁面時跳動 */
#cardContainer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    perspective: 480px;
    /* 30.0rem -> 480px */
}

/* 卡片樣式 */
.card {
    position: absolute;
    inset: 0;
    margin: auto;

    /* 卡片是容器的 90%，並居中顯示 */
    width: 90%;
    height: 90%;

    --card-hue: 0;
    background-color: hsl(var(--card-hue), 18%, 72%);

    /* 文字顏色：Same Hue, S 20%, L 20% */
    --main-text-color: hsl(var(--card-hue), 20%, 20%);
    color: var(--main-text-color);

    border-radius: 16px;
    /* 1rem → 16px */
    box-shadow: 0 10px 29px rgba(0, 0, 0, 0.5);
    /* 0.6rem / 1.8rem → 10px / 29px */
    display: flex;
    padding: 16px 24px;
    /* 1rem 1.5rem → 16px 24px */
    transition: transform 0.1s linear, opacity 0.3s ease;
    cursor: grab;
    will-change: transform;
}

.card:active {
    cursor: grabbing;
}

/* Layout Columns */
.col-left,
.col-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1px 0;
    /* 0.05rem → 1px */
    height: 100%;
}

/* 三欄布局 */
.col-left {
    justify-content: flex-end;
}

/* 左邊詩名作者名 Metadata Vertical (Left Column) */
.poem-meta-and-logo-left {
    display: flex;
    flex-direction: row;
    writing-mode: vertical-rl;
    gap: 20px;
    /* 1rem → 16px */
    color: var(--main-text-color);
    font-size: 24px;
    /* 1.2rem → 19px */
    padding-bottom: 20px;
    /* 1rem → 16px */
}

.poem-title,
.poem-author {
    font-size: 24px;
    /* 強制與 calendar.css 一致，解決你說的 10px 問題 */
    letter-spacing: 4px;
    /* 0.2em */
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    writing-mode: vertical-rl;
}

.poem-title {
    font-weight: bold;
}

/* Vertical Text Utilities */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 3px;
    /* 0.2em */
}

/* 花月商標 BRAND LOGO */
.brand-logo {
    writing-mode: vertical-rl;
    font-size: 24px;
    /* 1.2rem → 19px */
    font-weight: bold;
    letter-spacing: 10px;
    /* 0.5rem → 8px */
    white-space: nowrap;
}

.col-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    /* 1rem → 16px */
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 中欄：詩詞內容 */
.poem-content {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 16px;
    /* 0.8rem → 13px */
    font-size: 48px;
    /* 2.4rem → 38px */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* 1rem → 16px */
    max-height: 90%;
    transform: scaleX(0.8);
}

.cards-poem-line {
    position: relative;
}

/* 左邊第一句詩往上移半個字高 */
.cards-poem-line:first-child {
    transform: translateY(-29px);
    /* 1.8rem → 29px */
}

/* 每個字符的容器 */
.char {
    display: inline-block;
    position: relative;
    text-align: center;
}

/* 預留位置的方塊：50% 半透明 */
.char-placeholder {
    display: inline-block;
    opacity: 0.25;
    transition: opacity 0.5s ease;
}

/* 實際的文字內容 */
.char-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--reveal-duration, 2.5s) ease;
}

/* 顯示文字 */
.char.visible .char-placeholder {
    opacity: 0;
}

.char.visible .char-inner {
    opacity: 1;
}

.char.visible.instant .char-placeholder,
.char.visible.instant .char-inner {
    transition: none !important;
}

/* 動畫類別 */
.animate-recoil {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.animate-flyout {
    transition: transform 0.8s cubic-bezier(0.5, 0, 1, 0.5), opacity 1.2s ease;
}