/* 记忆首页改版：按角色看（拍立得）、谁知道（胶带）、重要度（荧光笔）、被想起的次数（印章）、排序、过渡动效。
   Only #v-memory; the page itself is memory.js. Colours that change with the theme are tokens below (both dark rule sets). */
#v-memory{--mm-hl:rgba(255,206,92,.5);--mm-stamp:#a8506c}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #v-memory{--mm-hl:rgba(255,200,90,.3);--mm-stamp:#e6a6bc}}
:root[data-theme="dark"] #v-memory{--mm-hl:rgba(255,200,90,.3);--mm-stamp:#e6a6bc}

/* 拍立得：全部 + 每位角色，可以左右滑；点一张 = 只看 TA 记得的 */
#v-memory .mm-pfs{align-items:flex-start;gap:12px;padding-top:20px;padding-bottom:22px;margin-bottom:-8px}
#v-memory .mm-pfs.many{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
#v-memory .mm-pf,#v-memory .mm-pf:nth-child(n){position:relative;width:106px;margin-top:0;padding:7px 7px 10px;transform:rotate(var(--r,0deg));transition:transform .42s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
#v-memory .mm-pf:has(.mm-pf-b[aria-pressed="true"]){transform:translateY(-12px) rotate(0);box-shadow:0 18px 28px -14px rgba(80,60,100,.6)}
#v-memory .mm-pf-b{text-align:center;width:100%}
#v-memory .mm-pf-b:active{scale:.96}
#v-memory .mm-pf .mm-pic{height:84px;font-size:30px}
#v-memory .mm-pf b{margin:8px 0 0;text-align:center}
#v-memory .mm-pf small{margin:2px 0 0;text-align:center;-webkit-line-clamp:1;line-clamp:1}
#v-memory .mm-pf small+small{font-size:10.5px;opacity:.85}
#v-memory .mm-pf-tp{position:absolute;top:-16px;left:50%;width:46px;height:17px;margin-left:-23px;transform:rotate(-4deg);opacity:0;transition:opacity .2s;background:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),#f1c56b;box-shadow:0 1px 2px rgba(40,30,60,.2);z-index:1}
#v-memory .mm-pf-b[aria-pressed="true"] .mm-pf-tp{opacity:1}
#v-memory .mm-pf-b.just .mm-pf-tp{animation:mm-tape-on .42s cubic-bezier(.3,1.4,.5,1) both}
@keyframes mm-tape-on{from{opacity:0;transform:translateY(-10px) rotate(-14deg) scale(1.25)}to{opacity:1;transform:rotate(-4deg)}}
#v-memory .mm-pf-split,#v-memory .mm-pf-grid{display:grid;padding:0;background:#fff}
#v-memory .mm-pf-split{display:block}
#v-memory .mm-pf-split i{position:absolute;inset:0;display:block;font-style:normal;font-size:24px}
#v-memory .mm-pf-split i.a{clip-path:polygon(0 0,100% 0,0 100%);padding:10px 0 0 14px}
#v-memory .mm-pf-split i.b{clip-path:polygon(100% 0,100% 100%,0 100%);text-align:right;padding:46px 14px 0 0}
#v-memory .mm-pf-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;align-items:stretch;justify-items:stretch}
#v-memory .mm-pf-grid i{display:grid;place-items:center;font-style:normal;font-size:16px;color:#fff}
#v-memory .mm-pf-grid i.more{background:var(--mm-ap);color:var(--mm-ad);font-size:14px}
#v-memory .mm-pf .mm-pol-tags{position:absolute;top:-8px;right:-6px;flex-direction:column;align-items:flex-end;margin:0;z-index:2}
#v-memory .mm-pf .mm-pol-tag{box-shadow:0 2px 6px rgba(60,40,90,.18);background:var(--mm-ad);color:#fff}
.mm-pf-hint{margin:6px 8px 4px;text-align:right;font-size:11.5px;color:var(--mm-ink2)}

/* 选中角色后：范围 + 打开 TA 的本子 */
.mm-scopebar{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:8px 2px 14px}
.mm-scopebar .mm-seg{width:100%}
.mm-scopebar .mm-seg button{flex:1;font-size:12.5px;padding:6px 4px}
.mm-nb-link{align-self:flex-end;display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:2px 4px;font:inherit;font-size:12.5px;color:var(--mm-ad);cursor:pointer}
.mm-nb-link svg{width:14px;height:14px}

