/* ===== Achievement Screen (Slide 9) ===== */
.achievement-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    background: radial-gradient(circle at center, #1a1f3a 0%, #0a0e27 100%);
}

/* 빛나는 광선 효과 - 강화 */
.achievement-rays {
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.15) 30deg,
        rgba(255, 215, 0, 0.3) 45deg,
        rgba(255, 215, 0, 0.15) 60deg,
        transparent 90deg,
        rgba(255, 107, 53, 0.15) 120deg,
        rgba(255, 107, 53, 0.3) 135deg,
        rgba(255, 107, 53, 0.15) 150deg,
        transparent 180deg,
        rgba(255, 215, 0, 0.15) 210deg,
        rgba(255, 215, 0, 0.3) 225deg,
        rgba(255, 215, 0, 0.15) 240deg,
        transparent 270deg,
        rgba(255, 107, 53, 0.15) 300deg,
        rgba(255, 107, 53, 0.3) 315deg,
        rgba(255, 107, 53, 0.15) 330deg,
        transparent 360deg
    );
    animation: rotateRays 15s linear infinite;
    filter: blur(2px);
}

@keyframes rotateRays {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 추가 광선 레이어 */
.achievement-rays::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 45deg,
        transparent 0deg,
        rgba(157, 78, 237, 0.2) 45deg,
        transparent 90deg,
        rgba(157, 78, 237, 0.2) 135deg,
        transparent 180deg,
        rgba(157, 78, 237, 0.2) 225deg,
        transparent 270deg,
        rgba(157, 78, 237, 0.2) 315deg,
        transparent 360deg
    );
    animation: rotateRaysReverse 20s linear infinite reverse;
}

@keyframes rotateRaysReverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* 파티클 효과 - 강화 */
.achievement-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(3px 3px at 20% 30%, rgba(255, 215, 0, 1), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 107, 53, 0.9), transparent),
        radial-gradient(4px 4px at 50% 50%, rgba(255, 215, 0, 1), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(3px 3px at 90% 60%, rgba(255, 107, 53, 1), transparent),
        radial-gradient(4px 4px at 30% 80%, rgba(255, 215, 0, 1), transparent),
        radial-gradient(2px 2px at 15% 90%, rgba(157, 78, 237, 0.9), transparent),
        radial-gradient(3px 3px at 85% 85%, rgba(157, 78, 237, 1), transparent),
        radial-gradient(2px 2px at 40% 20%, rgba(255, 107, 53, 0.9), transparent),
        radial-gradient(3px 3px at 70% 40%, rgba(255, 215, 0, 1), transparent);
    background-size: 200% 200%;
    animation: particleFloat 12s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { 
        background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 20% 80%, 70% 30%, 10% 90%, 90% 10%, 40% 60%, 60% 40%; 
        opacity: 1;
    }
    50% { 
        background-position: 100% 100%, 0% 0%, 30% 70%, 20% 80%, 80% 20%, 30% 70%, 90% 10%, 10% 90%, 60% 40%, 40% 60%; 
        opacity: 0.8;
    }
}

/* 반짝이는 별 효과 추가 */
.achievement-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color);
    animation: sparkleFloat 3s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.5s; }
.sparkle:nth-child(3) { top: 70%; left: 10%; animation-delay: 1s; }
.sparkle:nth-child(4) { top: 80%; left: 85%; animation-delay: 1.5s; }
.sparkle:nth-child(5) { top: 30%; left: 5%; animation-delay: 2s; }
.sparkle:nth-child(6) { top: 60%; right: 5%; animation-delay: 2.5s; }
.sparkle:nth-child(7) { top: 15%; left: 50%; animation-delay: 0.3s; }
.sparkle:nth-child(8) { top: 85%; left: 50%; animation-delay: 1.3s; }

@keyframes sparkleFloat {
    0%, 100% { 
        transform: translateY(0) scale(0); 
        opacity: 0;
    }
    10% {
        transform: translateY(-20px) scale(1.5);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px) scale(1);
        opacity: 0.8;
    }
    90% {
        transform: translateY(-80px) scale(0.5);
        opacity: 0.3;
    }
}

