/* 마스코트 컨테이너 */
#mascot-container { position: absolute; top: 60px; left: 0; right: 0; height: 40px; pointer-events: none; z-index: 9999; overflow: visible; } 

/* 말풍선 */
.speech-bubble { position: absolute; bottom: 100%; transform: translateX(-50%); margin-bottom: 8px; pointer-events: auto; z-index: 10000; background: #fff; border: 2px solid #333; border-radius: 8px; padding: 4px 10px; font-size: 11px; white-space: nowrap; box-shadow: 2px 2px 0px #333; font-family: system-ui, -apple-system, sans-serif; } 

/* 마스코트 */
.mascot { position: absolute; top: 50%; cursor: pointer; pointer-events: auto; user-select: none; image-rendering: pixelated; transition: none; } 

/* 콤보 카운터 */
.combo-counter { position: absolute; pointer-events: none; font-weight: 700; font-size: 12px; font-family: system-ui; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } 

/* 콤보 게이지 */
.combo-gauge { width: 32px; height: 5px; background: #eee; border-radius: 3px; margin-top: 2px; overflow: hidden; border: 1px solid #ddd; } 

.combo-gauge-fill { height: 100%; border-radius: 2px; transition: width 0.1s ease; } 

/* 데미지 숫자 */
.damage-number { position: absolute; color: #ff6b6b; font-weight: 700; font-size: 11px; pointer-events: none; font-family: system-ui; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); animation: damageFloat 0.6s ease-out forwards; } 

/* 애니메이션 - 아이콘용만 */
@keyframes spin { 
 from { transform: rotate(0deg); } 

 to { transform: rotate(360deg); } 
 }

@keyframes damageFloat { 
 0% { opacity: 1; transform: translateY(0); } 

 100% { opacity: 0; transform: translateY(-18px); } 
 }

@keyframes floatUp {
 0%,
 100% { transform: translateY(0); opacity: 0.5; } 

 50% { transform: translateY(-8px); opacity: 1; } 
 }

/* 폭발 파티클 */
.explosion-particle { position: absolute; pointer-events: none; font-size: 16px; z-index: 10002; } 

/* 화면 플래시 */
.screen-flash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; pointer-events: none; z-index: 99999; animation: flashAnim 0.3s ease-out forwards; } 

@keyframes flashAnim { 
 0% { opacity: 0.8; } 

 100% { opacity: 0; } 
 }

/* 화면 흔들림 */
@keyframes screenShake {
 0%,
 100% { transform: translate(0, 0); } 

 10% { transform: translate(-5px, -3px); } 

 20% { transform: translate(5px, 3px); } 

 30% { transform: translate(-4px, 2px); } 

 40% { transform: translate(4px, -2px); } 

 50% { transform: translate(-3px, 3px); } 

 60% { transform: translate(3px, -3px); } 

 70% { transform: translate(-2px, 2px); } 

 80% { transform: translate(2px, -1px); } 

 90% { transform: translate(-1px, 1px); } 
 }

.shake { animation: screenShake 0.5s ease-out; } 

/* 새 캐릭터 등장 반짝 */
.sparkle-ring { position: absolute; border: 3px solid #ffd93d; border-radius: 50%; pointer-events: none; z-index: 10001; animation: sparkleExpand 0.6s ease-out forwards; } 

@keyframes sparkleExpand { 
 0% { width: 0; height: 0; opacity: 1; border-width: 4px; } 

 100% { width: 80px; height: 80px; opacity: 0; border-width: 1px; } 
 }

/* 등장 바운스 */
@keyframes entranceBounce { 
 0% { transform: translateY(-50%) scale(0); } 

 50% { transform: translateY(-50%) scale(1.3); } 

 70% { transform: translateY(-50%) scale(0.9); } 

 100% { transform: translateY(-50%) scale(1); } 
 }