body { background-color: #0f172a; color: #e2e8f0; }

/* Custom Animations for Game Feel */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes attack {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(10px) scale(1.1); }
}
.animate-attack { animation: attack 1.5s ease-in-out infinite; }

@keyframes struggle {
    0%, 100% { transform: rotate(-5deg) scale(0.9); color: #ef4444; }
    50% { transform: rotate(5deg) scale(0.9); color: #f87171; }
}
.animate-struggle { animation: struggle 0.5s ease-in-out infinite; }

@keyframes damage {
    0% { filter: brightness(1) drop-shadow(0 0 0 red); transform: scale(1); }
    20% { filter: brightness(3) drop-shadow(0 0 40px white); transform: scale(0.85) rotate(-10deg); }
    100% { filter: brightness(1) drop-shadow(0 0 0 red); transform: scale(1); }
}
.taking-damage { animation: damage 0.4s ease-out; }

/* --- Dynamic Action Animations --- */
@keyframes combat {
    0%, 100% { transform: translateX(0) scale(1) rotate(0deg); }
    25% { transform: translateX(15px) scale(1.1) rotate(10deg); }
    50% { transform: translateX(5px) scale(1) rotate(-5deg); }
    75% { transform: translateX(20px) scale(1.15) rotate(15deg); }
}
.animate-combat { animation: combat 1s ease-in-out infinite; }

/* 전사 돌진 & 검 휘두르기 (괴물에게 바짝 붙어서 타격) */
@keyframes melee-dash {
    0%, 100% { transform: translateX(0); z-index: 10; }
    15% { transform: translateX(80px) translateY(-10px) rotate(15deg) scale(1.2); z-index: 40; }
    30% { transform: translateX(0) rotate(0deg) scale(1); z-index: 10; }
}
.animate-melee { animation: melee-dash 1.5s ease-in-out infinite; }

@keyframes weapon-swing {
    0%, 100% { transform: rotate(-60deg) translateY(0); opacity: 0; }
    10% { opacity: 1; }
    15% { transform: rotate(90deg) translateY(20px) translateX(20px) scale(1.5); opacity: 1; filter: drop-shadow(0 0 10px white); }
    20% { opacity: 0; }
}
.animate-weapon { animation: weapon-swing 1.5s ease-in-out infinite; transform-origin: bottom left; }

/* 궁수 화살 발사 (괴물 위치까지 날아가서 꽂힘) */
@keyframes shoot-arrow {
    0% { transform: translate(10px, -15px); opacity: 0; }
    5% { opacity: 1; }
    20% { transform: translate(180px, -5px); opacity: 1; }
    25% { transform: translate(180px, -5px); opacity: 0; }
    100% { transform: translate(180px, -5px); opacity: 0; }
}
.animate-arrow { animation: shoot-arrow 2s linear infinite; }

/* 마법사 메테오 발사 (괴물 위치에서 폭발) */
@keyframes shoot-magic {
    0% { transform: translate(20px, -20px) scale(0.5) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    30% { transform: translate(180px, 10px) scale(3) rotate(180deg); opacity: 1; filter: brightness(2); }
    35% { transform: translate(180px, 10px) scale(4) rotate(220deg); opacity: 0; filter: brightness(3); }
    100% { transform: translate(180px, 10px); opacity: 0; }
}
.animate-magic { animation: shoot-magic 2.5s ease-in infinite; }

/* 힐러 치유 (제자리에서 하트 상승) */
@keyframes cast-heal {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-20px) scale(1.2); opacity: 1; }
    80% { transform: translateY(-40px) scale(1); opacity: 0; }
    100% { transform: translateY(-40px) scale(1); opacity: 0; }
}
.animate-heal { animation: cast-heal 2s ease-out infinite; }

/* 포병 폭탄 발사 */
@keyframes shoot-cannon {
    0% { transform: translate(20px, 0) scale(0.8); opacity: 0; }
    10% { opacity: 1; }
    30% { transform: translate(160px, -10px) scale(1.5); opacity: 1; filter: brightness(2) drop-shadow(0 0 10px orange); }
    35% { transform: translate(160px, -10px) scale(3); opacity: 0; filter: brightness(3); }
    100% { transform: translate(160px, -10px); opacity: 0; }
}
.animate-cannon { animation: shoot-cannon 3s ease-in infinite; }

/* 괴물 애니메이션 상하 점프 현상 제거 (transform y-50% 의존성 제거) */
@keyframes monster-idle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}
.animate-monster-idle { animation: monster-idle 2.5s ease-in-out infinite; }

