/* 「明天吃什么？」样式表 —— 由交互原型迁移，与 index.html / app.js 配套 */
:root{
--bg:#f6f3ef;
--surface:#ffffff;
--surface-2:#f3efe9;
--ink:#211d19;
--ink-2:#5b534b;
--ink-3:#8d8479;
--line:#e8e1d8;
--line-2:#dbd3c8;
--brand:#d95a25;
--brand-2:#f08a4b;
--brand-soft:#fdf0e7;
--green:#2b8f60;
--green-soft:#e9f6ef;
--amber:#b8801a;
--amber-soft:#fbf2e0;
--red:#bf3f31;
--red-soft:#fdece9;
--blue:#35618f;
--blue-soft:#edf3f9;
--mono:"SFMono-Regular",Consolas,Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;padding:26px 18px 60px;
}
.shell{max-width:1120px;margin:0 auto}
a{color:var(--brand)}
/* ---------- Top bar ---------- */
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.logo{
width:44px;height:44px;border-radius:13px;flex:0 0 44px;
background:linear-gradient(145deg,#f7a05c,#d95a25);display:flex;align-items:center;justify-content:center;
font-size:23px;box-shadow:0 8px 20px -8px rgba(217,90,37,.7);
}
.topbar .tt{font-size:21px;font-weight:700;letter-spacing:-.3px;line-height:1.25}
.topbar .ts{font-size:12.5px;color:var(--ink-3)}
.topbar .spacer{flex:1}
.pill{
background:var(--surface);border:1px solid var(--line);border-radius:999px;
padding:6px 13px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;
}
.pill b{color:var(--ink)}
.pill.g b{color:var(--green)}
.pill.b b{color:var(--brand)}
/* ---------- Layout ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr 372px;gap:18px;align-items:start}
@media (max-width:1040px){.cols{grid-template-columns:1fr}}
.panel{
background:var(--surface);border:1px solid var(--line);border-radius:18px;
box-shadow:0 1px 2px rgba(33,29,25,.04),0 10px 30px -20px rgba(33,29,25,.25);
overflow:hidden;
}
.ph{
padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
background:linear-gradient(180deg,#fffdfb,#faf7f3);
}
.ph .pt{font-weight:700;font-size:14px}
.ph .ps{font-size:11.5px;color:var(--ink-3)}
.ph .spacer{flex:1}
.pb{padding:18px}
/* ---------- Mode switch ---------- */
.modes{display:flex;gap:5px;background:var(--surface-2);border-radius:11px;padding:4px;margin-bottom:18px}
.modes button{
flex:1;border:none;background:transparent;padding:9px 6px;border-radius:8px;
font-size:13px;color:var(--ink-3);cursor:pointer;font-weight:600;font-family:inherit;transition:.16s;
}
.modes button:hover{color:var(--ink-2)}
.modes button.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(33,29,25,.1)}
/* ---------- Draw button ---------- */
.drawzone{text-align:center;padding:6px 0 4px}
.drawbtn{
width:132px;height:132px;border-radius:50%;border:none;cursor:pointer;
background:linear-gradient(148deg,#f7a05c,#d95a25);color:#fff;font-size:17px;font-weight:700;
font-family:inherit;letter-spacing:.5px;box-shadow:0 14px 32px -12px rgba(217,90,37,.8);
transition:transform .14s, box-shadow .14s;position:relative;
}
.drawbtn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(217,90,37,.85)}
.drawbtn:active{transform:scale(.95)}
.drawbtn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.drawbtn small{display:block;font-size:10.5px;font-weight:500;opacity:.85;margin-top:3px;letter-spacing:0}
.drawhint{font-size:11.5px;color:var(--ink-3);margin-top:13px;line-height:1.7}
.roundinfo{
display:flex;align-items:center;justify-content:center;gap:9px;font-size:12.5px;color:var(--ink-2);
margin-bottom:14px;
}
.dots{display:flex;gap:4px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.dot.done{background:var(--green)}
.dot.now{background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* ---------- Slot ---------- */
.slot{
height:52px;display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:700;color:var(--ink-3);
border-radius:11px;background:var(--surface-2);margin:16px 0 0;overflow:hidden;
border:1px dashed var(--line-2);
}
.slot.rolling{color:var(--brand);opacity:.75}
.slot.hit{background:var(--brand-soft);border-color:#f0cdb4;color:var(--brand)}
/* ---------- Result card ---------- */
.rimg{
height:150px;border-radius:14px;display:flex;align-items:center;justify-content:center;
font-size:64px;position:relative;overflow:hidden;
}
.rimg .rbadge{
position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);border-radius:8px;
padding:3px 9px;font-size:11px;font-weight:700;color:var(--brand);
}
.rimg .rrank{
position:absolute;top:10px;right:10px;background:rgba(33,29,25,.72);color:#fff;border-radius:8px;
padding:3px 9px;font-size:11px;font-weight:600;
}
.rshop{font-size:18px;font-weight:700;margin-top:13px;letter-spacing:-.2px;cursor:pointer}
.rshop:hover{color:var(--brand)}
.rdish{font-size:14px;color:var(--ink-2);margin-top:1px}
.tag{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag.g{background:var(--green-soft);color:var(--green)}
.tag.b{background:var(--brand-soft);color:var(--brand)}
.tag.n{background:var(--surface-2);color:var(--ink-2)}
.tag.a{background:var(--amber-soft);color:var(--amber)}
.tag.r{background:var(--red-soft);color:var(--red)}
/* 度量条：现在只出现在抽签页的「幕后数据」面板里 */
.mrow{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:12.5px}
.mrow .ml{flex:0 0 72px;color:var(--ink-2)}
.mtrack{flex:1;height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden;position:relative}
.mfill{height:100%;border-radius:5px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mrow .mv{flex:0 0 74px;text-align:right;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.f-g{background:linear-gradient(90deg,#6cc39a,#2b8f60)}
.f-a{background:linear-gradient(90deg,#e5c168,#b8801a)}
.f-r{background:linear-gradient(90deg,#e58a7a,#bf3f31)}
.explain{margin-top:13px;border-top:1px dashed var(--line);padding-top:11px}
.explain summary{
font-size:12.5px;color:var(--brand);font-weight:600;cursor:pointer;list-style:none;
display:flex;align-items:center;gap:6px;
}
.explain summary::-webkit-details-marker{display:none}
.explain summary::before{content:"▸";transition:.2s;display:inline-block}
.explain[open] summary::before{transform:rotate(90deg)}
.explain .etotal{font-size:12px;color:var(--ink-3);margin:10px 0 8px}
.ebar{display:flex;align-items:center;gap:9px;font-size:12px;margin:6px 0}
.ebar .el{flex:0 0 104px;color:var(--ink-2)}
.ebar .et{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.ebar .ef{height:100%;border-radius:4px}
.ebar .ev{flex:0 0 92px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:11px}
.ewarn{
margin-top:10px;background:var(--amber-soft);border:1px solid #efdfba;color:#6d5216;
border-radius:8px;padding:8px 11px;font-size:11.5px;line-height:1.6;
}
/* ---------- Feedback buttons ---------- */
.fbrow{display:flex;gap:10px;margin-top:15px}
.fbrow button{
border-radius:11px;padding:12px 0;font-size:14px;font-family:inherit;cursor:pointer;
font-weight:600;transition:.15s;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);
}
.fbrow button:hover{background:var(--surface-2)}
.fbrow .down{flex:1}
.fbrow .up{flex:1.35;background:var(--brand);border-color:var(--brand);color:#fff}
.fbrow .up:hover{background:#c74f1e}
.fbrow button:disabled{opacity:.5;cursor:default}
.doneflag{
margin-top:13px;background:var(--green-soft);border:1px solid #c9e6d7;color:#1e6444;
border-radius:10px;padding:10px 13px;font-size:12.5px;
}
/* ---------- Pool list ---------- */
.pool{max-height:460px;overflow-y:auto}
.pitem{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px}
.pitem:last-child{border-bottom:none}
.pitem:hover{background:#fdfbf9}
.pitem.off{opacity:.4}
.pitem .pe{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 30px}
.pitem .pn{flex:1;min-width:0}
.pitem .pn b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem .pn span{font-size:11px;color:var(--ink-3)}
.pitem .px{display:flex;gap:5px}
.pitem .px button{
border:1px solid var(--line);background:#fff;border-radius:7px;width:26px;height:26px;
cursor:pointer;font-size:12px;color:var(--ink-3);font-family:inherit;line-height:1;padding:0;
}
.pitem .px button:hover{background:var(--surface-2);color:var(--ink)}
/* ---------- Add form ---------- */
.addform{display:flex;gap:7px;padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
.addform input{
border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:inherit;
background:#fff;color:var(--ink);min-width:0;
}
.addform input:focus{outline:2px solid var(--brand-2);outline-offset:-1px;border-color:var(--brand-2)}
.addform input.n1{flex:1.1}
.addform input.n2{flex:1.3}
.addform input.k{flex:0 0 72px}
.addform button{
border:none;background:var(--brand);color:#fff;border-radius:8px;padding:0 15px;
font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;flex:0 0 auto;
}
.addform button:hover{background:#c74f1e}
/* ---------- Candidate band ---------- */
.band{padding:4px 0}
.brow{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;border-bottom:1px dashed var(--line)}
.brow:last-child{border-bottom:none}
.brow.out{opacity:.42}
.brow .bi{flex:0 0 16px;color:var(--ink-3);font-size:11px;text-align:right}
.brow .bn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bt{flex:0 0 66px;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.brow .bf{height:100%;border-radius:4px}
.brow .bv{flex:0 0 34px;text-align:right;font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums}
.bandnote{font-size:11px;color:var(--ink-3);margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
/* ---------- DB table ---------- */
.dbtable{width:100%;border-collapse:collapse;font-size:11.5px;font-family:var(--mono)}
.dbtable th{background:var(--surface-2);text-align:left;padding:7px 10px;color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--line-2);white-space:nowrap;font-family:inherit}
.dbtable td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.dbtable tr:last-child td{border-bottom:none}
.dbwrap{max-height:280px;overflow:auto}
.empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.9}
/* ---------- Modal ---------- */
.mask{
position:fixed;inset:0;background:rgba(33,29,25,.45);display:none;align-items:center;justify-content:center;
padding:20px;z-index:100;backdrop-filter:blur(3px);
}
.mask.show{display:flex}
.modal{
background:#fff;border-radius:20px;width:100%;max-width:388px;padding:24px;
box-shadow:0 30px 70px -20px rgba(0,0,0,.45);animation:pop .22s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop{from{transform:scale(.92) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal h3{margin:0 0 5px;font-size:17px}
.modal .msub{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.opt{
border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;
cursor:pointer;font-family:inherit;color:var(--ink-2);transition:.14s;
}
.opt:hover{border-color:var(--brand-2);color:var(--brand)}
.opt.sel{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600}
.modal textarea{
width:100%;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;font-size:12.5px;
font-family:inherit;resize:none;height:62px;color:var(--ink);margin-top:10px;
}
.modal textarea:focus{outline:2px solid var(--brand-2);outline-offset:-1px}
.mrow2{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:13px}
.switch{position:relative;width:44px;height:25px;flex:0 0 44px}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .sl{position:absolute;inset:0;background:var(--line-2);border-radius:99px;transition:.2s;cursor:pointer}
.switch .sl::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .sl{background:var(--green)}
.switch input:checked + .sl::after{transform:translateX(19px)}
.stars{display:flex;gap:6px;margin:14px 0 4px}
.stars span{font-size:23px;cursor:pointer;color:var(--line-2);transition:.12s;line-height:1}
.stars span.on{color:#f0a93b}
.stars span:hover{transform:scale(1.12)}
.macts{display:flex;gap:9px;margin-top:19px}
.macts button{
border-radius:11px;padding:12px 0;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;
border:1px solid var(--line-2);background:#fff;color:var(--ink-2);flex:1;
}
.macts button.pri{flex:1.5;background:var(--brand);border-color:var(--brand);color:#fff}
.macts button.pri:hover{background:#c74f1e}
.subask{margin-top:12px;padding:12px;background:var(--surface-2);border-radius:11px;font-size:12.5px;display:none}
.subask.show{display:block}
.countdown{font-size:11px;color:var(--ink-3);margin-top:9px;text-align:center}
/* ---------- Toast ---------- */
.toast{
position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:rgba(33,29,25,.92);
color:#fff;padding:11px 22px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;
transition:.25s;z-index:200;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- View tabs ---------- */
.viewtabs{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px;margin-bottom:18px;box-shadow:var(--shadow-s)}
.viewtabs button{flex:1;border:none;background:transparent;padding:11px 8px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-3);cursor:pointer;font-family:inherit;transition:.16s}
.viewtabs button:hover{color:var(--ink-2);background:var(--surface-2)}
.viewtabs button.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px -5px rgba(217,90,37,.8)}
/* ---------- Pool management ---------- */
.pmtools{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pmtools label{font-size:12.5px;color:var(--ink-2)}
select.sel{border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit;background:#fff;color:var(--ink);cursor:pointer}
.pmtable{width:100%;border-collapse:collapse;font-size:12.5px}
.pmtable th{background:var(--surface-2);text-align:left;padding:9px 12px;font-size:11.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);white-space:nowrap;cursor:pointer;user-select:none}
.pmtable th:hover{color:var(--brand)}
.pmtable th.sorted{color:var(--brand);font-weight:700}
.pmtable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.pmtable tr.off td{opacity:.42}
.pmn{display:flex;align-items:center;gap:9px}
.pmn .pe{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 28px}
.pmn b{display:block;font-size:12.5px}
.pmn span{font-size:11px;color:var(--ink-3)}
.scale{display:inline-flex;gap:2px;align-items:center}
.scale i{width:8px;height:8px;border-radius:2px;background:var(--line-2);display:block}
.scale i.on{background:var(--green)}
.scale i.on.amber{background:var(--amber)}
.scale i.on.red{background:var(--red)}
.mini{font-size:11px;color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
.kcalbar{width:60px;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}
.kcalbar i{display:block;height:100%;border-radius:4px}
.rowbtns{display:flex;gap:5px}
.rowbtns button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 9px;font-size:11.5px;cursor:pointer;font-family:inherit;color:var(--ink-2)}
.rowbtns button:hover{background:var(--surface-2);color:var(--ink)}
.editor td{background:var(--brand-soft);border-bottom:2px solid var(--brand-2)}
.editor .ebox{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding:6px 2px 14px}
.editor .ef label{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:6px}
.editor .ef input[type=range]{width:100%;accent-color:var(--brand)}
.editor .ef .ev2{font-size:11.5px;color:var(--brand);font-weight:700}
.editor .eacts{display:flex;gap:8px}
.editor .eacts button{border-radius:8px;padding:8px 18px;font-size:12.5px;font-family:inherit;cursor:pointer;border:1px solid var(--line-2);background:#fff;color:var(--ink-2)}
.editor .eacts button.pri{background:var(--brand);border-color:var(--brand);color:#fff}
/* ---------- Stats ---------- */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px;margin-bottom:16px}
.stile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-s)}
.stile .sv{font-size:27px;font-weight:700;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.stile .sl{font-size:12px;color:var(--ink-3);margin-top:3px}
.stile .sd{font-size:11px;margin-top:6px;color:var(--brand);font-weight:600}
.stile.g .sv{color:var(--green)} .stile.b .sv{color:var(--brand)} .stile.a .sv{color:var(--amber)}
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line-2)}
.tlitem{position:relative;padding:10px 0;font-size:12.5px;border-bottom:1px dashed var(--line)}
.tlitem:last-child{border-bottom:none}
.tlitem::before{content:"";position:absolute;left:-19px;top:15px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--line-2)}
.tlitem.up::before{border-color:var(--green)}
.tlitem.down::before{border-color:var(--red)}
.tlitem .tt2{font-weight:600}
.tlitem .tm2{font-size:11px;color:var(--ink-3);margin-left:7px}
.pbar{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:12.5px}
.pbar .pbl{flex:0 0 92px;color:var(--ink-2)}
.pbar .pbt{flex:1;height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.pbar .pbf{height:100%;border-radius:5px}
.pbar .pbv{flex:0 0 44px;text-align:right;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ---------- misc ---------- */
.sectnote{font-size:11.5px;color:var(--ink-3);line-height:1.7;margin-top:10px}
.foot{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.foot button{
border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:7px 13px;font-size:12px;
cursor:pointer;font-family:inherit;color:var(--ink-2);
}
.foot button:hover{background:var(--surface-2)}
/* =========================================================
正式版新增：偏好设置 / 图片支持 / 启动遮罩 / 数据管理
========================================================= */
.mono{font-family:var(--mono)}
/* ---- 结果图：有真实图片时铺满，隐藏 emoji 兜底 ---- */
.rimg .remoji{font-size:64px;line-height:1}
.rimg.hasimg{background-size:cover;background-position:center}
.rimg.hasimg .remoji{display:none}
.rimg.hasimg::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.02) 42%,rgba(0,0,0,.34));
}
.rimg.hasimg .rbadge,.rimg.hasimg .rrank{z-index:2}
/* ---- 按钮样 pill ---- */
.btnlike{background:#fff;cursor:pointer;font-family:inherit}
.btnlike:hover{background:var(--surface-2);border-color:var(--brand-2)}
/* ---- 统计 / 偏好 双栏 ---- */
.statsgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
@media (max-width:1040px){.statsgrid{grid-template-columns:1fr}}
/* 食用加成图鉴是全量 84 条词条的长列表，实测能长到 2005px ——
而同一个网格里的其他面板只有 165~410px，结果是左列底下留下两千多像素的空白。
给列表自己一个高度上限 + 内部滚动（表头在 .ph 里，不在这个盒子里，所以不受影响），
两列高度就回到同一个量级。overscroll-behavior 防止滚到底后继续带动整页。 */
#stDex{max-height:460px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* ---- 偏好设置 ---- */
.pref{padding:15px 0;border-bottom:1px dashed var(--line-2)}
.pref:first-child{padding-top:0}
.pref:last-child{border-bottom:none;padding-bottom:0}
.pref > label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.pref input[type=range]{width:100%;accent-color:var(--brand);height:22px;cursor:pointer;margin:0}
.prefquick{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.prefquick button{
border:1px solid var(--line-2);background:#fff;border-radius:9px;padding:7px 12px;
font-size:12.5px;font-family:inherit;cursor:pointer;color:var(--ink-2);
}
.prefquick button:hover{border-color:var(--brand-2)}
.prefquick button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.7;margin-top:9px}
/* ---- 数据管理 ---- */
.dbstat{font-size:12.5px;color:var(--ink-2);line-height:1.8}
.dbstat .kv{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line-2);padding:6px 0}
.dbstat .kv b{font-family:var(--mono);font-weight:600;color:var(--ink);text-align:right}
.macts2{display:flex;flex-direction:column;gap:8px;margin-top:15px}
.macts2 button{
border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:10px 13px;
font-size:12.5px;font-family:inherit;cursor:pointer;color:var(--ink-2);
}
.macts2 button:hover{background:var(--surface-2)}
.macts2 button.danger{color:var(--red);border-color:var(--red-soft)}
.macts2 button.danger:hover{background:var(--red-soft)}
.macts2 button:disabled{opacity:.5;cursor:not-allowed}
/* ---- 算法说明 ---- */
.algo{font-size:12.5px;color:var(--ink-2);line-height:1.85;margin:0 0 14px;padding-left:14px;position:relative}
.algo:last-child{margin-bottom:0}
.algo::before{content:"▸";position:absolute;left:0;color:var(--brand)}
.algo b{color:var(--ink)}
.mlabel{font-size:12.5px;color:var(--ink-2);margin-top:14px}
/* ---- 启动遮罩 ---- */
.boot{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;transition:opacity .3s}
.boot.gone{opacity:0;pointer-events:none}
.bootbox{text-align:center}
.bootlogo{font-size:46px;animation:bpulse 1.1s ease-in-out infinite}
.boottxt{font-size:13px;color:var(--ink-3);margin-top:12px}
@keyframes bpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.72}}
/* ---- 小屏适配 ---- */
@media (max-width:640px){
body{padding:16px 12px 50px}
.topbar .tt{font-size:18px}
.topbar .ts{font-size:11.5px}
.viewtabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
/* 关键一条：桌面端的 .viewtabs button{flex:1} 是 flex-basis:0 + 可收缩，
窄屏下会把按钮压到内容宽度以下，文字于是折成两行 —— 实测出现
「📊 数据统/计」「⚙️ 偏好设/置」这种**断词折行**，既难看又难读；
而且它一路骗过了「没溢出」「没被裁」两条断言（折行不是溢出，是重排）。
改成按内容宽度排布、允许横向滚动 —— 这才是上面那句 overflow-x:auto 的本意。 */
.viewtabs button{flex:0 0 auto;white-space:nowrap}
.pmtable{font-size:11.5px}
}
/* ---- 更窄的屏（≤480）：把标签压回一行显示得下 ----
实测四个标签按内容宽度排是 423px，而 390px 的机身上可用宽度只有 366px，
第 4 个「偏好设置」会被切掉一截、要横滑才看得到 —— 主导航不该这样。
收紧内边距与字号（不动图标，图标是识别锚点）后 379px ≤ 390px，四个都能露出。
上面那个 range（481~640）宽度足够，不需要收紧，所以阈值单独设。 */
@media (max-width:480px){
.viewtabs{gap:4px;padding:4px}
.viewtabs button{padding:10px 7px;font-size:12.5px}
}
/* ---- 时间线副文案（原为内联样式，正式版独立成类） ---- */
.tlitem .tlsub{font-size:11.5px;color:var(--ink-3);margin-top:3px}
/* =========================================================
第三轮新增：批量导入弹层 / 可拖拽权重 / 缺餐品名降级
========================================================= */
/* ---- 宽弹层 ---- */
.modal.wide{max-width:560px;width:100%}
/* ---- 批量导入 ---- */
.imparea{
width:100%;box-sizing:border-box;height:152px;margin-top:14px;
border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;
font-family:var(--mono);font-size:12.5px;line-height:1.7;
background:#fff;color:var(--ink);resize:vertical;
}
.imparea:focus{outline:2px solid var(--brand-2);outline-offset:-1px;border-color:var(--brand-2)}
.impacts{display:flex;gap:9px;margin-top:13px}
.impacts button{
border-radius:11px;padding:10px 0;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
border:1px solid var(--line-2);background:#fff;color:var(--ink-2);flex:1;
}
.impacts button.pri{flex:1.6;background:var(--brand);border-color:var(--brand);color:#fff}
.impacts button.pri:hover:not(:disabled){background:#c74f1e}
.impacts button:disabled{opacity:.45;cursor:not-allowed}
.imppreview{max-height:272px;overflow-y:auto;margin-top:14px}
.improw{
display:flex;align-items:center;gap:10px;padding:9px 11px;
border-bottom:1px solid var(--line);font-size:12.5px;
}
.improw:last-child{border-bottom:none}
.improw input[type=checkbox]{flex:0 0 auto;width:15px;height:15px;accent-color:var(--brand);cursor:pointer;margin:0}
.improw .iname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.improw .iname b{font-weight:600}
.improw .iname span{color:var(--ink-3);font-size:11.5px;margin-left:6px}
.improw .ikcal{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);flex:0 0 auto}
.improw.dup{opacity:.5}
.impsummary{margin-top:12px;font-size:11.5px;color:var(--ink-3);line-height:1.85}
.impempty{padding:22px 0;text-align:center;color:var(--ink-3);font-size:12.5px}
/* ---- 可拖拽权重 ---- */
.wgrid{display:block}
.wrow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.wrow .wlabel{flex:0 0 62px;font-size:12.5px;color:var(--ink-2)}
.wrow input[type=range]{flex:1;height:20px;accent-color:var(--brand);cursor:pointer;margin:0;min-width:0}
.wrow .wv{flex:0 0 38px;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.wsum{
margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-2);
font-size:11.5px;color:var(--ink-3);
}
.wsum b{font-family:var(--mono);color:var(--ink)}
.pref > label .sub{font-size:11.5px;font-weight:400;color:var(--ink-3);margin-left:6px}
/* ---- 缺餐品名降级展示 ---- */
.missing{color:var(--amber);font-weight:600}
/* ---- 结果卡：复制整句 / 导出图片 ---- */
.copybtn{
display:inline-block;margin:9px 0 2px;border:1px solid var(--line-2);background:#fff;
border-radius:9px;padding:5px 12px;font-size:12px;font-family:inherit;cursor:pointer;color:var(--ink-2);
}
.copybtn:hover{border-color:var(--brand-2);color:var(--brand)}
.copybtn:active{background:var(--surface-2)}
.copybtn:disabled{opacity:.55;cursor:default}
/* 分享按钮一排：复制文字 / 导出图片。间距交给容器，按钮自身不带垂直 margin */
.sharerow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:13px}
.sharerow .copybtn{margin:0}
.sharerow .copybtn.busy{opacity:.6;cursor:progress}
/* ---- 候选池编辑器：店名 / 餐品名 / 图片 / emoji ---- */
.ef2{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ef2 .ef2row{display:flex;flex-direction:column;gap:5px;min-width:0}
.ef2 .ef2row.full{grid-column:1/-1}
/* =========================================================
第四轮新增：游戏化抽卡（多巴胺配色 + 卡牌 + 稀有度特效）
---------------------------------------------------------
设计意图：抽签是这个产品唯一的"仪式感时刻"，所以把卡池做成
一块深色霓虹舞台嵌在浅色工具界面里 —— 对比本身就是强调。
其余视图维持轻量工具风，不做无谓的风格统一。
========================================================= */
:root{
--dp-pink:#ff2e88;
--dp-magenta:#ff007a;
--dp-purple:#7b2ff7;
--dp-violet:#b14aed;
--dp-cyan:#00e0ff;
--dp-aqua:#22e6b8;
--dp-lime:#b6ff3c;
--dp-yellow:#ffd60a;
--dp-orange:#ff7a00;
--dp-deep:#150a2e;
--dp-deep2:#0a0418;
}
/* ---------- 卡池舞台 ---------- */
.stage{
position:relative;border-radius:20px;padding:20px 18px;overflow:hidden;isolation:isolate;
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:346px;
background:radial-gradient(120% 100% at 50% -10%,#2e1159 0%,#190a37 44%,var(--dp-deep2) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 22px 48px -28px rgba(90,20,150,.95);
transition:box-shadow .3s;
}
.stg-bg,.stg-grid,.stg-noise,.stg-rays,.stg-parts,.stg-flash{position:absolute;inset:0;pointer-events:none}
.stg-grid{
z-index:0;opacity:.15;
background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
background-size:26px 26px;
-webkit-mask-image:radial-gradient(85% 62% at 50% 38%,#000 0%,transparent 76%);
mask-image:radial-gradient(85% 62% at 50% 38%,#000 0%,transparent 76%);
}
.stg-noise{
z-index:1;opacity:.05;
background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
background-size:4px 4px;
}
.stg-orb{position:absolute;border-radius:50%;filter:blur(44px);z-index:0;pointer-events:none;transition:opacity .4s}
.stg-orb.o1{width:200px;height:200px;left:-56px;top:-76px;background:var(--dp-pink);opacity:.5}
.stg-orb.o2{width:180px;height:180px;right:-52px;top:-46px;background:var(--dp-purple);opacity:.52}
.stg-orb.o3{width:220px;height:220px;left:50%;margin-left:-110px;bottom:-160px;background:var(--dp-cyan);opacity:.32}
/* ---------- 稀有度光柱（只有高阶才转） ---------- */
.stg-rays{
z-index:1;inset:-40%;opacity:0;
background:conic-gradient(from 0deg,
transparent 0deg,rgba(255,214,10,.34) 7deg,transparent 15deg,
transparent 28deg,rgba(255,46,136,.3) 36deg,transparent 44deg,
transparent 58deg,rgba(0,224,255,.28) 66deg,transparent 74deg,
transparent 176deg,rgba(255,214,10,.3) 184deg,transparent 192deg,
transparent 266deg,rgba(177,74,237,.32) 274deg,transparent 282deg);
transition:opacity .45s;
}
.stage.reveal-sss .stg-rays,.stage.reveal-s .stg-rays{opacity:.9;animation:raysSpin 6s linear infinite}
@keyframes raysSpin{to{transform:rotate(360deg)}}
/* ---------- 闪光 ---------- */
.stg-flash{
z-index:7;opacity:0;
background:radial-gradient(58% 48% at 50% 42%,#fff 0%,rgba(255,255,255,.72) 38%,transparent 70%);
}
.stage.burst .stg-flash{animation:flashOut .6s ease-out}
@keyframes flashOut{0%{opacity:0;transform:scale(.55)}20%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.5)}}
/* ---------- 卡背 ---------- */
.cardwrap{position:relative;z-index:3;perspective:1200px;transition:opacity .32s,transform .32s}
/* 抽完后卡背整块让位给结果卡（而不是淡出留位），否则结果卡会被顶到很下面 */
.stage.revealed .cardwrap{display:none}
.gcard{
width:168px;height:238px;border-radius:18px;position:relative;
transform-style:preserve-3d;animation:cardFloat 3.6s ease-in-out infinite;
}
@keyframes cardFloat{
0%,100%{transform:translateY(0) rotateZ(-.7deg)}
50%{transform:translateY(-9px) rotateZ(.7deg)}
}
.gback{
position:absolute;inset:0;border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
background:
radial-gradient(88% 66% at 50% 4%,rgba(255,214,10,.26),transparent 62%),
linear-gradient(158deg,#5e21b8,#2b0b54 56%,#170533);
border:2px solid rgba(255,214,10,.58);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 44px -18px rgba(255,46,136,.9);
}
.gback::after{
content:"";position:absolute;inset:0;
background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.42) 47%,transparent 60%);
transform:translateX(-130%);
animation:shine 3.4s ease-in-out infinite;
}
.gb-ring{position:absolute;width:114px;height:114px;border-radius:50%;border:1.5px dashed rgba(255,214,10,.55);animation:spin 9s linear infinite}
.gb-ring.r2{width:144px;height:144px;border-style:solid;border-color:rgba(0,224,255,.3);animation:spin 15s linear infinite reverse}
.gb-logo{position:relative;font-size:40px;line-height:1;filter:drop-shadow(0 4px 10px rgba(255,46,136,.8))}
.gb-txt{position:relative;font-size:13px;font-weight:800;letter-spacing:2px;color:#ffe89a;text-shadow:0 1px 6px rgba(255,122,0,.7)}
.gb-tip{position:relative;font-size:10.5px;color:rgba(255,255,255,.55)}
/* ---------- 蓄力 / 爆发 ---------- */
.stage.charging{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 62px -22px rgba(255,46,136,.95);animation:stagePulse .46s ease-in-out infinite}
@keyframes stagePulse{
0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 48px -28px rgba(90,20,150,.95)}
50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 64px -18px rgba(255,46,136,.95)}
}
.stage.charging .gcard{animation:cardCharge .42s ease-in-out infinite}
@keyframes cardCharge{
0%,100%{transform:translateX(0) scale(1) rotate(0)}
18%{transform:translateX(-5px) rotate(-2deg) scale(1.02)}
38%{transform:translateX(5px) rotate(2deg) scale(1.03)}
58%{transform:translateX(-4px) rotate(-1.4deg) scale(1.05)}
78%{transform:translateX(4px) rotate(1.4deg) scale(1.07)}
}
.stage.charging .stg-orb{opacity:.9}
/* ---------- 震屏 ---------- */
body.shake-1{animation:shkA .32s ease-out}
body.shake-2{animation:shkB .48s ease-out}
body.shake-3{animation:shkC .76s ease-out}
@keyframes shkA{0%,100%{transform:translate(0)}35%{transform:translate(-3px,1px)}70%{transform:translate(3px,-1px)}}
@keyframes shkB{0%,100%{transform:translate(0)}
22%{transform:translate(-6px,2px)}48%{transform:translate(6px,-2px)}74%{transform:translate(-3px,1px)}}
@keyframes shkC{0%,100%{transform:translate(0)}
11%{transform:translate(-9px,3px) rotate(-.35deg)}
27%{transform:translate(9px,-3px) rotate(.35deg)}
44%{transform:translate(-7px,2px) rotate(-.3deg)}
62%{transform:translate(7px,-2px) rotate(.3deg)}
80%{transform:translate(-3px,1px) rotate(-.1deg)}}
/* ---------- 粒子 ---------- */
.stg-parts{z-index:6;overflow:hidden}
.pt{
position:absolute;left:50%;top:40%;opacity:0;
animation:ptFly var(--dur,1s) cubic-bezier(.14,.72,.32,1) forwards;
will-change:transform,opacity;
}
@keyframes ptFly{
0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
12%{opacity:1}
72%{opacity:1}
100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--sc,1)) rotate(var(--rot,0deg))}
}
/* ---------- 卡池状态条（原来的 .slot，深色皮肤） ---------- */
.stage .slot{
position:relative;z-index:3;width:100%;margin:16px 0 0;height:44px;
background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.24);
color:rgba(255,255,255,.66);border-radius:11px;font-size:14px;
}
.stage .slot.rolling{color:var(--dp-yellow);opacity:1;background:rgba(255,214,10,.1);border-color:rgba(255,214,10,.4)}
.stage .slot.hit{background:rgba(255,214,10,.15);border-color:rgba(255,214,10,.55);border-style:solid;color:#fff}
/* ---------- 稀有色变量（由 stage 上的 data-tier 驱动，卡牌继承） ---------- */
.stage[data-tier="SSS"]{--tc1:#ffd60a;--tc2:#ff2e88;--tc-glow:rgba(255,46,136,.9);--tc-ink:#8a1b00}
.stage[data-tier="S"] {--tc1:#b14aed;--tc2:#ffd60a;--tc-glow:rgba(177,74,237,.85);--tc-ink:#4b1470}
.stage[data-tier="A"] {--tc1:#00b8ff;--tc2:#7b2ff7;--tc-glow:rgba(0,184,255,.8);--tc-ink:#0b3a63}
.stage[data-tier="B"] {--tc1:#22e6b8;--tc2:#2b8f60;--tc-glow:rgba(34,230,184,.7);--tc-ink:#0d4b36}
.stage[data-tier="C"] {--tc1:#a89c8e;--tc2:#7a7268;--tc-glow:rgba(120,110,100,.55);--tc-ink:#4a443d}
/* ---------- 结果卡 = 游戏卡牌 ---------- */
.result{
position:relative;z-index:4;width:100%;margin-top:14px;padding:14px;
border-radius:18px;overflow:hidden;
background:linear-gradient(168deg,#ffffff,#fbf8ff 62%,#f6f2ff);
border:2px solid var(--tc1,#a89c8e);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 46px -22px var(--tc-glow,rgba(0,0,0,.45)), 0 0 26px -10px var(--tc-glow,rgba(0,0,0,.3));
animation:cardIn .52s cubic-bezier(.18,1.25,.36,1);
}
@keyframes cardIn{
0%{opacity:0;transform:translateY(20px) scale(.9) rotateX(12deg)}
100%{opacity:1;transform:none}
}
.stage[data-tier="SSS"] .result{border-width:2.5px}
.stage[data-tier="SSS"] .result,.stage[data-tier="S"] .result{animation:cardIn .52s cubic-bezier(.18,1.25,.36,1),holyGlow 2.4s ease-in-out infinite .5s}
@keyframes holyGlow{
0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 22px 46px -22px var(--tc-glow),0 0 24px -12px var(--tc-glow)}
50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 26px 56px -20px var(--tc-glow),0 0 44px -8px var(--tc-glow)}
}
/* ---------- 等级头 ---------- */
.rhead{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.gtier{
display:inline-block;font:800 19px/1 var(--mono);letter-spacing:-.6px;
padding:7px 12px;border-radius:11px;color:#fff;
background:linear-gradient(140deg,var(--tc2,#7a7268),var(--tc1,#a89c8e));
box-shadow:0 6px 16px -7px var(--tc-glow,rgba(0,0,0,.4)),inset 0 0 0 1.5px rgba(255,255,255,.6);
text-shadow:0 1px 3px rgba(0,0,0,.28);
}
.stage[data-tier="SSS"] .gtier{animation:tierPulse 1.5s ease-in-out infinite}
@keyframes tierPulse{
0%,100%{transform:scale(1);box-shadow:0 6px 16px -7px var(--tc-glow),inset 0 0 0 1.5px rgba(255,255,255,.6)}
50%{transform:scale(1.09);box-shadow:0 8px 28px -4px var(--tc-glow),0 0 22px var(--tc-glow),inset 0 0 0 1.5px rgba(255,255,255,.9)}
}
.gtiername{
font-size:13.5px;font-weight:800;letter-spacing:.5px;
color:var(--tc2,#7a7268);
}
.rheadtip{margin-left:auto;font-size:10.5px;color:var(--ink-3)}
/* ---------- 卡面 ---------- */
.rframe{position:relative}
.gshine{
position:absolute;left:0;right:0;top:0;height:150px;z-index:3;pointer-events:none;border-radius:12px;
background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.9) 46%,rgba(255,255,255,.35) 53%,transparent 66%);
transform:translateX(-125%);
}
.stage.reveal .gshine{animation:shine 1.15s ease-out .12s}
.stage[data-tier="SSS"] .gshine{animation:shine 2.8s ease-in-out infinite}
@keyframes shine{to{transform:translateX(125%)}}
.rimg{
position:relative;height:158px;border-radius:13px;overflow:hidden;display:flex;
align-items:center;justify-content:center;font-size:64px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.rimg .rbadge{
position:absolute;top:10px;left:10px;z-index:2;
background:rgba(255,255,255,.94);border-radius:8px;padding:3px 9px;
font-size:11px;font-weight:700;color:var(--tc-ink,#4a443d);
}
.rimg .rrank{
position:absolute;top:auto;bottom:10px;right:10px;z-index:2;
background:rgba(20,10,35,.78);color:#fff;border-radius:8px;padding:3px 9px;
font-size:11px;font-weight:600;backdrop-filter:blur(2px);
}
.rbody{padding:2px 1px 0}
.rshop{font-size:19px;font-weight:800;margin-top:11px;letter-spacing:-.3px;cursor:pointer;color:var(--ink)}
.rshop:hover{color:var(--tc2,#7a7268)}
.rdish{font-size:14px;color:var(--ink-2);margin-top:2px}
/* 得分 */
.gscore{margin-top:10px;display:flex;align-items:baseline;gap:4px}
.gscore #gScore{
font:800 26px/1 var(--mono);letter-spacing:-1.4px;
background:linear-gradient(100deg,var(--tc2,#7a7268),var(--tc1,#a89c8e));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gscore em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.gbar{margin-top:8px}
.gbar i{
display:block;height:6px;border-radius:3px;width:0;
background:linear-gradient(90deg,var(--tc2,#7a7268),var(--tc1,#a89c8e));
box-shadow:0 0 12px -3px var(--tc-glow,rgba(0,0,0,.4));
transition:width .9s cubic-bezier(.2,.9,.25,1);
}
.gbar span{display:block;font-size:11px;color:var(--ink-3);margin-top:6px}
/* 玻璃卡片内的分区间距微调。
注意：原来这里有一条 `.result .copybtn{margin-top:13px}`，
现在按钮被 .sharerow 包住，间距归容器管；这条若不删会因排在后面而覆盖掉 .sharerow .copybtn{margin:0}，
导致按钮自己又长出一段顶部外边距。 */
.sharerow + .fbrow{margin-top:10px}
/* ---------- 抽卡按钮（游戏化） ---------- */
.drawzone{text-align:center;padding:20px 0 2px}
.drawbtn{
width:126px;height:126px;border-radius:50%;border:none;cursor:pointer;position:relative;
font-size:16px;font-weight:800;font-family:inherit;letter-spacing:.5px;color:#fff;
background:
radial-gradient(circle at 50% 46%,#3d1279 0 57%,#250950 57% 61.5%,transparent 62%),
conic-gradient(from 212deg,#ff2e88,#ffd60a,#b6ff3c,#00e0ff,#b14aed,#ff2e88);
box-shadow:0 14px 34px -12px rgba(255,46,136,.92),inset 0 0 0 1px rgba(255,255,255,.14);
transition:transform .16s,box-shadow .16s;
}
.drawbtn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 42px -12px rgba(255,46,136,.98),inset 0 0 0 1px rgba(255,255,255,.2)}
.drawbtn:active{transform:scale(.94)}
.drawbtn::before{
content:"";position:absolute;inset:-9px;border-radius:50%;
border:2px dashed rgba(255,214,10,.7);animation:spin 7s linear infinite;pointer-events:none;
}
.drawbtn::after{
content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
animation:ripple 2.6s ease-out infinite;
}
@keyframes ripple{
0%{box-shadow:0 0 0 0 rgba(255,46,136,.5)}
70%{box-shadow:0 0 0 24px rgba(255,46,136,0)}
100%{box-shadow:0 0 0 24px rgba(255,46,136,0)}
}
.drawbtn small{display:block;font-size:10.5px;font-weight:600;opacity:.9;margin-top:3px;letter-spacing:0}
.drawbtn:disabled{background:linear-gradient(160deg,#4a4450,#302b36);cursor:not-allowed;transform:none;box-shadow:none;opacity:.85}
.drawbtn:disabled::before,.drawbtn:disabled::after{display:none}
/* ---------- 每日配额 ---------- */
.quotabar{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--ink-2)}
.quotabar .qlabel{font-size:11.5px;color:var(--ink-3)}
.qdots{display:flex;gap:5px}
.qdot{
width:12px;height:12px;border-radius:50%;background:#e3ddd4;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:.3s;
}
.qdot.on{background:linear-gradient(140deg,#ff2e88,#b14aed);box-shadow:0 0 9px -1px rgba(255,46,136,.9),inset 0 0 0 1px rgba(255,255,255,.35)}
.qdot.used{background:#cfc7bc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.quotabar .qtext{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.quotabar.done .qtext{color:var(--red);font-weight:700}
.pill.q b{color:var(--dp-magenta)}
.pill.q.done{background:var(--red-soft);border-color:#f0cfc9}
.pill.q.done b{color:var(--red)}
/* ---------- 候选池 / 统计里的等级徽章 ---------- */
.tierchip{
display:inline-flex;align-items:center;justify-content:center;
font:800 11.5px/1 var(--mono);letter-spacing:-.2px;
padding:4px 8px;border-radius:8px;color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
min-width:30px;
}
.tierchip[data-t="SSS"]{background:linear-gradient(135deg,#ff2e88,#ffd60a)}
.tierchip[data-t="S"] {background:linear-gradient(135deg,#b14aed,#ffd60a)}
.tierchip[data-t="A"] {background:linear-gradient(135deg,#00b8ff,#7b2ff7)}
.tierchip[data-t="B"] {background:linear-gradient(135deg,#22e6b8,#2b8f60)}
.tierchip[data-t="C"] {background:linear-gradient(135deg,#b0a496,#7a7268)}
.tierscore{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* 等级分布条 */
.tierbar{display:flex;height:28px;border-radius:9px;overflow:hidden;margin-top:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.tierbar i{
display:flex;align-items:center;justify-content:center;font-style:normal;
font-size:11px;font-weight:700;color:#fff;min-width:0;overflow:hidden;white-space:nowrap;
}
.tierlegend{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--ink-3)}
.tierlegend span{display:inline-flex;align-items:center;gap:5px}
.tierlegend i{width:10px;height:10px;border-radius:3px;display:inline-block}
/* ---------- 候选带里的等级 ---------- */
.brow .btier{flex:0 0 auto}
/* ---------- 减动效 ---------- */
@media (prefers-reduced-motion: reduce){
.stage,.stage *,.result,.drawbtn,.gcard,.gb-ring,.drawbtn::before,.drawbtn::after,body{
animation:none !important;transition:none !important;
}
.stage.reveal .gshine,.stage[data-tier="SSS"] .gshine{transform:translateX(125%);opacity:0}
}
/* =========================================================
第五轮：玻璃拟态游戏卡 + 食用加成词条 + Three.js 场景层
---------------------------------------------------------
设计意图：把卡片从「白底营养标签」改成「深色舞台上一块玻璃」。
舞台保持高饱和霓虹（多巴胺），卡片用真实折射（WebGL）加
backdrop-filter 做玻璃，文字一律浅色 —— 参数全部退到卡外，
卡面上只剩游戏该有的东西：稀有度、能量、食用加成词条。
========================================================= */
/* ---------- Three.js 画布层 ---------- */
.stg-canvas{
position:absolute;inset:0;width:100%;height:100%;z-index:2;
display:block;pointer-events:none;
}
/* 没有 WebGL（jsdom / 老浏览器 / 驱动崩了）→ 整层不占位、不绘制，页面照常可用 */
.stage:not(.has-gl) .stg-canvas{display:none}
/* 3D 场景接管后关掉 CSS 版光柱与噪点，否则两层叠起来会脏 */
.stage.has-gl .stg-rays{opacity:0!important;animation:none!important}
.stage.has-gl .stg-noise{display:none}
.stage.has-gl .stg-grid{opacity:.07}
.stage.has-gl .stg-orb{opacity:.26}
/* ---------- 结果卡：玻璃拟态 ---------- */
.result{
position:relative;z-index:4;width:100%;margin-top:14px;padding:16px;
border-radius:20px;overflow:hidden;
background:
radial-gradient(132% 92% at 14% -8%,rgba(255,255,255,.30),transparent 56%),
linear-gradient(158deg,rgba(255,255,255,.19),rgba(255,255,255,.055) 48%,rgba(255,255,255,.13));
-webkit-backdrop-filter:blur(22px) saturate(185%);
backdrop-filter:blur(22px) saturate(185%);
border:1px solid rgba(255,255,255,.36);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(255,255,255,.10),
0 28px 54px -28px rgba(0,0,0,.8),
0 0 36px -14px var(--tc-glow,rgba(255,255,255,.3));
animation:cardIn .52s cubic-bezier(.18,1.25,.36,1);
}
/* 顶部一道稀有度色切边 —— 玻璃厚度感靠它 */
.result::before{
content:"";position:absolute;left:9%;right:9%;top:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--tc1,#a89c8e),var(--tc2,#7a7268),transparent);
opacity:.9;
}
.stage[data-tier="SSS"] .result{border-width:2px}
.stage[data-tier="SSS"] .result,.stage[data-tier="S"] .result{
animation:cardIn .52s cubic-bezier(.18,1.25,.36,1),holyGlow 2.4s ease-in-out infinite .5s;
}
/* 跟随指针的高光斑：玻璃"接光"的那一下 */
.result .glare{
position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(250px 205px at var(--gx,26%) var(--gy,4%),
rgba(255,255,255,.34),rgba(255,255,255,0) 62%);
mix-blend-mode:screen;
}
/* ---------- 卡面文字：玻璃上是浅色 ---------- */
.result .rshop{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.result .rshop:hover{color:var(--tc1,#fff)}
.result .rdish{color:rgba(255,255,255,.75)}
.result .rheadtip{color:rgba(255,255,255,.52)}
.result .gtiername{color:#fff;text-shadow:0 1px 12px var(--tc-glow)}
.result .gscore em{color:rgba(255,255,255,.52)}
.result .gbar span{color:rgba(255,255,255,.58)}
.result .gbar{background:transparent}
/* ---------- 稀有度星标 ---------- */
.rstars{display:inline-flex;gap:0;font-size:11px;letter-spacing:-.5px;line-height:1}
.rstars i{font-style:normal;color:var(--tc1,#a89c8e);text-shadow:0 0 9px var(--tc-glow);}
.rstars i.off{color:rgba(255,255,255,.17);text-shadow:none}
/* ---------- 食用加成词条 ---------- */
.buffs{margin-top:15px}
.buffhead{
display:flex;align-items:center;gap:8px;margin-bottom:9px;
font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
}
.buffhead span{font-weight:800;color:rgba(255,255,255,.92)}
.buffhead em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:0;
color:rgba(255,255,255,.45);text-transform:none}
.bufflist{display:flex;flex-direction:column;gap:6px}
.buff{
display:grid;grid-template-columns:24px 1fr auto;align-items:center;
grid-template-areas:"i n v" ". d d";gap:2px 9px;
padding:9px 11px;border-radius:12px;
background:linear-gradient(122deg,rgba(255,255,255,.17),rgba(255,255,255,.055));
border:1px solid rgba(255,255,255,.20);
box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
animation:buffIn .44s cubic-bezier(.2,1.25,.4,1) backwards;
}
@keyframes buffIn{
0%{opacity:0;transform:translateX(-14px) scale(.94)}
100%{opacity:1;transform:none}
}
.buff .bi{grid-area:i;font-size:16px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.buff .bn{grid-area:n;font-size:12.5px;font-weight:700;color:#fff}
.buff .bv{
grid-area:v;font-family:var(--mono);font-size:12px;font-weight:800;color:#fff;
padding:2px 8px;border-radius:7px;white-space:nowrap;
background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.24);
}
.buff .bv:empty{display:none}
.buff .bd{grid-area:d;font-size:10.5px;color:rgba(255,255,255,.55);line-height:1.5}
/* 词条稀有度分层：4 级描金、5 级描彩，跟前缀一起把"这一条不一般"讲清楚 */
.buff[data-r="3"]{border-color:rgba(0,184,255,.42)}
.buff[data-r="4"]{
border-color:rgba(255,214,10,.52);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 20px -9px rgba(255,214,10,.95);
}
.buff[data-r="5"]{
border-color:rgba(255,46,136,.62);
background:linear-gradient(122deg,rgba(255,214,10,.26),rgba(255,46,136,.22));
box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 24px -7px rgba(255,46,136,.95);
animation:buffIn .44s cubic-bezier(.2,1.25,.4,1) backwards,buffShine 2.6s ease-in-out infinite;
}
@keyframes buffShine{
0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 24px -7px rgba(255,46,136,.95)}
50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 30px -4px rgba(255,214,10,.95)}
}
/* 负面词条：偏灰红，一眼看出"这条不是好事" */
.buff.neg{
background:linear-gradient(122deg,rgba(255,120,110,.20),rgba(255,255,255,.05));
border-color:rgba(255,140,130,.38);
}
.buff.neg .bv{background:rgba(255,120,110,.24);border-color:rgba(255,150,140,.42)}
.buff.neg .bn{color:#ffd9d4}
.bufflist .buff:nth-child(1){animation-delay:.04s}
.bufflist .buff:nth-child(2){animation-delay:.12s}
.bufflist .buff:nth-child(3){animation-delay:.20s}
.bufflist .buff:nth-child(4){animation-delay:.28s}
.bufflist .buff:nth-child(5){animation-delay:.36s}
/* ---------- 卡片内的按钮：同样做成玻璃 ---------- */
.result .copybtn{
width:100%;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.27);
color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.result .copybtn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.42);color:#fff}
.result .copybtn:active{background:rgba(255,255,255,.1)}
.result .fbrow button{
background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.27);
color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.result .fbrow button:hover{background:rgba(255,255,255,.22)}
.result .fbrow .up{
background:linear-gradient(140deg,var(--tc2,#7a7268),var(--tc1,#a89c8e));
border-color:rgba(255,255,255,.42);color:#fff;
box-shadow:0 10px 24px -11px var(--tc-glow),inset 0 1px 0 rgba(255,255,255,.45);
}
.result .fbrow .up:hover{filter:brightness(1.1)}
.result .doneflag,.result .countdown{color:rgba(255,255,255,.62)}
.result .doneflag{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
/* ---------- 幕后数据（卡片上被隐藏的参数） ---------- */
.explain.outside{
margin-top:16px;padding:0;overflow:hidden;
border:1px dashed var(--line-2);border-radius:13px;background:var(--surface);
}
.explain.outside summary{
margin:0;padding:11px 13px;border-top:none;
font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer;
background:linear-gradient(180deg,#fbfaf8,#f5f3f0);
}
.explain.outside[open] summary{border-bottom:1px dashed var(--line-2)}
.explain.outside .etotal{margin:12px 13px 10px}
.explain.outside .hidewrap{margin:0 13px 11px}
.explain.outside .ewarn{margin:0 13px 12px}
.explain.outside > div:last-child{margin-bottom:12px}
.hpsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px}
.hp{
display:flex;align-items:baseline;justify-content:space-between;gap:6px;
background:var(--surface-2);border-radius:9px;padding:7px 10px;font-size:11.5px;
}
.hp span{color:var(--ink-3)}
.hp b{font-family:var(--mono);font-size:12px;color:var(--ink)}
.hp b.warn{color:var(--red)}
.hntitle{font-size:11px;color:var(--ink-3);margin:0 0 8px}
.hntitle b{color:var(--ink-2)}
/* ---------- 食用加成图鉴（统计页） ---------- */
.dexgroup{margin-bottom:14px}
.dexgroup h4{
margin:0 0 7px;font-size:11.5px;font-weight:700;color:var(--ink-2);
display:flex;align-items:center;gap:7px;
}
.dexgroup h4 i{width:11px;height:11px;border-radius:3px;display:inline-block;font-style:normal}
.dexgroup h4 em{font-style:normal;font-weight:500;font-size:10.5px;color:var(--ink-3)}
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.dexitem{
display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:9px;
background:var(--surface-2);border:1px solid transparent;font-size:11.5px;
}
.dexitem .di{font-size:14px;line-height:1}
.dexitem .dn{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dexitem .dv{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.dexitem.on{background:#fff;border-color:#cfe6d9;box-shadow:0 1px 3px rgba(43,143,96,.13)}
.dexitem.on .dn{color:var(--ink);font-weight:600}
.dexitem.neg.on{border-color:#f0d3cd;box-shadow:0 1px 3px rgba(191,63,49,.13)}
.dexitem .dlock{font-size:9.5px;color:var(--ink-3);opacity:.55}
/* ---------- 减动效 ---------- */
@media (prefers-reduced-motion: reduce){
.buff,.bufflist .buff{animation:none!important}
.result .glare{display:none}
}
/* 抽签页左侧候选池列表里的词条摘要 */
.pbrief{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pbrief .tag{font-size:9.5px;padding:1px 6px}