/* ========================================
   道壇書閣 - Book.Daoistn.com 樣式
   ======================================== */

:root {
    --bg-body: #f5f0e8;
    --text-main: #2c2c2c;
    --text-muted: #666;
    --text-accent: #8b4513;
    --bg-card: #fffdf7;
    --bg-nav: #3c2415;
    --border-color: #d4c5a9;
    --bg-original: #fffef9;
    --border-original: #8b7355;
    --bg-translation: #f8f5ee;
    --border-translation: #b8a88a;
    --bg-locked: #e8e8e8;
    --highlight-bg: #fef3cd;
    --btn-primary: #8b4513;
    --btn-primary-hover: #6b3410;
    --success: #2e7d32;
    --danger: #c62828;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Source Han Serif TC", "Microsoft JhengHei", serif;
    line-height: 1.8;
    background-color: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Navigation ---- */
.book-nav {
    background: var(--bg-nav);
    color: #f0e6d3;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.nav-brand {
    color: #f0e6d3;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 700;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.nav-links a {
    color: #d4c5a9;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-links a:hover { color: #fff; }

/* ---- Nav User ---- */
.nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.nav-username {
    color: #f0e6d3;
    font-size: 0.9em;
    white-space: nowrap;
}

.nav-username-link {
    text-decoration: none;
}

.nav-username-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nav-points {
    color: #f0e6d3;
    font-size: 0.9em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    padding: 2px 6px;
    border-radius: 8px;
}
.nav-points:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

.nav-inbox-link {
    position: relative;
    color: #f0e6d3;
    font-size: 1.05em;
    text-decoration: none;
    transition: color 0.2s;
}
.nav-inbox-link:hover { color: #fff; }

.inbox-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.6em;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}

.nav-logout-btn {
    background: none;
    border: 1px solid #8b7355;
    color: #d4c5a9;
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
}

.nav-logout-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: #d4c5a9;
}

.nav-login-link {
    color: #f0e6d3 !important;
    border: 1px solid #8b7355;
    padding: 4px 16px;
    border-radius: 4px;
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-login-link:hover {
    background: rgba(255,255,255,0.1);
    border-color: #d4c5a9;
}

/* ---- Main ---- */
.book-main {
    max-width: 960px;
    margin: 24px auto;
    padding: 0 20px 80px 20px;
    flex: 1;
    width: 100%;
}

/* ---- Footer ---- */
.book-footer {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85em;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
}

/* ---- Cards ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
}

.card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

.card h2 {
    font-size: 1.4em;
    color: var(--text-accent);
    margin-bottom: 8px;
}

.card p { color: var(--text-muted); }

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ---- Book list ---- */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.book-meta {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ---- Chapter list ---- */
.chapter-list { list-style: none; padding: 0; }

.chapter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
    gap: 8px;
}

.chapter-item:hover { background: var(--highlight-bg); }

.chapter-item.locked {
    background: var(--bg-locked);
    color: #999;
}

.chapter-item-left {
    flex: 1;
    min-width: 0;
}

.chapter-item a {
    text-decoration: none;
    color: var(--text-accent);
    font-weight: 500;
}

.chapter-item.locked a {
    color: #999;
    pointer-events: none;
}

.chapter-item-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.chapter-badge {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.badge-unlocked { background: #e8f5e9; color: var(--success); }
.badge-locked { background: #eee; color: #999; }

/* ── Purchase popup (Detail: click locked chapter to reveal) ── */
.purchase-popup-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}

.purchase-popup-card {
    position: relative;
    background: var(--bg-card, #fff);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    max-width: 400px;
    width: 90%;
    animation: popupSlideUp .25s ease;
}

.purchase-popup-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: none;
    font-size: 1.6em;
    color: var(--text-muted, #999);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.purchase-popup-close:hover {
    color: var(--text-accent, #333);
}

@keyframes popupSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Locked chapter row: clickable cursor */
.chapter-item.locked-clickable {
    cursor: pointer;
}
.chapter-item.locked-clickable:hover {
    background: var(--bg-hover, rgba(0,0,0,0.03));
}

/* ---- Passed stamp (中文印章) ---- */
.chapter-item.chapter-passed {
    position: relative;
    padding-right: 68px;
}

.chapter-item.chapter-passed::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(-14deg);
    width: 52px;
    height: 52px;
    background: url('/images/stamp-passed.png') center / contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
    user-select: none;
}

.badge-retake {
    background: #fff3e0; color: #e65100; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.badge-retake:hover { background: #ffe0b2; transform: scale(1.05); }
.badge-review {
    background: #e3f2fd; color: #1565c0; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.badge-review:hover { background: #bbdefb; transform: scale(1.05); }

/* ---- Feature badges (chapter list) ---- */
.feat-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78em;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    transition: all 0.2s;
}

.feat-unlocked {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: var(--success);
    border: 1px solid #a5d6a7;
    text-decoration: none;
    transition: all 0.2s;
}

.feat-unlocked:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
}

.feat-locked {
    background: linear-gradient(135deg, #ef5350, #e57373);
    color: #fff;
    border: 1px solid #ef5350;
    opacity: 1;
    position: relative;
}

.feat-locked .feat-label {
    opacity: 1;
}

.feat-locked .feat-lock {
    font-size: 1em;
    margin-right: 2px;
}

.feat-locked .feat-price {
    display: none;
}

/* Purchasable feat button (in chapter list) */
.feat-btn {
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

/* Visible text label inside feat badges */
.feat-label {
    font-size: 0.85em;
    vertical-align: middle;
}

.feat-btn:hover {
    border-color: #c9a84c;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.25);
}

.feat-locked.feat-btn:hover {
    background: linear-gradient(135deg, #f44336, #ef5350);
    color: #fff;
    border-color: #ef5350;
}

.feat-locked.feat-btn:hover .feat-label {
    opacity: 1;
}

/* ---- Book detail blocks ---- */
.detail-block-title {
    text-align: center;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    color: var(--text-accent);
}

.detail-text-content {
    white-space: pre-line;
    line-height: 1.9;
    text-align: justify;
    color: var(--text-main);
}

.detail-text-content:not(.is-expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--preview-lines, 5);
    overflow: hidden;
}

.detail-image-content {
    position: relative;
    max-height: none;
    overflow: hidden;
}

.detail-image-content:not(.is-expanded) {
    max-height: var(--preview-height, 420px);
}

.detail-image-content img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
}

.detail-image-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(245, 240, 232, 0), rgba(245, 240, 232, 0.96));
    pointer-events: none;
}

.detail-image-content.is-expanded .detail-image-fade {
    display: none;
}

.detail-toggle-wrap {
    margin-top: 14px;
    text-align: center;
}

/* ---- Reading page ---- */
.reading-section {
    margin-bottom: 32px;
}

.reading-section h3 {
    color: var(--text-accent);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 6px;
    margin-bottom: 16px;
}

.content-pair {
    margin-bottom: 24px;
}

.content-pair .subtitle {
    font-weight: 700;
    color: var(--text-accent);
    margin-bottom: 8px;
}

.original-block, .translation-block {
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 8px;
    line-height: 2;
}

.original-block p, .translation-block p {
    margin: 0 0 8px 0;
}

.original-block p:last-child, .translation-block p:last-child {
    margin-bottom: 0;
}

.format-verse {
    text-align: center;
    font-style: italic;
}

.format-verse .verse {
    line-height: 2.2;
}

.format-prose p {
    text-indent: 2em;
    text-align: justify;
}

.original-block {
    background: var(--bg-original);
    border-left: 4px solid var(--border-original);
}

.translation-block {
    background: var(--bg-translation);
    border-left: 4px solid var(--border-translation);
    font-size: 0.95em;
}

.translation-block::before {
    content: "譯文：";
    color: var(--text-muted);
    font-size: 0.85em;
    display: block;
    margin-bottom: 4px;
}

.tts-current {
    outline: 2px solid #4a78ff;
    background-color: #eef3ff !important;
}

/* ---- TTS 聽書 Player (Fixed Bottom) ---- */
.tts-floating-player {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--bg-card) !important;
    color: #2c2c2c !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 520px;
}

.tts-player-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.tts-btn {
    background: transparent;
    border: none;
    color: #2c2c2c !important;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.tts-btn:hover {
    background: var(--highlight-bg);
}

.tts-btn-primary {
    background: var(--btn-primary) !important;
    color: #fff !important;
}

.tts-btn-primary:hover {
    background: var(--btn-primary-hover);
}

.tts-info {
    flex: 1;
    text-align: center;
    font-size: 0.85em;
    color: #2c2c2c !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    min-width: 0;
}

.tts-settings-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 6px 4px 6px;
    border-top: 1px solid var(--border-color);
    max-height: 120px;
    overflow-y: auto;
}

.tts-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78em;
    gap: 6px;
}

.tts-setting-row label {
    color: #666 !important;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.tts-setting-row select {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fffdf7 !important;
    color: #2c2c2c !important;
    width: 70%;
    font-size: 0.82em;
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.95em;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--btn-primary);
    color: #fff;
}

