/* =========================================================
   /css/minimap.css
   🗺️ 마이페이지 롤 미니맵 전용 스타일 및 애니메이션
   ========================================================= */

/* 무대 및 배경 — 라이트 UI와 맞춘 프레임, 맵 본체는 어둡게 유지 */
.scrim-minimap-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    border: 1px solid rgba(191, 219, 254, 0.75);
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(148, 163, 184, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    background-color: #0b1220;
}

.minimap-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://ddragon.leagueoflegends.com/cdn/14.5.1/img/map/map11.png');
    background-size: cover; background-position: center;
    opacity: 0.78; filter: saturate(0.92) contrast(1.02); z-index: 1;
}

/* 도트 (선수 위치 점) */
/*
.blue-spawn-glow {
    position: absolute; bottom: 6%; left: 6%; width: 35px; height: 35px; border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.9) 0%, rgba(59,130,246,0) 70%);
    z-index: 2; animation: pulse 2s infinite;
}
*/
.player-dot {
    position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; 
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.45), 0 2px 8px rgba(15, 23, 42, 0.35); z-index: 3; bottom: 8%; left: 8%; opacity: 0;
}

/* 도트 애니메이션 */
@keyframes walkTop { 0% { bottom: 8%; left: 8%; opacity: 1; } 100% { bottom: 82%; left: 15%; opacity: 1; } }
@keyframes walkJungle { 0% { bottom: 8%; left: 8%; opacity: 1; } 100% { bottom: 65%; left: 35%; opacity: 1; } }
@keyframes walkMid { 0% { bottom: 8%; left: 8%; opacity: 1; } 100% { bottom: 48%; left: 48%; opacity: 1; } }
@keyframes walkBot { 0% { bottom: 8%; left: 8%; opacity: 1; } 100% { bottom: 18%; left: 81%; opacity: 1; } } 
@keyframes walkSup { 0% { bottom: 8%; left: 8%; opacity: 1; } 100% { bottom: 18%; left: 84%; opacity: 1; } } 

.dot-top { background: #E74C3C; animation: walkTop 1.5s ease-out forwards 0.2s; }
.dot-jungle { background: #27AE60; animation: walkJungle 1.5s ease-out forwards 0.4s; }
.dot-mid { background: var(--orange-warn); animation: walkMid 1.5s ease-out forwards 0.6s; }
.dot-bot { background: var(--coral-match); animation: walkBot 1.5s ease-out forwards 0.8s; }
.dot-sup { background: #fff; animation: walkSup 1.5s ease-out forwards 1.0s; }

/* 선수 소개 카드 */
.player-intro-card {
    position: absolute;
    background: #ffffff;
    border: 1px solid rgba(191, 219, 254, 0.85);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    box-shadow: 0 12px 32px rgba(148, 163, 184, 0.18);
    opacity: 0;
    transform: scale(0.5);
    width: max-content;
}

.intro-avatar { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-dim); }
.intro-info strong { font-size: 0.95rem; color: var(--text-bright); display: block; margin-bottom: 2px; }
.intro-info p { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin: 0; }
.pos-icon { color: var(--blue-glow); margin-right: 4px; }

@keyframes cardPop { 0% { opacity: 0; transform: scale(0.5); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }

/* 카드 위치 */
.card-top { bottom: 82%; left: 18%; transform-origin: center left; animation: cardPop 0.4s ease forwards 1.7s; }
.card-jungle { bottom: 65%; left: 38%; transform-origin: center left; animation: cardPop 0.4s ease forwards 1.9s; }
.card-mid { bottom: 50%; left: 51%; transform-origin: center left; animation: cardPop 0.4s ease forwards 2.1s; }
.card-bot { bottom: 20%; right: 18%; transform-origin: center right; animation: cardPop 0.4s ease forwards 2.3s; }
.card-sup { bottom: 10%; right: 9%; transform-origin: center right; animation: cardPop 0.4s ease forwards 2.5s; }

/* 모바일 최적화 */
@media (max-width: 600px) {
    .player-intro-card { padding: 4px 10px; gap: 6px; }
    .intro-avatar { width: 24px; height: 24px; border-radius: 6px; }
    .intro-info strong { font-size: 0.8rem; }
    .intro-info p { font-size: 0.7rem; }
    .card-bot { bottom: 25%; right: 8%; } 
    .card-sup { bottom: 7%; right: 8%; } 
}