/* DDDungeon Logo Styles - Dark Medieval / Arcane Branding */
/* Fluid scaling with clamp() - first use of clamp() in this project */
/* Min: 24px icon at 320px viewport, Max: 42px at desktop */

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    /* Prevent collapse if something goes wrong */
    min-width: 48px;
}

.logo:hover {
    transform: scale(1.03) translateY(-1px);
}

.logo:hover .logo-icon {
    filter: drop-shadow(0 0 10px rgba(211, 47, 47, 0.6)) drop-shadow(0 0 4px rgba(201, 166, 105, 0.4));
}

/* Fluid icon scaling: 24px at 320px → 42px at desktop */
.logo-icon {
    height: clamp(24px, 5vw + 8px, 42px);
    width: clamp(24px, 5vw + 8px, 42px);
    transition: filter 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.logo-text {
    font-family: var(--font-display); /* Use theme variable instead of hardcoded font */
    font-size: clamp(1.1rem, 2.5vw + 0.3rem, 1.8rem);
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: baseline;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.8)); /* Base structural shadow */
}

/* 3D Gold Metallic effect with Arcane Blood glow for the "DDD" */
.logo-accent {
    color: var(--clr-accent); /* Fallback */
    background: linear-gradient(to bottom, #FFF2D8 0%, #C9A669 35%, #8F713D 65%, #4A3515 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0px 0px 12px rgba(139, 0, 0, 0.7); /* Blood-red arcane aura */
    font-size: clamp(1.2rem, 3vw + 0.3rem, 2.2rem);
    position: relative;
    top: 2px;
}

/* Cold iron/silver styling for the rest of the text */
.logo-base {
    color: #E2E8F0;
    background: linear-gradient(to bottom, #FFFFFF 0%, #A0AEC0 50%, #4A5568 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1.5px;
}

/* === Adaptive Branding: Hide "ungeon" on very small screens === */
/* At ≤480px, only the "DDD" shield icon and "DDD" accent text remain visible */
/* This follows mobile game best practices (e.g., Soda Dungeon, Clash of Clans) */
@media (max-width: 480px) {
    .logo-base {
        display: none;
    }
}