/* A single cartoon impact, not repeated flashing. All overlays are click-through. */
.reaction-tint{position:fixed;inset:0;z-index:440;pointer-events:none;background:rgba(196,40,61,.09);box-shadow:inset 0 0 130px 25px rgba(175,20,47,.25);opacity:0;transition:opacity .24s ease}
body.notes-reaction-active{--blue:#c53a50}
body.notes-reaction-active .reaction-tint{opacity:1}
body.notes-reaction-active .system-aura{opacity:0!important}
body.notes-reaction-active .wallpaper{background:radial-gradient(ellipse at 30% 30%,#fff2f3,transparent 70%),linear-gradient(135deg,#fbe0e4,#edc0c9)}
body.notes-reaction-active .flag-stripe{background:linear-gradient(90deg,#cf6074,#c64b62)}
body.notes-reaction-active .flag-star{color:#b44259}
body.notes-reaction-active .menubar,body.notes-reaction-active .taskbar{background:rgba(255,236,239,.92);color:#862c3e;box-shadow:inset 0 0 25px #c9435b15}
body.notes-reaction-active .window-titlebar{background:#fff0f3}
body.notes-reaction-active .app-window::after{border-color:#d85a70;box-shadow:inset 0 0 20px #c9435b20;opacity:.5}
body.notes-reaction-active .app-icon{filter:drop-shadow(0 0 9px #ce425b60)}
body.notes-reaction-active #notes{box-shadow:0 18px 70px #a227493a,0 0 0 2px #dc6a7e}
body.notes-reaction-active #notes-text{border-color:#df93a1}
body.notes-reaction-active .menubar,body.notes-reaction-active .taskbar,body.notes-reaction-active .app-window{animation:notes-screen-impact .4s .34s both}
body.evening.notes-reaction-active .wallpaper{background:radial-gradient(ellipse at 30% 30%,#562b3d,transparent 70%),linear-gradient(135deg,#281d32,#4a2439)}
body.evening.notes-reaction-active .menubar,body.evening.notes-reaction-active .taskbar{background:#452635eF;color:#ffe2e8}
body.evening.notes-reaction-active .flag-star{color:#ce7289}
.notes-reaction{position:fixed;z-index:280;height:142px;pointer-events:none;display:flex;align-items:center;gap:3px;isolation:isolate}
.reaction-portrait-mask{width:140px;height:142px;position:relative;overflow:hidden;flex-shrink:0;align-self:flex-end}
.reaction-portrait{position:absolute;left:0;top:0;width:140px;height:204px;object-fit:contain;clip-path:polygon(31% 11%,40% 6%,55% 6%,63% 9%,67% 18%,70% 19%,68% 28%,62% 35%,93% 43%,100% 88%,0 88%,5% 44%,35% 35%,30% 25%,28% 20%,30% 18%);filter:drop-shadow(0 2px 6px #59172c33);transform-origin:50% 90%;animation:notes-bibi-pop .62s cubic-bezier(.2,.8,.2,1) both}
.reaction-speech{position:relative;margin-top:-20px;background:#fff6f6;border:1px solid #e8a1ae;box-shadow:0 6px 20px #a4325030;border-radius:12px 12px 12px 2px;padding:12px 10px;color:#a73049;animation:notes-caption .48s .1s both;max-width:140px}
.reaction-speech strong{display:block;font-size:15px;line-height:1.18;letter-spacing:-.3px}
.reaction-speech small{display:block;font:7px monospace;letter-spacing:.5px;margin-top:6px;color:#a97b87}
.reaction-burst{position:absolute;right:25px;bottom:0;width:68px;height:50px;display:grid;place-items:center;color:white;background:#d54a60;clip-path:polygon(50% 0,60% 20%,84% 4%,81% 32%,100% 42%,82% 55%,99% 80%,70% 76%,58% 100%,44% 78%,16% 97%,23% 69%,0 58%,23% 43%,5% 20%,37% 27%);font-size:14px;font-weight:800;font-style:italic;animation:notes-comic-impact .65s .3s both}
.reaction-inset .reaction-speech{box-shadow:0 8px 24px #78243e40}
.reaction-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes notes-bibi-pop{0%{transform:translateY(110%) rotate(-8deg)}45%{transform:translateY(-7px) rotate(4deg)}65%{transform:translateY(7px) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes notes-caption{0%{opacity:0;transform:translateY(14px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes notes-comic-impact{0%{opacity:0;transform:scale(.3) rotate(-20deg)}35%{opacity:1;transform:scale(1.22) rotate(5deg)}65%{opacity:1;transform:scale(.94) rotate(-5deg)}100%{opacity:1;transform:scale(1) rotate(-5deg)}}
@keyframes notes-screen-impact{0%,100%{transform:translate(0,0)}15%{transform:translate(0,5px)}35%{transform:translate(-4px,-3px)}55%{transform:translate(3px,2px)}75%{transform:translate(-2px,0)}}
@media(max-width:640px){.notes-reaction{height:142px}.reaction-speech strong{font-size:14px}.reaction-speech{padding:11px 9px}}
@media(prefers-reduced-motion:reduce){.reaction-tint{transition:none}.notes-reaction *,body.notes-reaction-active .menubar,body.notes-reaction-active .taskbar,body.notes-reaction-active .app-window{animation:none!important}.reaction-burst{display:none}}