.achievement-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1200px;
    padding: 20px;
}

.achievement-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 32px;
    color: var(--primary-color);
    text-shadow: 
        0 0 10px var(--primary-color),
        0 0 20px var(--primary-color),
        0 0 30px var(--primary-color),
        0 0 40px var(--secondary-color);
    margin-bottom: 30px;
    animation: titlePulseGlow 2s ease-in-out infinite;
}

@keyframes titlePulseGlow {
    0%, 100% {
        transform: scale(1);
        text-shadow: 
            0 0 10px var(--primary-color),
            0 0 20px var(--primary-color),
            0 0 30px var(--primary-color),
            0 0 40px var(--secondary-color);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 
            0 0 20px var(--primary-color),
            0 0 30px var(--primary-color),
            0 0 40px var(--primary-color),
            0 0 50px var(--secondary-color),
            0 0 60px var(--secondary-color);
    }
}

/* 마스터 쇼케이스 */
.master-showcase {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto 30px;
}

/* 회전하는 링 - 강화 */
.rotating-rings {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 4px solid;
    box-shadow: 0 0 20px currentColor;
}

.ring-1 {
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-color: rgba(255, 215, 0, 0.8);
    animation: ringRotate1 6s linear infinite;
    filter: blur(0.5px);
}

.ring-2 {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-color: rgba(255, 107, 53, 0.6);
    animation: ringRotate2 9s linear infinite reverse;
    filter: blur(0.5px);
}

.ring-3 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-color: rgba(157, 78, 237, 0.5);
    animation: ringRotate3 12s linear infinite;
    filter: blur(0.5px);
}

@keyframes ringRotate1 {
    0% { 
        transform: rotate(0deg) scale(1); 
        opacity: 0.8; 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
    50% { 
        transform: rotate(180deg) scale(1.1); 
        opacity: 1; 
        box-shadow: 0 0 40px rgba(255, 215, 0, 1);
    }
    100% { 
        transform: rotate(360deg) scale(1); 
        opacity: 0.8; 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

@keyframes ringRotate2 {
    0% { 
        transform: rotate(0deg) scale(1); 
        opacity: 0.6; 
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    }
    50% { 
        transform: rotate(-180deg) scale(1.15); 
        opacity: 0.9; 
        box-shadow: 0 0 40px rgba(255, 107, 53, 0.9);
    }
    100% { 
        transform: rotate(-360deg) scale(1); 
        opacity: 0.6; 
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    }
}

@keyframes ringRotate3 {
    0% { 
        transform: rotate(0deg) scale(1); 
        opacity: 0.5; 
        box-shadow: 0 0 20px rgba(157, 78, 237, 0.5);
    }
    50% { 
        transform: rotate(180deg) scale(1.2); 
        opacity: 0.8; 
        box-shadow: 0 0 40px rgba(157, 78, 237, 0.8);
    }
    100% { 
        transform: rotate(360deg) scale(1); 
        opacity: 0.5; 
        box-shadow: 0 0 20px rgba(157, 78, 237, 0.5);
    }
}

/* 캐릭터 컨테이너 */
.character-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    animation: charFloat 4s ease-in-out infinite;
}

@keyframes charFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
    25% { transform: translate(-50%, -50%) translateY(-20px) rotate(5deg); }
    50% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
    75% { transform: translate(-50%, -50%) translateY(-20px) rotate(-5deg); }
}

.master-char {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 50px rgba(255, 107, 53, 0.6));
    animation: charGlow 2s ease-in-out infinite;
}

@keyframes charGlow {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
                drop-shadow(0 0 50px rgba(255, 107, 53, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1))
                drop-shadow(0 0 70px rgba(255, 107, 53, 0.8))
                drop-shadow(0 0 90px rgba(255, 215, 0, 0.6));
    }
}

.char-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
}

/* 반짝이는 별 */
.sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sparkle {
    position: absolute;
    font-size: 30px;
    animation: sparkleFloat 3s ease-in-out infinite;
}

.sparkle:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    top: 20%;
    right: 15%;
    animation-delay: 0.5s;
}

