// Utility Classes
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

.text-gold {
    color: var(--er-gold);
}
.text-light {
    color: var(--er-text-primary);
}
.text-muted {
    color: var(--er-text-muted);
}

.bg-primary {
    background: var(--er-bg-primary);
}
.bg-secondary {
    background: var(--er-bg-secondary);
}
.bg-tertiary {
    background: var(--er-bg-tertiary);
}

// Spacing utilities
@for $i from 0 through 5 {
    .m-#{$i} {
        margin: #{$i * 0.5}rem;
    }
    .mt-#{$i} {
        margin-top: #{$i * 0.5}rem;
    }
    .mb-#{$i} {
        margin-bottom: #{$i * 0.5}rem;
    }
    .ml-#{$i} {
        margin-left: #{$i * 0.5}rem;
    }
    .mr-#{$i} {
        margin-right: #{$i * 0.5}rem;
    }

    .p-#{$i} {
        padding: #{$i * 0.5}rem;
    }
    .pt-#{$i} {
        padding-top: #{$i * 0.5}rem;
    }
    .pb-#{$i} {
        padding-bottom: #{$i * 0.5}rem;
    }
    .pl-#{$i} {
        padding-left: #{$i * 0.5}rem;
    }
    .pr-#{$i} {
        padding-right: #{$i * 0.5}rem;
    }
}

// Display utilities
.d-none {
    display: none;
}
.d-block {
    display: block;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}
.d-flex {
    display: flex;
}
.d-grid {
    display: grid;
}

// Flex utilities
.flex-column {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}

// Special effects
.glow {
    box-shadow: var(--er-glow-gold);
}

.shadow {
    box-shadow: var(--er-shadow);
}

.rounded {
    border-radius: 8px;
}
.rounded-full {
    border-radius: 50%;
}

.border-gold {
    border: var(--er-border-gold);
}
.border-thin {
    border: 1px solid var(--er-bg-tertiary);
}

.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}

.transition {
    transition: all 0.3s ease;
}

// Animation
@keyframes flame-flicker {
    0%,
    100% {
        text-shadow: 0 0 10px var(--er-gold), 0 0 20px var(--er-gold),
            0 0 30px var(--er-gold);
    }
    50% {
        text-shadow: 0 0 5px var(--er-gold), 0 0 15px var(--er-gold),
            0 0 25px var(--er-gold);
    }
}

.flame-text {
    animation: flame-flicker 2s infinite;
}

@keyframes rune-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.rune-pulse {
    animation: rune-pulse 3s infinite;
}