import re

with open('css/bible-widget.css', 'r', encoding='utf-8') as f:
    css = f.read()

# Fix flex-direction for the tooltip text so ornaments are top and bottom
css = re.sub(r'flex-direction:\s*row;', 'flex-direction: column;', css)

# Fix the shining particle background so it's not a square
old_particle = r'\.bible-shining-particle\s*\{[^}]*\}'
new_particle = '''.bible-shining-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 300%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(230, 200, 136, 0.4) 0%, rgba(230, 200, 136, 0) 60%);
    pointer-events: none;
    z-index: -1;
    animation: shine-pulse 3s infinite alternate;
    filter: blur(10px);
}'''
css = re.sub(old_particle, new_particle, css)

# Fix the keyframes for the pulse
old_pulse = r'@keyframes shine-pulse\s*\{[^}]*\}'
new_pulse = '''@keyframes shine-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}'''
css = re.sub(old_pulse, new_pulse, css)

with open('css/bible-widget.css', 'w', encoding='utf-8') as f:
    f.write(css)

print("Fixed flex-direction and shining particle CSS")