/* =====================================================================
   愛慾島　番外模式（20261113.1）　js/extra.js 的樣子
   ---------------------------------------------------------------------
   ・顏色：深莓紫的夜＋玩家自己的顏色（玫瑰粉 → 蜜桃橘，跟「我」的頭像同一組）。
   ・class 一律 ex9 開頭；畫面掛在 .view.ex9 底下，面板（#sheet）和蓋在手機上的那幾層
     （.ex9rv 結果卡、.ex9ov 開盒）自己一層。@keyframes 一律 ex9*。
   ・動畫只動 transform／opacity。
   ===================================================================== */
.view.ex9,.ex9rv,.ex9ov,.ex9ps,.ex9dt,.ex9cx,.ex9rd{--xa:#ff6f9c;--xb:#ffb36b;--xg:linear-gradient(120deg,#ff6f9c,#ffb36b);--xk:#170c1a;--xl:rgba(255,190,210,.14)}
.view.ex9{background:radial-gradient(120% 46% at 50% 0%,#3a1436 0%,#1b0d1e 46%,var(--phone) 100%)}
.view.ex9 .vhead{background:linear-gradient(#1f0e21 62%,transparent)}
.view.ex9 .vhead h2{background:var(--xg);-webkit-background-clip:text;background-clip:text;color:transparent}
.view.ex9 .vhead h2 .sub{color:var(--ink3);-webkit-text-fill-color:var(--ink3)}
.view.ex9 svg{width:1em;height:1em;display:block}
.ex9emp{display:grid;justify-items:center;gap:6px;padding:44px 20px;text-align:center;color:var(--ink3)}
.ex9emp i{font-size:38px;color:var(--xa);opacity:.7}.ex9emp svg{width:1em;height:1em}
.ex9emp b{color:var(--ink);font-family:var(--serif);font-size:17px}.ex9emp span{font-size:13px}

/* ---------- 通行證那張票 ---------- */
.ex9tk{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;position:relative;cursor:pointer;
  background:linear-gradient(120deg,rgba(255,111,156,.16),rgba(255,179,107,.1));box-shadow:inset 0 0 0 1px rgba(255,170,190,.3)}
.ex9tk:before,.ex9tk:after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#1b0d1e;box-shadow:inset 0 0 0 1px rgba(255,170,190,.3)}
.ex9tk:before{left:-7px}.ex9tk:after{right:-7px}
.ex9tk>i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--xg);color:#3a0f26;flex:none}
.ex9tk>i svg{width:1em;height:1em}
.ex9tk>div{flex:1;min-width:0}.ex9tk b{display:block;font-family:var(--serif);font-size:16px;letter-spacing:.08em}
.ex9tk span{display:block;font-size:12px;color:var(--ink2)}
.ex9tk em{font-style:normal;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:20px;background:var(--xg);color:#3a0f26;flex:none}
.ex9tk.on{background:linear-gradient(120deg,rgba(255,179,107,.2),rgba(255,111,156,.1))}
.ex9ps{display:grid;gap:10px}.ex9ps .ex9tk{cursor:default}.ex9ps .ex9tk:before,.ex9ps .ex9tk:after{background:#17121c}
.ex9ps .ex9in{text-align:center;letter-spacing:.3em}.ex9ps .muted{margin:0;text-align:center}
.ex9ps .btn{margin-top:0}
.ex9pvs{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.05)}
.ex9pvs .m{width:74px;height:92px;border-radius:12px;overflow:hidden;flex:none}.ex9pvs .m .pimg,.ex9pvs .m .ex9card{width:100%;height:100%}
.ex9pvs .m .ex9card span{font-size:9px;padding:6px}
.ex9pvs b{display:block;font-size:14px}.ex9pvs span{display:block;font-size:13px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex9pvs small{display:block;margin-top:4px;font-size:11.5px;color:var(--xb)}

/* ---------- 大廳 ---------- */
.ex9hub{display:grid;gap:12px;padding-bottom:10px}
.ex9hub .hero{position:relative;border-radius:22px;overflow:hidden;padding:22px 18px 18px;min-height:128px;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(90% 120% at 86% 0%,rgba(255,179,107,.5),transparent 60%),radial-gradient(90% 120% at 0% 100%,rgba(255,111,156,.42),transparent 62%),linear-gradient(160deg,#4a1a44,#190b1c)}
.ex9hub .hero .pimg{position:absolute;inset:0;opacity:.5}
.ex9hub .hero:after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,220,200,.22),0 0 0 22px rgba(255,220,200,.05),0 0 0 46px rgba(255,220,200,.03)}
.ex9hub .hero>*{position:relative}
.ex9hub .hero small{font-size:10.5px;letter-spacing:.26em;color:rgba(255,225,215,.75)}
.ex9hub .hero h3{margin:2px 0 4px;font-family:var(--serif);font-size:30px;letter-spacing:.14em;font-weight:900}
.ex9hub .hero p{margin:0;font-size:13px;color:rgba(255,235,230,.86)}
.ex9hub .ft{display:flex;gap:0;text-align:left;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--xl);transition:transform .14s;animation:ex9up .4s both}
.ex9hub .ft:nth-of-type(2){animation-delay:.05s}.ex9hub .ft:nth-of-type(3){animation-delay:.1s}
.ex9hub .ft:active{transform:scale(.98)}
.ex9hub .ft .art{width:92px;flex:none;position:relative;display:grid;place-items:center;font-size:36px;color:#fff}
.ex9hub .ft .art .pimg{position:absolute;inset:0;opacity:.55}.ex9hub .ft .art i{position:relative;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.ex9hub .ft-post .art{background:linear-gradient(160deg,#ff7aa2,#b0306e 60%,#4a1040)}
.ex9hub .ft-box .art{background:linear-gradient(160deg,#ffcf8a,#d6764a 55%,#5a1e2c)}
.ex9hub .ft-jar .art{background:linear-gradient(160deg,#c58bff,#6a2a9a 58%,#24103a)}
.ex9hub .ft .tx{flex:1;min-width:0;padding:13px 14px 12px}
.ex9hub .ft b{font-family:var(--serif);font-size:17px;letter-spacing:.06em}
.ex9hub .ft p{margin:3px 0 8px;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.ex9hub .ft .st{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ex9hub .ft .st span{font-size:11.5px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.07);color:var(--ink2)}
.ex9hub .ft .st em{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--xg);color:#3a0f26}
.ex9hub .foot{text-align:center;font-size:11.5px;margin:2px 8px 0}
@keyframes ex9up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 文字卡 ---------- */
.ex9card{width:100%;height:100%;display:grid;place-items:center;text-align:center}
.ex9card span{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.7;padding:22px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4);white-space:pre-line;word-break:break-word}

/* ---------- 發文 ---------- */
.view.ex9-new .vbody{padding-bottom:0}
.ex9cp{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:16px}
.ex9cp>*,.ex9hub>*,.ex9bx>*,.ex9jr>*{min-width:0}
.ex9hub,.ex9bx,.ex9jr{grid-template-columns:minmax(0,1fr)}
.ex9pv{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 0 0 1px var(--xl)}
.ex9pv .ex9pm{aspect-ratio:4/5;max-height:44vh;width:100%}
.ex9pv .ex9pm .pimg,.ex9pv .ex9pm .ex9card{width:100%;height:100%}
.ex9pl{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.ex9pl span{display:flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 10px;border-radius:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ex9pl .tg{padding-left:4px;color:var(--xb)}
.ex9sec h4{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:15.5px;letter-spacing:.06em}
.ex9sec h4 i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11.5px/1 var(--sans);background:var(--xg);color:#3a0f26}
.ex9tabs{display:flex;gap:6px;margin-bottom:10px}
.ex9tabs button{flex:1;min-width:0;white-space:nowrap;height:34px;border-radius:17px;font-size:13px;background:rgba(255,255,255,.06);color:var(--ink2)}
.ex9tabs button.on{background:var(--xg);color:#3a0f26;font-weight:700}
.ex9th{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none;flex-wrap:nowrap;align-items:flex-start}
.ex9th::-webkit-scrollbar{display:none}
.ex9th .th,.ex9th .add,.ex9th .sw{width:74px;height:92px;border-radius:14px;overflow:hidden;flex:none;position:relative;box-shadow:inset 0 0 0 1px var(--xl)}
.ex9th .th .pimg{width:100%;height:100%}
.ex9th .th span{position:absolute;left:0;right:0;bottom:0;padding:10px 4px 4px;font-size:10.5px;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex9th .on{box-shadow:0 0 0 2.5px var(--xa)}
.ex9th .th.on:after{content:"";position:absolute;right:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--xa);box-shadow:0 0 0 2px #fff}
.ex9th .add{display:grid;place-content:center;justify-items:center;gap:4px;font-size:22px;color:var(--xb);background:rgba(255,179,107,.1);box-shadow:inset 0 0 0 1.5px rgba(255,179,107,.5)}
.ex9th .add span{font-size:11px}.ex9th .sw{height:74px}
.ex9th .muted{margin:8px 0;white-space:normal}.ex9th .ex9note{flex:none;width:150px;font-size:11px;align-self:center}
.ex9kd{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ex9kd button{display:grid;justify-items:center;gap:2px;padding:10px 2px 8px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--xl)}
.ex9kd button i{font-size:21px;color:var(--ink2)}.ex9kd button b{font-size:13px}
.ex9kd button small{display:none}
.ex9kd button.hot i{color:#ff8a70}
.ex9kd button.on{background:linear-gradient(160deg,rgba(255,111,156,.3),rgba(255,179,107,.16));box-shadow:inset 0 0 0 1.5px var(--xa)}
.ex9kd button.on i{color:#fff}
.ex9ta{width:100%;border:0;outline:0;resize:none;border-radius:14px;padding:12px 14px;font-size:16px;line-height:1.6;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--xl)}
.ex9ta:focus{box-shadow:inset 0 0 0 1.5px var(--xa)}
.ex9sg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ex9sg button{font-size:12.5px;padding:6px 11px;border-radius:16px;background:rgba(255,255,255,.06);color:var(--ink2);text-align:left}
.ex9sg .more{color:var(--xb);background:none;box-shadow:inset 0 0 0 1px rgba(255,179,107,.4)}
.ex9sg .muted{font-size:12px}
.ex9tg{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
.ex9tg::-webkit-scrollbar{display:none}
.ex9tg button{display:grid;justify-items:center;gap:4px;width:56px;flex:none;opacity:.6}
.ex9tg button span{font-size:11px;white-space:nowrap;max-width:60px;overflow:hidden;text-overflow:ellipsis}
.ex9tg button.on{opacity:1}.ex9tg button.on .av,.ex9tg .none.on i{box-shadow:0 0 0 2.5px var(--xa)}
.ex9tg .none i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.07)}
.ex9au{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ex9au button{display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:14px;font-size:12.5px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--xl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex9au button i{font-size:18px;color:var(--ink2)}
.ex9au button.on{background:linear-gradient(160deg,rgba(255,111,156,.3),rgba(255,179,107,.16));box-shadow:inset 0 0 0 1.5px var(--xa)}
.ex9au button[disabled]{opacity:.35}
.ex9hint{margin:8px 2px 0;min-height:19px;font-size:12px;color:var(--xb)}
.ex9go{position:sticky;bottom:0;margin:0 -16px;padding:10px 16px calc(22px + var(--sab));background:linear-gradient(transparent,#150a17 30%);display:grid;gap:4px;justify-items:center;z-index:3}
.ex9go .btn.main{background:var(--xg);color:#3a0f26;box-shadow:0 8px 26px rgba(255,111,156,.35)}
.ex9go small{font-size:11px;color:var(--ink3)}

/* ---------- 分享之後的結果卡 ---------- */
.ex9rv{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(10,4,12,.82);opacity:0;transition:opacity .25s}
.ex9rv.on{opacity:1}
.ex9rv svg{width:1em;height:1em}
.ex9rc{width:100%;max-width:350px;border-radius:24px;padding:16px;background:linear-gradient(170deg,#3a1638,#1a0c1d 60%);box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,170,190,.25);transform:translateY(18px) scale(.96);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.ex9rv.on .ex9rc{transform:none}
.ex9rc .top{display:flex;gap:12px;align-items:center}
.ex9rc .top .m{width:64px;height:80px;border-radius:12px;overflow:hidden;flex:none}
.ex9rc .top .m .pimg,.ex9rc .top .m .ex9card{width:100%;height:100%}.ex9rc .top .m .ex9card span{font-size:8px;padding:5px}
.ex9rc .hd{min-width:0}.ex9rc .hd small{display:block;font-size:11.5px;color:var(--xb);letter-spacing:.06em}
.ex9rc .hd b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.5}
.ex9rc .hd em{display:inline-block;margin:4px 4px 0 0;font-style:normal;font-size:11px;font-weight:700;padding:2px 9px;border-radius:12px;background:var(--xg);color:#3a0f26}
.ex9rc .nums{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 10px;padding:12px 0;border-radius:16px;background:rgba(255,255,255,.05)}
.ex9rc .nums div{text-align:center}.ex9rc .nums div+div{box-shadow:-1px 0 0 var(--xl)}
.ex9rc .nums b{display:block;font:900 22px/1.2 var(--serif);background:var(--xg);-webkit-background-clip:text;background-clip:text;color:transparent}
.ex9rc .nums span{font-size:11.5px;color:var(--ink3)}
.ex9rc .fxl{display:grid;gap:6px;max-height:34vh;overflow-y:auto}
.ex9rc .fx{display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:center;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.05);animation:ex9up .4s both;animation-delay:calc(.5s + var(--i)*.12s)}
.ex9rc .fx .av{grid-row:1/3}.ex9rc .fx b{font-size:13px;line-height:1.3}.ex9rc .fx span{font-size:11.5px;color:var(--ink2);line-height:1.3}
.ex9rc .fx.bad span{color:#ff9a8a}
.ex9rc .bt{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:14px}
.ex9rc .bt .btn.main{background:var(--xg);color:#3a0f26}

/* ---------- 我的主頁 ---------- */
.ex9me .hd{display:flex;align-items:center;gap:18px;padding:6px 4px 0}
.ex9me .hd>.av{box-shadow:0 0 0 2.5px #1b0d1e,0 0 0 4.5px var(--xa)}
.ex9me .ct{flex:1;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.ex9me .ct b{display:block;font:900 19px/1.3 var(--serif)}.ex9me .ct span{font-size:12px;color:var(--ink3)}
.ex9me .nm{padding:10px 4px 0}.ex9me .nm b{display:block;font-size:15px}.ex9me .nm span{font-size:12px;color:var(--ink3)}
.ex9me .bt{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin:12px 0 14px}
.ex9me .bt .btn{min-height:42px;font-size:14px}.ex9me .bt .btn.main{background:var(--xg);color:#3a0f26}.ex9me .bt svg{width:16px;height:16px}
.ex9me .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 -16px}
.ex9me .grid button{position:relative;aspect-ratio:4/5;overflow:hidden}
.ex9me .grid .pimg,.ex9me .grid .ex9card{width:100%;height:100%}.ex9me .grid .ex9card span{font-size:10.5px;padding:8px;line-height:1.5}
.ex9me .grid em{position:absolute;left:6px;bottom:5px;display:flex;align-items:center;gap:3px;font-style:normal;font-size:11px;font-weight:700;text-shadow:0 1px 4px #000}
.ex9me .grid em svg{width:12px;height:12px;fill:currentColor}
.ex9me .grid .lk{position:absolute;right:6px;top:6px;font-size:14px;filter:drop-shadow(0 1px 3px #000)}
.ex9me .grid .hot{position:absolute;left:6px;top:6px;font-style:normal;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--xg);color:#3a0f26}

/* ---------- 貼文面板 ---------- */
.ex9dt svg{width:1em;height:1em;display:block}
.ex9dt .m{aspect-ratio:4/5;max-height:40vh;margin:0 auto;border-radius:16px;overflow:hidden}
.ex9dt .m .pimg,.ex9dt .m .ex9card{width:100%;height:100%}
.ex9dt .mt{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.ex9dt .mt span{display:flex;align-items:center;gap:4px;font-size:11.5px;padding:3px 10px;border-radius:14px;background:rgba(255,255,255,.07);color:var(--ink2)}
.ex9dt .mt .hot{background:var(--xg);color:#3a0f26;font-weight:700}.ex9dt .mt .tg{padding-left:4px;color:var(--xb)}
.ex9dt .cap{margin:0;font-size:14px;line-height:1.6}.ex9dt .cap b{margin-right:6px}.ex9dt .cap i{font-style:normal;color:#8fb8ff}
.ex9dt .st{display:flex;gap:14px;margin:8px 0 10px;font-size:13px;color:var(--ink2)}
.ex9dt .st span{display:flex;align-items:center;gap:4px}.ex9dt .st svg{color:var(--xa)}
.ex9dt .cms{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.ex9dt .c{display:flex;gap:9px;align-items:flex-start}
.ex9dt .c p{margin:0;font-size:13.5px;line-height:1.5}.ex9dt .c b{margin-right:6px}
.ex9dt .c.lead{padding:7px 9px;margin:0 -9px;border-radius:12px;background:rgba(255,111,156,.1)}.ex9dt .c.lead b{color:var(--xa)}

/* ---------- 慾島圈裡面加的東西 ---------- */
.ex9fb{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:20px;background:linear-gradient(120deg,#ff6f9c,#ffb36b);color:#3a0f26}
.ex9fb svg{width:1em;height:1em}
.ex9bar{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 10px;border-radius:26px;background:rgba(255,255,255,.06)}
.ex9bar>button:first-child .av{box-shadow:0 0 0 2px var(--phone),0 0 0 3.5px #ff6f9c}
.ex9bar .in{flex:1;text-align:left;font-size:14px;color:var(--ink3)}
.ex9bar .cam{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#ffb36b}
.ex9bar .cam svg{width:1em;height:1em}
.view.feedv .post.ex9mine .pmedia{position:relative;cursor:pointer}
.view.feedv .post.ex9mine .pmedia>.ex9card{aspect-ratio:4/5}
.view.feedv .post.ex9mine .ph1 .av{box-shadow:0 0 0 2px var(--phone),0 0 0 3.5px #ffb36b}
.ex9pb{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;background:linear-gradient(120deg,#ff6f9c,#ffb36b);color:#3a0f26}

/* ---------- 情書盲盒 ---------- */
.ex9bx{display:grid;gap:14px}
.ex9bx .hero{text-align:center;padding:16px 14px 14px;border-radius:22px;background:radial-gradient(80% 90% at 50% 0%,rgba(255,179,107,.3),transparent 70%),rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--xl)}
.ex9bx .pile{position:relative;width:104px;height:74px;margin:6px auto 10px}
.ex9bx .pile i{position:absolute;inset:0;border-radius:10px;background:linear-gradient(160deg,#ffe3c0,#f0a878);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ex9bx .pile i:nth-child(1){transform:rotate(-9deg) translate(-8px,2px);opacity:.55}.ex9bx .pile i:nth-child(2){transform:rotate(7deg) translate(8px,0);opacity:.75}
.ex9bx .pile b{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:#b0305e;animation:ex9bob 3.2s ease-in-out infinite}
.ex9bx .hero h3{margin:0;font-family:var(--serif);font-size:22px;letter-spacing:.14em}
.ex9bx .hero p{margin:2px 0 8px;font-size:12.5px;color:var(--ink2)}
.ex9bx .pity{display:flex;justify-content:center;gap:8px}
.ex9bx .pity span{font-size:11px;padding:3px 10px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--ink2)}
@keyframes ex9bob{50%{transform:translateY(-5px)}}
.ex9bx .acts{display:grid;gap:8px}
.ex9bx .acts .btn.main{background:var(--xg);color:#3a0f26}
.ex9bx .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ex9bx .two .btn{flex-direction:column;gap:0;min-height:54px}.ex9bx .two .btn small{font-size:12px;font-weight:500;opacity:.8}
.ex9bx .rt{margin:0;text-align:center;font-size:11.5px}
.ex9bx .inv,.ex9jr .inv{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ex9bx .inv span,.ex9jr .inv span{font-size:11.5px;padding:4px 10px;border-radius:14px;background:rgba(255,255,255,.06);color:var(--ink2)}
.ex9bx .inv b,.ex9jr .inv b{margin-left:5px;color:var(--xb)}
.ex9bx .alh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.ex9bx .alh b{font-family:var(--serif);font-size:17px;letter-spacing:.08em}.ex9bx .alh span{font-size:12.5px;color:var(--xb)}
.ex9bx .who{display:flex;gap:10px;overflow-x:auto;margin:0 -16px 10px;padding:3px 16px;scrollbar-width:none}
.ex9bx .who::-webkit-scrollbar{display:none}
.ex9bx .who button{display:grid;justify-items:center;gap:3px;flex:none;opacity:.55}
.ex9bx .who button span{font-size:11px;color:var(--ink2)}
.ex9bx .who button.on{opacity:1}.ex9bx .who button.on .av{box-shadow:0 0 0 2.5px var(--xa)}
.ex9bx .g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ex9bx .g>button{position:relative;text-align:left}
.ex9bx .g>button em{position:absolute;right:6px;bottom:6px;font-style:normal;font-size:10.5px;color:var(--ink3)}
/* 卡片 */
.ex9c{--rc:#9a8c96;--rg:linear-gradient(165deg,#3a2f3a,#1c151d);position:relative;border-radius:14px;padding:26px 9px 10px;min-height:128px;background:var(--rg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent);overflow:hidden;text-align:left}
.ex9c.r-R{--rc:#7fc4ff;--rg:linear-gradient(165deg,#22395a,#141a2c)}
.ex9c.r-SR{--rc:#e59bff;--rg:linear-gradient(165deg,#4a2462,#1c1030)}
.ex9c.r-SSR{--rc:#ffd98a;--rg:linear-gradient(165deg,#6a4418,#2a1608 70%)}
.ex9c .rr{position:absolute;left:9px;top:7px;font:900 12px/1 var(--serif);letter-spacing:.06em;color:var(--rc)}
.ex9c .kk{position:absolute;right:9px;top:7px;font-size:10px;color:rgba(255,255,255,.55)}
.ex9c .ww{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ex9c .ww b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex9c .ww .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:rgba(255,255,255,.1);flex:none}
.ex9c .ww .ic svg,.ex9c svg{width:1em;height:1em}
.ex9c h5{margin:0;font-size:12px;line-height:1.45;font-weight:500;color:var(--ink)}
.ex9c.lk{display:grid;place-content:center;justify-items:center;padding-top:20px;opacity:.6}
.ex9c.lk .q{font:900 32px/1.2 var(--serif);color:var(--rc);opacity:.6}.ex9c.lk h5{font-size:10.5px;color:var(--ink3);text-align:center}
.ex9c.big{padding:40px 20px 22px;min-height:300px;border-radius:22px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 60%,transparent),0 20px 60px rgba(0,0,0,.5)}
.ex9c.big .rr{left:18px;top:16px;font-size:17px}.ex9c.big .kk{right:18px;top:17px;font-size:12px}
.ex9c.big .ww{margin-bottom:12px;gap:10px}.ex9c.big .ww b{font-size:14.5px}.ex9c.big .ww .ic{width:54px;height:54px;font-size:26px}
.ex9c.big h5{font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--rc);padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--rc) 30%,transparent)}
.ex9c.big p{margin:0;font-family:var(--serif);font-size:15px;line-height:2;white-space:pre-line;color:#fbeef2}
.ex9c.big small{display:block;margin-top:14px;text-align:right;font-family:var(--serif);font-size:13.5px;color:var(--rc)}
.ex9rd{padding-top:4px}
/* 開盒 */
.ex9ov{position:absolute;inset:0;z-index:60;background:radial-gradient(90% 60% at 50% 40%,#3a1436,#0c050e 80%);display:grid;overflow-y:auto}
.ex9ov svg{width:1em;height:1em}
.ex9ov .one{--rc:#9a8c96;position:relative;display:grid;align-content:center;gap:14px;padding:60px 26px 30px;min-height:100%}
.ex9ov .one.r-R{--rc:#7fc4ff}.ex9ov .one.r-SR{--rc:#e59bff}.ex9ov .one.r-SSR{--rc:#ffd98a}
.ex9ov .glow{position:absolute;left:50%;top:40%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,var(--rc),transparent 65%);opacity:0;transform:scale(.5);transition:opacity .6s .35s,transform .9s .35s}
.ex9ov .one.open .glow{opacity:.28;transform:scale(1.15)}
.ex9ov .envw{position:relative;display:grid}
.ex9ov .envw>*{grid-area:1/1}
.ex9ov .env{align-self:center;justify-self:center;width:170px;height:120px;border-radius:14px;position:relative;background:linear-gradient(160deg,#ffe3c0,#f0a878);box-shadow:0 14px 40px rgba(0,0,0,.5);display:grid;place-items:center;font-size:64px;color:#b0305e;transition:transform .45s cubic-bezier(.5,0,.8,.4),opacity .35s .2s}
.ex9ov .one.open .env{transform:translateY(60px) scale(.7) rotate(-6deg);opacity:0}
.ex9ov .cw{opacity:0;transform:translateY(30px) scale(.9);transition:opacity .4s .3s,transform .55s .3s cubic-bezier(.2,.9,.3,1.15)}
.ex9ov .one.open .cw{opacity:1;transform:none}
.ex9ov .nt{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;min-height:24px;font-size:13px;color:var(--ink2);opacity:0;transition:opacity .4s .7s}
.ex9ov .one.open .nt{opacity:1}
.ex9ov .nt em,.ex9ov .sum em{font-style:normal;font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:10px;background:linear-gradient(120deg,#ff6f9c,#ffb36b);color:#3a0f26}
.ex9ov .bt{position:relative;display:grid;gap:8px}
.ex9ov .bt small{text-align:center;font-size:12px;color:var(--ink3);min-height:14px}
.ex9ov .btn.main{background:var(--xg);color:#3a0f26}
.ex9ov .sum{padding:64px 18px 28px;display:grid;gap:14px;align-content:start}
.ex9ov .sum h3{margin:0;text-align:center;font-family:var(--serif);font-size:20px;letter-spacing:.12em}
.ex9ov .sum .g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ex9ov .sum .g button{position:relative;text-align:left;animation:ex9up .35s both}
.ex9ov .sum .g button em{position:absolute;right:5px;bottom:5px}

/* ---------- 醋罈 ---------- */
.ex9jr{display:grid;gap:12px}
.ex9jr .fire{text-align:center;padding:16px 14px;border-radius:22px;background:radial-gradient(90% 100% at 50% 0%,rgba(255,80,60,.34),transparent 70%),linear-gradient(170deg,#3a1220,#1a0c14);box-shadow:inset 0 0 0 1px rgba(255,120,100,.4)}
.ex9jr .vs{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:8px}
.ex9jr .vs .av{box-shadow:0 0 0 2.5px #2a0e16,0 0 0 4.5px #ff7a5a}
.ex9jr .vs i{font-size:30px;color:#ff7a5a;animation:ex9flick 1.4s ease-in-out infinite}
@keyframes ex9flick{50%{transform:scale(1.18) translateY(-2px);opacity:.75}}
.ex9jr .fire b{font-family:var(--serif);font-size:18px;letter-spacing:.06em}
.ex9jr .fire p{margin:2px 0 12px;font-size:12.5px;color:#ffc9bd}
.ex9jr .fire .btn.main{background:linear-gradient(120deg,#ff5a4a,#ff9a5a);color:#2a0a08}
.ex9jr .calm{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--xl)}
.ex9jr .calm>i{font-size:34px;color:#c58bff;flex:none}
.ex9jr .calm b{display:block;font-family:var(--serif);font-size:16px}.ex9jr .calm span{font-size:12px;color:var(--ink2)}
.ex9jr .vow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;font-size:12.5px;background:rgba(255,179,107,.12);color:#ffd9b0}
.ex9jr .rows{display:grid;gap:8px}
.ex9jr .row{--jc:#8d7f88;display:flex;gap:12px;align-items:center;padding:12px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--xl)}
.ex9jr .row.lv1{--jc:#ffcf8a}.ex9jr .row.lv2{--jc:#ff8f6a}.ex9jr .row.lv3{--jc:#ff4a4a}
.ex9jr .row.lv3{box-shadow:inset 0 0 0 1.5px rgba(255,80,70,.55)}
.ex9jr .row .in{flex:1;min-width:0}
.ex9jr .row .t{display:flex;align-items:baseline;gap:6px}
.ex9jr .row .t b{font-size:15px;white-space:nowrap}.ex9jr .row .t span{font-size:11px;color:var(--ink3);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex9jr .row .t em{font-style:normal;font-size:11px;font-weight:700;color:var(--jc);flex:none}
.ex9jr .bar{position:relative;height:6px;border-radius:3px;margin:6px 0 5px;background:rgba(255,255,255,.09);overflow:hidden}
.ex9jr .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#ffcf8a,var(--jc))}
.ex9jr .bar u{position:absolute;top:0;bottom:0;width:1.5px;background:rgba(0,0,0,.5)}
.ex9jr .row p{margin:0;font-size:12px;line-height:1.45;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex9jr .row .cx{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--serif);font-size:16px;font-weight:700;background:var(--xg);color:#3a0f26}
.ex9jr .row .cx[disabled]{opacity:.25}
.ex9jr .row.lkd .in{filter:blur(5px);opacity:.6}.ex9jr .row.lkd .av{filter:blur(4px)}
.ex9jr .row.lkd .cx{background:rgba(255,255,255,.1);color:var(--ink2);font-size:18px}
.ex9cx svg{width:1em;height:1em}
.ex9cx .hd{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.ex9cx .btn{justify-content:flex-start;text-align:left;gap:12px}
.ex9cx .btn>i{font-size:22px;color:var(--xa);flex:none}
.ex9cx .btn b{display:block;font-size:15px}.ex9cx .btn small{display:block;font-size:12px;font-weight:400;color:var(--ink2);letter-spacing:0;line-height:1.45}

@media (prefers-reduced-motion:reduce){.ex9bx .pile b,.ex9jr .vs i{animation:none}}