#task-note{position:fixed;right:24px;top:105px;width:265px;max-height:calc(100vh - 230px);overflow:auto;z-index:6;padding:23px 19px 14px;color:#514225;background:#fff0a6;box-shadow:3px 7px 16px #102b4633;transform:rotate(1deg);border-radius:2px 2px 18px 2px;pointer-events:none;font-family:'Segoe Print','Comic Sans MS',cursive}
#task-note:before{content:'';position:absolute;top:0;left:85px;width:90px;height:13px;background:#ffffff70;transform:rotate(-4deg)}
#task-note small{font:700 9px Arial;letter-spacing:1.6px;color:#8b7440}#task-note h2{font-size:23px;margin:8px 0 12px}#task-note ul{margin:0;padding:0;list-style:none}#task-note li{font-size:14px;line-height:1.45;padding:8px 0;border-bottom:1px solid #b7a05b33}#task-note li.done{text-decoration:line-through;text-decoration-thickness:2px;color:#728256;opacity:.65}#task-note p{font:11px/1.5 'Segoe UI',sans-serif;color:#887246;margin-bottom:0}.tray-balance{font:12px 'Segoe UI';margin-top:12px}.tray-balance meter{display:block;width:100%;height:16px;margin-top:6px}
#game{position:relative;z-index:0}#task-markers{position:fixed;inset:0;pointer-events:none;z-index:5;isolation:isolate}.task-marker{position:absolute;transform:translate(-50%,-100%);background:#fffbea;border:2px solid #e6bd64;border-radius:18px;padding:5px 9px;color:#284d60;font:bold 21px 'Segoe UI';box-shadow:0 3px 8px #173c4930}.task-marker:after{content:attr(data-distance);display:block;font:9px Arial;text-align:center;color:#647d83}
@media(max-width:700px){#task-note{right:9px;top:70px;width:185px;padding:14px 12px;max-height:35vh}#task-note h2{font-size:17px}#task-note li{font-size:11px}#task-note p{font-size:9px}}
/* Task deadlines (night/chaos): shrinking bar green → orange → red, gentle wiggle in the last 10 s. */
#task-note .task-deadline{display:flex;align-items:center;gap:7px;margin-top:4px}#task-note .task-deadline[hidden]{display:none}
#task-note .task-bar{flex:1;height:7px;border-radius:5px;background:#b7a05b38;overflow:hidden}#task-note .task-bar>span{display:block;height:100%;border-radius:inherit;background:#4cae4f;transition:width .25s linear,background-color .4s}
#task-note .task-deadline[data-level=warn] .task-bar>span{background:#f39a2b}#task-note .task-deadline[data-level=alert] .task-bar>span{background:#e5483b}
#task-note .task-deadline b{min-width:34px;text-align:right;font:700 12px 'Segoe UI',Arial,sans-serif;color:#6f5a2b}#task-note .task-deadline[data-level=alert] b{color:#c62f24}
#task-note li.urgent{animation:task-wiggle .45s ease-in-out infinite}
#task-note li.done.missed{color:#b8322a;opacity:.8;text-decoration-color:#e5483b}
@keyframes task-wiggle{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-1.5px) rotate(-.6deg)}75%{transform:translateX(1.5px) rotate(.6deg)}}
.task-marker.urgent{border-color:#e5483b;background:#ffece8;animation:task-marker-pulse 1s ease-in-out infinite}
@keyframes task-marker-pulse{50%{box-shadow:0 0 0 5px #e5483b40,0 3px 8px #173c4930}}
@media(prefers-reduced-motion:reduce){#task-note li.urgent,.task-marker.urgent{animation:none}}
@media(max-width:700px){#task-note .task-bar{height:5px}#task-note .task-deadline b{font-size:10px;min-width:26px}}