/* Color Variables */
:root {
    --midnight: #0A0E1A;
    --gold: #C79C6E;
    --dark-red: #8B0000;
    --arcane: #9D5CFF;
    --dark-stone: #1A1F2E;
    --parchment: #E0D5C7;
    --secondary: #A89D8F;
    --bronze: #4A3F2A;
}

/* Fonts */
.cinzel {
    font-family: 'Cinzel', serif;
}

.uncial {
    font-family: 'Uncial Antiqua', cursive;
}

/* Base Styles */
body {
    background-color: var(--midnight);
    color: var(--parchment);
    font-family: 'Merriweather', serif;
}

/* Glow Effects */
.glow-gold {
    text-shadow: 0 0 20px rgba(199, 156, 110, 0.6), 0 0 40px rgba(199, 156, 110, 0.4);
}

.glow-purple {
    text-shadow: 0 0 20px rgba(157, 92, 255, 0.6), 0 0 40px rgba(157, 92, 255, 0.4);
}

/* Patterns and Textures */
.rune-pattern {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(157, 92, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(199, 156, 110, 0.03) 0%, transparent 50%);
}

.bg-stone-texture {
    background: linear-gradient(135deg, var(--midnight) 0%, var(--dark-stone) 100%);
}

.bg-midnight {
    background-color: var(--midnight);
}

.bg-dark-stone {
    background-color: var(--dark-stone);
}

.text-parchment {
    color: var(--parchment);
}

.text-secondary {
    color: var(--secondary);
}

.text-gold {
    color: var(--gold);
}

.text-arcane {
    color: var(--arcane);
}

/* Stone Card */
.stone-card {
    background: linear-gradient(135deg, var(--dark-stone) 0%, #0F1419 100%);
    border: 2px solid var(--bronze);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Stone Frame */
.stone-frame {
    border: 3px solid var(--bronze);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Stat Card */
.stat-card {
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.8) 0%, rgba(15, 20, 25, 0.9) 100%);
    border: 2px solid var(--bronze);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Animations */
.pulse-glow {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Borders */
.stone-border-top,
.stone-border-bottom {
    height: 8px;
    background: linear-gradient(90deg, transparent 0%, var(--bronze) 50%, transparent 100%);
}

.stone-border-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.stone-border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.stone-divider-top {
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
    margin-bottom: 2rem;
}

/* Buttons */
.btn-angular {
    background: linear-gradient(135deg, var(--gold) 0%, var(--dark-red) 100%);
    border: 2px solid var(--gold);
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    transition: all 0.3s ease;
}

.btn-angular:hover {
    box-shadow: 0 0 30px rgba(199, 156, 110, 0.8);
    transform: translateY(-2px);
}

/* Power Card */
.power-card {
    background: linear-gradient(135deg, var(--dark-stone) 0%, #0F1419 100%);
    border: 2px solid var(--bronze);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.power-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--arcane) 50%, var(--dark-red) 100%);
}

.power-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 48px rgba(199, 156, 110, 0.4);
    border-color: var(--gold);
}

/* Progress Bar */
.progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--bronze);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--arcane) 100%);
    width: 100%;
}

/* Quest Card */
.quest-card {
    background: linear-gradient(135deg, var(--dark-stone) 0%, #0F1419 100%);
    border: 3px solid var(--bronze);
    border-radius: 12px;
    min-width: 320px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    position: relative;
}

.quest-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gold) 0%, #8B7355 100%);
    border: 3px solid var(--bronze);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--midnight);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.quest-arrow {
    font-size: 2rem;
    color: var(--gold);
    opacity: 0.5;
}

/* Accordion */
.accordion-item {
    background: linear-gradient(135deg, var(--dark-stone) 0%, #0F1419 100%);
    border: 2px solid var(--bronze);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item.active {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(199, 156, 110, 0.3);
}

.accordion-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid var(--gold);
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: rgba(199, 156, 110, 0.1);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.active {
    max-height: 500px;
}

.accordion-content-inner {
    padding: 1.5rem;
    border-top: 1px solid var(--bronze);
}

/* Testimonial Card */
.testimonial-card {
    background: linear-gradient(135deg, var(--dark-stone) 0%, #0F1419 100%);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    position: relative;
}

.testimonial-card::before,
.testimonial-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gold);
}

.testimonial-card::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.testimonial-card::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.avatar-shield {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--gold) 0%, #8B7355 100%);
    border: 3px solid var(--bronze);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--midnight);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    margin: 0 auto 1rem;
}

.stars {
    color: var(--gold);
}

/* Footer */
.disclaimer-scroll {
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.5) 0%, rgba(15, 20, 25, 0.6) 100%);
}

.rune-watermark {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.05;
}

.stone-texture-footer {
    background: linear-gradient(135deg, var(--dark-stone) 0%, var(--midnight) 100%);
}

/* Rune Bullet */
.rune-bullet {
    font-weight: bold;
    font-size: 1.2rem;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: var(--gold);
    color: var(--midnight);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .quest-card {
        min-width: 280px;
        max-width: 280px;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}