/* Gamepad help diagram and mapping form */

#gamepad-settings-overlay .oz-modal__dialog {
    max-width: min(920px, calc(100vw - 24px));
}

#gamepad-settings-overlay .oz-modal__body {
    padding-top: 6px;
}

.gamepad-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--oz-grey-light);
    border-radius: var(--oz-r-xs);
    background: var(--oz-bg-panel);
    color: var(--oz-grey-mid);
    font-size: 11px;
    font-weight: 600;
}

.gamepad-status [data-lucide] {
    color: var(--oz-secondary);
    font-size: 14px;
}

.gamepad-guide {
    position: relative;
    width: min(100%, 760px);
    aspect-ratio: 500 / 220;
    margin: 0 auto;
    overflow: hidden;
}

.gamepad-guide__image {
    position: absolute;
    z-index: 1;
    top: 5%;
    right: 18%;
    width: 64%;
    height: 90%;
    object-fit: contain;
}

.gamepad-guide__leaders {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.gamepad-guide__leaders polyline {
    fill: none;
    stroke: var(--oz-secondary-dark);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.gamepad-callout {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--oz-secondary-dark);
    font-size: clamp(9px, 1.35vw, 12px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.gamepad-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    background: var(--oz-secondary);
    color: #fff;
    font-size: 11px;
}

.gamepad-callout__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gamepad-callout__text small {
    color: var(--oz-grey-mid);
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.gamepad-callout--xy { top: 45%; left: 1%; }
.gamepad-callout--dpad { top: 69%; left: 5%; }
.gamepad-callout--z { top: 61%; right: 0; }
.gamepad-callout--lt { top: 10%; left: 1%; }
.gamepad-callout--rt { top: 10%; right: 1%; }


.gamepad-callout--compact {
    font-size: clamp(9px, 1.35vw, 12px);
}

.gamepad-callout--key {
    padding: 4px 6px;
    border: 1px solid rgba(0, 76, 91, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 2px rgba(13, 31, 34, 0.08);
}

.gamepad-callout--lb { top: 28%; left: 1%; }
.gamepad-callout--rb { top: 28%; right: 1%; }
.gamepad-callout--xyab { top: 46%; right: 1%; }
.gamepad-callout--select { top: 6%; left: 39%; }
.gamepad-callout--start { top: 6%; left: 52%; }


.gamepad-customisation {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--oz-grey-light);
}

.gamepad-customisation__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.gamepad-customisation__header h4 {
    margin: 0;
    color: var(--oz-grey-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gamepad-customisation__header p {
    margin: 0;
    color: var(--oz-grey-mid);
    font-size: 10px;
    font-weight: 600;
}

.gamepad-mappings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.gamepad-mapping {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
}

.gamepad-mapping__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--oz-secondary-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.gamepad-mapping__button--select,
.gamepad-mapping__button--start {
    width: auto;
    padding: 0 7px;
    border-radius: 999px;
}

.gamepad-mapping select {
    min-width: 0;
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 11px;
}

.gamepad-mapping--primary { grid-column: 1; }
.gamepad-mapping--secondary { grid-column: 2; }

@media (max-width: 640px) {
    .gamepad-guide {
        aspect-ratio: auto;
        overflow: visible;
    }

    .gamepad-guide__image {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        width: 100%;
        height: auto;
    }

    .gamepad-callout {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        display: inline-flex;
        width: calc(50% - 5px);
        margin-top: 8px;
        padding: 6px 8px;
        border: 1px solid var(--oz-grey-light);
        border-radius: var(--oz-r-xs);
        background: var(--oz-bg-panel);
        white-space: normal;
    }

    .gamepad-callout--xy, .gamepad-callout--dpad, .gamepad-callout--z, .gamepad-callout--lt, .gamepad-callout--rt { top: auto; right: auto; left: auto; }
    .gamepad-guide__leaders { display: none; }
    .gamepad-mappings { grid-template-columns: 1fr; }
    .gamepad-mapping--primary,
    .gamepad-mapping--secondary { grid-column: auto; }
    .gamepad-customisation__header { align-items: flex-start; flex-direction: column; gap: 3px; }
}