/*
 * Shared Controls CSS v2
 * Canonical source: C:\Dev\_shared\ui\controls
 */

:root {
    --pad-height: 120px;
    --pad-bg: linear-gradient(to bottom, rgba(10,20,40,0.7), rgba(0,0,0,0.9));
    --pad-border: 1px solid rgba(255,255,255,0.1);
    --btn-size: 80px;
    --btn-radius: 20px;
    --btn-bg: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    --btn-bg-active: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2));
    --btn-border: 2px solid rgba(255, 255, 255, 0.6);
    --btn-color: white;
    --stick-zone-size: 120px;
    --stick-base-size: 100px;
    --stick-size: 55px;
    --stick-bg: radial-gradient(circle at 30% 30%, #FFE4B5, #DAA520);
    --action-btn-size: 95px;
    --action-btn-bg: radial-gradient(circle at 30% 30%, #FF8C00, #FF4500);
    --action-btn-bg-active: radial-gradient(circle at 30% 30%, #FFA500, #FF6347);
}

.control-panel {
    position: absolute;
    height: var(--pad-height, 120px);
    width: 100%;
    background: var(--pad-bg);
    backdrop-filter: blur(8px);
    border-top: var(--pad-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 100;
    user-select: none;
    -webkit-user-select: none;
}

.d-pad {
    display: grid;
    grid-template-columns: repeat(3, var(--btn-size, 80px));
    grid-template-rows: repeat(1, var(--btn-size, 80px));
    gap: 20px;
}

.btn {
    background: var(--btn-bg);
    border: var(--btn-border);
    border-radius: var(--btn-radius, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--btn-color, white);
    font-weight: bold;
    font-size: 24px;
    touch-action: none;
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.4);
    transition: transform 0.05s, box-shadow 0.05s;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
.btn:active, .btn.active {
    background: var(--btn-bg-active);
    transform: translateY(6px);
    box-shadow: 0 0 0 rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.4);
}

.joystick-zone {
    width: var(--stick-zone-size, 120px);
    height: var(--stick-zone-size, 120px);
    position: relative;
    touch-action: none;
}
.joystick-base {
    width: var(--stick-base-size, 100px);
    height: var(--stick-base-size, 100px);
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.5) 100%);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}
.joystick-stick {
    width: var(--stick-size, 55px);
    height: var(--stick-size, 55px);
    background: var(--stick-bg);
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 10px rgba(0,0,0,0.6), inset 0 -4px 8px rgba(0,0,0,0.3);
    pointer-events: none;
}

.action-area {
    display: flex;
    justify-content: center;
    align-items: center;
}
.action-btn {
    width: var(--action-btn-size, 95px);
    height: var(--action-btn-size, 95px);
    border-radius: 50%;
    background: var(--action-btn-bg);
    border: 4px solid rgba(255,255,255,0.9);
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
    touch-action: none;
    box-shadow: 0 8px 0 rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: transform 0.05s, box-shadow 0.05s;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
.action-btn:active, .action-btn.active {
    background: var(--action-btn-bg-active);
    transform: translateY(8px);
    box-shadow: 0 0 0 rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.3);
}