:root {
    --bg: #040508;
    --c1: #00e5ff;
    --c2: #bf5af2;
    --c3: #ff2d78;
    --text: #e8eaf0;
    --muted: rgba(232,234,240,0.2);
    --border: rgba(255,255,255,0.06);
}

/* 모든 요소 기본 설정 및 터치 방지 */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    touch-action: none; 
    -webkit-user-drag: none; 
}

/* 드래그 방해 금지 클래스 */
.no-select { 
    user-select: none; 
    -webkit-user-select: none; 
    pointer-events: none; 
    cursor: default;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px; 
    /* 하단 광고 배너 50px + 여유 20px = 70px */
    padding-bottom: 70px; 
    gap: 12px;
    position: fixed;
    width: 100%;
}

.title {
    font-family: 'Orbitron';
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#hud { display: flex; gap: 10px; }
.hud-card { 
    background: rgba(255,255,255,0.02); 
    border: 1px solid var(--border); 
    padding: 6px 16px; 
    border-radius: 10px; 
    text-align: center; 
}
.hud-label { font-size: 9px; color: var(--muted); display: block; margin-bottom: 2px; }
.hud-val { font-family: 'Orbitron'; font-size: 18px; color: #fff; }

#board-frame { 
    background: rgba(255,255,255,0.01); 
    border: 2px solid rgba(255,255,255,0.08); 
    padding: 5px; 
    border-radius: 10px; 
}
#board { 
    display: grid; 
    grid-template-columns: repeat(8, 38px); 
    grid-template-rows: repeat(8, 38px); 
    gap: 2px; 
}
.cell { 
    width: 38px; 
    height: 38px; 
    background: rgba(255,255,255,0.03); 
    border-radius: 4px; 
    position: relative;
}

/* 깜빡임 방지용 줄 삭제 애니메이션 강제 스타일 */
.cell.blast {
    animation: blastOut 0.4s ease-out forwards !important;
    background: #fff !important;
    box-shadow: 0 0 40px #fff !important;
    border: none !important;
    z-index: 10;
}
@keyframes blastOut { 
    0% { transform: scale(1); opacity: 1; } 
    100% { transform: scale(0); opacity: 0; } 
}

.cell.preview { background: rgba(255,255,255,0.2) !important; border: 1px solid #fff; }

/* 팝업 오버레이 공통 스타일 */
.overlay {
    display: none; 
    position: absolute; 
    inset: 0; 
    background: rgba(0,0,0,0.96);
    z-index: 1000; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 20px; 
    border-radius: 10px;
}
.overlay.show { display: flex; }

/* 원형 타이머 */
.timer-container { position: relative; width: 80px; height: 80px; }
.timer-svg { transform: rotate(-90deg); width: 80px; height: 80px; }
.timer-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 6; }
.timer-bar { 
    fill: none; 
    stroke: var(--c1); 
    stroke-width: 6; 
    stroke-dasharray: 283; 
    stroke-dashoffset: 0; 
}
.timer-num { 
    position: absolute; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Orbitron'; 
    font-size: 24px; 
    color: var(--c1); 
}

/* 버튼 스타일 */
.btn { 
    font-family: 'Orbitron'; 
    font-size: 11px; 
    padding: 14px; 
    border-radius: 8px; 
    border: none; 
    cursor: pointer; 
    width: 200px; 
    pointer-events: auto !important; 
    transition: 0.1s;
}
.btn:active { transform: scale(0.95); }
.btn-ad { background: var(--c1); color: #000; font-weight: 900; box-shadow: 0 0 15px var(--c1); }
.btn-no { background: transparent; color: var(--muted); border: 1px solid var(--border); display: none; }
.btn-no.visible { display: block; }
.btn-restart { background: var(--c3); color: #fff; }

.final-score { font-family: 'Orbitron'; font-size: 32px; color: #fff; text-shadow: 0 0 10px var(--c2); }

/* 컨베이어 벨트 디자인 */
#conv-section { width: 100%; max-width: 350px; }
.conv-label { font-size: 10px; color: var(--muted); text-align: center; margin-bottom: 8px; letter-spacing: 1px; }
#conv-outer { 
    height: 95px; 
    background: rgba(255,255,255,0.02); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    overflow: hidden; 
    position: relative; 
}
#conv-track { position: absolute; inset: 0; }
.conv-piece { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    display: grid; 
    gap: 2px; 
}
.conv-cell { width: 20px; height: 20px; border-radius: 3px; }

/* 드래그 플로팅 블록 */
#float-piece { 
    position: fixed; 
    pointer-events: none; 
    display: none; 
    gap: 2px; 
    z-index: 2000; 
}
.float-cell { width: 38px; height: 38px; border-radius: 4px; }

/* 광고 컨테이너 하단 고정 */
#bottom-ad-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#pcanvas { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
#msg { height: 15px; font-size: 12px; color: var(--c3); text-align: center; }