/* 卡坊暗色主題（見 docs/visual.md）：暖墨底、淡絹紋、展櫃聚光；介面灰金、退後，卡是主角 */
:root {
    --k-bg: #1c1915;
    --k-bg-2: #24211c;
    --k-panel: #2b2721;
    --k-panel-hi: #37322a;
    --k-line: rgba(200, 182, 146, 0.16);
    --k-text: #ece3d2;
    --k-muted: #b3a68f;
    --k-dim: #857a68;
    --k-gold: #b9a27a;
    --k-gold-hi: #dcc79c;
    --k-cinnabar: #c9583f;
    --k-jade: #5f9c8b;
    --k-spot: rgba(255, 236, 196, 0.13);

    /* 舊變數改指暗色 */
    --paper: var(--k-bg);
    --paper-deep: var(--k-bg-2);
    --ink: var(--k-text);
    --ink-soft: var(--k-muted);
    --cinnabar: var(--k-cinnabar);
    --umber: var(--k-gold);
    --slot: var(--k-bg-2);
    --empty: #2e2a24;
    color-scheme: dark;
}

html, body {
    background-color: var(--k-bg);
    background-image:
        radial-gradient(900px 520px at 50% -8%, rgba(120, 96, 60, 0.18), transparent 70%),
        /* 淡絹紋：極細斜織 */
        repeating-linear-gradient(45deg, rgba(255, 240, 210, 0.012) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px);
    background-attachment: fixed;
    color: var(--k-text);
}

body {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.4rem) calc(2.4rem + env(safe-area-inset-bottom));
}

a { color: var(--k-gold-hi); }

/* 頂列 */
.bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 2.6rem 1fr 2.6rem;
    align-items: center;
    min-height: 3.4rem;
    padding-top: env(safe-area-inset-top);
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2.4rem)) 0.6rem;
    padding-inline: clamp(0.6rem, 3vw, 2rem);
    background: linear-gradient(180deg, rgba(28, 25, 21, 0.96), rgba(28, 25, 21, 0.82));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--k-line);
}
.bar-brand {
    grid-column: 1 / 3;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--k-text);
    text-decoration: none;
}
.bar-mark { font-size: 0.72rem; letter-spacing: 0.4em; color: var(--k-gold); }
.bar-name { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.3em; }
.bar-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3em;
}
.bar-back, .bar-menu {
    grid-row: 1;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--k-gold);
    font: 1.6rem/1 "Noto Serif TC", serif;
    cursor: pointer;
}
.bar-back { grid-column: 1; }
.bar-menu { grid-column: 3; letter-spacing: 0; }
.bar-back:hover, .bar-menu:hover { background: rgba(185, 162, 122, 0.12); }
.bar [hidden] { display: none; }

