.bb{--board:#f2f0ea;--board-edge:#d9d5cc;--board-ink:#1f3f7a;--board-alert:#e0492f;--marker:#171717;--tag-hill:#2e6db4;--tag-lake:#de5338;--tag-camp:#8c7050;--tag:4.5rem;--hook-w:calc(var(--tag) * .19);--hook-h:calc(var(--hook-w) * 1.487);--tag-seat:calc(var(--hook-h) * -.115 - var(--tag) * .083)}@media (min-width:40rem){.bb{--tag:5.25rem}}.bb-panel{box-shadow:inset 0 0 0 1px var(--board-edge), 0 1px 0 #ffffff80, 0 24px 60px -20px #000000b3;background:#cacaca url(/images/buddy-board/painted-wood.webp) 0 0/610px 600px;border-radius:.25rem;position:relative;overflow:hidden}.bb-panel:before{content:"";pointer-events:none;background:radial-gradient(60% 40% at 15% 0,#0000000e,#0000 70%),radial-gradient(50% 45% at 92% 88%,#0000000d,#0000 70%);position:absolute;inset:0}.bb-grid-frame{position:relative;container:bb-grid/inline-size}.bb-first{z-index:3;text-align:center;pointer-events:none;--paint:222 222 220;background:radial-gradient(ellipse 42% 30% at center, rgb(var(--paint) / .94) 0%, rgb(var(--paint) / .85) 45%, rgb(var(--paint) / 0) 100%);font-family:var(--font-marker), cursive;text-shadow:0 0 .3em rgb(var(--paint)), 0 0 .6em rgb(var(--paint));place-content:center;justify-items:center;gap:.25rem;display:grid;position:absolute;inset:0}.bb-first-call{color:var(--board-alert);margin:0;font-size:clamp(2.5rem,9cqi,5.5rem);line-height:1;transform:rotate(-4deg)}.bb-first-line{color:var(--board-ink);margin:0;font-size:clamp(1.1rem,3cqi,1.75rem);line-height:1.2;transform:rotate(-2deg)}.bb-grid{grid-template-columns:repeat(auto-fill, minmax(var(--tag), 1fr));gap:.35rem .25rem;display:grid}.bb-cell{--cell-top:.5rem;padding-block:var(--cell-top) .5rem;flex-direction:column;align-items:center;display:flex;position:relative}.bb-hook{width:var(--hook-w);height:var(--hook-h);left:calc(var(--hook-w) * .184);flex:none;position:relative}.bb-hook:before,.bb-hook:after{content:"";filter:drop-shadow(1px 2px 1.5px #00000059);pointer-events:none;background:50%/100% 100% no-repeat;position:absolute;inset:0}.bb-hook:before{z-index:0;background-image:url(/images/buddy-board/hook-back.webp)}.bb-hook:after{z-index:2;background-image:url(/images/buddy-board/hook-front.webp)}.bb-tag{transform-origin:50% 8.3%;transform:rotate(var(--tilt,0deg));width:var(--tag);height:var(--tag);margin-top:var(--tag-seat);text-align:center;color:#fff;z-index:1;--hole:radial-gradient(circle at 50% 8.3%, transparent 4.5%, var(--tag-colour) 4.7%);background:var(--tag-image) center / 100% 100% no-repeat, var(--hole);border-radius:50%;place-content:center;line-height:1.05;display:grid;box-shadow:inset 0 -2px 6px #0000002e,2px 4px 6px -2px #00000073}.bb-tag[data-camp=hill]{--tag-colour:var(--tag-hill);--tag-image:url(/images/buddy-board/tag-hill.webp)}.bb-tag[data-camp=lake]{--tag-colour:var(--tag-lake);--tag-image:url(/images/buddy-board/tag-lake.webp)}.bb-tag[data-camp=camp]{--tag-colour:var(--tag-camp);--tag-image:url(/images/buddy-board/tag-camp.webp)}.bb-tag{position:relative;overflow:hidden}.bb-tag>*{z-index:1;position:relative}.bb-tag-name{font-family:var(--font-marker), cursive;font-size:calc(var(--tag) * var(--name-size,.2));color:#fffffff7;text-shadow:0 1px 1px #00000040;overflow-wrap:anywhere;padding-inline:.35rem}.bb-tag-year{font-family:var(--font-marker), cursive;font-size:calc(var(--tag) * .17);color:#ffffffc7;margin-top:.1rem}.bb-tag-space{width:var(--tag);height:var(--tag);margin-top:var(--tag-seat);visibility:hidden;flex:none}.bb-number{top:calc(var(--cell-top) + var(--hook-h) + var(--tag-seat));width:var(--tag);height:var(--tag);z-index:0;pointer-events:none;font-family:var(--font-marker), cursive;font-size:calc(var(--tag) * .34);color:var(--board-ink);font-variant-numeric:tabular-nums;opacity:.85;place-items:center;margin-inline:auto;line-height:1;display:grid;position:absolute;left:0;right:0}@keyframes bb-sway{0%{transform:rotate(var(--tilt,0deg))}22%{transform:rotate(calc(var(--tilt,0deg) - 5deg))}48%{transform:rotate(calc(var(--tilt,0deg) + 3.5deg))}72%{transform:rotate(calc(var(--tilt,0deg) - 1.5deg))}88%{transform:rotate(calc(var(--tilt,0deg) + .6deg))}to{transform:rotate(var(--tilt,0deg))}}.bb-tag:is(:hover,:focus-visible){animation:1.1s ease-out bb-sway}@keyframes bb-drop{0%{opacity:0;transform:translateY(-160%) rotate(calc(var(--tilt,0deg) - 16deg))}55%{opacity:1;transform:translateY(0) rotate(calc(var(--tilt,0deg) + 7deg))}78%{transform:rotate(calc(var(--tilt,0deg) - 3deg))}to{transform:rotate(var(--tilt,0deg))}}.bb-tag[data-fresh=true]{animation:1.15s cubic-bezier(.3,.9,.4,1) bb-drop}.bb-tag[data-highlight=true]{outline-offset:3px;outline:3px solid #f6c445}