:root {
    --kb-unit-desktop: 2.4rem;
    --kb-unit-phone: 2.2rem;
    --kb-width-units: 23;
    --kb-board-units: 27;
    --kb-board-gap-units: .6;
    --kb-mouse-units: 3.2;
}

.keybind-page {
    min-width: 0;
}

.kb-drop {
    border: 1px dashed var(--hud-border);
    background: var(--hud-panel);
    padding: 1rem;
    margin: 1rem 0 .5rem;
    text-align: center;
}

.kb-drop label {
    display: block;
    cursor: pointer;
    color: var(--hud-cyan);
}

.kb-drop label strong {
    color: var(--hud-orange);
}

.kb-drop label span {
    display: block;
    margin-top: .2rem;
}

.kb-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.kb-file-input:focus-visible + .kb-muted {
    outline: 2px solid var(--hud-orange);
}

.kb-drop .kb-muted,
.kb-muted {
    color: var(--hud-muted);
    font-size: .9rem;
}

.kb-drop p {
    margin: .5rem 0 0;
}

.kb-privacy {
    color: var(--hud-muted);
    font-size: .85rem;
}

.kb-drop.kb-dragging {
    border-color: var(--hud-cyan);
    background: rgba(25, 179, 230, .08);
}

.kb-error {
    color: #ff7777;
    border-left: 3px solid #ff4d4d;
    background: rgba(255, 77, 77, .08);
    padding: .55rem .75rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.kb-file-row,
.kb-loaded-files {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.kb-file-row {
    justify-content: space-between;
    min-height: 2rem;
    margin: .5rem 0;
}

.kb-file-row-reserved {
    min-height: 2.5rem;
}

.kb-file-row-reserved .kb-loaded-files {
    min-height: 2rem;
    flex: 1 1 0%;
    min-width: 0;
}

.kb-file-row-reserved .kb-file-summary {
    flex: 0 0 7rem;
    text-align: right;
}

.kb-file-summary {
    color: var(--hud-muted);
    font-size: .85rem;
}

.kb-loaded-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .45rem;
    border: 1px solid var(--hud-border);
    color: var(--hud-cyan);
    font-family: "Share Tech Mono", monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.kb-remove-file {
    border: 0;
    background: transparent;
    color: var(--hud-orange);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.kb-sample-button {
    border: 1px solid var(--hud-orange);
    background: transparent;
    color: var(--hud-orange);
    padding: .45rem .7rem;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.kb-sample-button:hover,
.kb-sample-button:focus-visible {
    background: var(--hud-orange);
    color: var(--hud-bg);
}

.kb-results {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
    min-width: 0;
    container-type: inline-size;
    container-name: kb-results;
}

.kb-results.kb-loading,
.kb-results.kb-reserved {
    min-height: 100vh;
    min-height: 100svh;
}

.kb-viewer,
.kb-combat-col {
    flex: 1 1 100%;
    min-width: 0;
}

.kb-keyboard-panel {
    --u: min(2.4rem, calc((100cqw - 2rem - 2px) / 27));
}

@container kb-results (min-width: calc(27 * 2rem + 2rem + 2px + 1rem + 17rem)) {
    .kb-viewer {
        flex-basis: calc(100% - 18rem);
    }

    .kb-combat-col {
        flex: 0 0 17rem;
    }

    .kb-keyboard-panel {
        --u: min(2.4rem, calc((100cqw - 2rem - 2px - 18rem) / 27));
    }
}

.kb-results.kb-loading > * {
    visibility: hidden;
}

.kb-results.kb-loading::after {
    position: absolute;
    top: .75rem;
    left: .75rem;
    color: var(--hud-muted);
    content: "Loading…";
}

.kb-results[hidden],
.kb-tabs [hidden] {
    display: none;
}

.kb-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--hud-border);
    border-top: 3px solid var(--hud-orange);
    background: var(--hud-panel);
}

#wrapper.keybind-page section.kb-panel {
    margin-top: 0;
}

.kb-panel h2 {
    margin: 0 0 .5rem;
    color: var(--hud-orange);
    font-size: 1.1rem;
}

.kb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--hud-border);
}

