.slot-tool-settings {
    display: flex;
    align-items: center;
    gap: 10px
}

.snap-grid-setting {
    gap: 6px !important;
    white-space: nowrap
}

.snap-grid-setting input {
    accent-color: var(--gold)
}

.add-slot-tool {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 12px 12px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: #292419;
    color: var(--gold-2);
    cursor: pointer
}

.add-slot-tool span {
    font-size: 24px;
    font-weight: 400;
    line-height: 1
}

.add-slot-tool strong {
    font-size: 10px;
    text-transform: uppercase
}

.add-slot-tool:hover,
.add-slot-tool[aria-pressed="true"] {
    background: var(--gold);
    color: #17130b
}

.add-slot-tool[aria-pressed="true"] {
    box-shadow: 0 0 0 3px #f0c76538
}

.catalog-stage {
    touch-action: none;
    cursor: default
}

.catalog-snap-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, transparent calc(33.333% - .5px), #f0c765aa 33.333%, transparent calc(33.333% + .5px)),
        linear-gradient(to right, transparent calc(66.666% - .5px), #f0c765aa 66.666%, transparent calc(66.666% + .5px)),
        linear-gradient(to bottom, transparent calc(33.333% - .5px), #f0c765aa 33.333%, transparent calc(33.333% + .5px)),
        linear-gradient(to bottom, transparent calc(66.666% - .5px), #f0c765aa 66.666%, transparent calc(66.666% + .5px))
}

.catalog-stage.snap-enabled .catalog-snap-grid {
    opacity: .55
}

.catalog-snap-target {
    position: absolute;
    width: 9px;
    height: 5px;
    border: 1px solid #fff0bd;
    border-radius: 2px;
    background: #c28e24;
    box-shadow: 0 1px 3px #000c;
    transform: translate(-50%, -50%)
}

.catalog-snap-target.vertical {
    transform: translate(-50%, -50%) rotate(90deg)
}

.catalog-stage.adding-slot {
    cursor: crosshair;
    outline-color: var(--gold);
    box-shadow: 0 0 0 3px #f0c76542, 0 18px 60px #000c
}

.catalog-stage.adding-slot::after {
    content: "+";
    position: absolute;
    right: 10px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--gold);
    color: #17130b;
    font-size: 20px;
    pointer-events: none
}

.catalog-slot {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #555;
    color: #fff;
    box-shadow: 0 2px 8px #000c, 0 0 0 3px #ffffff35;
    font-size: 8px;
    font-weight: 900;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: grab;
    touch-action: none
}

.catalog-slot:active {
    cursor: grabbing
}

.catalog-slot.slot-door {
    width: 32px;
    height: 32px;
    padding: 3px 3px;
    border-radius: 3px;
    background: #c28e24;
    color: #16130d;
    border-color: #fff0bd;
    line-height: 1
}

.catalog-slot.slot-door.required-door {
    outline: 3px solid #e64b3f;
    outline-offset: 3px
}

.catalog-slot.slot-door.required-door::after {
    content: "!";
    position: absolute;
    right: -9px;
    top: -9px;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e64b3f;
    color: #fff;
    font-size: 10px;
    line-height: 1
}

.catalog-slot.vertical.slot-door {
    transform: translate(-50%, -50%) rotate(90deg)
}

.catalog-slot.vertical.slot-door span {
    transform: rotate(-90deg)
}

.catalog-slot.slot-objective {
    background: #bd343b
}

.catalog-slot.slot-start {
    background: #2d6eb6
}

.catalog-slot.slot-invasion {
    border-radius: 4px;
    background: #a62d32
}

.catalog-slot.slot-exit {
    border-radius: 4px;
    background: #318053
}

.catalog-slot.slot-statue {
    background: #727981
}

.catalog-slot.slot-chi {
    background: #55a6b4;
    color: #102125
}

.catalog-slot.slot-vault {
    background: #a77b27
}

.catalog-slot.slot-crypt {
    border-radius: 4px;
    background: #4d4568
}

.catalog-slot.slot-crypt-yellow {
    border-radius: 4px;
    background: #d7b33f;
    color: #221b08
}

.catalog-slot.slot-spawn {
    background: #7f3f98
}

.catalog-slot.slot-guard {
    background: #24798a
}

.catalog-slot.slot-noise {
    background: #d0782e
}

.catalog-slot.slot-gate {
    border-radius: 4px;
    background: #a77b27
}

.catalog-slot.slot-rubble {
    border-radius: 4px;
    background: #b87416
}

.catalog-slot.selected {
    border-color: white;
    box-shadow: 0 0 0 4px #f0c76577, 0 3px 10px #000;
    z-index: 3
}

.catalog-slot span {
    pointer-events: none
}

.slot-orientation-icon {
    display: grid !important;
    place-items: center;
    width: 22px !important;
    height: 18px !important;
    border: 2px solid var(--gold);
    border-radius: 3px;
    color: var(--gold-2);
    font-size: 7px;
    font-style: normal
}

.slot-orientation-icon.vertical {
    transform: none !important
}

.catalog-shortcuts {
    margin: 10px 0 14px;
    border: 1px solid #343a43;
    border-radius: 4px;
    background: #1c2026;
    color: var(--muted);
    font-size: 9px
}

.catalog-shortcuts summary {
    padding: 8px 9px;
    cursor: pointer;
    color: #c9cdd2;
    font-weight: 700
}

.catalog-shortcuts>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    padding: 0 9px 9px
}

.catalog-shortcuts span {
    display: flex;
    align-items: center;
    gap: 6px
}

.catalog-shortcuts kbd {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid #59616c;
    border-bottom-width: 2px;
    border-radius: 3px;
    background: #272d34;
    color: var(--gold-2);
    font: 700 9px/1 sans-serif
}

@media(max-width:1000px) {
    .slot-tool-settings label {
        display: block
    }

    .slot-tool-settings select {
        display: block;
        margin-top: 3px
    }

    .add-slot-tool strong {
        display: none
    }

    .add-slot-tool {
        padding: 12px 12px
    }
}