*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(#bfe6ff,#fff7e0)}
#banner{position:fixed;top:10px;left:50%;transform:translateX(-50%);width:min(720px,80vw);height:40px;overflow:hidden;background:#fff8d6;border:4px solid #5a3e1b;border-radius:20px;z-index:20;box-shadow:0 4px 0 #5a3e1b}
#banner-track{display:inline-flex;white-space:nowrap;line-height:32px;animation:marquee 80s linear infinite}
#banner-track span{padding:0 28px;color:#5a3e1b;font-weight:bold}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#toolbar{position:fixed;top:62px;right:14px;display:flex;gap:8px;z-index:20}
button{font:inherit;cursor:pointer;background:#fff;border:3px solid #5a3e1b;border-radius:12px;padding:4px 10px;box-shadow:0 3px 0 #5a3e1b}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #5a3e1b}
#stage{position:fixed;inset:0;z-index:1}
#btn-add{position:fixed;right:28px;bottom:40px;width:64px;height:64px;border-radius:50%;font-size:36px;z-index:20}
.bubble{position:absolute;min-width:160px;max-width:260px;background:#fff;border:4px solid #3b2a14;border-radius:18px;padding:10px 12px 8px;z-index:5;box-shadow:0 4px 0 rgba(59,42,20,.35);animation:bob 3s ease-in-out infinite;touch-action:none}
.bubble.dragging{animation:none;opacity:.85;z-index:30;cursor:grabbing}
.bubble::after{content:"";position:absolute;bottom:-16px;left:28px;border:10px solid transparent;border-top:14px solid #3b2a14}
.bubble::before{content:"";position:absolute;bottom:-9px;left:31px;border:7px solid transparent;border-top:10px solid #fff;z-index:1}
.bubble .grip{height:14px;cursor:grab;display:flex;justify-content:space-between;font-size:12px;color:#9a7b4f;margin-bottom:4px}
.bubble .close{cursor:pointer}
.bubble textarea{width:100%;min-height:60px;border:none;outline:none;resize:none;font:inherit;background:transparent}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
#trash-wrap{position:fixed;bottom:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:10}
#trash{width:min(220px,30vw);aspect-ratio:240/280;cursor:pointer;user-select:none}
#counter{background:#fff8d6;border:3px solid #5a3e1b;border-radius:12px;padding:2px 12px;margin-bottom:8px;font-weight:bold;color:#5a3e1b}
.scrap{position:fixed;width:180px;background:#fffdf3;border:2px solid #b49a6a;border-radius:4px;padding:6px 8px;font-size:13px;z-index:40;box-shadow:2px 3px 6px rgba(0,0,0,.2);transition:transform 1s cubic-bezier(.2,.8,.3,1),opacity .6s;pointer-events:auto}
.scrap time{display:block;color:#c0392b;font-weight:bold;font-size:12px}
#panel{position:fixed;top:0;right:0;width:min(380px,92vw);height:100%;background:#fffdf3;border-left:4px solid #5a3e1b;z-index:50;display:flex;flex-direction:column;padding:12px}
#panel.hidden{display:none}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel-head h2{margin:0;font-size:20px}
#panel-body{overflow:auto;flex:1}
#panel-body input[type=search],#panel-body input[type=password],#panel-body textarea{width:100%;font:inherit;padding:6px;border:2px solid #5a3e1b;border-radius:8px;margin:6px 0}
.note-item{border-bottom:1px dashed #b49a6a;padding:6px 0;display:flex;gap:6px}
.note-item time{color:#888;font-size:12px;display:block}
.note-item .txt{flex:1;white-space:pre-wrap;word-break:break-all}
.row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
pre.result{white-space:pre-wrap;background:#fff;border:2px solid #ddd;padding:8px;border-radius:8px}
#toast{position:fixed;left:50%;top:110px;transform:translateX(-50%);background:#3b2a14;color:#fff;padding:6px 14px;border-radius:12px;opacity:0;transition:opacity .3s;z-index:60;pointer-events:none}
#toast.show{opacity:1}

.bubble textarea{color:#2b1d0e}
.bubble textarea::placeholder{color:#9e9e9e;opacity:.6;font-style:italic}
.bubble textarea:focus::placeholder{opacity:.35}
.bubble.bounce{transition:left .5s cubic-bezier(.34,1.56,.64,1),top .5s cubic-bezier(.34,1.56,.64,1)}

/* 心情标签：外层按钮是 ≥40×40 的点击区，里面 32px 的圆形是看得见的部分 */
.tag-picker{display:flex;gap:2px;margin:2px -4px -6px}
.tag-picker button{width:40px;height:40px;padding:4px;border:none;background:transparent;box-shadow:none;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tag-picker button:active{transform:none;box-shadow:none}
.tag-picker .tg{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;border:2px solid #c9b48a;background:rgba(255,255,255,.6);opacity:.6;transition:transform .12s,opacity .12s,border-color .12s}
.tag-picker button:hover .tg,.tag-picker button:focus-visible .tg{opacity:1;transform:scale(1.08)}
.tag-picker button.on .tg{opacity:1;background:#fff;border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.15)}
@media (pointer:coarse){.tag-picker button{width:48px;height:48px}.tag-picker .tg{width:38px;height:38px;font-size:24px}}
#tag-filter{font:inherit;padding:4px;border:2px solid #5a3e1b;border-radius:8px}

#trash-wrap{position:fixed}
.burp-bubble{position:absolute;top:-10px;left:62%;background:#fff;border:3px solid #3b2a14;border-radius:50%;padding:6px 12px;font-weight:bold;animation:burpup 1.6s ease-out forwards}

#review{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:flex;align-items:center;justify-content:center}
.review-box{display:flex;flex-direction:column;align-items:center;gap:8px}
.review-box canvas{width:min(360px,80vw);height:auto;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.3)}

#banner-track span.mine{color:#c0392b}
.note-item .acts{display:flex;flex-direction:column;gap:4px}
.note-item .acts button{font-size:12px;padding:2px 6px}


/* ---- 垃圾桶（美术见 assets/can/，状态由 fill.js 设置 data-state，表情由 face.js 插值） ---- */
#trash svg{overflow:visible;display:block}
#trash #lid,#trash .lid-fight{transform-box:view-box;transform-origin:40px 92px}
#trash .can{transform-box:view-box;transform-origin:120px 260px}
#trash #body{transform-box:view-box;transform-origin:120px 258px}
#trash #lid{transition:transform .25s}
#trash.hover #lid{transform:rotate(-14deg) translateY(-6px)}
#trash.chew #lid{animation:chew .18s ease-in-out 5}
#trash.chew #body{animation:wobble .9s}
@keyframes chew{50%{transform:rotate(-10deg) translateY(-10px)}}
@keyframes wobble{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
#trash.burp #body{animation:burp 1.1s ease-out}
#trash.burp #lid{animation:lidpop 1.1s ease-out}
@keyframes burp{15%{transform:scale(1.08,.92)}35%{transform:scale(.94,1.08)}55%{transform:scale(1.03,.97)}}
@keyframes lidpop{20%{transform:rotate(-30deg) translateY(-14px)}50%{transform:rotate(-6deg)}}
/* 纸团：默认全部隐藏，按状态显示 */
#trash #peek,#trash #overflow,#trash .spray{display:none}
#trash .paper{transform-box:fill-box;transform-origin:center}
/* 20：盖子合不上（同 can-3：rotate(-16) translate(0,-4)），纸团从盖沿挤出、轻轻扭动 */
#trash[data-state=ajar] #peek{display:inline}
#trash[data-state=ajar] #lid{transform:rotate(-16deg) translateY(-4px)}
#trash[data-state=ajar]:not(.chew):not(.burp):not(.hover) #lid{animation:ajar 2.4s ease-in-out infinite}
@keyframes ajar{0%,100%{transform:rotate(-16deg) translateY(-4px)}50%{transform:rotate(-19deg) translateY(-6px)}}
#trash[data-state=ajar] #peek .paper{animation:peek 1.6s ease-in-out infinite}
#trash[data-state=ajar] #peek .paper:nth-child(2n){animation-delay:-.6s}
#trash[data-state=ajar] #peek .paper:nth-child(3n){animation-delay:-1.1s}
@keyframes peek{0%,100%{scale:1;rotate:0deg}50%{scale:1.08 .94;rotate:6deg}}
/* 100：同 can-4，纸团狂喷 + 盖子拉锯 + 整桶抖 */
#trash[data-state=struggle] #overflow,#trash[data-state=struggle] .spray{display:inline}
#trash[data-state=struggle] #lid{transform:rotate(-10deg) translateY(-6px)}
#trash[data-state=struggle] .can{animation:shake .18s linear infinite}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-2deg)}75%{transform:translate(3px,-1px) rotate(2deg)}}
#trash[data-state=struggle] .lid-fight{animation:lidfight .9s ease-in-out infinite}
@keyframes lidfight{0%{transform:rotate(-24deg) translateY(-8px)}40%{transform:rotate(-3deg) translateY(0)}55%{transform:rotate(-1deg) translateY(1px)}70%{transform:rotate(-30deg) translateY(-12px)}100%{transform:rotate(-24deg) translateY(-8px)}}
#trash[data-state=struggle] .spray .paper{animation:spray 1.2s cubic-bezier(.2,.7,.4,1) infinite;animation-delay:calc(var(--i) * -0.15s);opacity:0}
@keyframes spray{0%{translate:0 0;opacity:0;scale:.6}10%{opacity:1}100%{translate:var(--dx) var(--dy);opacity:0;scale:1.1;rotate:var(--r)}}
#trash[data-state=struggle] #overflow .paper{animation:peek 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#trash .can,#trash .lid-fight,#trash .paper,#trash #lid{animation:none!important}#trash .spray .paper{opacity:1}}

/* 拖拽/飞入：只动 transform，拖动时暂停漂浮动画 */
.bubble{will-change:transform}
.bubble.dragging{animation:none;translate:none;transition:none;opacity:1;box-shadow:0 10px 18px rgba(59,42,20,.3)}
.bubble.flying{animation:none;translate:none;pointer-events:none;transition:transform .55s cubic-bezier(.5,-0.2,.7,.6),opacity .55s ease-in}
.bubble.bounce-here{animation:nudge .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes nudge{30%{transform:translateY(12px)}60%{transform:translateY(-8px)}}

/* 使用须知：悬停小卡片 */
#help-pop{position:fixed;z-index:80;width:300px;max-height:min(70vh,520px);overflow:auto;background:#fffdf3;border:3px solid #5a3e1b;border-radius:14px;box-shadow:0 6px 18px rgba(59,42,20,.25);padding:10px 12px;font-size:12px;line-height:1.55;color:#3b2a14;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;pointer-events:none}
#help-pop.show{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease;pointer-events:auto}
#help-pop::before{content:"";position:absolute;top:-9px;right:28px;border:6px solid transparent;border-bottom:7px solid #5a3e1b;border-top:0}
#help-pop .help-title{font-weight:bold;font-size:14px;margin-bottom:4px}
#help-pop section{padding:4px 0;border-top:1px dashed #d8c7a3}
#help-pop h4{margin:0 0 1px;font-size:12px}
#help-pop p{margin:0}
#help-pop kbd{background:#fff;border:1px solid #5a3e1b;border-bottom-width:2px;border-radius:4px;padding:0 3px;font-size:11px;font-family:inherit}
#help-pop .help-foot{color:#9a7b4f;margin-top:4px;border-top:1px dashed #d8c7a3;padding-top:4px}

/* 面板：与「使用须知」同款小卡片，挂在各自按钮下（位置/最大高度由 main.js placePanel 计算） */
#panel{top:100px;right:14px;width:300px;height:auto;max-height:min(70vh,520px);border:3px solid #5a3e1b;border-radius:14px;box-shadow:0 6px 18px rgba(59,42,20,.25);padding:10px 12px;font-size:12px;line-height:1.55;color:#3b2a14;overflow:visible;animation:popin .15s ease}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}}
#panel::before{content:"";position:absolute;top:-9px;right:var(--arrow-right,28px);border:6px solid transparent;border-bottom:7px solid #5a3e1b;border-top:0}
#panel .panel-head{flex:none;padding-bottom:4px;border-bottom:1px dashed #d8c7a3;margin-bottom:6px}
#panel .panel-head h2{font-size:14px}
#panel .panel-head button{padding:0 6px;font-size:12px;box-shadow:none;border-width:2px}
#panel-body{flex:1 1 auto;min-height:0;overflow-y:auto}
#panel-body.fixed-controls{display:flex;flex-direction:column;overflow:hidden}
#panel-body.fixed-controls > :not(#items){flex:none}
#panel-body.fixed-controls #items{flex:1 1 auto;min-height:0;overflow-y:auto}
#panel-body h3{font-size:12px;margin:8px 0 2px}
#panel-body p{margin:3px 0}
#panel-body button{font-size:12px;padding:2px 8px;border-width:2px;box-shadow:0 2px 0 #5a3e1b}
#panel-body input,#panel-body select,#panel-body textarea{font-size:12px!important;padding:4px 6px!important;border-width:2px!important}
#panel-body input[type=search]{margin:2px 0 4px}
#panel-body .row{margin:4px 0}
#panel-body .note-item{padding:4px 0}
#panel-body .note-item time{font-size:11px}
#panel-body .empty{color:#9a7b4f;margin:6px 0;text-align:center}
#panel-body pre.result{font-size:12px}
#toolbar button.on{background:#fff2b3}

/* 心情标签提示气泡 */
#tag-tip{position:fixed;z-index:90;background:#3b2a14;color:#fff;font-size:12px;line-height:1;padding:5px 9px;border-radius:10px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .25s ease,transform .25s ease;box-shadow:0 3px 8px rgba(0,0,0,.2)}
#tag-tip.show{opacity:1;transform:none;transition:opacity .12s ease,transform .12s ease}
#tag-tip::after{content:"";position:absolute;left:calc(var(--ax,50%) - 5px);top:100%;border:5px solid transparent;border-top-color:#3b2a14}
#tag-tip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#3b2a14}