.btn-primary:hover { background: var(--btn-primary-hover); }

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover { background: var(--highlight-bg); }

.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }

.btn-sm { padding: 4px 12px; font-size: 0.85em; }

/* ---- Forms ---- */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-muted);
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1em;
    font-family: inherit;
}

.form-group textarea { min-height: 100px; resize: vertical; }

/* ---- Exam ---- */
.exam-question {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.exam-question h4 {
    margin-bottom: 12px;
    color: var(--text-accent);
}

.exam-options label {
    display: block;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.exam-options label:hover { background: var(--highlight-bg); }

.exam-options input[type="radio"] { margin-right: 8px; }

/* ---- Exam Progress Bar ---- */
.exam-progress-bar { margin-bottom: 20px; }
.exam-progress-track {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}
.exam-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--btn-primary), #c9a84c);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.exam-progress-text {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* ---- Exam Question Transition ---- */
.exam-question-enter {
    animation: questionFadeIn 0.5s ease-out;
}
@keyframes questionFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Admin ---- */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
}

.admin-table th, .admin-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table th {
    background: var(--bg-nav);
    color: #f0e6d3;
    font-weight: 500;
}

/* ---- Alert ---- */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.alert-success { background: #e8f5e9; color: var(--success); border: 1px solid #c8e6c9; }
.alert-danger { background: #ffebee; color: var(--danger); border: 1px solid #ffcdd2; }
.alert-info { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }

/* ---- Score ---- */
.score-display {
    text-align: center;
    padding: 30px;
}

.score-number {
    font-size: 4em;
    font-weight: 700;
}

.score-pass { color: var(--success); }
.score-fail { color: var(--danger); }

/* ========================================
   DLC 擴展包展示（古卷鎏金風格）
   ======================================== */
.dlc-showcase {
    margin-bottom: 24px;
    background: linear-gradient(135deg, #3c2415 0%, #5a3a28 50%, #4a2e1c 100%);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #8b7355;
    box-shadow: 0 4px 20px rgba(60, 36, 21, 0.35);
}

.dlc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212, 197, 169, 0.25);
}

.dlc-header-icon {
    font-size: 2em;
    filter: drop-shadow(0 2px 8px rgba(201, 168, 76, 0.4));
}

.dlc-header-title {
    margin: 0;
    font-size: 1.3em;
    color: #c9a84c;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(201, 168, 76, 0.25);
}

.dlc-header-sub {
    margin: 4px 0 0;
    font-size: 0.85em;
    color: #b8a88a;
}

.dlc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.dlc-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.dlc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(60, 36, 21, 0.25);
    border-color: #c9a84c;
}

