@import url('https://googleapis.com');

:root {
    --gold: #d4af37;
    --amber: #ffbf00;
    --parchment: #fdf5e6;
    --bg-sunny: #2c1e12;
    --fire: #ff4d00;
    --mana: #4fffe0;
}

body, html {
    margin: 0; padding: 0; min-height: 100vh;
    background: radial-gradient(circle at center, #4a3520 0%, #2c1e12 100%);
    color: var(--parchment);
    font-family: 'MedievalSharp', sans-serif;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow-x: hidden;
}

.sanctum-container {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; max-width: 800px; padding: 2rem; z-index: 5;
}

.arch-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    background: linear-gradient(to bottom, #fff, var(--amber), var(--gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px var(--gold));
    margin: 1rem 0;
}

.archmage-frame {
    width: 250px; height: 250px; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    border: 3px solid var(--gold); padding: 8px; margin-bottom: 2rem;
    box-shadow: 0 0 30px var(--gold); background: var(--gold);
}
.archmage-frame img {
    width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}

/* 4. BOTTONE UNIVERSALE */
.arch-btn {
    display: inline-block; padding: 1.2rem 3.5rem;
    background: linear-gradient(135deg, #8b4513, #5d2e0a);
    color: var(--amber); text-decoration: none;
    border: 2px solid var(--gold); border-radius: 30px;
    transition: 0.3s; cursor: pointer; text-transform: uppercase;
}
.arch-btn:hover {
    background: var(--gold); color: #2c1e12; box-shadow: 0 0 20px var(--amber);
}

.fire-border { box-shadow: 0 0 15px var(--fire) !important; border: 2px solid var(--fire) !important; animation: pulse-f 1.5s infinite; }
@keyframes pulse-f { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }

.spectral-border { box-shadow: 0 0 15px var(--mana) !important; border: 2px solid var(--mana) !important; animation: pulse-s 2s infinite; }
@keyframes pulse-s { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

#loading-overlay { position: fixed; inset: 0; background: #2c1e12; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s; }
.loading-container { width: 280px; height: 20px; border: 2px solid var(--gold); background: #1a120b; padding: 2px; }
#loading-bar { height: 100%; background: var(--gold); transition: width 0.2s; }
#loading-text { margin-top: 10px; color: var(--gold); }

.spark { position: fixed; width: 3px; height: 3px; background: var(--gold); border-radius: 50%; z-index: 1; transition: transform 6s linear, opacity 2s; }
.corner { position: fixed; width: 50px; height: 50px; border: 2px solid var(--gold); opacity: 0.3; z-index: 10; pointer-events: none; }
.top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.bottom-left { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.bottom-right { bottom: 20px; right: 20px; border-left: none; border-top: none; }