/* 弹窗 */
#mask { position: absolute; inset: 0; background: rgba(5,10,20,.55); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20; }
#mask.on { opacity: 1; pointer-events: auto; }
.sheet { position: relative; width: calc(350 * var(--u)); max-height: 82%; overflow: auto; padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); transform: scale(.9) translateY(20px); transition: transform .3s cubic-bezier(.2,1.4,.4,1); }
#mask.on .sheet { transform: none; }
.sheet h2 { font-size: calc(18 * var(--u)); text-align: center; margin-bottom: calc(12 * var(--u)); letter-spacing: 2px; }
.x { position: absolute; right: calc(10 * var(--u)); top: calc(8 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.1); font-size: calc(20 * var(--u)); line-height: 1; }
.li { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); margin-bottom: calc(8 * var(--u)); }
.li.sel { border-color: #4fb4ff; background: rgba(79,180,255,.14); }
.li .grow { flex: 1; min-width: 0; }
.li .t { font-size: calc(14 * var(--u)); font-weight: 700; }
.li .d { font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,.65); margin-top: 2px; }
.li canvas { width: calc(70 * var(--u)); height: calc(42 * var(--u)); flex: none; }
.sbtn { padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-weight: 800; font-size: calc(12 * var(--u)); white-space: nowrap; background: linear-gradient(180deg, #3d8bf2, #1a55c4); border: 1px solid #8cc0ff; display: inline-flex; align-items: center; gap: 4px; }
.sbtn.gold { background: linear-gradient(180deg, #ffd35a, #f08a0c); border-color: #ffe9a8; color: #fff; text-shadow: 0 1px 1px rgba(120,50,0,.6); }
.sbtn.dim { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); }
.sbtn .coin { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px calc(10 * var(--u)); margin-top: calc(5 * var(--u)); }
.mini-stats .st { display: flex; align-items: center; gap: 5px; font-size: calc(9.5 * var(--u)); color: rgba(255,255,255,.7); }
.mini-stats .st span { width: calc(36 * var(--u)); flex: none; }
.lv { display: flex; gap: 3px; margin-top: 5px; }
.lv i { width: calc(18 * var(--u)); height: calc(6 * var(--u)); border-radius: 2px; background: rgba(255,255,255,.15); }
.lv i.on { background: linear-gradient(90deg, #ffb52e, #ffe36a); }
.prog { height: calc(6 * var(--u)); border-radius: 4px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #22c36b, #5ef0a6); }
.rk { width: calc(26 * var(--u)); text-align: center; font-weight: 900; font-size: calc(14 * var(--u)); }
.coin-head { display: flex; justify-content: center; align-items: center; gap: 6px; margin: calc(-4 * var(--u)) 0 calc(10 * var(--u)); font-weight: 800; font-size: calc(14 * var(--u)); color: #ffe07a; }
.toggle { width: calc(46 * var(--u)); height: calc(26 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.2); position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: #2fb36a; } .toggle.on::after { transform: translateX(calc(20 * var(--u))); }
.help p { font-size: calc(12.5 * var(--u)); line-height: 1.7; color: rgba(255,255,255,.88); margin-bottom: calc(6 * var(--u)); }
.help b { color: #ffd23f; }

/* 结算 */
.res { text-align: center; }
.res .rd { font-size: calc(64 * var(--u)); font-weight: 900; line-height: 1; font-family: "DIN Alternate", "Bahnschrift", "Arial Black", sans-serif; background: linear-gradient(180deg, #fff, #9fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res .rd small { font-size: calc(20 * var(--u)); }
.res .nr { display: inline-block; margin: calc(6 * var(--u)) 0; padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, #ff8a00, #ffd23f); color: #4a2200; font-weight: 900; font-size: calc(12 * var(--u)); animation: pop .6s; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } }
.res .rkline { font-size: calc(12.5 * var(--u)); color: rgba(255,255,255,.8); margin: calc(4 * var(--u)) 0 calc(12 * var(--u)); }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.res-grid div { padding: calc(8 * var(--u)) 0; border-radius: calc(10 * var(--u)); background: rgba(255,255,255,.07); font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,.7); }
.res-grid b { display: block; font-size: calc(18 * var(--u)); color: #fff; margin-bottom: 2px; }
.res-btns { display: flex; gap: calc(8 * var(--u)); }
.res-btns .btn { flex: 1; height: calc(46 * var(--u)); animation: none; font-size: calc(15 * var(--u)); }

#toast { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -10px); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: 99px; background: rgba(10,18,32,.85); border: 1px solid rgba(255,255,255,.2); font-size: calc(13 * var(--u)); font-weight: 700; opacity: 0; pointer-events: none; transition: all .3s; z-index: 30; white-space: nowrap; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }