.canvas {
    position: absolute;
    inset: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.nmbr9-layer-rail {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    width: 76px;
    max-height: calc(100% - 8px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    overflow: auto;
    background: #182436;
    border: 1px solid #40536b;
    border-radius: 8px;
}

.nmbr9-layer-icon {
    flex: 0 0 auto;
    align-self: center;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #b9cbe0;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nmbr9-levels,
.nmbr9-layer-modes {
    display: grid;
    gap: 4px;
}

.nmbr9-layer-modes {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #40536b;
}

.nmbr9-layer-modes button:not([hidden]) {
    display: grid;
    place-items: center;
}

.nmbr9-layer-modes svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nmbr9-layer-rail button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 36px;
    padding: 4px;
    border: 1px solid #58718c;
    border-radius: 6px;
    background: #273951;
    color: #e7eff9;
    font: inherit;
    font-size: .75rem;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.nmbr9-layer-rail button[aria-pressed="true"] {
    background: #d7e8f7;
    color: #182436;
}

.nmbr9-levels button.nmbr9-level-button {
    background: var(--nmbr9-level-color);
    color: var(--nmbr9-level-text);
    box-shadow: 0 2px 0 #0d1827;
}

.nmbr9-levels button.nmbr9-level-button[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--nmbr9-level-text);
    border-color: #fff;
}

.nmbr9-layer-rail button:focus-visible {
    outline: 2px solid #ffc96b;
    outline-offset: -3px;
}

.dragged-tile {
    cursor: grab;
    stroke: #7df4b5;
}

.dragged-tile-disabled {
    cursor: inherit;
}

.dragged-tile-disallowed {
    stroke: #ff9d97;
    stroke-dasharray: 5px 3px;
}

.tile-outline {
    vector-effect: non-scaling-stroke;
    stroke-width: 1.6px;
    stroke-linejoin: round;
    fill: none;
}

.placed-tile .tile-outline {
    stroke: var(--nmbr9-level-color);
    stroke-width: 3px;
}

.dragged-tile .tile-outline {
    stroke-width: 3px;
}

.nmbr9-block-view .placed-tile image,
.nmbr9-block-view .nmbr9-level-badges {
    display: none;
}

.nmbr9-block-view .placed-tile .tile-outline {
    fill: var(--nmbr9-level-color);
}

.nmbr9-level-badges {
    pointer-events: none;
}

.nmbr9-level-badges rect {
    fill: var(--nmbr9-level-color);
    stroke: #dfecfa;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.nmbr9-level-badges text {
    fill: var(--nmbr9-level-text);
    font-size: 42px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.nmbr9-supports {
    pointer-events: none;
}

.nmbr9-support-preview image {
    opacity: .82;
}

.nmbr9-support-cell {
    fill: none;
    stroke: var(--nmbr9-level-color);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

.rotation-controls {
    cursor: default;
}

.rotate-button {
    cursor: pointer;
}

.rotate-button rect {
    fill: #182436;
    stroke: #7791ad;
}

.rotate-button text {
    fill: #e7eff9;
    font: 24px system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.rotate-button:hover rect,
.rotate-button:focus-visible rect {
    fill: #34506f;
    stroke: #d7e8f7;
}

.nmbr9-placement-status {
    flex: 0 0 auto;
    align-self: center;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    margin: 4px 0;
    padding: 5px 12px;
    border-radius: 5px;
    background: var(--nmbr9-level-color);
    color: var(--nmbr9-level-text);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}

.nmbr9-placement-invalid {
    background: #182436;
    color: #ffb5b1;
}

#board:not(.nmbr9-own-board) + .nmbr9-placement-status {
    display: none;
}