:root { --bg-color: #2c3e50; --panel-bg: #1e1e1e; --gap: 3px; --accent: #f1c40f; --text-color: #ecf0f1; --grid-size: 8; }
* { box-sizing: border-box; touch-action: none; user-select: none; -webkit-user-select: none; }
body { margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 20px; min-height: 100vh; overflow: hidden; }
.screen { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-height: 100vh; padding: 10px; box-sizing: border-box; }
.admin-no-ad { display: none !important; }

/* Buttons */
.btn { padding: 12px 20px; margin: 0; background: #34495e; color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; text-align: center; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 0.95rem; transition: transform 0.1s, background 0.2s; box-shadow: 0 4px 0 rgba(0,0,0,0.3); }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn-primary { background: var(--accent); color: #2c3e50; }
.mode-selector { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

/* Header */
.header { width: 100%; max-width: 500px; display: flex; justify-content: space-between; padding: 15px; background: #000; border-radius: 15px; margin-bottom: 20px; border: 1px solid #444; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.stat span { display: block; font-size: 11px; color: #aaa; text-align: center; margin-bottom: 2px; }
.stat strong { display: block; font-size: 20px; color: var(--accent); text-align: center; }

/* Grid */
.grid-container { width: 95vw; max-width: 400px; aspect-ratio: 1/1; background: #000; border: 4px solid #34495e; border-radius: 16px; padding: 5px; box-sizing: border-box; display: grid; gap: var(--gap); margin: 0 auto 20px auto; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.cell { width: 100%; height: 100%; background: #1a1a1a; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: 800; z-index: 1; box-shadow: inset 0px -3px 0px rgba(0,0,0,0.3); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); color: #fff; }
.cell.empty { background: #111; box-shadow: none; }

/* Hand */
#hand-container { display: flex; justify-content: center; gap: 10px; margin: 10px auto; width: 100%; max-width: 400px; min-height: 110px; align-items: center; }
.hand-slot { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3); border-radius: 12px; border: 2px dashed rgba(255, 255, 255, 0.1); position: relative; }
.mini-grid { pointer-events: none; } 

/* Ghost (Legacy) */
#ghost { position: fixed; top: 0; left: 0; pointer-events: none !important; z-index: 9999; display: none; gap: 3px; filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.5)); opacity: 0.9; transform: scale(1.1); }


/* =========================================
   [VISUAL EFFECTS - 수정 완료]
   ========================================= */

/* 1. 바닥 가이드라인 (보여야 함) */
.highlight-valid {
    background-color: rgba(255, 255, 255, 0.08) !important;
    /* [복구] 바닥에 놓일 위치는 흰색 점선으로 표시 */
    border: 2px dashed rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    z-index: 5;
}

/* 2. 머지 대상 블록 (블록 색 유지 + 금빛 테두리 호흡 효과) */
@keyframes golden-breath {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); 
        border-color: #ffd700; 
    }
    50% { 
        box-shadow: 0 0 15px 2px rgba(255, 215, 0, 0.8);
        border-color: #fff;
        transform: scale(1.02);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); 
        border-color: #ffd700; 
    }
}

.will-merge-target {
    animation: golden-breath 1.2s infinite ease-in-out !important;
    border: 2px solid #ffd700 !important;
    z-index: 50;
    position: relative;
}

/* 3. 손에 들고 있는 블록 (흰색 선 제거!) */
.dragging-merge-active {
    filter: brightness(1.3) !important; /* 밝기만 증가 */
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4) !important;
    /* [제거] 블록 자체의 흰색 테두리 삭제 */
    border: none !important; 
}

/* 망치 모드 */
.hammer-mode .cell { cursor: crosshair; }
.hammer-target { border: 2px solid #e74c3c !important; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* ========================================= */

/* Popups & Shop */
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 10000; padding: 20px; }
.popup-box { background: #222; border: 1px solid #444; padding: 25px; border-radius: 20px; text-align: center; width: 100%; max-width: 350px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.item-card { background: #222; border: 1px solid #444; border-radius: 12px; padding: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.item-info { text-align: left; }
.item-name { font-weight: bold; font-size: 1.1rem; color: #fff; display: block; }
.item-desc { font-size: 0.8rem; color: #aaa; }
.rank-item { display: flex; align-items: center; background: #1e1e1e; padding: 15px; border-radius: 15px; border: 1px solid #333; }
.rank-1 { border: 1px solid gold; color: gold; } .rank-2 { border: 1px solid silver; color: silver; } .rank-3 { border: 1px solid #cd7f32; color: #cd7f32; }
.hidden { display: none !important; }

/* 팝업 내부 입력창 */
.popup-input { width: 100%; padding: 12px; background-color: #111; border: 1px solid #444; border-radius: 8px; color: #fff; font-size: 1rem; text-align: center; outline: none; transition: border-color 0.2s; }
.popup-input:focus { border-color: var(--accent); }
.popup-input::placeholder { color: #555; }

/* Blocks Colors */
.b-A { background: #e74c3c; box-shadow: 0 4px 0 #c0392b; }
.b-B { background: #e67e22; box-shadow: 0 4px 0 #d35400; }
.b-C { background: #f1c40f; box-shadow: 0 4px 0 #f39c12; }
.b-D { background: #2ecc71; box-shadow: 0 4px 0 #27ae60; }
.b-E { background: #1abc9c; box-shadow: 0 4px 0 #16a085; }
.b-F { background: #3498db; box-shadow: 0 4px 0 #2980b9; }
.b-G { background: #9b59b6; box-shadow: 0 4px 0 #8e44ad; }
.b-H { background: #34495e; box-shadow: 0 4px 0 #2c3e50; }
.b-I { background: #ff7979; box-shadow: 0 4px 0 #eb4d4b; }
.b-J { background: #badc58; box-shadow: 0 4px 0 #6ab04c; }
.b-K { background: #7ed6df; box-shadow: 0 4px 0 #22a6b3; }
.b-L { background: #e056fd; box-shadow: 0 4px 0 #be2edd; }
.b-M { background: #686de0; box-shadow: 0 4px 0 #4834d4; }
.b-N { background: #30336b; box-shadow: 0 4px 0 #130f40; }
.b-O { background: #ffbe76; box-shadow: 0 4px 0 #f0932b; }
.b-P { background: #ff6b81; box-shadow: 0 4px 0 #ee5253; }
.b-Q { background: #535c68; box-shadow: 0 4px 0 #2f3542; }
.b-R { background: #F97F51; box-shadow: 0 4px 0 #D35400; }
.b-S { background: #1B9CFC; box-shadow: 0 4px 0 #0984e3; }
.b-T { background: #58B19F; box-shadow: 0 4px 0 #2C3A47; }
.b-U { background: #2C3A47; box-shadow: 0 4px 0 #182C61; }
.b-V { background: #B33771; box-shadow: 0 4px 0 #6D214F; }
.b-W { background: #82589F; box-shadow: 0 4px 0 #3B3B98; }
.b-X { background: #FD7272; box-shadow: 0 4px 0 #B03060; }
.b-Y { background: #9AECDB; box-shadow: 0 4px 0 #55E6C1; color: #333; }
.b-Z { background: #000000; box-shadow: 0 4px 0 #333333; border: 2px solid gold; color: gold; }

@keyframes glow { from { box-shadow: 0 0 10px #FFD700; } to { box-shadow: 0 0 20px #FFD700; } }