/* ================================================
   Claude Code Spire - Map Styles
   Fantasy Theme
   ================================================ */

/* Map Container */
.map-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 140px);
    overflow: auto;
    padding: var(--spacing-lg);
    /* Inner shadow for depth */
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.3);
}

.map-wrapper {
    width: 100%;
    height: 100%;
    min-width: 900px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Decorative compass in corner */
.map-wrapper::before {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    background: url('../assets/icons/compass.png') no-repeat center;
    background-size: contain;
    opacity: 0.3;
    pointer-events: none;
}

.spire-map {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* ================================================
   Path Styles - Ink-drawn map roads
   ================================================ */
.path-line {
    fill: none;
    stroke: #6b5a48;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--transition-normal), stroke-width var(--transition-fast), opacity var(--transition-normal);
    opacity: 0.5;
}

.path-line.available {
    stroke: #8b7355;
    stroke-width: 4;
    stroke-dasharray: 10 6;
    opacity: 0.8;
    animation: pathDash 20s linear infinite;
}

@keyframes pathDash {
    to {
        stroke-dashoffset: -500;
    }
}

.path-line.completed {
    stroke: #5a9e3e;
    stroke-width: 5;
    stroke-dasharray: none;
    opacity: 1;
}

.path-line.locked {
    stroke: #5a4a3a;
    opacity: 0.3;
    stroke-dasharray: 4 6;
}

/* ================================================
   Node Styles - Fantasy map markers
   ================================================ */
.feature-node {
    cursor: pointer;
    filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.4));
}

.feature-node.locked {
    cursor: not-allowed;
    filter: saturate(0.3) brightness(0.7);
}

/* Hover effect - use filter for glow instead of transform to avoid SVG conflicts */
.feature-node:hover:not(.locked) {
    filter: drop-shadow(0 0 8px rgba(212, 160, 23, 0.6)) brightness(1.1);
}

.feature-node:hover:not(.locked) .node-circle {
    stroke-width: 6;
}

/* Node Circle - Leather/wood medallion style */
.node-circle {
    fill: #c4a882;
    stroke: #5a4428;
    stroke-width: 4;
    transition: all var(--transition-normal);
}

/* Locked state - darker for better contrast */
.feature-node.locked .node-circle {
    fill: #6b5a48;
    stroke: #3d2e1f;
    stroke-width: 5;
}

/* Available state - glowing based on difficulty */
.feature-node.available .node-circle {
    fill: #e8dcc4;
    stroke: #d4a017;
    stroke-width: 5;
}

.feature-node.available.beginner .node-circle {
    stroke: #5a9e3e;
    fill: #d4e8c4;
}
.feature-node.available.intermediate .node-circle {
    stroke: #c9a227;
    fill: #f0e6c8;
}
.feature-node.available.advanced .node-circle {
    stroke: #c45c3e;
    fill: #f0d8c8;
}
.feature-node.available.expert .node-circle {
    stroke: #8b2a2a;
    fill: #e8d0d0;
}

/* Completed state - vibrant green */
.feature-node.completed .node-circle {
    fill: #5a9e3e;
    stroke: #2d5016;
    stroke-width: 5;
}

/* Skipped state */
.feature-node.skipped .node-circle {
    fill: #a89880;
    stroke: #6b5a48;
    stroke-dasharray: 6 4;
}