.dlc-card.dlc-owned {
    border-color: var(--success);
    box-shadow: 0 0 12px rgba(46, 125, 50, 0.12);
}

.dlc-card-banner {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.dlc-card-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.04) 0px,
        rgba(255,255,255,0.04) 1px,
        transparent 1px,
        transparent 10px
    );
}

.dlc-banner-audio {
    background: linear-gradient(135deg, #5a3a28, #3c2415);
}

.dlc-banner-modern {
    background: linear-gradient(135deg, #4a5a3a, #2e3d20);
}

.dlc-card-icon {
    font-size: 1.8em;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.dlc-card-body {
    padding: 14px 16px;
}

.dlc-card-title {
    margin: 0 0 4px;
    font-size: 1.05em;
    color: var(--text-accent);
    font-weight: 700;
}

.dlc-card-desc {
    margin: 0 0 12px;
    font-size: 0.82em;
    color: var(--text-muted);
    line-height: 1.4;
}

.dlc-card-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9em;
}

.dlc-status-owned {
    color: var(--success);
    font-weight: 600;
}

.dlc-status-tag {
    font-size: 0.75em;
    padding: 2px 8px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    color: var(--success);
}

.dlc-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #c9a84c, #a07830);
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.25s;
    font-family: inherit;
    letter-spacing: 0.02em;
}

.dlc-buy-btn:hover {
    background: linear-gradient(135deg, #dbb85c, #b8903c);
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(201, 168, 76, 0.3);
}

.dlc-card.status-purchasable {
    border-color: #1565c0;
    animation: glow-purchasable 3s ease-in-out infinite;
}

.dlc-buy-price {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.9em;
}

/* ========================================
   考試結果 — 遊戲風格評級展示（古卷鎏金風格）
   ======================================== */
.grade-reveal {
    text-align: center;
    padding: 40px 20px 32px;
    margin-bottom: 24px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3c2415, #5a3a28);
    border: 2px solid #8b7355;
    box-shadow: 0 8px 32px rgba(60, 36, 21, 0.35);
}

.grade-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.grade-particle {
    position: absolute;
    border-radius: 50%;
    animation: particleBurst 2s ease-out forwards;
    opacity: 0;
}

@keyframes particleBurst {
    0%   { opacity: 1; transform: scale(0) translateY(0); }
    30%  { opacity: 1; transform: scale(1.2) translateY(-20px); }
    100% { opacity: 0; transform: scale(0.5) translateY(-80px); }
}

.grade-ring {
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: ringPulse 2s ease-in-out infinite;
}

.grade-s .grade-ring {
    background: conic-gradient(#ffd700, #ff6b35, #ff1744, #ffd700);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 0 80px rgba(255, 215, 0, 0.2);
}

.grade-a .grade-ring {
    background: conic-gradient(#ffd700, #c9a84c, #8b4513, #ffd700);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.15);
}

.grade-b .grade-ring {
    background: conic-gradient(#42b983, #66bb6a, #2e7d32, #42b983);
    box-shadow: 0 0 24px rgba(66, 185, 131, 0.4);
}

.grade-c .grade-ring {
    background: conic-gradient(#5c9ce6, #90caf9, #1565c0, #5c9ce6);
    box-shadow: 0 0 20px rgba(92, 156, 230, 0.3);
}

.grade-low .grade-ring {
    background: conic-gradient(#999, #bbb, #777, #999);
    box-shadow: 0 0 16px rgba(150, 150, 150, 0.2);
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.grade-ring-inner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #3c2415;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grade-letter {
    font-size: 3.5em;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.grade-letter.grade-letter-pop {
    opacity: 1;
    transform: scale(1);
}

.grade-s .grade-letter { color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,0.6); }
.grade-a .grade-letter { color: #ffd700; text-shadow: 0 0 16px rgba(255,215,0,0.4); }
.grade-b .grade-letter { color: #42b983; text-shadow: 0 0 12px rgba(66,185,131,0.4); }
.grade-c .grade-letter { color: #5c9ce6; text-shadow: 0 0 10px rgba(92,156,230,0.3); }
.grade-low .grade-letter { color: #999; }

.grade-label {
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.grade-s .grade-label { color: #ffd700; }
.grade-a .grade-label { color: #c9a84c; }
.grade-b .grade-label { color: #66bb6a; }
.grade-c .grade-label { color: #90caf9; }
.grade-low .grade-label { color: #999; }

.grade-score {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.grade-score-num {
    font-size: 1.6em;
}

.grade-s .grade-score-num { color: #ffd700; }
.grade-a .grade-score-num { color: #ffd700; }
.grade-b .grade-score-num { color: #42b983; }
.grade-c .grade-score-num { color: #5c9ce6; }
.grade-low .grade-score-num { color: #e57373; }

.grade-score-max {
    color: #b8a88a;
    font-size: 0.6em;
}

.grade-result-text {
    font-size: 1.05em;
    position: relative;
    z-index: 2;
    margin-top: 8px;
}

.grade-pass { color: #66bb6a; font-weight: 600; }
.grade-fail { color: #e57373; font-weight: 600; }

/* S rank shimmer effect */
.grade-s .grade-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(transparent 60%, rgba(255,215,0,0.4) 70%, transparent 80%);
    animation: shimmerRotate 3s linear infinite;
    z-index: -1;
}

@keyframes shimmerRotate {
    to { transform: rotate(360deg); }
}

.grade-animate-in .grade-ring {
    animation: ringReveal 0.6s ease-out, ringPulse 2s ease-in-out 0.6s infinite;
}

@keyframes ringReveal {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ---- Reward card ---- */
.reward-card {
    border-left: 4px solid var(--success);
    background: linear-gradient(135deg, #f0fff4, var(--bg-card));
}

.reward-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reward-item {
    padding: 10px 14px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    font-weight: 500;
    animation: rewardSlideIn 0.5s ease-out backwards;
}

.reward-item:nth-child(1) { animation-delay: 0.2s; }
.reward-item:nth-child(2) { animation-delay: 0.4s; }

@keyframes rewardSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .book-main { padding: 0 12px 80px 12px; }
    .admin-table { font-size: 0.85em; }

    .tts-floating-player {
        width: 100%;
        max-width: 100%;
        padding: 8px 12px;
        border-radius: 12px 12px 0 0;
    }

    .tts-btn {
        width: 36px;
        height: 36px;
        font-size: 1.2em;
    }

    .tts-info {
        font-size: 0.85em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 0;
    }

    .nav-user {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .nav-links {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .book-grid {
        grid-template-columns: 1fr;
    }

    .exam-question {
        padding: 12px;
    }

    .content-pair {
        margin-bottom: 16px;
    }

    .original-block, .translation-block {
        padding: 12px;
    }

    .dlc-showcase { padding: 16px; }
    .dlc-cards { grid-template-columns: 1fr; }

    .chapter-item-badges { gap: 4px; }
    .feat-badge { font-size: 0.7em; padding: 1px 5px; }

    .chapter-item.chapter-passed {
        padding-right: 52px;
    }

    .chapter-item.chapter-passed::after {
        width: 40px;
        height: 40px;
        right: 6px;
    }

    .grade-reveal { padding: 28px 16px 24px; }
    .grade-ring { width: 110px; height: 110px; }
    .grade-ring-inner { width: 94px; height: 94px; }
    .grade-letter { font-size: 2.6em; }
}

/* ---- Loading Spinner ---- */
.exam-spinner {
    width: 48px; height: 48px;
    margin: 0 auto;
    border: 4px solid var(--border-color);
    border-top-color: var(--btn-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Button disabled state ---- */
.btn[disabled], .btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Toggle view buttons ---- */
.toggle-view.active {
    background: var(--btn-primary);
    color: #fff;
    border-color: var(--btn-primary);
}

/* ---- Page loading bar ---- */
@keyframes pageLoad {
    0%   { width: 0;   margin-left: 0; }
    50%  { width: 60%; margin-left: 20%; }
    100% { width: 0;   margin-left: 100%; }
}

/* ========================================
   內容防護樣式
   ======================================== */

/* ── 防複製：禁止選取文字 ── */
[data-protect] #chapter-content,
[data-protect] .exam-question {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 考試模式：允許 input/textarea 內部選取和編輯 */
[data-protect="exam"] input,
[data-protect="exam"] textarea,
[data-protect="exam"] select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ── 防列印：列印時隱藏正文，顯示提示 ── */
@media print {
    [data-protect] #chapter-content,
    [data-protect] .exam-question,
    [data-protect] #exam-form,
    [data-protect] .book-nav,
    [data-protect] .book-footer {
        display: none !important;
    }
    [data-protect]::after {
        content: "道壇書閣：本頁內容受版權保護，不支援列印。";
        display: block;
        text-align: center;
        font-size: 1.5em;
        padding: 80px 20px;
        color: #666;
    }
}

/* ── 隱形干擾層：複製到的文字會夾帶亂碼 ── */
[data-protect] .content-pair {
    position: relative;
}
[data-protect] .content-pair::after {
    content: "\200B\200C\200D\FEFF\200B\200C\200D\200B\200C\200D\FEFF";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    color: transparent;
    font-size: 1px;
    line-height: 0;
    overflow: hidden;
}

/* ========================================
   天賦樹 (Skill Tree) — Redesigned
   ======================================== */

/* ---- Page Header ---- */
.shelf-page-header {
    text-align: center;
    padding: 32px 0 24px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 40px;
}

.shelf-page-header h1 {
    font-size: 2em;
    color: var(--text-accent);
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.shelf-page-header > p {
    color: var(--text-muted);
    font-size: 0.95em;
    letter-spacing: 0.04em;
}

.shelf-auth-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 20px;
    background: var(--highlight-bg);
    border: 1px solid #d4b896;
    border-radius: 20px;
    font-size: 0.88em;
    color: var(--text-muted);
}

.shelf-auth-hint a {
    color: var(--text-accent);
    font-weight: 600;
    text-decoration: none;
}

.shelf-auth-hint a:hover { text-decoration: underline; }

/* ---- Empty State ---- */
.empty-shelf {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.empty-shelf-icon { font-size: 3em; margin-bottom: 16px; }


/* ---- Talent Forest: parallel skill-tree columns by category ---- */
.talent-forest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

/* ---- Single Talent Tree (one category column) ---- */
.talent-tree {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    background: var(--bg-card);
    min-width: 0;
}

/* Per-category accent colors */
.tree-knowledge { --tree-color: #4a7c59; --tree-bg: rgba(74, 124, 89, 0.06); border-top: 3px solid #4a7c59; }
.tree-technique { --tree-color: #1565c0; --tree-bg: rgba(21, 101, 192, 0.06); border-top: 3px solid #1565c0; }
.tree-talisman  { --tree-color: #7b1fa2; --tree-bg: rgba(123, 31, 162, 0.06); border-top: 3px solid #7b1fa2; }

.talent-tree {
    background: linear-gradient(180deg, var(--tree-bg, rgba(0,0,0,0.02)), var(--bg-card));
}

/* ---- Talent Tree Header ---- */
.talent-tree-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--tree-color, var(--border-color));
}

.talent-tree-icon {
    width: 40px;
    height: 40px;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tree-color, var(--text-accent));
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.talent-tree-title {
    flex: 1;
    min-width: 0;
}

.talent-tree-name {
    display: block;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--tree-color, var(--text-accent));
    letter-spacing: 0.06em;
}

.talent-tree-desc {
    display: block;
    font-size: 0.78em;
    color: var(--text-muted);
    margin-top: 2px;
}

.talent-tree-count {
    font-size: 0.78em;
    color: var(--text-muted);
    background: rgba(0,0,0,0.06);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Talent Tree Track (vertical flow of nodes) ---- */
.talent-tree-track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.talent-tree-empty {
    text-align: center;
    padding: 40px 10px;
    color: var(--text-muted);
    font-size: 0.88em;
}

/* ---- Talent Node (wraps book-card in tree context) ---- */
.talent-node.book-card {
    width: 100%;
}

/* ---- Talent Connector (between nodes in same column) ---- */
.talent-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 40px;
    flex-shrink: 0;
}

.talent-connector-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(to bottom, var(--tree-color, var(--border-color)), rgba(212,197,169,0.3));
    border-radius: 2px;
}

.talent-connector-arrow {
    color: var(--tree-color, var(--text-accent));
    font-size: 0.75em;
    opacity: 0.6;
    line-height: 1;
}

/* ---- Node Level Badge ---- */
.talent-node-level {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.78em;
}

.talent-level-icon {
    font-size: 1.1em;
}

.talent-level-text {
    color: var(--text-muted);
    font-weight: 600;
}

/* ---- Prerequisite Hint ---- */
.talent-prereq-hint {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 0.75em;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
}

/* Per-tier accent colors (kept for book-card compatibility) */
.tier-level-1 { --tier-color: #4a7c59; --tier-bg: rgba(74, 124, 89, 0.07); }
.tier-level-2 { --tier-color: #1565c0; --tier-bg: rgba(21, 101, 192, 0.07); }
.tier-level-3 { --tier-color: #7b1fa2; --tier-bg: rgba(123, 31, 162, 0.07); }
.tier-level-4 { --tier-color: #e65100; --tier-bg: rgba(230, 81, 0, 0.07); }
.tier-level-5 { --tier-color: #c62828; --tier-bg: rgba(198, 40, 40, 0.07); }

/* ---- Responsive: Talent Forest ---- */
@media (max-width: 1024px) {
    .talent-forest {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .talent-tree {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .talent-tree { padding: 14px; }
    .talent-tree-header { gap: 8px; }
    .talent-tree-icon { width: 32px; height: 32px; font-size: 1.1em; }
    .talent-tree-name { font-size: 0.95em; }
    .book-card-cover { height: 70px; }
    .book-card-cover.has-cover-image { height: auto; aspect-ratio: 3 / 4; }
    .cover-char { font-size: 2.2em; }
    .shelf-page-header h1 { font-size: 1.6em; }
}

/* ---- Book Card ---- */
.book-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.13);
}

/* ---- Book Cover (colored top band / cover image) ---- */
.book-card-cover {
    height: 88px;
    background: var(--tier-color, var(--text-accent));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---- Cover Image Mode ---- */
.book-card-cover.has-cover-image {
    height: auto;
    aspect-ratio: 3 / 4;
}

.book-card-cover .cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.book-card-cover.has-cover-image::before {
    background-image: none;
}

.book-card-cover.has-cover-image .cover-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 12px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    text-align: center;
    font-size: 1.1em;
}

/* ---- Compact body when cover image present ---- */
.book-card.has-cover-image .book-card-body {
    padding: 10px 14px;
    gap: 4px;
}

.book-card.has-cover-image .book-card-subtitle {
    display: none;
}

.book-card.has-cover-image .book-card-biblio {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.book-card.has-cover-image .book-card-meta {
    display: none;
}

.book-card-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent 14px
    );
}

.cover-title {
    font-size: 1.25em;
    color: rgba(255,255,255,0.95);
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
    position: relative;
    z-index: 1;
    line-height: 1.4;
    text-align: center;
    padding: 0 12px;
    letter-spacing: 0.08em;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cover-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.72em;
    font-weight: 700;
    background: rgba(0,0,0,0.35);
    color: #fff;
    backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
    z-index: 2;
}

/* ---- Book Card Body ---- */
.book-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.book-card-subtitle {
    font-size: 0.82em;
    color: var(--text-muted);
    margin: 0 0 6px;
}

/* ---- Bibliographic info (著/編) ---- */
.book-card-biblio {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82em;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 2px;
}

.biblio-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.5;
}

.biblio-label {
    font-weight: 700;
    color: var(--text-accent);
    flex-shrink: 0;
    min-width: 1.2em;
    font-size: 0.95em;
}

.biblio-label::after {
    content: "：";
    font-weight: 400;
    color: var(--text-muted);
}

.biblio-value {
    color: var(--text-muted);
}

.book-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78em;
    color: var(--text-muted);
    padding-top: 6px;
    margin-top: 2px;
}

/* ---- Progress Row ---- */
.book-progress-row {
    margin-top: auto;
    padding-top: 8px;
}

.book-progress-bar {
    height: 6px;
    background: #e0d5c5;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.book-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.fill-completed { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.fill-owned { background: linear-gradient(90deg, var(--btn-primary), var(--text-accent)); }

.book-progress-label {
    font-size: 0.78em;
    font-weight: 600;
}

.label-completed { color: var(--success); }
.label-owned { color: var(--text-accent); }

/* ---- Hint rows ---- */
.book-unlock-hint {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.8em;
    color: #1565c0;
    font-weight: 600;
    border-top: 1px solid #dce8f5;
}

/* ---- Card Status Variants ---- */
.book-card.status-completed {
    border-color: var(--success);
}

.book-card.status-completed .book-card-title { color: var(--success); }

.book-card.status-owned {
    border-color: var(--text-accent);
    box-shadow: 0 0 0 1px rgba(139,69,19,0.1);
}

.book-card.status-purchasable {
    border-color: #1565c0;
    animation: glow-purchasable 3s ease-in-out infinite;
}

@keyframes glow-purchasable {
    0%, 100% { box-shadow: 0 0 10px rgba(21,101,192,0.15); }
    50% { box-shadow: 0 0 24px rgba(21,101,192,0.32); }
}

.book-card.status-locked {
    border-color: #bbb;
    filter: grayscale(0.5);
}

.book-card.status-locked:hover .lock-overlay {
    background: rgba(0, 0, 0, 0.35);
}

/* ---- Lock Overlay ---- */
.lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.25s ease;
}

.lock-icon {
    font-size: 3.2em;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
    user-select: none;
}



/* ---- Detail Hero (cover + info) ---- */
.detail-hero {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.detail-hero-cover {
    flex-shrink: 0;
    width: 160px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.detail-hero-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.detail-hero-info {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .detail-hero-cover {
        width: 130px;
    }
}

/* ---- Detail page inline audio player ---- */
.detail-audio-player {
    margin-top: 0;
    border: none;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 0;
    background: var(--bg-nav);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    overflow: visible;
}

.detail-audio-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    background: transparent;
}

.detail-audio-title {
    color: #e8d8c0;
    font-size: 0.74em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.detail-audio-close {
    background: rgba(255, 230, 180, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: #e8d8c0;
    font-size: 0.72em;
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1;
    transition: background 0.2s;
    flex-shrink: 0;
}

.detail-audio-close:hover {
    background: rgba(255, 230, 180, 0.22);
}

.detail-audio-el {
    flex: 1;
    min-width: 0;
    height: 24px;
    color-scheme: dark;
}

.floating-audio-card {
    position: sticky;
    top: 52px;
    left: auto;
    transform: none;
    width: min(960px, calc(100vw - 12px));
    margin: 0 auto 2px !important;
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
    .floating-audio-card {
        top: 52px;
        left: 6px;
        transform: none;
        right: 6px;
        width: auto;
        margin: 0 2px 2px !important;
    }
}

/* Playing state for 🎧 badge */
.detail-audio-play.playing {
    background: linear-gradient(135deg, #c9a84c, #e8d48b);
    color: #3c2415;
    border-color: #c9a84c;
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.45);
    animation: audio-pulse 1.5s ease-in-out infinite;
}

@keyframes audio-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(201, 168, 76, 0.3); }
    50% { box-shadow: 0 0 14px rgba(201, 168, 76, 0.6); }
}

/* ========================================
   解鎖慶典特效 — 遊戲級
   ======================================== */

/* 衝擊閃光（疊在目標元素最上層） */
.unlock-flash {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 30;
    background: radial-gradient(ellipse at center,
        rgba(255,248,200,0.95) 0%,
        rgba(255,220,80,0.6)   40%,
        transparent            72%);
    animation: unlock-flash-burst 0.58s cubic-bezier(0.4,0,0.55,1) forwards;
}

@keyframes unlock-flash-burst {
    0%   { opacity: 0; transform: scale(0.5);  }
    18%  { opacity: 1; transform: scale(1.07); }
    60%  { opacity: 0.65; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(1.22); }
}

/* 黃金光環脈衝 — 三層：亮環 + 外暈 + 內嵌光 */
@keyframes unlock-glow-pulse {
    0%   {
        box-shadow:
            0 0 0 2px  rgba(255,230,80,1),
            0 0 0 6px  rgba(201,168,76,0.55),
            0 0 32px 6px rgba(255,200,50,0.75),
            inset 0 0 22px rgba(255,240,120,0.38);
    }
    35%  {
        box-shadow:
            0 0 0 5px  rgba(201,168,76,0.75),
            0 0 0 12px rgba(201,168,76,0.2),
            0 0 58px 10px rgba(201,168,76,0.32),
            inset 0 0 32px rgba(255,220,80,0.18);
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(201,168,76,0),
            0 0 0 0 rgba(201,168,76,0),
            0 0 0  0 rgba(201,168,76,0),
            inset 0 0 0 rgba(201,168,76,0);
    }
}

.unlock-highlight {
    animation: unlock-glow-pulse 2.7s ease-out forwards;
}

/* 光澤掃過（position:relative 的子元素） */
.unlock-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background: linear-gradient(
        108deg,
        transparent           15%,
        rgba(255,248,200,0.16) 38%,
        rgba(255,255,255,0.42) 50%,
        rgba(255,248,200,0.16) 62%,
        transparent           85%
    );
    transform: skewX(-12deg) translateX(-140%);
    animation: unlock-shimmer-run 0.72s cubic-bezier(0.25,0.46,0.45,0.94) 0.08s forwards;
    border-radius: inherit;
}

@keyframes unlock-shimmer-run {
    from { transform: skewX(-12deg) translateX(-140%); }
    to   { transform: skewX(-12deg) translateX(245%);  }
}

/* ── Toast 提示 ── */
.unlock-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.86);
    background: linear-gradient(135deg, #2a1a06 0%, #1c130a 60%, #0e0b05 100%);
    border: 1.5px solid #c9a84c;
    border-radius: 34px;
    padding: 10px 26px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 8px 34px rgba(0,0,0,0.65),
        0 0 22px rgba(201,168,76,0.38),
        0 0 44px rgba(201,168,76,0.14),
        inset 0 1px 0 rgba(255,220,80,0.14);
    z-index: 9992;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    animation: unlock-toast-in 0.44s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards;
}

.unlock-toast::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(108deg, transparent 30%, rgba(255,248,200,0.13) 50%, transparent 70%);
    transform: skewX(-12deg) translateX(-160%);
    animation: unlock-toast-shimmer 0.62s ease-out 0.58s forwards;
    pointer-events: none;
}

@keyframes unlock-toast-shimmer {
    from { transform: skewX(-12deg) translateX(-160%); }
    to   { transform: skewX(-12deg) translateX(260%);  }
}

.unlock-toast.unlock-toast-fade {
    animation: unlock-toast-out 0.38s ease forwards !important;
}

@keyframes unlock-toast-in {
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

@keyframes unlock-toast-out {
    from { transform: translateX(-50%) translateY(0)     scale(1);    opacity: 1; }
    to   { transform: translateX(-50%) translateY(-14px) scale(0.9);  opacity: 0; }
}

.unlock-toast-icon {
    font-size: 1.6em;
    line-height: 1;
    filter: drop-shadow(0 0 7px rgba(255,200,50,0.85));
}

.unlock-toast-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unlock-toast-label {
    font-size: 0.7em;
    color: #c9a84c;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
}

.unlock-toast-text {
    color: #f5e8c8;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ========================================
   全屏解鎖慶典（DLC 用）
   ======================================== */

.unlock-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: radial-gradient(ellipse at center, rgba(15,10,2,0.88) 0%, rgba(0,0,0,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: auto;
}

.unlock-fs-overlay.unlock-fs-visible {
    opacity: 1;
}

.unlock-fs-overlay.unlock-fs-exit {
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* 中央光暈脈衝 */
.unlock-fs-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,220,80,0.35) 0%, rgba(201,168,76,0.12) 50%, transparent 72%);
    animation: unlock-fs-glow-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes unlock-fs-glow-pulse {
    0%   { transform: scale(0.85); opacity: 0.6; }
    50%  { transform: scale(1.15); opacity: 1;   }
    100% { transform: scale(0.85); opacity: 0.6; }
}

/* 中央內容 */
.unlock-fs-content {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: unlock-fs-content-in 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
    opacity: 0;
    transform: scale(0.6) translateY(20px);
}

@keyframes unlock-fs-content-in {
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.unlock-fs-icon {
    font-size: 4.5em;
    line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 24px rgba(255,200,50,0.9)) drop-shadow(0 0 60px rgba(201,168,76,0.5));
    animation: unlock-fs-icon-float 2.2s ease-in-out infinite;
}

@keyframes unlock-fs-icon-float {
    0%   { transform: translateY(0);    }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0);    }
}

.unlock-fs-label {
    font-size: 0.85em;
    color: #c9a84c;
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 12px rgba(201,168,76,0.6);
}

.unlock-fs-title {
    font-size: 1.6em;
    color: #f5e8c8;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px rgba(255,200,50,0.5), 0 2px 8px rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════
   S 級黃金慶典 — 至尊全屏特效
   ═══════════════════════════════════════════════════════ */

/* 黃金遮罩（更溫暖的深色底） */
.unlock-fs-overlay.unlock-fs-gold {
    background:
        radial-gradient(ellipse at 50% 55%, rgba(60,40,0,0.7) 0%, rgba(25,15,0,0.88) 45%, rgba(0,0,0,0.96) 100%);
}

/* 旋轉光芒 — 仿考試頁 cinematic 但更華麗 */
.unlock-fs-rays {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg at 50% 50%,
        rgba(255,255,255,0) 0deg,
        rgba(255,215,0,0.3) 18deg,
        rgba(255,255,255,0) 48deg,
        rgba(255,180,0,0.24) 85deg,
        rgba(255,255,255,0) 125deg,
        rgba(255,230,160,0.28) 170deg,
        rgba(255,255,255,0) 210deg,
        rgba(255,200,80,0.22) 255deg,
        rgba(255,255,255,0) 300deg,
        rgba(255,215,0,0.18) 340deg,
        rgba(255,255,255,0) 360deg
    );
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.unlock-fs-gold.unlock-fs-visible .unlock-fs-rays {
    animation: unlock-fs-rays-spin 3.8s linear infinite, unlock-fs-rays-in 0.9s ease-out forwards;
}

@keyframes unlock-fs-rays-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes unlock-fs-rays-in {
    0%   { opacity: 0; }
    100% { opacity: 0.55; }
}

/* 黃金強化光暈 */
.unlock-fs-glow.unlock-fs-glow-gold {
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    background: radial-gradient(circle,
        rgba(255,215,0,0.5) 0%,
        rgba(255,180,0,0.25) 30%,
        rgba(201,168,76,0.1) 55%,
        transparent 75%);
    animation: unlock-fs-glow-gold-pulse 1.6s ease-in-out infinite;
}

@keyframes unlock-fs-glow-gold-pulse {
    0%   { transform: scale(0.75); opacity: 0.45; }
    50%  { transform: scale(1.3);  opacity: 1;    }
    100% { transform: scale(0.75); opacity: 0.45; }
}

/* 黃金圖示 — 更大、三重光暈 */
.unlock-fs-icon.unlock-fs-icon-gold {
    font-size: 5.5em;
    filter:
        drop-shadow(0 0 30px rgba(255,215,0,1))
        drop-shadow(0 0 60px rgba(255,180,0,0.7))
        drop-shadow(0 0 100px rgba(201,168,76,0.4));
    animation: unlock-fs-icon-gold-float 2s ease-in-out infinite;
}

@keyframes unlock-fs-icon-gold-float {
    0%   { transform: translateY(0)     scale(1);    }
    50%  { transform: translateY(-14px) scale(1.06); }
    100% { transform: translateY(0)     scale(1);    }
}

/* S 級標籤 */
.unlock-fs-label.unlock-fs-label-gold {
    font-size: 1.1em;
    color: #ffd700;
    letter-spacing: 0.24em;
    text-shadow:
        0 0 18px rgba(255,215,0,0.85),
        0 0 42px rgba(255,180,0,0.4);
}

/* S 級標題 */
.unlock-fs-title.unlock-fs-title-gold {
    font-size: 1.95em;
    color: #fff8e1;
    text-shadow:
        0 0 22px rgba(255,215,0,0.75),
        0 0 54px rgba(255,180,0,0.4),
        0 2px 8px rgba(0,0,0,0.7);
}

/* 關閉提示 */
.unlock-fs-hint {
    margin-top: 22px;
    font-size: 0.72em;
    color: rgba(201,168,76,0.45);
    letter-spacing: 0.12em;
    animation: unlock-fs-hint-fade 2.2s ease-in-out infinite alternate;
}

@keyframes unlock-fs-hint-fade {
    0%   { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* 響應式：S 級黃金 */
@media (max-width: 768px) {
    .unlock-fs-glow.unlock-fs-glow-gold {
        width: 280px;
        height: 280px;
        margin: -140px 0 0 -140px;
    }
    .unlock-fs-icon.unlock-fs-icon-gold {
        font-size: 4em;
    }
    .unlock-fs-title.unlock-fs-title-gold {
        font-size: 1.4em;
    }
    .unlock-fs-label.unlock-fs-label-gold {
        font-size: 0.9em;
    }
}

/* 無障礙：減少動態 */
@media (prefers-reduced-motion: reduce) {
    .unlock-fs-rays,
    .unlock-fs-glow-gold,
    .unlock-fs-icon-gold,
    .unlock-fs-hint {
        animation: none !important;
    }
    .unlock-fs-gold.unlock-fs-visible .unlock-fs-rays {
        opacity: 0.3;
        animation: none !important;
    }
}