/* clickable skin art (clickables.js): the art takes taps, and these are the bits its animations draw */
.art.clicky { pointer-events: auto; cursor: pointer; -webkit-user-select: none; user-select: none; }
.art.clicky:hover { filter: brightness(1.08); }
/* layered art: pictures stacked in one box so a part (flame, moon, disc, clapstick) can move on its own */
.art.layered { display: block; isolation: isolate; }
.art.layered .ly { display: block; width: 100%; height: 100%; object-fit: contain; }
.art.layered .ly + .ly { position: absolute; inset: 0; z-index: 2; }
.art.layered .ly0 { position: relative; z-index: 1; }

.clk-ov { position: absolute; pointer-events: none; overflow: visible; }
.clk-ov > * { position: absolute; pointer-events: none; }
#clkfx { position: fixed; inset: 0; z-index: 88; pointer-events: none; overflow: hidden; }
#clkfx > * { position: fixed; pointer-events: none; }
.clk-fill { inset: 0; background: center / contain no-repeat; }

/* knife: the drop and the splat */
.clk-drop { width: 10px; height: 14px; margin: -2px 0 0 -5px; transform-origin: 50% 0; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 35% 60%, #ff5a5a, #a50f19 60%, #5c060c); box-shadow: 0 0 0 1px #3a0408; }
.clk-splat { width: 74px; height: 60px; margin: -30px 0 0 -37px; }
.clk-splat svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* toast crumbs */
.clk-crumb { width: 6px; height: 5px; border-radius: 1px; }
/* sword slash: a square centred on the blade */
.clk-slash { left: 50%; top: 50%; width: 130%; aspect-ratio: 1; translate: -50% -50%; }
.clk-slash svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 6px #7fd0ff); }
/* nosebleed */
.clk-blush { width: 22%; height: 12%; border-radius: 50%; background: radial-gradient(#ff5d9e, #ff8fb880 60%, transparent 72%); }
.clk-blood { width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: #e8203b; box-shadow: 0 0 0 1px #2a1f45; }
/* clapperboard: three little impact lines at the hinge's far end */
.clk-clap { width: 18%; height: 14%; }
.clk-clap i { position: absolute; left: 50%; top: 50%; width: 3px; height: 40%; background: #bc002d; border-radius: 2px; transform-origin: 50% 160%; }
.clk-clap i:nth-child(1) { rotate: -40deg; } .clk-clap i:nth-child(3) { rotate: 40deg; }
/* bandaid */
.clk-aid { left: -12%; top: 34%; width: 124%; height: 32%; }
.clk-aid svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px #0006); }
/* sci-fi: asteroid, laser and the bang (placed in the panel's own coordinates) */
.clk-rock, .clk-boom, .clk-shard, .clk-beam { position: absolute; pointer-events: none; z-index: 6; }
.clk-rock { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.clk-rock svg { width: 100%; height: 100%; display: block; }
.clk-beam { height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 2px; background: linear-gradient(90deg, #5ef2ff00, #5ef2ff 30%, #fff); box-shadow: 0 0 10px #5ef2ff, 0 0 3px #fff; }
.clk-boom { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(#fff, #ffd27a 35%, #ff5e7a 60%, transparent 70%); }
.clk-shard { width: 7px; height: 5px; background: #8a7f78; border: 1px solid #3a3330; }
/* candle smoke */
.clk-smoke { width: 16px; height: 22px; border-radius: 50%; background: radial-gradient(#8a8078, #8a807800 70%); filter: blur(1px); }
/* bot sparks */
.clk-spark { width: 3px; height: 9px; border-radius: 2px; background: #fff3b0; box-shadow: 0 0 6px #ffc400, 0 0 2px #fff; }
/* runaway saw blade */
.clk-blade { filter: drop-shadow(0 4px 6px #000a); }