/* ── Radio Body ─────────────────────────────────────────── */
.radio-body {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%232b2b2b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23303030' opacity='0.4'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23272727' opacity='0.3'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #373737 0%, #2b2b2b 8%, #262626 92%, #1f1f1f 100%);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.6),
        0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid #212121;
}

/* ── Speaker Grille ────────────────────────────────────── */
.speaker-area {
    background-color: #1a1a1a;
    border-radius: 0.5rem;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
    padding: 0.3rem;
}

.speaker-bar-vertical {
    background: linear-gradient(90deg, #2a2a2a, #353535 40%, #3a3a3a 50%, #353535 60%, #2a2a2a) !important;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.03);
}

.speaker-bar-horizontal {
    background: linear-gradient(180deg, #2a2a2a, #353535 40%, #3a3a3a 50%, #353535 60%, #2a2a2a) !important;
    border-radius: 2px;
    box-shadow:
        inset 1px 0 2px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.03);
}

.radio-inset-panel {
    background: linear-gradient(135deg, #2a2a2a, #353535) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    border-radius: 0.2rem;
}

/* ── LCD Display ───────────────────────────────────────── */
.lcd-display {
    border: 2px solid #111;
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset -1px 0 0 rgba(0, 0, 0, 0.2),
        inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ── Labels ────────────────────────────────────────────── */
.radio-label-text {
    color: #d0d0d0 !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
    letter-spacing: 0.08em;
}

/* ── Navigation D-Pad ──────────────────────────────────── */
.nav-button-3d .mud-button-outlined {
    background: linear-gradient(180deg, #2e2e2e 0%, #222222 60%, #1a1a1a 100%) !important;
    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.1s, transform 0.1s;
}

.nav-button-3d .mud-button-outlined:active {
    background: linear-gradient(180deg, #1a1a1a 0%, #222222 60%, #2e2e2e 100%) !important;
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

/* ── Soft Keys ─────────────────────────────────────────── */
.softkey-3d .mud-button-outlined {
    background: linear-gradient(180deg, #2c2c2c 0%, #1f1f1f 100%) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.softkey-3d .mud-button-outlined:active {
    background: linear-gradient(180deg, #1f1f1f 0%, #2c2c2c 100%) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    transform: translateY(0.5px);
}

/* ── Distress Button ───────────────────────────────────── */
.distress-button {
    background: linear-gradient(180deg, #ff2020 0%, #cc0000 50%, #990000 100%) !important;
    border: 2px solid #660000 !important;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(255, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

.distress-button:active {
    background: linear-gradient(180deg, #990000 0%, #cc0000 50%, #ff2020 100%) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(1px);
}

.distress-label {
    background: linear-gradient(180deg, #ee0000, #cc0000) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

/* ── 16/C Channel Button ──────────────────────────────── */
.channel16-button .mud-button-outlined {
    background: radial-gradient(ellipse at 30% 30%, #4466ff, #2244cc 50%, #1a33aa 100%) !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    border-color: #1a2a88 !important;
}

.channel16-button .mud-button-outlined:active {
    background: radial-gradient(ellipse at 50% 60%, #2244cc, #1a33aa 60%, #112288 100%) !important;
    box-shadow:
        0 0 2px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(1px);
}

/* ── Replay button press flash (pulse + scale) ─────────── */
@keyframes btn-press-flash-a {
    0%   { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);    transform: scale(1); }
    20%  { box-shadow: 0 0 18px 6px rgba(33, 150, 243, 1); transform: scale(1.18); }
    100% { box-shadow: 0 0 6px 1px rgba(33, 150, 243, 0); transform: scale(1); }
}

@keyframes btn-press-flash-b {
    0%   { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);    transform: scale(1); }
    20%  { box-shadow: 0 0 18px 6px rgba(33, 150, 243, 1); transform: scale(1.18); }
    100% { box-shadow: 0 0 6px 1px rgba(33, 150, 243, 0); transform: scale(1); }
}

/* ── MudButton hover override inside radio ─────────────── */
.radio-body .mud-button-root:hover {
    background-color: transparent !important;
}

/* ── Hand Microphone (PTT unit) ────────────────────────── */
.hand-mic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-end;
    margin-right: 3.5rem;
    gap: 0.4rem;
}

.hand-mic-unit {
    position: relative;
    display: flex;
    justify-content: center;
}

.hand-mic-body {
    position: relative;
    width: 12.5rem;
    height: 17rem;
    padding: 1.2rem 0.9rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* inverted teardrop silhouette (px coords for the 200x272 body) */
    clip-path: path("M100,3 C172,3 178,55 172,95 L168,205 C166,242 138,268 100,268 C62,268 34,242 32,205 L28,95 C22,55 28,3 100,3 Z");
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%232b2b2b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23303030' opacity='0.4'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23272727' opacity='0.3'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #3a3a3a 0%, #2b2b2b 10%, #262626 90%, #1d1d1d 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05);
    filter: drop-shadow(0 6px 11px rgba(0, 0, 0, 0.55));
    z-index: 1;
}

/* PTT button on the left side — subtle, hard to see */
.hand-mic-unit > button {
    background: linear-gradient(180deg, #2c2c2c 0%, #202020 50%, #161616 100%);
    border: 1px solid #1a1a1a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0;
    z-index: 2;
}

.hand-mic-unit > button:active {
    background: linear-gradient(180deg, #161616 0%, #202020 50%, #2c2c2c 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hand-mic-ptt-face {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.25) 4px 5px);
}

.hand-mic-speaker {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3rem;
    width: 7rem;
    height: 8rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    overflow: hidden;
    padding: 0.9rem 0.5rem;
}

.hand-mic-speaker-bar {
    height: 0.4rem;
    width: 100%;
    flex-shrink: 0;
}

.hand-mic-brand {
    margin-top: 0.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.hand-mic-buttons {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
}

.hand-mic-arrows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hand-mic-btn.mud-button-root {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    color: #c8c8c8;
    font-size: 0.6rem;
}

.hand-mic-btn.mud-button-outlined {
    border-color: #161616;
    background: linear-gradient(180deg, #2e2e2e 0%, #222222 60%, #1a1a1a 100%);
    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.1s, transform 0.1s;
}

.hand-mic-btn.mud-button-outlined:active {
    background: linear-gradient(180deg, #1a1a1a 0%, #222222 60%, #2e2e2e 100%);
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}

.hand-mic .mud-button-root:hover {
    background-color: transparent !important;
}

.hand-mic-btn-arrow.mud-button-root {
    width: 2.1rem;
    height: 1.3rem;
    border-radius: 0.4rem;
}

.hand-mic-btn-side.mud-button-root {
    width: 2.5rem;
    height: 2.9rem;
    border-radius: 0.5rem;
}

.hand-mic-btn-icon {
    color: #c8c8c8;
    font-size: 1.4rem !important;
}

.hand-mic-cable {
    position: absolute;
    bottom: 2rem;
    right: -3.5rem;
    width: 6.5rem;
    height: 1.5rem;
    z-index: 0;
}