.sparkle:nth-child(3) {
    bottom: 25%;
    left: 15%;
    animation-delay: 1s;
}

.sparkle:nth-child(4) {
    bottom: 15%;
    right: 10%;
    animation-delay: 1.5s;
}

.sparkle:nth-child(5) {
    top: 50%;
    left: 5%;
    animation-delay: 2s;
}

.sparkle:nth-child(6) {
    top: 50%;
    right: 5%;
    animation-delay: 2.5s;
}

@keyframes sparkleFloat {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-20px) scale(1.2) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(0) scale(0.8) rotate(180deg);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-20px) scale(1.2) rotate(270deg);
        opacity: 1;
    }
}

/* 업적 배지들 - 강화 */
.achievement-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 35px;
}

.badge {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 31, 58, 0.95), rgba(42, 47, 74, 0.95));
    border: 4px solid var(--primary-color);
    border-radius: 20px;
    padding: 18px 28px;
    min-width: 130px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 215, 0, 0.1);
    animation: badgePop 0.8s ease backwards, badgeGlow 2s ease-in-out infinite;
    overflow: hidden;
}

.badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 215, 0, 0.3) 50%,
        transparent 70%
    );
    animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.badge-level { animation-delay: 0.2s; }
.badge-skill { animation-delay: 0.4s; }
.badge-efficiency { animation-delay: 0.6s; }

@keyframes badgePop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.9), inset 0 0 30px rgba(255, 215, 0, 0.2);
    }
}

.badge-icon {
    position: relative;
    z-index: 1;
    font-size: 40px;
    margin-bottom: 10px;
    animation: iconBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

@keyframes iconBounce {
    0%, 100% { 
        transform: translateY(0) scale(1); 
    }
    50% { 
        transform: translateY(-15px) scale(1.1); 
    }
}

.badge-label {
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-value {
    position: relative;
    z-index: 1;
    font-family: 'Press Start 2P', cursive;
    font-size: 24px;
    color: var(--primary-color);
    text-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--primary-color);
    animation: valueFlicker 3s ease-in-out infinite;
}

@keyframes valueFlicker {
    0%, 100% {
        text-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--primary-color);
    }
    50% {
        text-shadow: 0 0 25px var(--primary-color), 0 0 40px var(--primary-color), 0 0 50px var(--secondary-color);
    }
}

/* 스킬 체인 */
.skills-chain {
    background: rgba(26, 31, 58, 0.8);
    border: 3px solid var(--primary-color);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}

.chain-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-shadow: 0 0 10px var(--primary-color);
}

.chain-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.chain-skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: chainFadeIn 0.8s ease backwards;
}

.chain-skill:nth-child(1) { animation-delay: 0.2s; }
.chain-skill:nth-child(3) { animation-delay: 0.4s; }
.chain-skill:nth-child(5) { animation-delay: 0.6s; }
.chain-skill:nth-child(7) { animation-delay: 0.8s; }

@keyframes chainFadeIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.chain-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 5px 20px rgba(255, 215, 0, 0.6));
    transition: all 0.3s ease;
}

.chain-logo:hover {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.9));
}

.chain-name {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 600;
}

.chain-arrow {
    font-size: 32px;
    color: var(--primary-color);
    animation: arrowPulse 1.5s ease-in-out infinite;
}

/* 반응형 */
@media (max-width: 768px) {
    .achievement-title {
        font-size: 24px;
        margin-bottom: 40px;
    }
    
    .master-showcase {
        width: 300px;
        height: 300px;
        margin-bottom: 40px;
    }
    
    .character-container {
        width: 250px;
        height: 250px;
    }
    
    .achievement-badges {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .badge {
        padding: 20px 30px;
        min-width: 120px;
    }
    
    .badge-icon {
        font-size: 36px;
    }
    
    .badge-value {
        font-size: 20px;
    }
    
    .skills-chain {
        padding: 25px;
    }
    
    .chain-icons {
        flex-direction: column;
        gap: 15px;
    }
    
    .chain-logo {
        width: 60px;
        height: 60px;
    }
    
    .chain-arrow {
        transform: rotate(90deg);
        font-size: 24px;
    }
}