.paint-block { isolation: isolate; }
.paint-idle-drip { position:absolute; inset:0; overflow:hidden; border-radius:20%; pointer-events:none; z-index:4; }
.paint-idle-drip::before { content:''; position:absolute; left:24%; top:28%; width:7%; height:11%; border-radius:45% 45% 55% 55%; background:var(--drip-color); box-shadow:inset 1px 0 1px #ffffff85,inset -1px -1px 1px var(--drip-dark); opacity:0; animation:paint-idle-drop 7s var(--drip-delay) infinite; }
@keyframes paint-idle-drop {
  0%,82%,100% { opacity:0; transform:translateY(0) scale(.4,.2); }
  84% { opacity:1; transform:translateY(0) scale(.7,.5); }
  87% { opacity:1; transform:translateY(25%) scale(.85,1.15); }
  94% { opacity:1; transform:translateY(390%) scale(.85,1); }
  97% { opacity:0; transform:translateY(530%) scale(1.3,.25); }
}
.paint-block:has(.paint-flow) .paint-idle-drip { visibility:hidden; }
:root:has(#options[open]) .paint-idle-drip::before { animation-play-state:paused; }
:root[data-motion="reduced"] .paint-idle-drip { display:none; }
@media (prefers-reduced-motion:reduce) { .paint-idle-drip { display:none; } }
.paint-cap { position:absolute; inset:-3% -5% auto; width:110%; height:106%; pointer-events:none; z-index:3; filter:drop-shadow(1px 2px 1px #07294066); transform-origin:50% 18%; }
.paint-flow { position:absolute; inset:0; border-radius:21%; overflow:hidden; pointer-events:none; z-index:3; }
.paint-underlip { position:absolute; left:3%; right:3%; bottom:2%; height:15%; border-radius:12% 12% 45% 45% / 20% 20% 100% 100%; background:linear-gradient(var(--paint-mid),var(--paint-dark)); box-shadow:inset 0 -2px 2px #061c3640,inset 0 1px 0 #ffffff50; transform-origin:50% 100%; }
.paint-coat { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; pointer-events:none; z-index:1; }
.paint-block .tile-face { z-index:2; }
.paint-next-symbol { display:none; position:absolute; top:9%; left:40%; width:20%; z-index:4; color:white; font:900 12px Arial; text-shadow:0 1px 2px black; pointer-events:none; }
:root[data-theme="symbols"] .paint-next-symbol, :root[data-theme="contrast"] .paint-next-symbol { display:block; }
.paint-slide { position:fixed !important; margin:0 !important; z-index:40; pointer-events:none; }
