/* ===== 塔羅解謎小遊戲樣式 ===== */

/* --- Game Container --- */
.puzzle-game{display:none;flex-direction:column;min-height:60vh}
.puzzle-game.active{display:flex}

/* --- Header --- */
.puzzle-header{text-align:center;padding:12px 0 8px}
.puzzle-header h2{font-size:1.3rem;letter-spacing:3px;color:#d4af37;margin-bottom:4px}
.puzzle-header .puzzle-topic{font-size:.75rem;color:#8a84a0}
.puzzle-progress{display:flex;gap:5px;justify-content:center;margin-top:10px}
.puzzle-dot{
    width:26px;height:4px;border-radius:2px;
    background:#2a2640;transition:background .4s;
}
.puzzle-dot.done{background:#d4af37}
.puzzle-dot.current{background:#a78bfa;animation:pzPulse 1.5s infinite}
@keyframes pzPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* --- Stage --- */
.pz-stage{
    flex:1;display:none;flex-direction:column;
    justify-content:center;align-items:center;
    animation:pzFadeIn .5s ease;
}
.pz-stage.active{display:flex}
@keyframes pzFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.pz-label{font-size:.62rem;text-transform:uppercase;letter-spacing:3px;color:#7c6faa;margin-bottom:5px}
.pz-title{font-size:1.15rem;color:#e8e6f0;margin-bottom:5px;text-align:center}
.pz-desc{font-size:.82rem;color:#9b95b0;text-align:center;margin-bottom:18px;line-height:1.6;max-width:500px}

/* --- Intro --- */
.puzzle-intro{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:32px 0;
}
.puzzle-intro .intro-art{font-size:3.5rem;margin-bottom:16px;filter:drop-shadow(0 0 16px rgba(212,175,55,.3))}
.puzzle-intro h2{font-size:1.6rem;color:#d4af37;letter-spacing:4px;margin-bottom:6px}
.puzzle-intro .intro-sub{font-size:.85rem;color:#8a84a0;margin-bottom:24px}
.pz-topic-label{font-size:.78rem;color:#a78bfa;margin-bottom:10px}
.pz-topic-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.pz-topic-btn{
    padding:8px 18px;border:1.5px solid #3a3456;border-radius:18px;
    background:#1a1730;color:#d0ccdf;font-size:.84rem;cursor:pointer;
    transition:all .25s;font-family:inherit;
}
.pz-topic-btn:hover,.pz-topic-btn.selected{border-color:#d4af37;color:#d4af37;background:#1f1a35}
.pz-start-btn{
    padding:12px 40px;border:none;border-radius:10px;
    background:linear-gradient(135deg,#735c00,#d4af37);
    color:#fff;font-size:.92rem;cursor:pointer;font-family:inherit;
    letter-spacing:2px;transition:all .3s;
}
.pz-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(212,175,55,.3)}
.pz-start-btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}

/* --- Choices --- */
.pz-choices{display:flex;flex-direction:column;gap:9px;width:100%;max-width:460px}
.pz-choice-btn{
    padding:14px 16px;border:1.5px solid #3a3456;border-radius:10px;
    background:#1a1730;color:#d0ccdf;font-size:.86rem;
    cursor:pointer;transition:all .25s;text-align:left;line-height:1.5;
    font-family:inherit;
}
.pz-choice-btn:hover{border-color:#a78bfa;background:#231f3d;color:#fff}
.pz-choice-btn:active{transform:scale(.98)}

/* --- Visual Grid --- */
.pz-visual-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
    max-width:300px;width:100%;
}
.pz-visual-card{
    aspect-ratio:3/4;border-radius:10px;overflow:hidden;
    cursor:pointer;border:2px solid #2a2640;transition:all .3s;position:relative;
}
.pz-visual-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.pz-visual-card:hover{border-color:#a78bfa;transform:translateY(-3px)}
.pz-visual-card:hover img{filter:brightness(1)}
.pz-visual-card .pz-card-label{
    position:absolute;bottom:0;left:0;right:0;
    padding:5px;background:linear-gradient(transparent,rgba(0,0,0,.8));
    font-size:.65rem;color:#ccc;text-align:center;
}

/* --- Logic --- */
.pz-logic-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:280px;width:100%}
.pz-logic-btn{
    aspect-ratio:1;border-radius:8px;border:1.5px solid #3a3456;
    background:#1a1730;color:#d4af37;font-size:1.2rem;font-weight:700;
    cursor:pointer;transition:all .25s;font-family:inherit;
    display:flex;align-items:center;justify-content:center;
}
.pz-logic-btn:hover{border-color:#d4af37;background:#231f3d}

/* --- Sort --- */
.pz-sort-area{display:flex;flex-direction:column;gap:8px;width:100%;max-width:440px}
.pz-sort-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;
    border:1.5px solid #3a3456;border-radius:8px;background:#1a1730;
}
.pz-sort-item .pz-sort-emoji{font-size:1.2rem;flex-shrink:0}
.pz-sort-item .pz-sort-text{font-size:.82rem;color:#d0ccdf;flex:1}
.pz-sort-arrows{display:flex;flex-direction:column;gap:2px}
.pz-sort-arrow{
    width:26px;height:20px;border:1px solid #3a3456;border-radius:3px;
    background:transparent;color:#8a84a0;cursor:pointer;font-size:.65rem;
    display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.pz-sort-arrow:hover{border-color:#d4af37;color:#d4af37}
.pz-sort-confirm{
    padding:8px 24px;border:1.5px solid #d4af37;border-radius:6px;
    background:transparent;color:#d4af37;font-size:.84rem;
    cursor:pointer;font-family:inherit;transition:all .2s;align-self:center;
}
.pz-sort-confirm:hover{background:#d4af37;color:#0d0b1a}

/* --- Memory --- */
.pz-memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:300px;width:100%}
.pz-mem-cell{
    aspect-ratio:3/4;border-radius:8px;cursor:pointer;
    position:relative;transform-style:preserve-3d;transition:transform .5s;
}
.pz-mem-cell .pz-mf{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;overflow:hidden}
.pz-mem-cell .pz-mb{
    background:linear-gradient(145deg,#2a1f5e,#1a1040);
    border:2px solid #4a3d8a;display:flex;align-items:center;justify-content:center;
    font-size:1rem;color:#7c6faa;
}
.pz-mem-cell .pz-mfr{transform:rotateY(180deg);border:2px solid #d4af37}
.pz-mem-cell .pz-mfr img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.pz-mem-cell.flipped{transform:rotateY(180deg)}
.pz-mem-cell.matched{opacity:.45;pointer-events:none}

/* --- Intuition --- */
.pz-int-grid{display:flex;gap:12px;justify-content:center;perspective:800px}
.pz-int-card{
    width:100px;height:150px;border-radius:10px;cursor:pointer;
    position:relative;transform-style:preserve-3d;transition:transform .6s;
}
.pz-int-card:hover{transform:translateY(-6px)}
.pz-int-card .pz-cf{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden}
.pz-int-card .pz-cb{
    background:linear-gradient(145deg,#2a1f5e,#1a1040);
    border:2px solid #4a3d8a;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.pz-int-card .pz-cfront{transform:rotateY(180deg);overflow:hidden;border:2px solid #d4af37}
.pz-int-card .pz-cfront img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.pz-int-card.flipped{transform:rotateY(180deg)}

/* --- Reward Overlay --- */
.pz-reward{
    position:fixed;inset:0;background:rgba(10,8,24,.92);
    display:none;align-items:center;justify-content:center;z-index:200;
}
.pz-reward.show{display:flex;animation:pzFadeIn .4s}
.pz-reward-content{text-align:center;animation:pzRewardPop .5s ease}
@keyframes pzRewardPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.pz-reward-card{
    width:130px;height:195px;border-radius:12px;overflow:hidden;
    border:3px solid #d4af37;margin:0 auto 12px;
    box-shadow:0 0 36px rgba(212,175,55,.3);
}
.pz-reward-card img{width:100%;height:100%;object-fit:cover}
.pz-reward-name{font-size:1rem;color:#d4af37;margin-bottom:2px}
.pz-reward-orient{font-size:.75rem;color:#a78bfa;margin-bottom:12px}
.pz-reward-btn{
    padding:9px 28px;border:none;border-radius:7px;
    background:linear-gradient(135deg,#735c00,#d4af37);
    color:#fff;font-size:.84rem;cursor:pointer;font-family:inherit;
}
.pz-reward-btn:hover{opacity:.85}

/* --- Transition --- */
.pz-transition{
    position:fixed;inset:0;background:#0d0b1a;z-index:190;
    display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;
}
.pz-transition.show{display:flex;animation:pzFadeIn .3s}
.pz-transition-text{color:#d4af37;font-size:1rem;letter-spacing:3px}
.pz-transition-sub{color:#7c6faa;font-size:.72rem}

/* --- Reading --- */
.pz-reading{width:100%;animation:pzFadeIn .8s}
.pz-spread{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.pz-spread-card{width:75px;text-align:center}
.pz-spread-img{
    width:75px;height:112px;border-radius:8px;overflow:hidden;
    border:2px solid #3a3456;margin-bottom:4px;
}
.pz-spread-img img{width:100%;height:100%;object-fit:cover}
.pz-spread-img.reversed img{transform:rotate(180deg)}
.pz-spread-card .pz-pos{font-size:.58rem;color:#7c6faa;margin-bottom:1px}
.pz-spread-card .pz-cname{font-size:.68rem;color:#d4af37}
.pz-spread-card .pz-orient{font-size:.58rem;color:#9b95b0}

.pz-reading-body{
    background:#151225;border:1px solid #2a2640;border-radius:12px;
    padding:18px;line-height:1.8;font-size:.84rem;color:#c8c4d8;
    max-width:580px;margin:0 auto;
}
.pz-reading-body h3{color:#d4af37;font-size:.9rem;margin-bottom:8px}
.pz-reading-body .pz-sect{margin-bottom:12px;opacity:0;animation:pzTypeIn .5s forwards}
.pz-reading-body .pz-sect-title{color:#a78bfa;font-size:.78rem;font-weight:600;margin-bottom:2px}
@keyframes pzTypeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.pz-topic-badge{
    display:inline-block;padding:3px 12px;border-radius:10px;
    background:#1f1a35;border:1px solid #7c6faa;color:#a78bfa;
    font-size:.7rem;margin-bottom:12px;
}
.pz-theme-intro{
    font-size:.82rem;color:#b8b0d0;line-height:1.6;
    margin:8px 0 16px;padding:10px 14px;
    background:rgba(124,111,170,.08);border-radius:8px;
    border-left:3px solid #7c6faa;
}
.pz-restart{
    display:block;margin:18px auto;padding:10px 32px;
    border:1.5px solid #d4af37;border-radius:7px;
    background:transparent;color:#d4af37;font-size:.84rem;
    cursor:pointer;font-family:inherit;transition:all .2s;
}
.pz-restart:hover{background:#d4af37;color:#0d0b1a}

/* --- Mute Button --- */
.pz-mute-btn{
    position:fixed;bottom:24px;right:24px;z-index:999;
    background:rgba(13,11,26,.85);border:1px solid #d4af3766;
    border-radius:50%;width:42px;height:42px;
    font-size:1.2rem;cursor:pointer;color:#d4af37;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.pz-mute-btn:hover{background:rgba(212,175,55,.2)}

/* 圖片狀態標記 */
.pz-img-badge{font-size:.72rem;padding:2px 8px;border-radius:10px;margin-left:6px;}
.pz-img-ready{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3);}
.pz-img-pending{background:rgba(212,175,55,.15);color:#d4af37;border:1px solid rgba(212,175,55,.3);}

/* 解讀圖片展示 */
.pz-reading-image{text-align:center;margin:24px 0;padding:20px;border:1px solid #d4af3733;border-radius:12px;background:rgba(212,175,55,.05);}
.pz-reading-image h3{color:#d4af37;margin-bottom:12px;font-size:1rem;}
.pz-reading-img{max-width:100%;max-height:600px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.4);}
.pz-reading-image-pending{text-align:center;padding:20px;color:#d4af37;font-size:.9rem;border:1px dashed #d4af3744;border-radius:12px;margin:24px 0;}

/* --- Hand Bar --- */
.pz-hand{
    display:flex;gap:4px;justify-content:center;
    padding:8px 0;border-top:1px solid #2a2640;margin-top:16px;
}
.pz-hand-mini{
    width:28px;height:42px;border-radius:4px;overflow:hidden;
    border:1.5px solid #2a2640;opacity:.3;transition:all .4s;
}
.pz-hand-mini.collected{opacity:1;border-color:#d4af37;animation:pzCardPop .4s}
.pz-hand-mini img{width:100%;height:100%;object-fit:cover}
.pz-hand-mini.empty{background:#1a1730}
@keyframes pzCardPop{0%{transform:scale(.5)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

/* --- Mobile --- */
@media(max-width:480px){
    .pz-visual-grid{max-width:240px}
    .pz-int-card{width:80px;height:120px}
    .pz-spread-card{width:55px}
    .pz-spread-img{width:55px;height:82px}
    .pz-memory-grid{max-width:240px}
    .pz-logic-opts{max-width:240px}
}

/* --- Action Bar (Screenshot / Share) --- */
.pz-action-bar{
    display:flex;gap:10px;justify-content:center;margin:16px 0 4px;
}
.pz-action-btn{
    padding:8px 20px;border:1.5px solid #d4af37;border-radius:7px;
    background:transparent;color:#d4af37;font-size:.8rem;
    cursor:pointer;font-family:inherit;transition:all .2s;
}
.pz-action-btn:hover{background:#d4af37;color:#0d0b1a}

/* --- History Link --- */
.pz-history-link{
    display:block;margin:14px auto 0;padding:6px 16px;
    background:none;border:none;color:#8a84a0;
    font-size:.78rem;cursor:pointer;font-family:inherit;
    text-decoration:underline;transition:color .2s;
}
.pz-history-link:hover{color:#d4af37}

/* --- History List --- */
.pz-hist-list{
    max-width:460px;margin:12px auto;
}
.pz-hist-item{
    padding:12px;margin:8px 0;border:1px solid #d4af3744;border-radius:8px;
    cursor:pointer;transition:border-color .2s;
}
.pz-hist-item:hover{border-color:#d4af37}
.pz-hist-meta{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
}
.pz-hist-topic{
    font-size:.82rem;color:#d4af37;font-weight:600;
}
.pz-hist-date{
    font-size:.72rem;color:#8a84a0;
}
.pz-hist-cards{
    display:flex;gap:4px;overflow-x:auto;
}
.pz-hist-thumb{
    width:36px;height:54px;object-fit:cover;border-radius:3px;
    border:1px solid #d4af3744;
}
.pz-hist-thumb.reversed{transform:rotate(180deg)}
.pz-hist-date-footer{
    text-align:center;color:#8a84a0;font-size:.72rem;margin:12px 0 4px;
}
</style>