body { 
    /* 배경 이미지 설정 */
    background-image: url('../images/backgrounds/main_background.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    
    /* 기본 설정 */
    background-color: #3e3e3e; /* 이미지 로드 실패 시 배경색 */
    color: #f0f0f0; 
    margin: 0; 
    padding: 10px; 
    font-family: sans-serif; 
    overflow-y: auto; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 게임 컨테이너 투명도 및 블러 효과 */
.game-container {
    width:100%; 
    max-width:130px;
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); /* 사파리 호환성 */
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* 그림자 추가로 입체감 부여 */
}
nav { width:100%; max-width:880px; background:rgba(0,0,0,0.4); padding:10px; text-align:center; border-radius:12px; margin: 0 auto 15px; }
nav a { color:#ecf0f1; text-decoration:none; padding:10px 18px; margin:0 6px; border-radius:8px; display: inline-block; }
nav a:hover { background:#555; }

.board-wrapper { width:95vw; max-width:750px; margin:0 auto; position:relative; cursor:crosshair; }

canvas { background: #e8d5b700; border:1px solid #4a2f1f00; border-radius:8px; box-shadow:0 15px 25px rgba(0,0,0,0.6); display:block; width: 100%; height: auto; touch-action: none; }

.player-box { padding:10px 18px; border:3px solid transparent; border-radius:12px; text-align:center; min-width:140px; transition: all 0.3s; }
.player-box.active-turn { border-color:#ffc107; background:rgba(255,193,7,0.15); font-weight:bold; box-shadow:0 0 12px #ffc107; }
.game-status { margin-top:18px; font-size:1.25em; font-weight:bold; color:#ffc107; text-align:center; }
#gameOverOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; z-index:10001; }
#gameOverBox { background:#fff; color:#333; padding:45px 35px; border-radius:16px; text-align:center; max-width:90%; }
#rematchBtn { padding: 10px 25px; background: #27ae60; color: white; border: none; border-radius: 8px; cursor: pointer; margin-top: 15px; }

.streak-bonus-display { 
    display: none; 
    width: 100%; 
    max-width: 300px; 
    margin: 5px auto 15px auto; 
    padding: 10px; 
    background: linear-gradient(45deg, #2c3e50, #4a688a); 
    border: 3px solid #f1c40f; 
    border-radius: 12px; 
    text-align: center; 
    font-size: 1.1em; 
    font-weight: bold; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.streak-bonus-display .label { font-size: 0.7em; color: #f1c40f; display: inline; }
.streak-bonus-display .value { font-size: 0.7em; margin-top: 1px; display: inline; }
/* 아이템 설명 가이드 스타일 보완 */
.item-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 95vw;
    max-width: 880px;
    margin: 10px auto 10px auto; /* 하단 여백을 넉넉히(40px) 줍니다 */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.legend-item {
    font-size: 0.95em;
    color: #dfe6e9;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px; /* 아이템들이 너무 뭉치지 않게 설정 */
}

.legend-item span {
    font-size: 1.5em;
}

/* 모바일 대응: 화면이 좁을 경우 세로로 정렬 */
@media (max-width: 600px) {
    .item-legend {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20%;
    }
}

/* 화면 흔들기 애니메이션 */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* 애니메이션을 적용할 클래스 */
.shake-canvas {
    animation: shake 0.5s; /* 0.5초 동안 흔들림 */
    animation-iteration-count: 1;
}

/* 알까기 아이템 전용 스프라이트 스타일 */
/* 아이템 공통 스타일 */
/* 아이콘 기본 스타일 (사용자 제공 좌표 활용) */
/* [수정] 아이템 객체에 그림자 필터 추가 */
.alkkagi-item-obj {
    position: absolute;
    background-image: url('../images/effects/item_sprite_sheet.gif');
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
    
    /* [핵심] 그림자 효과: 우측하단으로 3px, 6px 이동, 4px 흐림처리 */
    filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, 0.4)); 
    
    /* 애니메이션 효과가 있다면 부드럽게 움직이도록 설정 */
    transition: transform 0.2s ease-out;
}

/* 이모지 아이템에도 미세한 그림자 추가 */
.alkkagi-item-emoji {
    position: absolute;
    filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5));
    font-size: 30px;
}


/* 사용자 제공 정밀 좌표 */
.icon_1 { width: 30px; height: 30px; background-position: -3px -9px; background-size: 152px 76px; }
.icon_2 { width: 30px; height: 30px; background-position: -48px -2px; background-size: 186px 64px; }
.icon_3 { width: 30px; height: 30px; background-position: -86px -11px; background-size: 201px 105px; }
.icon_4 { width: 30px; height: 30px; background-position: -120px -11px; background-size: 201px 102px; }
.icon_5 { width: 30px; height: 30px; background-position: -112px -9px; background-size: 147px 94px; }
.icon_6 { width: 30px; height: 30px; background-position: -10px -51px; background-size: 188px 93px; }
/* .icon_7 { width: 30px; height: 30px; background-position: -50px -51px; background-size: 193px 93px; }
.icon_8 { width: 30px; height: 30px; background-position: -83px -58px; background-size: 192px 101px; }
.icon_9 { width: 30px; height: 30px; background-position: -127px -55px; background-size: 211px 97px; }
.icon_10 { width: 30px; height: 30px; background-position: -119px -56px; background-size: 155px 101px; } */