.paint-host{position:relative;isolation:isolate}
.paint-host>:not(.paint-splash){isolation:isolate}
.paint-splash{--paint-angle:-19deg;--paint-size:1;position:absolute;z-index:0;pointer-events:none;user-select:none;display:block;width:clamp(180px,25vw,350px);height:auto;aspect-ratio:10/9;right:48px;top:10px;color:#dfff00;opacity:.34;transform:rotate(var(--paint-angle)) scale(var(--paint-size));transform-origin:center}
.paint-splash svg{display:block;width:100%;height:100%;overflow:visible}
.paint-splash-2{--paint-angle:34deg;--paint-size:.86;color:#21d8ed;right:auto;left:48px;top:20px;opacity:.28}
.paint-splash-3{--paint-angle:111deg;--paint-size:.76;color:#ff3ca6;top:16px;opacity:.3}
.paint-splash-4{--paint-angle:-64deg;--paint-size:.7;color:#dfff00;right:auto;left:48px;top:20px;opacity:.26}
.paint-splash.paint-hit{animation:paint-hit .68s cubic-bezier(.16,.85,.25,1) both}
@keyframes paint-hit{0%{opacity:0;transform:rotate(calc(var(--paint-angle) - 18deg)) scale(.25)}65%{transform:rotate(var(--paint-angle)) scale(calc(var(--paint-size) * 1.12))}100%{transform:rotate(var(--paint-angle)) scale(var(--paint-size))}}
@media(max-width:700px){.paint-splash{width:170px;right:32px;opacity:.25}.paint-splash-2,.paint-splash-4{width:145px;right:auto;left:32px;opacity:.22}}
@media(prefers-reduced-motion:reduce){.paint-splash.paint-hit{animation:none}}
@media print{.paint-splash{display:none}}

/* Vivid paint: explicit SVG fill avoids heading/span text-color overrides. */
main .paint-host > .paint-splash{--paint-color:#dfff00;--paint-opacity:.72;color:var(--paint-color);opacity:var(--paint-opacity);width:clamp(240px,32vw,440px);right:16px;top:0;max-width:calc(100% - 24px)}
main .paint-host > .paint-splash-2{--paint-color:#00e5ff;--paint-opacity:.62;left:16px;right:auto}
main .paint-host > .paint-splash-3{--paint-color:#ff1593;--paint-opacity:.66}
main .paint-host > .paint-splash-4{--paint-color:#dfff00;--paint-opacity:.6;left:16px;right:auto}
main .paint-splash svg,main .paint-splash svg path{fill:var(--paint-color);color:var(--paint-color)}
main :is(.inner-heading,.live-heading,.support-hero,.directory-heading,.games-intro) > .paint-splash{--paint-opacity:.94;width:clamp(280px,40vw,560px)}
@keyframes paint-hit{0%{opacity:0;transform:rotate(calc(var(--paint-angle) - 18deg)) scale(.25)}65%{transform:rotate(var(--paint-angle)) scale(calc(var(--paint-size) * 1.12))}100%{opacity:var(--paint-opacity);transform:rotate(var(--paint-angle)) scale(var(--paint-size))}}
@media(max-width:700px){main .paint-host > .paint-splash{width:230px;right:12px;--paint-opacity:.65}main .paint-host > .paint-splash-2,main .paint-host > .paint-splash-4{left:12px;right:auto}main :is(.inner-heading,.live-heading,.support-hero,.directory-heading,.games-intro) > .paint-splash{width:280px;--paint-opacity:.9}}

/* Extend the rhythm down long pages; small splashes sit on the opposite edge. */
main .paint-host > .paint-splash-5{--paint-color:#ff1593;--paint-angle:155deg;--paint-size:.8;right:24px;top:24px}
main .paint-host > .paint-splash-6{--paint-color:#00e5ff;--paint-angle:-40deg;--paint-size:.85;left:16px;right:auto;top:12px}
main .paint-host > .paint-splash-7{--paint-color:#dfff00;--paint-angle:65deg;--paint-size:.7;right:24px;top:16px}
main .paint-host > .paint-splash-8{--paint-color:#ff1593;--paint-angle:-100deg;--paint-size:.8;left:16px;right:auto;top:24px}
main .paint-host > .paint-splash-small{--paint-color:#ff1593;--paint-opacity:.65;--paint-size:1;--paint-angle:48deg;width:clamp(100px,13vw,180px);left:auto;right:20px;top:auto;bottom:16px}
main .paint-host > .paint-splash-small-4{--paint-color:#00e5ff;--paint-angle:-70deg}
main .paint-host > .paint-splash-small-6{--paint-color:#dfff00;--paint-angle:115deg}
@media(max-width:700px){main .paint-host > .paint-splash-small{width:100px;right:12px;bottom:12px;--paint-opacity:.55}main .paint-host > .paint-splash-6,main .paint-host > .paint-splash-8{left:12px;right:auto}}

/* Original outward burst, with per-splash entry directions. */
.paint-splash.paint-hit{animation:paint-direction-burst .68s cubic-bezier(.16,.85,.25,1) both}
@keyframes paint-direction-burst{
 0%{opacity:0;transform:translate(var(--paint-from-x,0px),var(--paint-from-y,0px)) rotate(calc(var(--paint-angle) - 18deg)) scale(.25)}
 65%{opacity:var(--paint-opacity);transform:translate(0,0) rotate(var(--paint-angle)) scale(calc(var(--paint-size) * 1.12))}
 100%{opacity:var(--paint-opacity);transform:translate(0,0) rotate(var(--paint-angle)) scale(var(--paint-size))}
}
@media(prefers-reduced-motion:reduce){.paint-splash.paint-hit{animation:none}}