/* ============================================
   모바일 컨트롤 공통 컴포넌트 스타일
   (D-pad, 회전 버튼 등)
   ============================================ */

/* D-pad 스타일 */
.dpad-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 90px;
    height: 90px;
    position: relative;
}

.dpad-btn {
    background: linear-gradient(145deg, #5a67d8, #4c51bf);
    border: none;
    border-radius: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.dpad-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: linear-gradient(145deg, #4c51bf, #434190);
}

.dpad-up {
    grid-column: 2;
    grid-row: 1;
    background: linear-gradient(145deg, #f56565, #c53030);
}

.dpad-up:active {
    background: linear-gradient(145deg, #c53030, #9b2c2c);
}

.dpad-left {
    grid-column: 1;
    grid-row: 2;
}

.dpad-center {
    grid-column: 2;
    grid-row: 2;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    cursor: default;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dpad-center:active {
    transform: none;
    background: rgba(0, 0, 0, 0.3);
}

.dpad-right {
    grid-column: 3;
    grid-row: 2;
}

.dpad-down {
    grid-column: 2;
    grid-row: 3;
    background: linear-gradient(145deg, #48bb78, #2f855a);
}

.dpad-down:active {
    background: linear-gradient(145deg, #2f855a, #276749);
}

/* 회전 버튼 스타일 */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.rotate-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ed8936, #dd6b20);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.rotate-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: linear-gradient(145deg, #dd6b20, #c05621);
}

.rotate-btn .btn-label {
    position: absolute;
    bottom: clamp(-16px, -2vh, -18px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.5rem, 1.2vw, 0.5625rem);
    font-weight: 600;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
}

.rotate-btn svg {
    width: 20px;
    height: 20px;
}

.control-btn {
    touch-action: manipulation;
}