@charset "UTF-8";

html,
body {
    height: 100%;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #fff8e1;
    /* 연한 노란색 배경 */
    overflow: hidden;
    /* 페이지 전체 스크롤 막기 (게임은 한 화면) */
    user-select: none;
    margin: 0;
    overscroll-behavior: none;
    /* 페이지 전체 바운스/뒤로 스크롤 방지 */
}

#game-container {
    position: relative;
    width: 100%;
    /* 모바일 주소창 높이 변화를 고려한 실제 뷰포트 높이 */
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    /* Letterbox background */
}

canvas {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    background-color: #87CEEB;
    /* 하늘색 */
    border-radius: 10px;
    max-width: 100%;
    max-height: 100%;
}

/* UI Overlays */
.ui-layer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    /* Match canvas max width logic roughly */
    height: 100%;
    pointer-events: none;
    /* 게임 조작 방해 안하게 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 20;
    /* Ensure on top */
}

.top-bar {
    display: flex;
    justify-content: flex-end;
    /* Score is now on basket, so maybe just hearts or nothing here? User said score on basket. */
    align-items: flex-start;
}

/* Score box removed from top bar as per request to put it on basket, 
   but we might keep hearts or other info here if needed. 
   User didn't explicitly say remove top UI, just "Total score on basket". 
   I'll keep the top bar structure but maybe hide the old score box in JS or CSS if redundant.
*/

.hearts {
    font-size: 24px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
    /* Lives are being replaced by Cages logic? 
       User said "Cage 5 -> Game Over". 
       "Bomb -> Instant Die". 
       So traditional "Hearts" might be gone or represent something else.
       I will hide hearts for now as the user didn't ask for them and the new mechanic replaces them.
    */
    display: none;
}

.combo-box {
    text-align: center;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.1s;
}

.combo-box.active {
    opacity: 1;
    transform: scale(1.1);
}

.combo-text {
    font-family: 'Jua', sans-serif;
    font-size: 32px;
    color: #ffc107;
    /* Amber */
    text-shadow: 2px 2px 0 #d63384;
    /* Pink shadow */
    font-weight: bold;
    display: block;
}

/* Screens (Start, Game Over) */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.85);
    /* Semi-transparent white */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align to top */
    align-items: center;
    z-index: 30;
    /* Above UI */
    padding: 40px 20px;
    overflow-y: auto;
    /* 내부에서만 세로 스크롤 */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    overscroll-behavior: contain;
    /* 이 레이어 안에서만 스크롤/바운스 */
    pointer-events: auto;
    text-align: center;
    color: white;
}

.hidden {
    display: none !important;
}

h1,
h2 {
    font-family: 'Jua', sans-serif;
    margin-bottom: 20px;
    color: #ffc107;
}

.egg-info {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: left;
    width: 100%;
    max-width: 350px;
}

.egg-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
    margin-right: 5px;
    font-size: 12px;
    color: white;
}

.bg-1 {
    background-color: #28a745;
}

/* Green */
.bg-2 {
    background-color: #17a2b8;
}

/* Blue */
.bg-3 {
    background-color: #fd7e14;
}

/* Orange */
.bg-4 {
    background-color: #dc3545;
}

/* Red */

.btn-start {
    font-family: 'Jua', sans-serif;
    font-size: 24px;
    padding: 10px 40px;
    border-radius: 50px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Result Card Preview */
#cert-preview {
    width: 100%;
    max-width: 300px;
    border: 5px solid #fff;
    margin: 10px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: none;
}

/* Item Effect Overlay */
#effect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s;
}

.effect-magnet {
    box-shadow: inset 0 0 50px 20px rgba(0, 191, 255, 0.5);
}

.effect-bomb {
    background-color: rgba(255, 0, 0, 0.3);
}

/* Audio Toggle */
.audio-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 40;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* Certificate Grouping */
.cert-group {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 24px 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    /* Increased spacing */
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 그룹 안 제목/설명 텍스트 */
.cert-group-title {
    font-family: 'Jua', sans-serif;
    font-size: 18px;
    margin-bottom: 4px;
}

.cert-group-sub {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 12px;
}

/* 그룹 안 입력창/버튼 약간 더 또렷하게 */
.cert-group .form-control {
    background: rgba(255, 255, 255, 0.95);
    border: none;
}

.cert-group .btn {
    border-radius: 999px;
}

/* Action Buttons Group */
.action-group {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Consistent spacing between buttons */
}

.action-group .btn {
    margin: 0 !important;
    /* Reset margins to use gap */
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.action-group .btn:active {
    transform: scale(0.98);
}