/* 選單抽屜 */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(8, 6, 4, 0.55); }
.sheet-body {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(20rem, 86vw);
    padding: calc(1.2rem + env(safe-area-inset-top)) 1rem 1.2rem;
    background: var(--k-panel);
    border-left: 1px solid var(--k-line);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
    display: grid;
    align-content: start;
    gap: 0.2rem;
    animation: sheet-in 0.22s ease-out;
}
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }
.sheet-item {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem 0.7rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--k-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sheet-item span { font-size: 1rem; letter-spacing: 0.16em; }
.sheet-item small { color: var(--k-dim); font-size: 0.78rem; letter-spacing: 0.06em; }
.sheet-item:hover { background: var(--k-panel-hi); }
.sheet-note { color: var(--k-dim); font-size: 0.8rem; padding: 0.8rem 0.7rem; }

/* 首頁 */
.home { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); padding-top: 0.6rem; }
.hero { display: grid; justify-items: center; gap: 0.9rem; }
.vitrine {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    padding: clamp(1.2rem, 4vw, 2.6rem) 0 clamp(2rem, 5vw, 3.2rem);
}
/* 展櫃聚光：卡上方一束暖光，地上一圈淡光 */
.vitrine::before {
    content: '';
    position: absolute;
    inset: -10% 10% 0;
    background: radial-gradient(ellipse 50% 60% at 50% 38%, var(--k-spot), transparent 72%);
    pointer-events: none;
}
.vitrine::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    width: min(70%, 22rem);
    height: 2.2rem;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 230, 180, 0.16), transparent 70%);
    pointer-events: none;
}
.vitrine .tc-stage.tc-play { width: min(72vw, 19rem); z-index: 1; }
.hero-cap { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.hero-note { margin: 0; color: var(--k-gold); letter-spacing: 0.32em; font-size: 0.85rem; }
.hero-link, .hero-cta {
    border: 1px solid rgba(185, 162, 122, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--k-text);
    font: inherit;
    letter-spacing: 0.2em;
    padding: 0.5rem 1.3rem;
    cursor: pointer;
}
.hero-cta {
    background: linear-gradient(180deg, #c9a86a, #9c7d45);
    border-color: transparent;
    color: #1c1915;
    font-weight: 700;
    padding: 0.7rem 1.8rem;
}
.hero-pack {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    width: min(60vw, 15rem);
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 35%, #4a3a26, #231d16 75%);
    box-shadow: 0 0 0 1px rgba(220, 199, 156, 0.35), inset 0 0 0 6px rgba(0, 0, 0, 0.25), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.hero-pack-seal {
    padding: 0.5rem 0.4rem;
    border: 2px solid var(--k-cinnabar);
    color: var(--k-cinnabar);
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    font-weight: 700;
}
.hero-pack-name { color: var(--k-gold-hi); letter-spacing: 0.3em; }

.entries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
/* 三個入口：手機「收藏」整列在上、下面兩格；寬螢幕一排三格 */
.entry-album { grid-column: 1 / -1; }
@media (min-width: 760px) {
    .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 54rem; width: 100%; margin: 0 auto; }
    .entry-album { grid-column: auto; }
}
.entry {
    display: grid;
    gap: 0.3rem;
    padding: 1.1rem 1rem;
    border: 1px solid var(--k-line);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(55, 50, 42, 0.55), rgba(36, 33, 28, 0.55));
    color: var(--k-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}
.entry:hover { border-color: rgba(220, 199, 156, 0.45); transform: translateY(-2px); }
.entry-label { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.3em; }
.entry-note { color: var(--k-dim); font-size: 0.78rem; letter-spacing: 0.06em; }

/* 子頁共通：灰金細線的分頁、按鈕 */
.filters button, .faces button, .react, button.plain, a.plain {
    color: var(--k-muted);
}
.filters button.is-on, .faces button.is-on { color: var(--k-text); box-shadow: inset 0 -1.5px 0 var(--k-gold); }
button.primary, .maker-acts .primary {
    background: linear-gradient(180deg, #c9a86a, #9c7d45);
    color: #1c1915;
    border: 0;
}
input, textarea, select {
    background: var(--k-bg-2);
    color: var(--k-text);
    border: 1px solid var(--k-line);
}
.album-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0.2rem 0 1rem; color: var(--k-muted); }
.album-head p { margin: 0; font-size: 0.85rem; }
.drawers { border-radius: 10px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px var(--k-line); }
.slot-face { border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
.slot.is-open .slot-face { box-shadow: 0 0 0 2px var(--k-gold-hi), 0 10px 22px rgba(0, 0, 0, 0.5); }
.slot-blank { color: var(--k-dim); }
.slot-name { color: var(--k-muted); }
.slot.is-painted .slot-name { color: var(--k-text); }
.card-frame { background: var(--empty); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--k-line); }
.well .card-stage { position: relative; }
.well .card-stage::before {
    content: '';
    position: absolute;
    inset: -12% -20% -4%;
    background: radial-gradient(ellipse 50% 55% at 50% 42%, var(--k-spot), transparent 72%);
    pointer-events: none;
}
.mast, .share-pack, .review-pack, .odds-table th, .odds-table td { border-color: var(--k-line); }
.odds-table .tier-SR td:first-child { color: var(--k-gold-hi); }
.odds-table .tier-SSR td:first-child { color: #d3a8ff; }
.status-pending { color: var(--k-gold-hi); }
.status-published { color: #7fbf98; }
.export-report { background: var(--k-panel); color: var(--k-text); border-color: var(--k-line); }
dialog, .dialog { background: var(--k-panel); color: var(--k-text); }
.reveal-front { background: var(--k-panel); }
.modian-balance { font-size: 1.4rem; letter-spacing: 0.2em; color: var(--k-gold-hi); }
.tc-gyro { color: var(--k-muted); }
.notice, .muted, .section-note { color: var(--k-muted); }

@media (max-width: 760px) {
    .studio { grid-template-columns: 1fr; }
    .well { position: static; }
    .well-hint { display: none; }
    .drawers { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.8rem 0.6rem; padding: 0.8rem; }
}

/* ───── 收藏頁：頂部精簡 ───── */
.album-head { align-items: center; margin: 0.2rem 0 0.4rem; }
.album-head .packs { margin: 0; }
.album-head .mast-count { white-space: nowrap; font-size: 0.82rem; }
.mast-pack:empty { display: none; }
.mast-pack { margin: 0 0 0.6rem; color: var(--k-gold); font-size: 0.78rem; letter-spacing: 0.2em; }
.sheet-toggle { grid-template-columns: 1fr auto; cursor: pointer; }
.sheet-toggle small { grid-column: 1; }
.sheet-toggle input { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 1.2rem; height: 1.2rem; accent-color: var(--k-gold); }

/* ───── 全螢幕細看 ───── */
html.viewer-on, html.viewer-on body { overflow: hidden; }
.viewer {
    --peek: calc(4.4rem + env(safe-area-inset-bottom));
    --top: calc(3.4rem + env(safe-area-inset-top));
    position: fixed;
    inset: 0;
    z-index: 60;
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255, 232, 190, 0.12), transparent 70%),
        radial-gradient(ellipse 50% 8% at 50% 86%, rgba(255, 226, 176, 0.08), transparent 70%),
        #12100d;
    color: var(--k-text);
    overscroll-behavior: contain;
    animation: viewer-in 0.22s ease-out;
}
.viewer[hidden] { display: none; }
@keyframes viewer-in { from { opacity: 0; } }
.viewer-top {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.4rem + env(safe-area-inset-top)) 0.6rem 0.4rem;
}
.viewer-btn {
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 240, 210, 0.06);
    color: var(--k-gold-hi);
    font: 1.1rem/1 "Noto Serif TC", serif;
    cursor: pointer;
}
.viewer-btn:hover { background: rgba(255, 240, 210, 0.12); }
.viewer-btn[hidden] { visibility: hidden; display: block; }
.viewer-gyro.is-on { color: #12100d; background: var(--k-gold); }
.viewer-count { color: var(--k-dim); font-size: 0.8rem; letter-spacing: 0.2em; }
.viewer-stage {
    position: absolute;
    inset: var(--top) 0 var(--peek);
    display: grid;
    place-items: center;
    touch-action: none;
}
.viewer-card { display: grid; place-items: center; }
.viewer-card .tc-stage.tc-play,
.viewer-locked {
    /* 手機約 92% 寬；高度不夠時以高度為準 */
    width: min(92vw, calc((100dvh - var(--top) - var(--peek) - 2.4rem) * 3 / 4));
}
.viewer-card .tc-stage { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.enter-next { animation: enter-next 0.26s ease-out; }
.enter-prev { animation: enter-prev 0.26s ease-out; }
@keyframes enter-next { from { opacity: 0; transform: translateX(40px); } }
@keyframes enter-prev { from { opacity: 0; transform: translateX(-40px); } }
.viewer-locked {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: #1f1b16;
    box-shadow: 0 0 0 1px var(--k-line);
    color: var(--k-dim);
    font-size: 2rem;
}
.viewer-locked img { width: 100%; height: 100%; object-fit: cover; }
.viewer-locked.is-silhouette img { filter: brightness(0) saturate(0); opacity: 0.3; }
.viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    font-size: 1.6rem;
}
.viewer-prev { left: 1rem; }
.viewer-next { right: 1rem; }
.viewer-nav:disabled { opacity: 0.2; cursor: default; }

/* 底部抽屜 */
.viewer-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    max-height: 78dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 18px 18px 0 0;
    background: #24201b;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5), 0 -1px 0 var(--k-line);
    transform: translateY(calc(100% - var(--peek)));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.viewer-sheet.is-open { transform: translateY(0); }
.viewer-sheet.is-dragging { transition: none; }
.sheet-handle {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    min-height: var(--peek);
    padding: 0.5rem 1.2rem env(safe-area-inset-bottom);
    cursor: grab;
    touch-action: none;
}
.sheet-grip { width: 2.6rem; height: 4px; border-radius: 2px; background: rgba(220, 199, 156, 0.4); }
.sheet-peek { display: flex; align-items: center; gap: 0.7rem; }
.sheet-name { margin: 0; font-size: 1.3rem; font-weight: 900; letter-spacing: 0.24em; }
.tier-chip {
    padding: 0.12rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    background: #5a5246;
    color: #f4ead6;
}
.tier-R { background: #3f7862; }
.tier-SR { background: #a37a2c; }
.tier-SSR { background: #7a4896; }
.tier-UR { background: #a8402f; }
.sheet-content {
    overflow-y: auto;
    padding: 0.2rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
    display: grid;
    align-content: start;
    gap: 0.9rem;
}
.sheet-sub { margin: 0; color: var(--k-gold); font-size: 0.85rem; letter-spacing: 0.12em; text-align: center; }
.sheet-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 1.02rem; }
.sheet-lines small { color: var(--k-gold); margin-right: 0.9rem; font-size: 0.78rem; letter-spacing: 0.1em; }
.sheet-desc { margin: 0; color: var(--k-muted); font-size: 0.88rem; line-height: 1.7; }
.sheet-poem { margin: 0; padding-left: 0.9rem; border-left: 2px solid rgba(220, 199, 156, 0.35); font-size: 0.95rem; line-height: 1.7; }
.sheet-poem cite { display: block; color: var(--k-dim); font-size: 0.78rem; font-style: normal; }
.sheet-hint { margin: 0; color: var(--k-muted); line-height: 1.7; }
.sheet-go { color: var(--k-gold-hi); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--k-line);
    border-radius: 999px;
    background: transparent;
    color: var(--k-muted);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
.chip.is-on { border-color: var(--k-gold); color: #12100d; background: var(--k-gold); }
.sheet-facts { margin: 0; color: var(--k-dim); font-size: 0.8rem; letter-spacing: 0.08em; }
.sheet-facts:empty { display: none; }
.sheet-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sheet-act {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(220, 199, 156, 0.4);
    border-radius: 8px;
    background: transparent;
    color: var(--k-text);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}
.sheet-used { display: flex; gap: 1rem; margin: 0; font-size: 0.8rem; }

/* 桌面：卡在左、細節在右 */
@media (min-width: 900px) {
    .viewer { --peek: 0px; }
    .viewer-stage { inset: var(--top) min(26rem, 34vw) 2rem 0; }
    .viewer-card .tc-stage.tc-play,
    .viewer-locked { width: min(calc(66vw - 8rem), calc((100dvh - var(--top) - 4rem) * 3 / 4)); }
    .viewer-nav { display: block; }
    .viewer-top { right: min(26rem, 34vw); }
    .viewer-next { right: calc(min(26rem, 34vw) + 1rem); }
    .viewer-sheet {
        left: auto;
        top: 0;
        width: min(26rem, 34vw);
        max-height: none;
        border-radius: 0;
        transform: none;
        background: rgba(30, 27, 23, 0.92);
        box-shadow: -1px 0 0 var(--k-line);
        padding-top: calc(3.6rem + env(safe-area-inset-top));
    }
    .sheet-handle { cursor: default; min-height: 0; justify-items: start; padding: 0 1.6rem 0.6rem; }
    .sheet-grip { display: none; }
    .sheet-sub { text-align: left; }
    .sheet-content { padding: 0.4rem 1.6rem 2rem; }
}

/* 精選 */
.slot { position: relative; }
.slot-fav {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    z-index: 1;
    color: var(--k-gold-hi);
    font-size: 0.95rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
.sheet-act.is-fav { border-color: var(--k-gold); background: rgba(185, 162, 122, 0.16); color: var(--k-gold-hi); }