body.ss-x-sudoku-route #parent-root .cell {
    position: relative;
    overflow: visible; /* keep base gridline pseudo-elements visible (they use small negative offsets) */
    transition: background-color 0.18s ease, background-image 0.18s ease, box-shadow 0.18s ease;
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major {
    background-color: rgba(77, 171, 247, 0.18);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(77, 171, 247, 0.26) 0 7px,
        rgba(77, 171, 247, 0.08) 7px 14px
    );
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-minor {
    background-color: rgba(105, 219, 124, 0.16);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(105, 219, 124, 0.24) 0 7px,
        rgba(105, 219, 124, 0.08) 7px 14px
    );
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major .highlighter {
    background-color: rgba(77, 171, 247, 0.18) !important;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(77, 171, 247, 0.24) 0 7px,
        rgba(77, 171, 247, 0.08) 7px 14px
    ) !important;
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-minor .highlighter {
    background-color: rgba(105, 219, 124, 0.16) !important;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(105, 219, 124, 0.22) 0 7px,
        rgba(105, 219, 124, 0.08) 7px 14px
    ) !important;
}

/* IMPORTANT: Do not use :before/:after pseudo-elements for diagonal markers here.
   The base board uses .cell:before/.cell:after to draw faint grid lines. */
body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major,
body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-minor {
    outline: 2px dashed rgba(34, 34, 34, 0.4);
    outline-offset: -4px;
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major {
    outline-color: rgba(23, 96, 160, 0.72);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-minor {
    outline-color: rgba(33, 125, 60, 0.72);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major.ss-x-sudoku-minor {
    background-color: rgba(177, 151, 252, 0.24);
    background-image:
        repeating-linear-gradient(135deg, rgba(77, 171, 247, 0.2) 0 7px, transparent 7px 14px),
        repeating-linear-gradient(45deg, rgba(177, 151, 252, 0.22) 0 7px, transparent 7px 14px);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major.ss-x-sudoku-minor .highlighter {
    background-color: rgba(177, 151, 252, 0.24) !important;
    background-image:
        repeating-linear-gradient(135deg, rgba(77, 171, 247, 0.18) 0 7px, transparent 7px 14px),
        repeating-linear-gradient(45deg, rgba(177, 151, 252, 0.22) 0 7px, transparent 7px 14px) !important;
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major.ss-x-sudoku-minor {
    outline-color: rgba(112, 72, 232, 0.78);
    outline-offset: -3px;
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-center {
    box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.22);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-diagonal-peer {
    box-shadow: inset 0 0 0 2px rgba(34, 34, 34, 0.22);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-diagonal-target {
    box-shadow: inset 0 0 0 2px #222222, inset 0 0 0 5px rgba(177, 151, 252, 0.58);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major.ss-x-sudoku-diagonal-target,
body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-minor.ss-x-sudoku-diagonal-target {
    box-shadow: inset 0 0 0 2px #222222, inset 0 0 0 6px rgba(112, 72, 232, 0.34);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-conflict {
    background-color: rgba(255, 107, 107, 0.22) !important;
    background-image: none;
    box-shadow: inset 0 0 0 2px #ff6b6b, inset 0 0 0 4px rgba(34, 34, 34, 0.22);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-conflict .highlighter {
    background-color: rgba(255, 107, 107, 0.22) !important;
    background-image: none !important;
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-conflict::before {
    border-color: rgba(255, 107, 107, 0.9);
}

body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-conflict.ss-x-sudoku-diagonal-target {
    box-shadow: inset 0 0 0 2px #ff6b6b, inset 0 0 0 4px #222222;
}

body.ss-x-sudoku-route .bottompanel__button._notes.ss-x-sudoku-notes-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.25);
}

@media (max-width: 767px) {
    body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major,
    body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-minor {
        outline-width: 1px;
        outline-offset: -3px;
    }

    body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-major.ss-x-sudoku-minor {
        outline-offset: -2px;
    }

    body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-diagonal-peer {
        box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.24);
    }

    body.ss-x-sudoku-route #parent-root .cell.ss-x-sudoku-diagonal-target {
        box-shadow: inset 0 0 0 2px #222222, inset 0 0 0 4px rgba(177, 151, 252, 0.48);
    }
}