/* Node Icon */
.node-icon {
    font-size: 24px;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    transition: transform var(--transition-fast);
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.feature-node.completed .node-icon {
    filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

/* Node Label - Hand-written map style */
.node-label {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 12px;
    font-weight: 600;
    fill: #2a1f14;
    text-anchor: middle;
    pointer-events: none;
    /* Strong outline for readability on parchment */
    paint-order: stroke fill;
    stroke: #f4e4bc;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-node.locked .node-label {
    fill: #5a4a3a;
    stroke: #c4a882;
    opacity: 0.7;
}

.feature-node:hover .node-label {
    fill: #1a0f08;
}

/* Status Indicator */
.status-indicator {
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
}

.status-indicator.completed {
    fill: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.status-indicator.skipped {
    fill: var(--parchment-dark);
}

/* ================================================
   Node Entrance Animation
   Note: SVG uses transform attribute for positioning,
   so we only animate opacity to avoid conflicts
   ================================================ */
.feature-node {
    animation: nodeEnter 0.4s ease-out both;
}

@keyframes nodeEnter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Stagger by row */
.feature-node[data-row="0"] { animation-delay: 0ms; }
.feature-node[data-row="1"] { animation-delay: 60ms; }
.feature-node[data-row="2"] { animation-delay: 120ms; }
.feature-node[data-row="3"] { animation-delay: 180ms; }
.feature-node[data-row="4"] { animation-delay: 240ms; }
.feature-node[data-row="5"] { animation-delay: 300ms; }

/* ================================================
   Available Node Glow Animation - Subtle candle flicker
   ================================================ */
.feature-node.available {
    animation: candleGlow 2.5s ease-in-out infinite;
}

@keyframes candleGlow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(212, 160, 23, 0.7));
    }
}

/* ================================================
   Completion Celebration - Victory flourish
   ================================================ */
.feature-node.just-completed {
    animation: victoryFlourish 0.6s ease-out !important;
}

@keyframes victoryFlourish {
    0% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    25% { filter: brightness(1.5) drop-shadow(0 0 20px rgba(90, 158, 62, 0.8)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 30px rgba(90, 158, 62, 1)); }
    75% { filter: brightness(1.2) drop-shadow(0 0 15px rgba(90, 158, 62, 0.6)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* ================================================
   Path Drawing Animation - Ink spreading
   ================================================ */
.path-line.animate {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: inkSpread 2s ease-out forwards;
}

@keyframes inkSpread {
    to {
        stroke-dashoffset: 0;
    }
}

/* ================================================
   Floor Transition - Page turn effect
   ================================================ */
.map-container.transitioning .spire-map {
    animation: pageTurn 0.5s ease-in-out;
}

@keyframes pageTurn {
    0% { opacity: 1; transform: translateY(0) rotateX(0); }
    40% { opacity: 0; transform: translateY(-20px) rotateX(10deg); }
    60% { opacity: 0; transform: translateY(20px) rotateX(-10deg); }
    100% { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ================================================
   Node Tooltip - Scroll/parchment style
   ================================================ */
.node-tooltip {
    position: fixed;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(180deg,
        var(--parchment-light) 0%,
        var(--parchment-mid) 100%
    );
    border: 3px solid var(--wood-dark);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 0.95rem;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity var(--transition-fast);
    z-index: 200;
    max-width: 240px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.node-tooltip.visible {
    opacity: 1;
}

.tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wood-dark);
}

.tooltip-icon {
    font-size: 1.2rem;
}

.tooltip-status {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--parchment-shadow);
}

.tooltip-status.completed {
    color: var(--color-beginner);
    font-weight: 600;
}

.tooltip-status.available {
    color: var(--color-intermediate);
    font-weight: 600;
}

.tooltip-status.skipped {
    color: var(--parchment-shadow);
}

/* ================================================
   Particle Effects - Golden sparkles
   ================================================ */
.particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 1s ease-out forwards;
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0) rotate(180deg);
    }
}

/* Particle colors - warm fantasy tones */
.particle.beginner {
    background: radial-gradient(circle, #8fd96a 0%, var(--color-beginner) 100%);
    box-shadow: 0 0 6px var(--color-beginner);
}
.particle.intermediate {
    background: radial-gradient(circle, #ffe066 0%, var(--color-intermediate) 100%);
    box-shadow: 0 0 6px var(--color-intermediate);
}
.particle.advanced {
    background: radial-gradient(circle, #ff9966 0%, var(--color-advanced) 100%);
    box-shadow: 0 0 6px var(--color-advanced);
}
.particle.expert {
    background: radial-gradient(circle, #ff6666 0%, var(--color-expert) 100%);
    box-shadow: 0 0 6px var(--color-expert);
}

/* ================================================
   Start Node Indicator
   ================================================ */
.start-indicator {
    fill: var(--accent-gold);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}