/* 防騙有法度｜七罪小劇場——暗場儀式皮膚只作用在，不影響站上其他頁。結局時加上 .lit（場燈開啟），整頁從暗場切回一般版面。 */ :root{ --st-bg:#0A0820; /* 幾乎全黑，帶一點暖 */ --st-bg2:#171331; --st-panel:rgba(26,21,53,.72); --st-ink:#EFEBFF; /* 暖白 */ --st-dim:#A39CC4; --st-faint:#746D9C; --st-line:rgba(240,181,77,.18); --st-gold:#F0B54D; --st-red:#D65C77; --st-green:#8CC9A9; --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace; } /* ══ 暗場 ══ */ html.stage-root{background:var(--st-bg)} /* 小劇場不跟深淺色切換，永遠是暗場 */ body.stage{background:transparent;color:var(--st-ink)} body.stage > header,body.stage > section,body.stage > nav,body.stage > footer{position:relative;z-index:1} /* 導覽列與頁尾跟著全站主題走；只有內容區維持暗場 */ body.stage section{border-bottom-color:var(--st-line)} /* ══ 等寬微標籤（兩側髮絲線） ══ */ .mlabel{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem; letter-spacing:.24em;color:var(--st-faint);margin:0 0 .9rem;text-transform:uppercase} .mlabel::before,.mlabel::after{content:"";flex:1;height:1px;background:var(--st-line)} .mlabel.left{justify-content:flex-start} .mlabel.left::before{display:none} .mlabel.left::after{flex:0 0 auto;width:clamp(28px,7vw,110px)} /* 狀態列：小圓點會呼吸 */ .status{display:flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--mono); font-size:.72rem;letter-spacing:.18em;color:var(--st-dim);margin:0 0 1.6rem} .status i{width:6px;height:6px;border-radius:50%;background:var(--st-gold); box-shadow:0 0 0 0 rgba(240,181,77,.6);animation:pulse 2.6s ease-out infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,181,77,.5)}70%{box-shadow:0 0 0 9px rgba(240,181,77,0)}100%{box-shadow:0 0 0 0 rgba(240,181,77,0)}} /* ══ 場頭 ══ */ .stage-hero{padding:4.5rem 0 3rem;border-bottom:1px solid var(--st-line);text-align:center} .stage-hero .wrap{max-width:820px} .stage-hero h1{font-size:clamp(2rem,5.5vw,3.1rem);font-weight:500;letter-spacing:.14em; margin:0 0 1.1rem;color:var(--st-ink)} .stage-hero .lede{color:var(--st-dim);max-width:46ch;text-wrap:pretty;margin:0 auto 0;font-size:1rem;line-height:1.9} .stage-hero .fine{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--st-faint); margin-top:1.6rem;line-height:1.9} #game{min-height:440px;position:relative} .gs{animation:gfade .45s ease both} @keyframes gfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ══ 牌桌 ══ */ .deck-intro{max-width:56ch;color:var(--st-dim);margin:0 auto 2rem;text-align:center} .deck-intro strong{color:var(--st-ink)} .deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:.7rem; max-width:880px;margin:0 auto} .tcard{position:relative;aspect-ratio:5/8;border:none;padding:0;background:none;cursor:pointer; font-family:inherit;perspective:1100px;animation:hover 7s ease-in-out infinite} .tcard:nth-child(2n){animation-duration:8.5s;animation-delay:-1.2s} .tcard:nth-child(3n){animation-duration:9.5s;animation-delay:-2.6s} @keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .tcard:disabled{cursor:default;animation:none} .tface{position:absolute;inset:0;border-radius:3px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.3rem;backface-visibility:hidden; transition:transform .65s cubic-bezier(.4,0,.2,1)} .tback{background:linear-gradient(155deg,#1F1A40,#100D28 55%,#1A1538); border:1px solid rgba(240,181,77,.34);color:var(--st-gold);transform:rotateY(0)} .tback::before{content:"";position:absolute;inset:6px;border:1px solid rgba(240,181,77,.2);border-radius:1px} .tback::after{content:"";position:absolute;inset:0;border-radius:3px; background:radial-gradient(circle at 50% 45%,rgba(240,181,77,.13),transparent 62%)} .tback b{font-size:1.35rem;font-weight:400;letter-spacing:.1em;opacity:.85;position:relative;z-index:1} .tback em{position:absolute;bottom:9px;font-family:var(--mono);font-size:.52rem;letter-spacing:.2em; font-style:normal;color:rgba(240,181,77,.5);z-index:1} .tfront{background:linear-gradient(165deg,#262048,#181430);border:1px solid var(--st-gold); color:var(--st-ink);transform:rotateY(180deg);padding:0;overflow:hidden;text-align:center; display:block} .tfront img{width:100%;height:100%;object-fit:cover;display:block} .tfront .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .35rem .5rem; background:linear-gradient(to top,rgba(9,7,26,.96) 42%,rgba(9,7,26,.72) 68%,transparent); display:flex;flex-direction:column;gap:.1rem} .tcard.flipped .tback{transform:rotateY(-180deg)} .tcard.flipped .tfront{transform:rotateY(0)} .tcard:not(:disabled):hover{animation-play-state:paused} /* 滑鼠移上去：整張牌翻面轉動，露出剪影 */ .tcard:not(:disabled):hover .tback{transform:rotateY(-180deg)} .tcard:not(:disabled):hover .tfront{transform:rotateY(0);border-color:rgba(240,181,77,.75);box-shadow:0 12px 34px rgba(0,0,0,.55)} /* 牌面上的剪影：塔羅原圖壓暗成影子（抽牌前的預覽） */ .tfront .sil{position:absolute;inset:0;overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(240,181,77,.16),transparent 66%)} .tfront .sil img{width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) brightness(.45) contrast(1.5) sepia(.55) hue-rotate(-8deg);opacity:.96} .tfront .sil::after{content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 42%,transparent 46%,rgba(9,7,24,.4) 94%)} /* 抽中後：真正的牌面在剪影位置淡入 */ .tcard.chosen .tfront>img,.tcard.chosen .tfront>.cap{animation:tfin .5s ease} @keyframes tfin{from{opacity:0}to{opacity:1}} .tfront .sin{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--st-gold)} .tfront .cn{font-size:1.05rem;font-weight:700;line-height:1.25;margin:.2rem 0;letter-spacing:.06em} .tfront .st{font-size:.68rem;color:var(--st-dim);line-height:1.5} .tcard.dimmed{opacity:.14;filter:grayscale(.6);transform:translateY(14px);transition:opacity .6s,transform .6s} .tcard.chosen{z-index:3;transform:scale(1.16);transition:transform .6s cubic-bezier(.34,1.4,.5,1)} .deck-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--st-faint); margin-top:1.8rem;text-align:center;line-height:2} /* ══ 內心獨白 ══ */ .mono{max-width:60ch;margin:0 auto;background:var(--st-panel);border:1px solid var(--st-line); border-radius:3px;padding:2rem 2.1rem;backdrop-filter:blur(6px)} .mono .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--st-gold); margin:0 0 1.2rem;text-transform:uppercase} .mono p{margin:0 0 .8rem;line-height:1.95;color:var(--st-ink)} .mono p:last-of-type{margin-bottom:0} .mono .why{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--st-line); font-size:.92rem;color:var(--st-dim);line-height:1.85} .mono .why strong{color:var(--st-gold);font-weight:600} /* ══ 對話 ══ */ .scene{max-width:60ch;margin:0 auto 1.8rem;font-size:.86rem;color:var(--st-faint); line-height:1.9;text-align:center;font-style:normal} .opts{max-width:60ch;margin:0 auto;display:flex;flex-direction:column;gap:.6rem} .opt{text-align:left;background:rgba(26,21,53,.5);border:1px solid var(--st-line);border-radius:3px; padding:.9rem 1.1rem;cursor:pointer;font-family:inherit;font-size:.96rem;color:var(--st-ink); line-height:1.7;transition:border-color .18s,background .18s,transform .14s} .opt:hover{border-color:rgba(240,181,77,.6);background:rgba(240,181,77,.06);transform:translateX(4px)} .opt .cost{display:block;font-size:.76rem;color:var(--st-faint);margin-top:.4rem;line-height:1.6} /* ══ 儀式結束：結局與拆解（維持暗場） ══ */ .ending{max-width:64ch;margin:0 auto} .lights{display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:.68rem; letter-spacing:.24em;color:var(--st-gold);margin:0 0 1.6rem} .lights::before,.lights::after{content:"";flex:1;height:1px;background:var(--st-line)} .ending .verdict{border-radius:var(--radius);padding:1.4rem 1.5rem;margin:0 0 1.4rem;border:1px solid} .ending .verdict h3{margin:0 0 .6rem;font-size:1.28rem;letter-spacing:.02em} .ending .verdict p{margin:0 0 .6rem;color:var(--st-ink)} .ending .verdict p:last-child{margin-bottom:0} .v-good{background:rgba(140,201,169,.13);border-color:rgba(140,201,169,.5)} .verdict.v-good h3{color:#A9D6BD} .v-mid{background:rgba(240,181,77,.11);border-color:rgba(240,181,77,.5)} .verdict.v-mid h3{color:var(--st-gold)} .v-bad{background:rgba(214,92,119,.13);border-color:rgba(214,92,119,.5)} .verdict.v-bad h3{color:#EE96A8} .cost-line{font-weight:800;font-size:1.05rem;color:var(--st-ink)} .ending h3{color:var(--st-ink)} .ending p{color:var(--st-ink)} .ending .meta{color:var(--st-dim)} .ending a,.stage-note a,.credit a{color:var(--st-gold)} .replay{margin:1.4rem 0} .rp{background:var(--st-panel);border:1px solid var(--st-line);border-radius:var(--radius); padding:1.1rem 1.25rem;margin:0 0 .75rem;backdrop-filter:blur(4px)} .rp .step{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--st-gold)} .rp .said{margin:.45rem 0 .6rem;font-weight:700;line-height:1.7;color:var(--st-ink)} .rp .why{font-size:.91rem;color:var(--st-dim);margin:0 0 .6rem;line-height:1.8} .rp .yours{font-size:.85rem;color:var(--st-faint);border-top:1px dashed var(--st-line);padding-top:.55rem;margin:0} .rp .yours b{color:var(--st-dim)} .rp .yours .brake{color:#A9D6BD;font-weight:700} .rp .yours .slip{color:#EE96A8;font-weight:700} .killer{background:rgba(240,181,77,.08);border-radius:var(--radius);padding:1.2rem 1.35rem;margin:1.3rem 0; border-left:3px solid var(--st-gold)} .killer .lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--st-gold)} .killer .k{font-size:1.14rem;font-weight:800;line-height:1.65;margin:.5rem 0 .7rem;color:var(--st-ink)} .killer p{color:var(--st-ink)} .killer .meta{color:var(--st-dim)} .ending .callout{background:rgba(240,181,77,.09);border:1px solid var(--st-line);color:var(--st-ink)} .tally{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0 0} .tally i{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em; padding:.32rem .7rem;border-radius:2px;border:1px solid var(--st-line);color:var(--st-faint);background:transparent} .tally i.done{background:rgba(240,181,77,.16);border-color:rgba(240,181,77,.5);color:var(--st-gold);font-weight:700} /* ══ 按鈕 ══ */ .gbtns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem} .sbtn{display:inline-block;background:transparent;color:var(--st-gold);border:1px solid var(--st-gold); border-radius:2px;padding:.7rem 1.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em; cursor:pointer;text-decoration:none;transition:background .18s,color .18s} .sbtn:hover{background:var(--st-gold);color:#1A1535} .sbtn.quiet{color:var(--st-dim);border-color:var(--st-line)} .sbtn.quiet:hover{background:transparent;border-color:var(--st-dim);color:var(--st-ink)} /* 場燈開啟後，頁尾說明區恢復正常閱讀色 */ .stage-note{color:var(--st-dim)} .stage-note h2,.stage-note strong{color:var(--st-ink)} .stage-note .callout{background:rgba(240,181,77,.09);border:1px solid var(--st-line)} @media (prefers-reduced-motion:reduce){ .tcard,.status i{animation:none} .gs{animation:none} .tface{transition:none} } @media (max-width:520px){ .stage-hero{padding:3rem 0 2.2rem} .mono{padding:1.5rem 1.3rem} .mlabel{font-size:.6rem;letter-spacing:.16em;gap:.6rem} } /* ══ 塔羅牌圖（Rider-Waite-Smith 1909，公共領域） ══ */ .mono-wrap{display:flex;gap:2rem;align-items:flex-start;justify-content:center;max-width:900px;margin:0 auto} .mono-wrap .mono{margin:0;flex:1 1 auto;min-width:0} .drawn{margin:0;flex:0 0 190px;text-align:center;animation:rise .6s cubic-bezier(.2,.9,.3,1) both} @keyframes rise{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}} .drawn .pic{display:block;aspect-ratio:5/8;border:1px solid var(--st-gold);border-radius:3px; overflow:hidden;position:relative;box-shadow:0 16px 42px rgba(0,0,0,.55)} .drawn .pic::after{content:"";position:absolute;inset:5px;border:1px solid rgba(240,181,77,.28); border-radius:1px;pointer-events:none} .drawn img{width:100%;height:100%;object-fit:cover;display:block} .drawn figcaption{margin-top:.8rem;line-height:1.6} .drawn .num{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--st-gold)} .drawn b{display:block;font-size:1.05rem;letter-spacing:.06em;color:var(--st-ink);margin:.15rem 0} .drawn .en{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--st-faint)} .drawn .why{display:block;margin-top:.5rem;font-size:.78rem;color:var(--st-dim);line-height:1.7} /* 結局那一行的小牌 */ .wholine{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 1.2rem} .wholine .pic{flex:0 0 46px;aspect-ratio:5/8;border:1px solid var(--st-gold);border-radius:2px;overflow:hidden} .wholine img{width:100%;height:100%;object-fit:cover;display:block} .wholine .meta{font-size:.8rem;color:var(--ink-faint)} /* 圖片來源 */ .credit{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--st-faint); line-height:2;margin-top:1.4rem} .credit a{color:inherit} @media (max-width:760px){ .mono-wrap{flex-direction:column;align-items:center;gap:1.4rem} .drawn{flex:0 0 auto;width:170px} .mono-wrap .mono{width:100%} } @media (prefers-reduced-motion:reduce){.drawn{animation:none}} /* ══ 算命桌（洗牌、牌陣、對話框） ══ */ .table-stage{max-width:680px;margin:0 auto;display:flex;flex-direction:column;min-height:min(74vh,720px)} .table-stage [hidden]{display:none!important} .table-stage .scene{margin-bottom:1.4rem} /* 三張牌陣 */ .spread{display:flex;justify-content:center;gap:1.1rem;margin:0 auto 1rem;transition:opacity .6s} .spread.dim{opacity:.4} .slot{width:104px;text-align:center;opacity:.32;transition:opacity .4s} .slot.filled{opacity:1} .slot .pos{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--st-faint)} .scard{position:relative;aspect-ratio:5/8;perspective:900px;visibility:hidden} .slot.filled .scard{visibility:visible;animation:drop .35s ease both} @keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} .sface{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;overflow:hidden; display:flex;align-items:center;justify-content:center;transition:transform .7s cubic-bezier(.4,0,.2,1)} .sback{background:linear-gradient(155deg,#1F1A40,#100D28 55%,#1A1538);border:1px solid rgba(240,181,77,.42); color:var(--st-gold);font-size:.95rem;transform:rotateY(0)} .sback::after{content:"";position:absolute;inset:5px;border:1px solid rgba(240,181,77,.22);border-radius:1px} .sfront{border:1px solid var(--st-gold);transform:rotateY(180deg);background:#181430} .sfront img{width:100%;height:100%;object-fit:cover;display:block} .sfront .nm{position:absolute;left:0;right:0;bottom:0;padding:1.2rem .2rem .3rem; font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;font-weight:400;color:var(--st-ink); background:linear-gradient(to top,rgba(9,7,26,.94) 40%,transparent)} .slot.flip .sback{transform:rotateY(-180deg)} .slot.flip .sfront{transform:rotateY(0)} /* 牌扇（抽牌） */ .fan{position:relative;height:180px;margin:.3rem 0 .5rem} .fcard{position:absolute;left:50%;bottom:6px;width:76px;aspect-ratio:5/8;padding:0; transform:translateX(-50%);transform-origin:50% 180%; border:1px solid rgba(240,181,77,.42);border-radius:3px; background:linear-gradient(155deg,#1F1A40,#100D28 55%,#1A1538);color:var(--st-gold); cursor:pointer;font-size:.78rem; transition:transform .5s cubic-bezier(.3,.9,.4,1),opacity .45s,filter .2s} .fcard::after{content:"";position:absolute;inset:4px;border:1px solid rgba(240,181,77,.2);border-radius:1px} .fcard span{opacity:.65} .fcard.live:hover{filter:brightness(1.3)} .fcard.used{pointer-events:none} /* 底部對話框 */ .dlg{margin-top:auto;position:relative;border:1px solid var(--st-line);border-radius:3px; background:rgba(17,14,38,.88);backdrop-filter:blur(6px); padding:1.1rem 1.25rem 1.2rem;min-height:100px;cursor:pointer} .dlg .dname{position:absolute;top:-.72rem;left:.9rem;padding:.08rem .7rem; font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--st-gold); background:#100D26;border:1px solid var(--st-line);border-radius:2px;white-space:nowrap} .dlg.me .dname{color:var(--st-dim)} .dlg .dtext{margin:0;line-height:1.95;font-size:.98rem;color:var(--st-ink);min-height:2.3em} .dlg .cue{position:absolute;right:.9rem;bottom:.4rem;color:var(--st-gold);font-size:.85rem; animation:cueblink 1.1s steps(2) infinite} @keyframes cueblink{50%{opacity:.15}} .vn-opts{margin:0 0 .75rem} @media (max-width:560px){ .table-stage{min-height:auto} .spread{gap:.7rem} .slot{width:82px} .slot .pos{font-size:.56rem;letter-spacing:.14em} .fan{height:158px} .fcard{width:64px} .dlg .dtext{font-size:.93rem} } @media (prefers-reduced-motion:reduce){ .fcard,.sface{transition:none} .slot.filled .scard{animation:none} .dlg .cue{animation:none} }