/* 排序 */
.mm-sortbar{display:flex;margin:8px 2px 2px}
.mm-sortbar .mm-seg{width:100%}
.mm-sortbar .mm-seg button{white-space:nowrap}
.mm-seg-sm button{font-size:12px;padding:5px 10px}
.mm-legend{margin:6px 6px 0;font-size:11.5px;line-height:1.6;color:var(--mm-ink2)}

/* 分段开关：白色滑块滑过去 */
.mm-slide{position:relative}
.mm-slide::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,3));border-radius:11px;background:var(--mm-solid);box-shadow:0 2px 6px rgba(40,30,70,.12);transform:translateX(calc(100% * var(--i,0)));transition:transform .38s cubic-bezier(.3,1.35,.5,1)}
.mm-sortbar .mm-slide button,.mm-scopebar .mm-slide button{flex:1 1 0;position:relative;z-index:1;transition:color .25s}
.mm-seg.mm-slide button.on{background:none;box-shadow:none}

/* 卡片上的标记：胶带（谁知道）、荧光笔（很重要）、印章（被想起的次数）、成员头像 */
.mm-tape2{position:absolute;top:-10px;left:20px;z-index:3;font:500 11px/18px var(--font-display);font-style:normal;padding:0 12px;color:#fff;text-shadow:0 1px 1px rgba(40,30,70,.35);letter-spacing:.05em;white-space:nowrap;transform:rotate(-2.5deg);box-shadow:0 1px 2px rgba(40,30,70,.2);border-radius:2px;pointer-events:none}
.mm-tape2.all{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 5px,transparent 5px 10px),linear-gradient(90deg,#7d6aa6,#6f5c9a)}
.mm-tape2.grp{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 5px,transparent 5px 10px),linear-gradient(90deg,#5d7399,#566d94)}
.mm-hl{background:linear-gradient(transparent 56%,var(--mm-hl) 56% 90%,transparent 90%);background-repeat:no-repeat;padding:0 3px;margin:0 -3px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mm-stamp{position:absolute;top:-12px;right:48px;z-index:3;font:600 11px/1.5 var(--font-display);letter-spacing:.04em;color:var(--mm-stamp);background:var(--mm-solid);border:1.5px solid currentColor;border-radius:7px;padding:0 8px;transform:rotate(-5deg);box-shadow:0 0 0 2px var(--mm-solid),0 0 0 3px currentColor;white-space:nowrap;pointer-events:none}
.mm-stamp.l1{font-size:10.5px;opacity:.5}.mm-stamp.l2{font-size:11.5px;opacity:.68}.mm-stamp.l3{font-size:12.5px;opacity:.85}.mm-stamp.l4{font-size:13.5px}
.mm-avs{display:inline-flex;align-items:center;flex:none}
.mm-uc .mt .mm-avs .mm-av-xs{box-shadow:0 0 0 1.5px var(--mm-solid)}
.mm-uc .mt .mm-avs .mm-av-xs+.mm-av-xs{margin-left:-6px}
.mm-avs-more{margin-left:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--mm-ap);color:var(--mm-ink2);font-size:9.5px;font-style:normal;display:grid;place-items:center}

/* 换筛选或排序：卡片依次浮现，荧光笔划过，印章盖上 */
.mm-stag .mm-ucs>.mm-uc{animation:mm-up .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 40ms)}
@keyframes mm-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mm-stag .mm-hl{animation:mm-hl .6s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--k,0) * 40ms + 260ms)}
@keyframes mm-hl{from{background-size:0% 100%}to{background-size:100% 100%}}
.mm-stag .mm-stamp{animation:mm-press .42s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--k,0) * 40ms + 220ms)}
@keyframes mm-press{from{opacity:0;transform:rotate(-12deg) scale(1.7)}}

/* 往下滚：内容在顶部按钮下面渐渐淡出 */
#v-memory .mm-scroll.mm-scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 14px,#000 44px);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 14px,#000 44px)}

@media(prefers-reduced-motion:reduce){
  #v-memory .mm-pf,#v-memory .mm-pf-tp,.mm-slide::before{transition:none}
  #v-memory .mm-pf-b.just .mm-pf-tp,.mm-stag .mm-ucs>.mm-uc,.mm-stag .mm-hl,.mm-stag .mm-stamp{animation:none}
}