html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv11", "ss01"; }
.chip[aria-pressed="true"] { background: #0f8a4f; color: #fff; border-color: #0f8a4f; }
.chip[aria-pressed="true"] .chip-count { color: rgba(255,255,255,.75); }
.dark .chip[aria-pressed="true"] { background: #34c77b; color: #07120d; border-color: #34c77b; }
.dark .chip[aria-pressed="true"] .chip-count { color: rgba(7,18,13,.65); }
.navlink[aria-current="page"] { color: #0d6e41; background: #ecfdf3; }
.dark .navlink[aria-current="page"] { color: #6ee0a0; background: rgba(52,199,123,.1); }
.blurred { filter: blur(7px); user-select: none; }
.fade-in { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bar-anim { transition: width .35s ease; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(127,127,127,.3); border-radius: 9px; }

/* 首頁故事動畫 */
.story { --wall: #eef6f1; --floor: #e2ece6; --window: #ffffff; --line: #d3e2d9; --cabinet: #d8e6dd; --couch: #a6dcbd; --couch2: #8fd0ab; --ink: #1b1f1d; }
.dark .story { --wall: #142019; --floor: #0f1814; --window: #1c2b24; --line: #24352d; --cabinet: #1f2e27; --couch: #2c5a43; --couch2: #24503b; --ink: #e8efe9; }
.story .st-wall { fill: var(--wall); } .story .st-floor { fill: var(--floor); }
.story .st-window { fill: var(--window); stroke: var(--line); stroke-width: 3; } .story .st-line { stroke: var(--line); }
.story .st-cabinet { fill: var(--cabinet); } .story .st-couch { fill: var(--couch); } .story .st-couch2 { fill: var(--couch2); }
.story text.ha, .story .q text { fill: var(--ink); }
.story .tv-sub { fill: #fff; }
.story .sub-hl { transition: fill .4s; }
.story * { transform-box: fill-box; }

/* 預設全部隱藏的可變元件 */
.story .room { transition: opacity .5s, filter .5s; }
.story .pause, .story .laugh, .story .q, .story .sweat, .story .spark,
.story .eyes-happy, .story .m-sad, .story .m-laugh, .story .phone { opacity: 0; transition: opacity .35s; }
.story .brows { transition: transform .3s; transform-origin: center; }
.story .head { transform-origin: 50% 90%; transition: transform .4s; }

/* 電視裡的人一直在動 */
.story .bob1 { animation: bob 1.6s ease-in-out infinite; } .story .bob2 { animation: bob 1.9s ease-in-out infinite .3s; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* 1 看劇：電視笑，主角一個問號 */
.story[data-scene="1"] .laugh, .story[data-scene="4"] .laugh { opacity: 1; }
.story[data-scene="1"] .ha, .story[data-scene="4"] .ha { animation: haUp 1.4s ease-out infinite; }
.story .ha2 { animation-delay: .45s !important; } .story .ha3 { animation-delay: .9s !important; }
@keyframes haUp { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1.05); } }
.story[data-scene="1"] .q1 { opacity: 1; animation: qPop .5s .6s both; }
@keyframes qPop { from { opacity: 0; transform: translateY(6px) scale(.6); } to { opacity: 1; transform: none; } }
.story[data-scene="1"] .head { transform: rotate(4deg); }

/* 2 卡住：暫停、皺眉、更多問號、流汗 */
.story[data-scene="2"] .pause { opacity: 1; }
.story[data-scene="2"] .bob1, .story[data-scene="2"] .bob2 { animation-play-state: paused; }
.story[data-scene="2"] .q1, .story[data-scene="2"] .q2, .story[data-scene="2"] .sweat { opacity: 1; }
.story[data-scene="2"] .q2 text { animation: qPop .4s both; } .story[data-scene="2"] .q2 text + text { animation-delay: .25s; }
.story[data-scene="2"] .sweat { animation: sweat 1.2s ease-in infinite; }
@keyframes sweat { from { transform: translateY(-2px); } to { transform: translateY(6px); opacity: 0; } }
.story[data-scene="2"] .m-flat { opacity: 0; } .story[data-scene="2"] .m-sad { opacity: 1; }
.story[data-scene="2"] .brows { transform: rotate(-8deg) translateY(1px); }
.story[data-scene="2"] .head { transform: rotate(-3deg) translateX(-2px); }

/* 3 預習：房間變暗，手機滑入，翻卡 */
.story[data-scene="3"] .room { opacity: .3; filter: blur(2px); }
.story .phone { transform: translateY(40px); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.story[data-scene="3"] .phone { opacity: 1; transform: none; }
.story .pcard .back { opacity: 0; } .story .pcard.c2 { opacity: 0; }
.story[data-scene="3"] .c1 { animation: cardOut 4.8s both; }
.story[data-scene="3"] .c1 .front { animation: hideAt 4.8s both; --at: 22%; }
.story[data-scene="3"] .c1 .back { animation: showAt1 4.8s both; }
.story[data-scene="3"] .c2 { animation: cardIn 4.8s both; }
.story[data-scene="3"] .c2 .front { animation: hide2 4.8s both; }
.story[data-scene="3"] .c2 .back { animation: show2 4.8s both; }
.story .pbar { transform-origin: left center; transform: scaleX(.08); }
.story[data-scene="3"] .pbar { animation: pbar 4.8s ease-in-out both; }
@keyframes hideAt { 0%, 22% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes showAt1 { 0%, 24% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes cardOut { 0%, 45% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateX(-40px) rotate(-6deg); } }
@keyframes cardIn { 0%, 48% { opacity: 0; transform: translateX(40px) rotate(6deg); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes hide2 { 0%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes show2 { 0%, 74% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes pbar { 0% { transform: scaleX(.08); } 30% { transform: scaleX(.45); } 80%, 100% { transform: scaleX(1); } }

/* 4 再看一次：同一句台詞，字被標出來，主角大笑 */
.story[data-scene="4"] .sub-hl { fill: #6ee0a0; }
.story[data-scene="4"] .eyes-open, .story[data-scene="4"] .m-flat { opacity: 0; }
.story[data-scene="4"] .eyes-happy, .story[data-scene="4"] .m-laugh, .story[data-scene="4"] .spark { opacity: 1; }
.story[data-scene="4"] .head { animation: laughShake .5s ease-in-out infinite; }
@keyframes laughShake { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
.story[data-scene="4"] .spark { animation: qPop .4s both; }
.story[data-scene="4"] .popcorn { animation: bob .5s ease-in-out infinite; }

/* 章節進度條與旁白 */
.story-step.done .story-fill { width: 100%; }
.story-fill { width: 0; }
@keyframes storyFill { from { width: 0; } to { width: 100%; } }
.story-step.active .story-fill { width: 0; }
.story-cap.in { animation: tvIn .5s ease-out both; }
@keyframes tvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .story *, .story-cap.in { animation: none !important; transition: none !important; }
  .story-step.active .story-fill { width: 100%; }
}