/* PowerMic Grid */
.powermic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 10px;
}
.pm-key {
    background-color: #333;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cluster .ring-btn.pm-key:hover, .cluster .center-btn.pm-key:hover, .media-row .media-btn:hover, .media-row .dot-btn:hover{
    background-color: #65708e;
    border-color: #65708e;
}
/* Container styling */
    .mic-card {
		width: 143px;
		background: #444444;
		color: #fff;
		border-radius: 60px 60px 10px 10px;
		padding: 20px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
		margin: 24px auto;
		border: 5px solid #616161;
	}
    /* Top cluster area */
    .cluster {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 0 auto 14px auto;
    }

    .cluster .center-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 64px;
		height: 64px;
		border-radius: 15px;
		border: 5px solid #452c2c;
		background: #572121;
		color: #fff;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    }

    /* Surrounding 6 buttons arranged roughly hexagonally */
    .cluster .ring-btn {
		position: absolute;
		border: none;
		background: #202123;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    }

    /* manual positions for 6 buttons */
	.btn-top {
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 15px 15px 0px 0px;
		height: 32px;
		width: 50px;
	}
	.btn-top-right {
		top: 10px;
		right: -10px;
		width: 30px;
		border-radius: 4px 18px 4px 4px;
		height: 42px;
	}
	.btn-top-left {
		top: 10px;
		left: -10px;
		width: 30px;
		border-radius: 18px 4px 4px 4px;
		height: 42px;
	}
	.btn-bottom-right {
		top: 60px;
		right: -10px;
		width: 30px;
		border-radius: 4px 4px 18px 4px;
		height: 30px;
	}
	.btn-bottom-left {
		top: 60px;
		left: -10px;
		width: 30px;
		border-radius: 4px 4px 4px 18px;
		height: 30px;
	}
	.btn-bottom {
		bottom: -9px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 0px 0px 15px 15px;
		height: 32px;
		width: 50px;
	}
	.btn-way-bottom {
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 0px 0px 15px 15px;
		height: 32px;
		width: 50px;
	}

	.media-row{
		position:relative;
		left:-7px;
	}
    /* media row */
    .media-row .media-btn {
		width: 50px;
		height: 30px;
		border-radius: 5px 5px 15px 15px;
		background: #202123;
		color: #fff;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
		margin: 0px 5px 0px 5px;
	}

    .media-row .dot-btn {
		width: 20px;
		height: 20px;
		border-radius: 100%;
		background: #202123;
		color: #fff;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    }
	.media-row .dot-btn.half-btn-left {
		border-radius: 100% 0px 0px 100%;
	}
	.media-row .dot-btn.half-btn-right {
		border-radius: 0px 100% 100% 0px;
	}


    .joystick {
      border-radius:50%;
      background:none;
      border:none;
      padding:0;
      box-shadow:none;
    }

    .dpad {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: grid;
		place-items: center;
		justify-content: center;
		align-items: center;
		align-content: center;
		justify-items: center;
		transform:rotate(45deg);
	}
	
	.footpedal-btn.active, .cluster .center-btn.active, .cluster .ring-btn.pm-key.active, .media-row .media-btn.active, .media-row .dot-btn.active, .mouse-btn.active {
		background-color: #3431e3;
		border-color: #65708e;
	}
	.macropad-key.dpad_btn{
		background: repeating-linear-gradient(256deg, #b3b3b3, #dfdbdb 10.5em);
		width: 4.3em;
		height: 4.3em;
		margin: 0px;
		padding: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translateY(0px);
	}
	
    .dpad_top_left {
		border-radius: 100% 0 0 0 ;
	}
	
    .dpad_top_right {
		border-radius: 0 100% 0 0 ;
	}
	
    .dpad_bottom_left {
		border-radius: 0 0 0 100%;
	}
	
    .dpad_bottom_right {
		border-radius: 0 0 100% 0;
	}
	.dpad_center {
		border-radius: 100%;
		position: fixed;
	}
	
	.macropad-key.dpad_btn:hover{
		background: linear-gradient(15deg, #393939, #0d6efd);
		transform: translateY(0px);
	}
	.dpad_lbl {
		transform: rotate(-45deg);
	}
    .macropad-key.center-btn {
		position: absolute;
		width: 36%;
		height: 36%;
		border-radius: 50%;
		background: #4b4b4b;
		display: grid;
		place-items: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #9be7c6;
		font-size: 13px;
		pointer-events: none;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
		z-index: 122;
	}