/* === 레인 배경: grame_field_bg.png 적용 === */
.lane {
    position: relative;
    height: 600px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    border-radius: .5rem;

    /* 들판 이미지 배경 */
    background: url("/img/game_field_bg.png") center bottom / cover no-repeat;
}

/* === 단어 배경: game_word_bg.png 적용 === */
/* 내려오는 단어 묶음 */
.word {
    position: absolute;
    left: 0;
    width: 70%;               /* ← 왼쪽 70% 영역만 사용 */
    display: flex;
    justify-content: space-between; /* 간격 자동 균등 */
    gap: 0.75rem;             /* 단어 간격 */
    padding: .25rem .5rem;
    font-weight: 700;
    color: #0b2b47;
}

/* 말풍선 유지 (배경 이미지 포함) */
.word > span {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding-top: 22px;
    justify-content: center;
    min-height: 85px;
    background: url("/img/game_word_bg.png") center / contain no-repeat;
    background-repeat: no-repeat;
    border: none;
    color: #0b2b47;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    transform: translateY(var(--stagger, 0px));
}

/* 정답 사라짐 애니메이션 그대로 */
.shatter {
    animation: shatter 700ms ease forwards;
    transform-origin: center;
}
@keyframes shatter {
    0%   { transform: scale(1);   opacity:1;   filter:none; }
    60%  { transform: scale(1.06) rotate(3deg); filter: blur(.6px); }
    100% { transform: scale(1.18) rotate(-6deg) translateY(-8px); opacity:0; filter: blur(3px); }
}

/* 모바일 대응 */
@media (max-width: 576px){
    .lane { height: 320px; }
    .word > span {
        min-height: 46px;
        font-size: .95rem;
    }
}

/* 인트로 오버레이(요구1) */
.intro-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.03);
}
.intro-card{
    background:#fff; border:1px solid #e9ecef; border-radius:12px; padding:16px 20px;
    box-shadow:0 10px 24px rgba(0,0,0,.08); max-width:560px;
}

/* 정답 오버레이 */
.answer-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background: rgba(13,110,253,.05);
    backdrop-filter: blur(1px);
}
.answer-overlay .overlay-card{
    background:#fff; border:1px solid #e9ecef; border-radius:12px; padding:14px 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* 스테이지 클리어 토스트 */
.stage-clear{ background:#198754; color:#fff; }
.mission-btn.active {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* === 캐릭터: lane 안에서 좌↔우 왕복 이동 === */
.game-char {
    position: absolute;
    bottom: 24px;             /* 말풍선보다 살짝 밑으로 */
    left: 10%;                /* 시작 위치: lane 가로 10% */
    transform: translateX(-50%) scaleX(1);
    width: 72px;              /* 캐릭터 크기 */
    z-index: 2;
    animation: charWalk 2.5s ease-in-out infinite;
}

/* 캐릭터 왔다갔다 + 방향 반전 */
@keyframes charWalk {
    0% {
        left: 10%;
        transform: translateX(-50%) scaleX(1);   /* 오른쪽 바라봄 */
    }
    49% {
        left: 90%;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        left: 90%;
        transform: translateX(-50%) scaleX(-1);  /* 방향 전환 */
    }
    100% {
        left: 10%;
        transform: translateX(-50%) scaleX(-1);  /* 왼쪽 바라보며 돌아오기 */
    }
}

/* === 게임/랭킹 80% / 20% 레이아웃 (lg 이상) === */
@media (min-width: 992px) {
    .game-col {
        flex: 0 0 80%;
        max-width: 80%;
    }
    .rank-col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}