.kb-tab {
    padding: .5rem .75rem;
    border: 1px solid transparent;
    border-bottom: 0;
    background: transparent;
    color: var(--hud-muted);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kb-tab[aria-selected="true"] {
    border-color: var(--hud-border);
    background: var(--hud-panel);
    color: var(--hud-orange);
}

.kb-tab:focus-visible,
.kb-panel:focus-visible,
.kb-key:focus-visible,
.kb-key-chip:focus-visible,
.kb-missing-button:focus-visible {
    outline: 2px solid var(--hud-cyan);
    outline-offset: 2px;
}

.kb-warning {
    margin: 0 0 .85rem;
    padding: .55rem .75rem;
    border-left: 3px solid var(--hud-orange);
    background: rgba(255, 113, 0, .08);
    font-size: .88rem;
}

.kb-layout-note {
    margin: 0 0 .85rem;
    color: var(--hud-muted);
    font-size: .88rem;
}

.kb-board {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--kb-board-gap-units) * var(--u));
    width: max-content;
    min-width: 0;
}

.kb-key-area {
    flex: none;
    width: calc(var(--kb-width-units) * var(--u));
}

.kb-keyboard {
    position: relative;
    flex: none;
    width: calc(var(--kb-width-units) * var(--u));
    height: calc(6.4 * var(--u));
}

.kb-key,
.kb-mouse-key {
    position: absolute;
    overflow: hidden;
    padding: 0 2px;
    border: 1px solid #2c2e36;
    border-radius: 4px;
    background: #1c1d23;
    color: #6d6f78;
    font-size: calc(.28 * var(--u));
    line-height: 1.1;
    cursor: default;
}

.kb-key.bound,
.kb-mouse-key.bound,
.kb-key-chip.bound {
    border-color: var(--key-color);
    background: color-mix(in srgb, var(--key-color) 30%, #15161b);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

.kb-key.multi,
.kb-mouse-key.multi,
.kb-key-chip.multi {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--key-color) 35%, #15161b) 0 50%,
        color-mix(in srgb, var(--key-color-two) 45%, #15161b) 50% 100%);
}

.kb-key-selected {
    outline: 2px solid var(--hud-orange);
    outline-offset: 1px;
    box-shadow: 0 0 10px var(--hud-orange);
}

.kb-mouse-area {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    width: calc(var(--kb-mouse-units) * var(--u));
}

.kb-relative-mouse {
    margin: .3rem 0 0;
    color: var(--hud-muted);
    font-size: .75rem;
    width: 100%;
    text-align: center;
}

.kb-mouse {
    position: relative;
    flex: none;
    width: calc(var(--kb-mouse-units) * var(--u));
    height: calc(5.2 * var(--u));
    border: 1px solid #2c2e36;
    border-radius: calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u));
}

.kb-mouse-key.m-l {
    inset: 3% auto auto 4%;
    width: 44%;
    height: 38%;
    border-radius: calc(1.4 * var(--u)) 4px 4px 4px;
}

.kb-mouse-key.m-r {
    inset: 3% 4% auto auto;
    width: 44%;
    height: 38%;
    border-radius: 4px calc(1.4 * var(--u)) 4px 4px;
}

.kb-mouse-key.m-wheel {
    inset: 17% auto auto 38%;
    z-index: 1;
    width: 24%;
    height: 10%;
}

.kb-mouse-key.m-up {
    inset: 6% auto auto 38%;
    z-index: 1;
    width: 24%;
    height: 10%;
}

.kb-mouse-key.m-down {
    inset: 28% auto auto 38%;
    z-index: 1;
    width: 24%;
    height: 10%;
}

.kb-mouse-key.m-4,
.kb-mouse-key.m-5 {
    left: -12%;
    width: 18%;
    height: 12%;
}

.kb-mouse-key.m-4 { top: 48%; }
.kb-mouse-key.m-5 { top: 62%; }

.kb-other-keys,
.kb-other-mouse {
    margin-top: .55rem;
}

.kb-other-keys h4,
.kb-other-mouse h4 {
    margin: 0 0 .35rem;
    color: var(--hud-muted);
    font-size: .8rem;
}

.kb-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.kb-key-chip {
    border: 1px solid var(--hud-border);
    background: transparent;
    color: var(--hud-cyan);
    padding: .25rem .4rem;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
}

