*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0d0b26;color:#f6eeff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit;user-select:text;-webkit-user-select:text}
#bg{position:fixed;inset:0;background:radial-gradient(120% 80% at 50% 110%,#7b4560 0%,#3a2757 38%,#171338 70%,#0b0a22 100%)}
#stars{position:fixed;inset:0;width:100%;height:100%}
#halo{position:fixed;left:50%;top:46%;width:150vmin;height:150vmin;transform:translate(-50%,-50%);color:#c9905a;background:radial-gradient(closest-side,currentColor,transparent 72%);opacity:.3;transition:color .5s,opacity .5s;pointer-events:none}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,0,0,.75));opacity:0;transition:opacity .6s;z-index:5}
body.tense #vig{opacity:1}
.col{width:100%;max-width:620px;margin:0 auto;padding:0 18px}
.view{position:fixed;inset:0;display:none;flex-direction:column;padding:calc(env(safe-area-inset-top) + 10px) 0 calc(env(safe-area-inset-bottom) + 10px);z-index:10}
.view.on{display:flex;animation:vin .35s ease}
@keyframes vin{from{opacity:0;transform:translateY(10px)}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:30px}
.scroll::-webkit-scrollbar{display:none}
.hbtn{height:34px;min-width:34px;padding:0 11px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);font-size:13px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.hbtn.sm{font-size:12px;height:30px}
.hd{display:flex;align-items:center;justify-content:space-between;padding:6px 0 4px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;letter-spacing:2px}
.brand small{display:block;font-size:11.5px;font-weight:400;letter-spacing:.5px;opacity:.6;margin-top:2px}
.logo{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#ffe3a1,#ff9d6c);display:grid;place-items:center;font-size:22px;box-shadow:0 6px 18px #ff9d6c55;animation:wob 3s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-10deg) scale(1.05)}}
.fortune{margin-top:14px;border-radius:20px;padding:14px 16px;background:linear-gradient(135deg,rgba(255,217,138,.16),rgba(255,140,170,.1));border:1px solid rgba(255,217,138,.25);display:flex;gap:12px;align-items:center;cursor:pointer;min-height:76px;position:relative;overflow:hidden}
.fortune .fe{font-size:34px}
.fortune b{font-size:15px}.fortune small{display:block;font-size:12px;opacity:.7;margin-top:3px;line-height:1.5}
.fortune .fx{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.fortune .fx span{font-size:11.5px;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.2)}
.fortune.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);animation:shine 2.5s infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.hero{width:100%;margin-top:12px;border-radius:24px;padding:18px;display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(135deg,#ffe2a0,#ff9f70 60%,#f07a8a);color:#3a1d33;box-shadow:0 12px 34px #ff8d6a44;position:relative;overflow:hidden}
.hero .htxt{flex:1}.hero b{font-size:22px;font-weight:900}.hero span{display:block;font-size:12.5px;line-height:1.6;margin-top:6px;opacity:.8}
.hero em{display:inline-block;margin-top:10px;font-style:normal;font-weight:800;background:#3a1d33;color:#ffe2a0;padding:6px 14px;border-radius:99px;font-size:13px}
.mini-coin{width:92px;height:92px;position:relative;transform-style:preserve-3d;animation:mflip 2.6s cubic-bezier(.5,0,.5,1) infinite;flex:0 0 auto}
.mini-coin i{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:30px;backface-visibility:hidden;background:radial-gradient(circle at 35% 30%,#fff6d0,#f2c25a 55%,#c98a2a);box-shadow:inset 0 0 0 6px #e3a73f,inset 0 0 0 8px #fff1b8;color:#7a4a12}
.mini-coin i+i{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#fff,#d7dbe6 55%,#9aa1b5);box-shadow:inset 0 0 0 6px #b8bfd0,inset 0 0 0 8px #fff;color:#4a5068}
@keyframes mflip{0%,20%{transform:rotateY(0)}50%,70%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.tonight{width:100%;margin-top:12px;border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(135deg,rgba(120,110,255,.28),rgba(255,120,180,.18));border:1px solid rgba(255,255,255,.14)}
.tonight>span{font-size:30px}.tonight div{flex:1}.tonight b{font-size:16px}.tonight small{display:block;font-size:12px;opacity:.7;margin-top:3px}.tonight em{font-style:normal;font-size:24px;opacity:.6}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.tile{position:relative;height:168px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);overflow:hidden;text-align:left;padding:14px}
.tile b{font-size:17px;position:relative;z-index:2}.tile small{display:block;font-size:11.5px;opacity:.65;margin-top:3px;position:relative;z-index:2}
.tile .ti{position:absolute;right:-6px;bottom:-4px;width:72%;height:68%}
.tile .ti img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:scale(.9);transition:opacity 1.1s,transform 1.4s}
.tile .ti img.on{opacity:1;transform:scale(1)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 80%,var(--c,#c9905a),transparent 65%);opacity:.35;transition:background .8s}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.row3 button{border-radius:18px;padding:12px 6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);font-size:13px;font-weight:600}
.row3 b{display:block;font-size:24px;margin-bottom:4px}.row3 small{display:block;font-weight:400;font-size:11px;opacity:.55;margin-top:2px}
.foot{font-size:12px;opacity:.5;line-height:1.7;text-align:center;margin:18px 6px 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.back{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:24px;line-height:1;padding-bottom:3px}
.ttl{font-weight:800;font-size:16px;letter-spacing:1px}
#ask{margin-top:6px;font-size:clamp(22px,6.2vw,30px);font-weight:800;text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.4)}
#ask small{display:block;font-size:12.5px;font-weight:400;opacity:.6;margin-top:3px}
#pre{margin-top:8px}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chips>*:first-child{margin-left:auto}.chips>*:last-child{margin-right:auto}
.chip{flex:0 0 auto;height:32px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:13px;white-space:nowrap;transition:.2s}
.chip.on{background:linear-gradient(135deg,#ffe2a0,#ffab72);color:#3a1d33;border-color:transparent;font-weight:700}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;min-width:0;gap:8px;align-items:center}
.opt i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.12);flex:0 0 auto}
.opt input{flex:1;min-width:0;width:100%;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);padding:0 12px;font-size:15px;outline:none}
.opt input:focus{border-color:#ffd98a}
.opt button{width:30px;height:30px;border-radius:50%;opacity:.6;font-size:16px}
.optbar{display:flex;gap:8px;margin-top:6px;align-items:center}
.optbar .chip{height:30px;font-size:12.5px}
#stage{position:relative;flex:1;width:100%;max-width:620px;margin:4px auto 0;min-height:160px}
#st{position:absolute;left:50%;top:4%;bottom:3%;width:min(84vw,500px);transform:translateX(-50%)}
.layer{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;opacity:0;transform:scale(.88);transition:opacity var(--d,.3s) ease,transform var(--d,.3s) cubic-bezier(.2,.8,.3,1),filter var(--d,.3s) ease;will-change:opacity,transform}
.layer img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.layer.blur{filter:blur(10px)}
.layer.on{opacity:1;transform:scale(1);filter:none}
.layer.out{opacity:0;transform:scale(1.07)}
.layer.out.blur{filter:blur(8px)}
.layer.land{animation:land .8s cubic-bezier(.2,1.5,.35,1)}
.layer.slip{animation:slip .75s cubic-bezier(.2,1.4,.4,1)}
.layer.slipb{animation:slipb .75s cubic-bezier(.2,1.4,.4,1)}
.layer.tease{animation:teaseA 1s ease-in-out}
@keyframes land{0%{transform:scale(.7) translateY(30px)}60%{transform:scale(1.06) translateY(-8px)}100%{transform:scale(1)}}
@keyframes slip{0%{transform:translateX(55%) scale(.9)}100%{transform:none}}
@keyframes slipb{0%{transform:translateX(-55%) scale(.9)}100%{transform:none}}
@keyframes teaseA{0%,100%{transform:scale(1)}40%{transform:scale(1.03) rotate(-1deg)}70%{transform:scale(1.01) rotate(1deg)}}
.layer .ov{position:absolute;left:50%;bottom:44%;transform:translateX(-50%);font-size:clamp(30px,9vw,46px);font-weight:900;letter-spacing:4px;white-space:nowrap;text-shadow:0 4px 20px rgba(0,0,0,.6),0 0 2px #000;color:#fff}
.tcard{width:min(74%,330px);aspect-ratio:3/3.6;max-height:100%;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;text-align:center;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.25);margin-bottom:4%}
.tcard .e{font-size:clamp(56px,17vw,92px);line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.tcard .t{font-size:clamp(20px,5.6vw,27px);font-weight:900;color:#2a1530;line-height:1.3;word-break:break-all}
.tcard .k{font-size:12px;font-weight:700;color:#2a1530;opacity:.55;letter-spacing:2px}
#shadow{position:absolute;left:50%;bottom:1%;width:56%;height:26px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);pointer-events:none}
#ring{position:absolute;left:50%;bottom:-2%;width:70%;height:70px;transform:translateX(-50%);border-radius:50%;border:2px solid transparent;pointer-events:none}
#ring.go{animation:ring 1.1s ease-out}
@keyframes ring{0%{border-color:rgba(255,226,160,.9);transform:translateX(-50%) scale(.4)}100%{border-color:rgba(255,226,160,0);transform:translateX(-50%) scale(1.6)}}
#rays{position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,230,170,.13) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent 70%);mask:radial-gradient(closest-side,#000 20%,transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none;animation:spin 30s linear infinite}
#rays.on{opacity:1}#rays.gold{background:repeating-conic-gradient(from 0deg,rgba(255,210,90,.35) 0 6deg,transparent 6deg 14deg);opacity:1}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#wish{position:absolute;left:50%;top:0;transform:translate(-50%,-20px);opacity:0;pointer-events:none;transition:.35s;z-index:6;background:rgba(18,14,44,.85);border:1px solid rgba(255,217,138,.4);border-radius:18px;padding:9px 16px;text-align:center;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
#wish.on{opacity:1;transform:translate(-50%,0);animation:wp 1.2s ease-in-out infinite}
#wish span{font-size:18px;margin-right:4px}#wish b{font-size:14.5px;color:#ffd98a}#wish small{display:block;font-size:11.5px;opacity:.65;margin-top:2px}
@keyframes wp{50%{box-shadow:0 0 0 6px rgba(255,217,138,.12),0 10px 30px rgba(0,0,0,.4)}}
#tease{position:absolute;left:50%;top:10%;transform:translateX(-50%);font-size:22px;font-weight:900;letter-spacing:3px;color:#ffd98a;opacity:0;transition:opacity .2s;text-shadow:0 2px 14px rgba(0,0,0,.6);pointer-events:none;z-index:6;white-space:nowrap}
#tease.on{opacity:1;animation:tz .5s ease-in-out infinite alternate}
@keyframes tz{to{transform:translateX(-50%) scale(1.08)}}
#label{text-align:center;min-height:56px}
#nm{font-size:clamp(22px,6.2vw,30px);font-weight:800;letter-spacing:2px;transition:opacity .25s;min-height:1.2em}
#nm.dim{opacity:.35}
#sub{font-size:12.5px;opacity:.65;margin-top:2px;min-height:17px}
#faces{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:10px 18px 4px;width:100%;max-width:620px;margin:0 auto;scroll-behavior:smooth}
#faces::-webkit-scrollbar{display:none}
#faces>*:first-child{margin-left:auto}#faces>*:last-child{margin-right:auto}
.face{flex:0 0 50px;height:50px;border-radius:14px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);display:grid;place-items:center;position:relative;transition:transform .15s,border-color .15s,background .15s,opacity .2s;font-size:24px}
.face img{max-width:42px;max-height:42px;pointer-events:none}
.face.cur{border-color:#ffd98a;background:rgba(255,217,138,.22);transform:translateY(-4px)}
.face.ex{opacity:.25}
.face.ex::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:#ff8c8c;transform:rotate(-35deg)}
.face.wish::before{content:"💗";position:absolute;top:-8px;right:-6px;font-size:15px}
body.wishing .face{animation:fw 1s ease-in-out infinite}
@keyframes fw{50%{border-color:rgba(255,217,138,.6)}}
#fhint{font-size:11px;opacity:.45;text-align:center;margin-top:3px;min-height:14px}
#ctrl{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:8px}
.side{width:66px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;opacity:.85}
.side b{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:19px}
.side.hide{visibility:hidden}
#roll{position:relative;width:92px;height:92px;border-radius:50%;touch-action:none}
#roll .core{position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c7,#ffb36f 55%,#f0785f);box-shadow:0 10px 30px #ff8d6a66,inset 0 -6px 12px rgba(120,40,40,.25);display:grid;place-items:center;color:#4a1f2f;font-weight:900;font-size:25px;letter-spacing:2px;transition:transform .15s}
#roll.hold .core{transform:scale(.92)}
#roll svg{position:absolute;inset:0;transform:rotate(-90deg)}
#roll circle{fill:none;stroke-width:5}
#roll .bgc{stroke:rgba(255,255,255,.12)}
#roll .fg{stroke:#ffe3a1;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283}
#roll.busy{pointer-events:none;opacity:.55}
#rhint{font-size:11px;opacity:.45;text-align:center;margin-top:6px}
#coinWrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;perspective:900px}
.coinmode #coinWrap{display:flex}.coinmode #st{display:none}
#coin{width:min(52vw,230px);aspect-ratio:1;position:relative;transform-style:preserve-3d}
.cf{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:18%}
.cf span{font-weight:900;text-align:center;line-height:1.2;word-break:break-all}
.cf.a{background:radial-gradient(circle at 35% 30%,#fff6d0,#f2c25a 55%,#c98a2a);box-shadow:inset 0 0 0 10px #e3a73f,inset 0 0 0 13px #fff1b8,inset 0 0 40px rgba(150,90,20,.4),0 0 40px rgba(255,200,90,.25);color:#6a3e0e}
.cf.b{transform:rotateX(180deg);background:radial-gradient(circle at 35% 30%,#ffffff,#d5dae6 55%,#8f97ad);box-shadow:inset 0 0 0 10px #b2b9cc,inset 0 0 0 13px #fff,inset 0 0 40px rgba(60,70,100,.35),0 0 40px rgba(200,210,255,.2);color:#3d4462}
#coinWish{position:absolute;left:50%;bottom:6%;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.3s;text-align:center;z-index:7;width:min(92%,420px)}
#coinWish.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#coinWish b{font-size:15px;color:#ffd98a}#coinWish p{font-size:20px;font-weight:900;margin:2px 0 10px}
.cw{display:flex;gap:10px}.cw button{flex:1;height:48px;border-radius:14px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);font-weight:800;font-size:15px;backdrop-filter:blur(8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}
.cw button.pick{background:#ffd98a;color:#3a1d33}
#iti{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 54px);transform:translate(-50%,-180%);transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .3s,visibility .45s;z-index:30;display:flex;gap:8px;padding:8px;border-radius:18px;background:rgba(20,16,46,.88);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#iti{visibility:hidden;opacity:0}#iti.on{transform:translate(-50%,0);visibility:visible;opacity:1}
.slot{width:78px;text-align:center;font-size:10.5px;opacity:.5;transition:.3s;white-space:nowrap}
.slot.now,.slot.done{opacity:1}
.slot .pic{height:46px;border-radius:12px;background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.2);display:grid;place-items:center;margin-bottom:4px;font-size:20px;overflow:hidden}
.slot.now .pic{border-color:#ffd98a;animation:pulse 1s infinite}
.slot.done .pic{border-style:solid;border-color:rgba(255,217,138,.5)}
.slot .pic img{max-height:40px;max-width:66px}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(255,217,138,.2)}}
#mask{position:fixed;inset:0;background:rgba(6,5,20,.5);opacity:0;pointer-events:none;transition:.3s;z-index:40}
#mask.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:560px;transform:translate(-50%,105%);transition:transform .45s cubic-bezier(.2,.9,.25,1);z-index:50;background:linear-gradient(#2a2150f5,#18143afa);border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:26px 26px 0 0;padding:16px 18px calc(env(safe-area-inset-bottom) + 16px);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);max-height:86vh;overflow:auto;scrollbar-width:none}
.sheet.on{transform:translate(-50%,0)}
.grab{width:40px;height:4px;border-radius:9px;background:rgba(255,255,255,.25);margin:-4px auto 12px}
.rtop{display:flex;gap:14px;align-items:center}
.rtop .ri{width:88px;height:88px;flex:0 0 auto;display:grid;place-items:center;font-size:52px;position:relative}
.rtop .ri img{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.rtop .ri .ovs{position:absolute;font-size:15px;font-weight:900;text-shadow:0 2px 6px #000}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{display:inline-block;font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(255,217,138,.16);color:#ffd98a;border:1px solid rgba(255,217,138,.3)}
.tag.new{background:#ff7a8a;color:#fff;border-color:transparent}
.tag.ssr{background:linear-gradient(90deg,#ffd76a,#ff9f4a);color:#3a1d33;border-color:transparent;font-weight:800}
.rn{font-size:25px;font-weight:900;letter-spacing:1px;margin-top:5px}
.rn small{font-size:11.5px;opacity:.5;font-weight:500;letter-spacing:1px;margin-left:6px}
.rs{font-size:12.5px;opacity:.7;margin-top:2px}
.rq{margin-top:12px;font-size:14px;line-height:1.6;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.06)}
.tips{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.tips div{font-size:13px;padding:8px 11px;border-radius:11px;background:rgba(255,255,255,.05)}.tips b{color:#ffd98a;margin-right:6px;font-weight:600}
.heart{margin-top:12px;padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(255,120,170,.16),rgba(255,217,138,.12));border:1px solid rgba(255,160,190,.3)}
.heart h4{font-size:15px;margin-bottom:4px}.heart p{font-size:13px;opacity:.8;line-height:1.6}
.react{display:flex;gap:8px;margin-top:10px}.react button{flex:1;height:42px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13.5px;font-weight:600}
.react button.hot{background:#ffd98a;color:#3a1d33;border:0}
.pickgrid{display:flex;gap:7px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scrollbar-width:none}
.pickgrid button{flex:0 0 58px;height:70px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:10.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;white-space:nowrap}
.pickgrid img{max-width:44px;max-height:40px}.pickgrid .pe{font-size:24px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.btn{height:46px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:#fff;padding:0 8px;white-space:nowrap}
.btn.pri{grid-column:1/-1;background:linear-gradient(135deg,#ffe2a0,#ff9f70);color:#3a1d33;border:0;box-shadow:0 8px 24px #ff9d6c44}
.btn.full{grid-column:1/-1}
.law{font-size:11.5px;opacity:.5;text-align:center;margin-top:12px;line-height:1.6}
h3{font-size:18px;margin-bottom:6px}
.sheet .postimg{width:100%;border-radius:16px;display:block;margin-top:8px}
.seg{display:flex;background:rgba(255,255,255,.07);border-radius:12px;padding:3px;margin-top:10px}
.seg button{flex:1;height:36px;border-radius:10px;font-size:14px;font-weight:600;opacity:.7}.seg button.on{background:rgba(255,217,138,.9);color:#3a1d33;opacity:1}
.li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:rgba(255,255,255,.06);margin-top:9px}
.li .lim{width:56px;height:56px;display:grid;place-items:center;flex:0 0 auto}.li .lim img{max-width:100%;max-height:100%}
.li div{flex:1;min-width:0}.li b{font-size:15.5px}.li small{display:block;font-size:11.5px;opacity:.6;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .lb{display:flex;gap:6px}.li .lb button{height:32px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.1);font-size:12.5px}
.li .lb button.ok{background:#ffd98a;color:#3a1d33;font-weight:700}
.empty{text-align:center;opacity:.6;font-size:13.5px;padding:26px 10px;line-height:1.8}
.sec{font-size:14px;font-weight:800;margin:18px 2px 8px;display:flex;justify-content:space-between;align-items:center}.sec small{font-weight:400;opacity:.5;font-size:12px}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.wall button{height:40px;border-radius:11px;font-size:12.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);opacity:.5}
.wall button.want{opacity:.9;border-color:rgba(255,217,138,.5)}
.wall button.been{opacity:1;background:linear-gradient(135deg,#ffe2a0,#ff9f70);color:#3a1d33;font-weight:800;border:0;box-shadow:0 4px 14px #ff9d6c44}
.prog{height:8px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}.prog i{display:block;height:100%;background:linear-gradient(90deg,#ffe2a0,#ff8f8f);border-radius:9px}
.dex{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dc{aspect-ratio:.82;border-radius:14px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:5px;font-size:10.5px;position:relative;overflow:hidden}
.dc img{flex:1;min-height:0;max-width:100%;object-fit:contain}
.dc.no img{filter:brightness(0) opacity(.35)}.dc.no span{opacity:.4}
.dc.SR{border-color:rgba(160,190,255,.45)}.dc.SSR{border-color:rgba(255,210,100,.75);box-shadow:inset 0 0 18px rgba(255,200,90,.18)}
.dc em{position:absolute;top:4px;left:5px;font-style:normal;font-size:9px;font-weight:900;opacity:.75}
.dc.SSR em{color:#ffd76a}.dc.SR em{color:#a9c4ff}
.dc i{position:absolute;top:3px;right:5px;font-style:normal;font-size:9.5px;opacity:.7}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stats div{border-radius:16px;padding:12px 6px;text-align:center;background:rgba(255,255,255,.06)}.stats b{display:block;font-size:24px;font-weight:900;color:#ffd98a}.stats span{font-size:11.5px;opacity:.65}
.voice{margin-top:12px;border-radius:20px;padding:16px;background:linear-gradient(135deg,rgba(255,120,170,.2),rgba(255,217,138,.12));border:1px solid rgba(255,160,190,.3);font-size:14.5px;line-height:1.75}
.voice b{color:#ffd98a}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bd{border-radius:14px;padding:10px 4px;text-align:center;background:rgba(255,255,255,.05);font-size:11px;opacity:.4;filter:grayscale(1)}
.bd b{display:block;font-size:26px;margin-bottom:3px}.bd small{display:block;font-size:9.5px;opacity:.7;margin-top:2px}
.bd.ok{opacity:1;filter:none;background:rgba(255,217,138,.12);border:1px solid rgba(255,217,138,.3)}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 140px);transform:translate(-50%,20px);opacity:0;transition:.3s;z-index:80;background:rgba(10,8,30,.9);padding:10px 16px;border-radius:99px;font-size:13.5px;border:1px solid rgba(255,255,255,.12);white-space:nowrap;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}
#intro{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(9,7,28,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .5s;padding:24px}
#intro.off{opacity:0;pointer-events:none}
#intro .big{font-size:46px;font-weight:900;letter-spacing:6px;background:linear-gradient(#fff3d2,#ffad76);-webkit-background-clip:text;background-clip:text;color:transparent}
#intro p{opacity:.8;line-height:1.85;margin-top:12px;font-size:15px}#intro p b{color:#ffd98a;font-weight:600}
#intro .stack{position:relative;width:240px;height:200px;margin-bottom:8px}
#intro .stack img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;opacity:0;animation:cyc 8s infinite}
@keyframes cyc{0%{opacity:0;transform:scale(.9)}3%,10%{opacity:1;transform:scale(1)}14%,100%{opacity:0;transform:scale(1.06)}}
#intro .btn{margin-top:24px;width:220px;height:54px;font-size:17px}
#intro .tiny{font-size:12px;opacity:.45;margin-top:14px}
@media (min-width:900px){#st{width:520px}.grid{grid-template-columns:repeat(3,1fr)}.face{flex-basis:56px;height:56px}
 .sheet{left:auto;right:4vw;bottom:50%;width:420px;border-radius:26px;border:1px solid rgba(255,255,255,.12);transform:translate(130%,50%)}.sheet.on{transform:translate(0,50%)}#vPlay~#mask{background:rgba(6,5,20,.2)}.grab{display:none}}
@media (max-height:720px){#ask{font-size:21px}#ask small{display:none}#roll{width:80px;height:80px}#label{min-height:48px}.face{flex-basis:44px;height:44px}.face img{max-width:36px;max-height:36px}}
.tile b,.tile small{text-shadow:0 1px 6px rgba(10,8,30,.9),0 0 2px rgba(10,8,30,.8)}