/* Guest book notes (drawn by BYODJGuestbook.noteHtml in /guestbook.js): the wall on /guestbook + recap pages.
   Needs the page's --ink/--hot/--lime/--cyan/--win + --f-* font vars. */
.note{position:relative;display:block;break-inside:avoid;margin:0 0 34px;color:var(--ink);transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transition:transform .25s cubic-bezier(.3,1.6,.5,1);box-shadow:4px 5px 0 #0006}
.note:hover{z-index:5}
.drag-on .note{cursor:grab;touch-action:pan-y}
.note.dragging{transition:none;cursor:grabbing;z-index:60;box-shadow:10px 14px 0 #0005}
.note.fresh{animation:pop .7s cubic-bezier(.3,1.7,.5,1)}
.note.flash{animation:flash 1.2s ease 2}
@keyframes pop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes flash{50%{outline:5px solid var(--hot);outline-offset:6px}}
.note .msg{margin:0;font:700 22px/1.15 var(--f-hand);white-space:pre-wrap;overflow-wrap:anywhere}
.note .meta{margin-top:8px;font:10px/1.5 var(--f-pixel);letter-spacing:.03em;opacity:.85;overflow-wrap:anywhere}
.note .meta a,.note .by a{color:inherit}
.note .song{display:inline-block;margin-top:8px;font:700 11px var(--f-sys);background:var(--ink);color:var(--lime);padding:2px 7px;border-radius:3px;max-width:100%;overflow-wrap:anywhere}
.note .who{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:8px}
.note .by{font:400 14px var(--f-cute);min-width:0;overflow-wrap:anywhere}
.note .av{font-family:var(--f-sys)}
.hb{flex:none;font:700 11px var(--f-pixel);background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:3px 9px;box-shadow:2px 2px 0 var(--ink)}
.hb:hover{background:var(--blush)}
.hb.on{background:var(--hot);color:#fff;text-shadow:1px 1px 0 var(--ink)}
.hb.pop{animation:wob .4s}
.stk{position:absolute;right:-14px;top:-16px;z-index:3;width:44px;height:44px;display:grid;place-items:center;font-size:24px;line-height:1;border-radius:50%;background:#fff;border:3px solid var(--ink);transform:rotate(14deg);box-shadow:2px 2px 0 var(--ink)}
.tape{position:absolute;left:50%;top:-12px;width:84px;height:24px;margin-left:-42px;background:rgba(255,255,255,.55);border:1px dashed rgba(0,0,0,.2);transform:rotate(-4deg)}
.mine{outline:4px dashed var(--lime);outline-offset:6px}
.mine-tag{position:absolute;top:-18px;left:-10px;z-index:4;font:700 10px var(--f-pixel);color:var(--ink);background:var(--lime);border:2px solid var(--ink);padding:4px 7px;transform:rotate(-6deg);box-shadow:2px 2px 0 var(--ink)}
/* paper types */
.n-sticky{background:var(--c);padding:22px 16px 12px}
.n-sticky::after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;background:linear-gradient(135deg,transparent 50%,#0002 50%)}
.n-paper{background:repeating-linear-gradient(#fff 0 25px,#9ec5ff 25px 26px);padding:24px 14px 12px 36px;border-top:10px solid var(--c)}
.n-paper::before{content:"";position:absolute;left:25px;top:0;bottom:0;width:2px;background:#ff7a9a}
.n-paper .msg{line-height:26px;font-size:21px}
.n-polaroid{background:#fff;padding:10px 10px 12px;border:1px solid #0002}
.n-polaroid .photo{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--c);border:2px solid var(--ink);margin-bottom:10px}
.n-polaroid .photo i{position:absolute;border-radius:50%;filter:blur(7px)}
.n-polaroid .photo i:nth-child(1){width:55%;height:60%;left:-8%;top:12%;background:var(--hot);opacity:.7}
.n-polaroid .photo i:nth-child(2){width:45%;height:50%;right:-6%;top:-8%;background:var(--cyan);opacity:.8}
.n-polaroid .photo i:nth-child(3){width:30%;height:62%;left:38%;bottom:-14%;background:var(--ink);opacity:.85;border-radius:40% 40% 0 0;filter:blur(4px)}
.n-polaroid .photo i:nth-child(4){width:14%;height:18%;left:30%;top:18%;background:#fff;filter:blur(3px)}
.n-polaroid .photo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff12 0 2px,transparent 2px 4px)}
.n-polaroid .msg{font-size:21px}
.n-ticket{background:var(--c);border:3px dashed var(--ink);border-radius:8px;padding:10px 14px 12px}
.n-ticket h4{margin:0 0 8px;font:400 20px var(--f-bubble);border-bottom:3px double var(--ink);padding-bottom:4px}
.n-ticket::before,.n-ticket::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#b98650;border:3px dashed var(--ink)}
.n-ticket::before{left:-11px}.n-ticket::after{right:-11px}
.n-receipt{background:#fff;font:12px var(--f-sys);padding:12px 12px 22px;border-top:8px solid var(--c);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.n-receipt h4{margin:0 0 6px;text-align:center;font:700 11px "Courier New",monospace;letter-spacing:.1em}
.n-receipt .row{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--ink);padding:2px 0;font:12px "Courier New",monospace}
.n-receipt .row span:last-child{text-align:right;overflow-wrap:anywhere}
.n-receipt .msg{font:14px/1.4 "Courier New",monospace;font-weight:400;margin:8px 0}
.n-window{background:var(--win);border:2px solid;border-color:#fff #404040 #404040 #fff}
.n-window .bar{display:flex;justify-content:space-between;gap:6px;padding:3px 6px;color:#fff;font:700 11px var(--f-sys);background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--c) 70%,#000))}
.n-window .bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.n-window .in{margin:4px;padding:10px;background:#fff;border:2px inset #fff;border-left:6px solid var(--c)}
.n-window .msg{font:14px/1.45 "Courier New",monospace;font-weight:400}
.n-cassette{background:#222;color:#fff;padding:12px;border-radius:12px;border:3px solid #000}
.n-cassette .label{background:var(--c);color:var(--ink);border-radius:5px;padding:10px;position:relative}
.n-cassette .side{display:block;font:700 10px var(--f-pixel);margin-bottom:4px}
.n-cassette .msg{font:400 18px/1.25 var(--f-marker)}
.n-cassette .reels{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px}
.n-cassette .reels i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#222 0 5px,#ddd 6px 10px,#555 11px);border:2px solid #000;animation:reel 3s linear infinite}
.n-cassette .reels span{width:60px;height:14px;border-radius:7px;background:#3a2a1a;border:2px solid #000}
@keyframes reel{to{transform:rotate(360deg)}}
/* Sniglet (--f-cute) is never bold: bold Sniglet blobs together + gets unreadable */
.note .by b,.note .by strong{font-weight:400}