.kb-frame-hint {
    display: none;
    margin: .4rem 0;
    color: var(--hud-muted);
    font-size: .8rem;
}

.kb-detail {
    margin-top: .85rem;
}

.kb-detail h3 {
    margin: 0 0 .25rem;
    color: var(--hud-cyan);
    font-size: 1rem;
}

.kb-bind-list,
.kb-combat-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-bind-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid #23252c;
    font-size: .9rem;
}

.kb-category-dot {
    flex: none;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
}

.kb-action-name {
    flex: 1 1 10rem;
}

.kb-tag {
    padding: 0 .35rem;
    border: 1px solid #3a3c45;
    border-radius: 3px;
    color: var(--hud-muted);
    font-size: .72rem;
}

.kb-tag.kb-modifier {
    border-color: var(--hud-orange);
    color: var(--hud-orange);
}

.kb-tag.kb-file-tag {
    color: var(--hud-cyan);
    overflow-wrap: anywhere;
}

.kb-gauge {
    --progress: 0;
    display: grid;
    place-content: center;
    width: 9rem;
    height: 9rem;
    margin: .5rem auto;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--hud-panel) 78%, transparent 79%),
        conic-gradient(var(--hud-orange) calc(var(--progress) * 1turn), #2a2c33 0);
    text-align: center;
}

.kb-gauge b {
    color: var(--hud-orange);
    font-size: 2.4rem;
    line-height: 1;
}

.kb-gauge span {
    color: var(--hud-muted);
}

.kb-missing-button {
    display: block;
    width: 100%;
    padding: .35rem .2rem;
    border: 0;
    background: transparent;
    color: var(--hud-cyan);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    text-align: center;
}

.kb-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem 1rem;
    margin: 0 0 .75rem;
}

.kb-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--hud-text);
    font-size: .75rem;
}

.kb-legend-chip::before {
    width: .8rem;
    height: .8rem;
    border-radius: 2px;
    background: var(--category-color);
    content: "";
}

.kb-combat-list li {
    position: relative;
    padding: .45rem 0 .45rem 1.55rem;
    border-bottom: 1px solid #23252c;
    font-size: .9rem;
}

.kb-combat-list li::before {
    position: absolute;
    left: 0;
    top: .4rem;
    font-weight: 700;
}

.kb-combat-missing::before {
    color: #ff4d4d;
    content: "✕";
}

.kb-combat-missing span {
    display: block;
    color: var(--hud-muted);
}

.kb-combat-ok::before {
    color: #5fd068;
    content: "✓";
}

.kb-combat-ok {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem .6rem;
}

.kb-combat-ok b {
    font-weight: 400;
}

.kb-combat-binding,
.kb-device-key {
    color: var(--hud-cyan);
    font-family: "Share Tech Mono", monospace;
    font-size: .84rem;
}

.kb-point-defence {
    margin: .55rem 0 0;
}

.kb-combat-bound {
    margin-top: .5rem;
}

.kb-combat-bound summary {
    padding: .35rem 0;
    color: var(--hud-cyan);
    cursor: pointer;
    font-size: .9rem;
}

.kb-device {
    margin-bottom: .6rem;
}

.kb-device summary {
    padding: .35rem 0;
    cursor: pointer;
}

.kb-device summary b {
    color: var(--hud-cyan);
}

.kb-device-key {
    flex: 0 0 6.5rem;
}

.kb-edrefcard {
    margin-top: 1rem;
    color: var(--hud-muted);
    font-size: .9rem;
}

@media (max-width: 600px) {
    .kb-keyboard-panel {
        --u: 2.2rem;
    }

    .kb-frame {
        width: 100%;
        overflow-x: auto;
        padding-bottom: .5rem;
    }

    .kb-frame-hint {
        display: block;
    }

    .kb-file-row {
        align-items: flex-start;
    }

    .kb-file-row-reserved {
        min-height: 6rem;
    }

    .kb-file-row-reserved .kb-loaded-files {
        min-height: 4rem;
        flex: 0 0 100%;
    }

    .kb-file-row-reserved .kb-file-summary {
        flex-basis: 100%;
        text-align: left;
    }

}