/* 괴물 상시 피격 반응 (공격받는 중) */
@keyframes monster-hit {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 10px rgba(239,68,68,0.5)); }
    25% { transform: translateY(-5px) translateX(3px) rotate(2deg) scale(0.98); filter: brightness(1.2) drop-shadow(0 0 20px rgba(239,68,68,0.8)); }
    50% { transform: translateY(2px) translateX(-2px) rotate(-2deg) scale(1.02); filter: brightness(0.9) drop-shadow(0 0 10px rgba(239,68,68,0.5)); }
    75% { transform: translateY(-3px) translateX(2px) rotate(1deg) scale(0.99); filter: brightness(1.1) drop-shadow(0 0 15px rgba(239,68,68,0.7)); }
}
.animate-monster-hit { animation: monster-hit 0.5s ease-in-out infinite; }

@keyframes struggle-combat {
    0%, 100% { transform: translateX(0) rotate(-10deg) scale(0.9); color: #ef4444; }
    50% { transform: translateX(10px) rotate(10deg) scale(0.95); color: #f87171; }
}
.animate-struggle-combat { animation: struggle-combat 0.6s ease-in-out infinite; }

/* 승리 환호 애니메이션 */
@keyframes cheer {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}
.animate-cheer { animation: cheer 0.6s ease-in-out infinite; }

/* 죽은 몬스터 회색 굳어짐 효과 (크기/위치 변경 없음) */
@keyframes turn-stone {
    0% { filter: grayscale(0%) opacity(100%); }
    100% { filter: grayscale(100%) opacity(40%); }
}
.monster-dead { animation: turn-stone 1s ease-out forwards !important; }

/* COMPLETED 도장 쾅 효과 */
@keyframes stamp-in {
    0% { transform: scale(3) rotate(-20deg); opacity: 0; }
    70% { transform: scale(0.9) rotate(-12deg); opacity: 1; }
    100% { transform: scale(1) rotate(-12deg); opacity: 1; }
}
.stamp-in { animation: stamp-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* Mobile Scrollbar hiding for Nav */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

.glass-panel { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(10px); border: 1px solid #334155; }

/* --- Responsive Adjustments & Fixes --- */
.calendar-grid {
    display: grid !important;
    grid-template-cols: repeat(7, 1fr) !important;
    gap: 2px;
    width: 100%;
}

.calendar-day-box {
    min-height: 50px;
    aspect-ratio: 1 / 1.1;
    padding: 2px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.6);
}

@media (min-width: 768px) {
    .calendar-day-box {
        min-height: 80px;
        aspect-ratio: 1 / 1;
        padding: 4px !important;
    }
}

.calendar-marker-text {
    font-size: 7px !important;
    line-height: 1.1;
    padding: 1px 2px !important;
    margin-top: 1px !important;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .calendar-marker-text {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
}

/* Header fix */
.calendar-header-title {
    white-space: nowrap;
}

/* Ensure no text overflow for HP bars */
.hp-bar-text {
    white-space: nowrap;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}


/* Fix for battle/daily panels clipping on wide screens */
.scroll-container-nice {
    scrollbar-width: thin;
    scrollbar-color: #475569 #1e293b;
}
.scroll-container-nice::-webkit-scrollbar { width: 6px; }
.scroll-container-nice::-webkit-scrollbar-track { background: #1e293b; }
.scroll-container-nice::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }

/* --- Deadline Pressure: Red Fog & Siren --- */
@keyframes red-fog-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}
.red-fog {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, rgba(15, 23, 42, 0) 70%);
    pointer-events: none;
    z-index: 5;
    animation: red-fog-pulse 4s ease-in-out infinite;
}

@keyframes siren-pulse {
    0%, 100% { box-shadow: inset 0 0 20px rgba(239, 68, 68, 0); }
    50% { box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.6); }
}
.siren-active {
    animation: siren-pulse 2s infinite;
}

/* --- Day/Night Cycle --- */
.bg-night {
    background-color: #020617 !important; /* Extremely dark blue/black */
    background-image: radial-gradient(circle at 50% 100%, rgba(245, 158, 11, 0.15) 0%, transparent 50%), url('https://www.transparenttextures.com/patterns/stardust.png') !important;
}

@keyframes campfire-glow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(245, 158, 11, 0.7)); }
}
.campfire-active {
    animation: campfire-glow 3s infinite;
}

.night-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.6);
    pointer-events: none;
    z-index: 5;
}

/* Fire particles for campfire */
.fire-particle {
    position: absolute;
    bottom: 20%;
    left: 20%;
    width: 4px;
    height: 4px;
    background: #f59e0b;
    border-radius: 50%;
    animation: fire-rise 2s infinite;
    opacity: 0;
}

@keyframes fire-rise {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100px) scale(0); opacity: 0; }
}