/* ==========================================================================
   Killer Sudoku — Cage Overlay Styles
   ========================================================================== */

/* Base cell setup for killer overlay */
body.ss-killer-sudoku-route #parent-root .cell {
    position: relative;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    --ks-cage-line-edge-inset: 4px;
    --ks-cage-line-side-gap: 7px;
    --ks-cage-line-turn-gap: 4px;
    --ks-cage-line-width: 1px;
    --ks-cage-line-color: rgba(34, 34, 34, 0.74);
    --ks-cage-line-corner-cap-size: 3px;
    --ks-cage-line-dash-on: 4px;
    --ks-cage-line-dash-period: 7px;
    --ks-cage-fill: transparent;
    --ks-cell-tone: transparent;
    background-color: var(--ks-cage-fill);
    background-image: linear-gradient(var(--ks-cell-tone), var(--ks-cell-tone));
    background-repeat: no-repeat;
}

/* Dedicated cage line elements so we do not interfere with the board's native separators */
body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line::before,
body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line::after {
    content: "";
    position: absolute;
    display: none;
    width: var(--ks-cage-line-corner-cap-size);
    height: var(--ks-cage-line-corner-cap-size);
    background-color: var(--ks-cage-line-color);
    pointer-events: none;
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--top {
    top: var(--ks-cage-line-edge-inset);
    left: var(--ks-line-start-gap, var(--ks-cage-line-side-gap));
    right: var(--ks-line-end-gap, var(--ks-cage-line-side-gap));
    height: var(--ks-cage-line-width);
    background-image: repeating-linear-gradient(
        to right,
        var(--ks-cage-line-color) 0,
        var(--ks-cage-line-color) var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-period)
    );
    background-repeat: repeat-x;
    background-position: left center;
    background-size: var(--ks-cage-line-dash-period) var(--ks-cage-line-width);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--right {
    top: var(--ks-line-start-gap, var(--ks-cage-line-side-gap));
    right: var(--ks-cage-line-edge-inset);
    bottom: var(--ks-line-end-gap, var(--ks-cage-line-side-gap));
    width: var(--ks-cage-line-width);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ks-cage-line-color) 0,
        var(--ks-cage-line-color) var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-period)
    );
    background-repeat: repeat-y;
    background-position: center top;
    background-size: var(--ks-cage-line-width) var(--ks-cage-line-dash-period);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--bottom {
    bottom: var(--ks-cage-line-edge-inset);
    left: var(--ks-line-start-gap, var(--ks-cage-line-side-gap));
    right: var(--ks-line-end-gap, var(--ks-cage-line-side-gap));
    height: var(--ks-cage-line-width);
    background-image: repeating-linear-gradient(
        to right,
        var(--ks-cage-line-color) 0,
        var(--ks-cage-line-color) var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-period)
    );
    background-repeat: repeat-x;
    background-position: left center;
    background-size: var(--ks-cage-line-dash-period) var(--ks-cage-line-width);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--left {
    top: var(--ks-line-start-gap, var(--ks-cage-line-side-gap));
    left: var(--ks-cage-line-edge-inset);
    bottom: var(--ks-line-end-gap, var(--ks-cage-line-side-gap));
    width: var(--ks-cage-line-width);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ks-cage-line-color) 0,
        var(--ks-cage-line-color) var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-on),
        transparent var(--ks-cage-line-dash-period)
    );
    background-repeat: repeat-y;
    background-position: center top;
    background-size: var(--ks-cage-line-width) var(--ks-cage-line-dash-period);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--top::before {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--top::after {
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--bottom::before {
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--bottom::after {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--left::before {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--left::after {
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--right::before {
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line--right::after {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
}

body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line.ks-cage-line--cap-start::before,
body.ss-killer-sudoku-route #parent-root .cell .ks-cage-line.ks-cage-line--cap-end::after {
    display: block;
}

/* Let cage turns meet at the inset corner, not extend all the way to the board grid */
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-top.ks-cage-border-left .ks-cage-line--top,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-bottom.ks-cage-border-left .ks-cage-line--bottom {
    --ks-line-start-gap: var(--ks-cage-line-turn-gap);
}

body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-top.ks-cage-border-right .ks-cage-line--top,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-bottom.ks-cage-border-right .ks-cage-line--bottom {
    --ks-line-end-gap: var(--ks-cage-line-turn-gap);
}

body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-top.ks-cage-border-left .ks-cage-line--left,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-top.ks-cage-border-right .ks-cage-line--right {
    --ks-line-start-gap: var(--ks-cage-line-turn-gap);
}

body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-bottom.ks-cage-border-left .ks-cage-line--left,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-bottom.ks-cage-border-right .ks-cage-line--right {
    --ks-line-end-gap: var(--ks-cage-line-turn-gap);
}

/* ---- Killer digit readability ---- */
body.ss-killer-sudoku-route #parent-root .cell .cell__text {
    color: rgba(22, 22, 22, 0.96);
    font-size: 0.95em;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.45);
}

/* ---- Cage background colors (8 rotating colors, higher opacity) ---- */
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-0 {
    --ks-cage-fill: rgba(255, 213, 59, 0.30);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-1 {
    --ks-cage-fill: rgba(77, 171, 247, 0.28);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-2 {
    --ks-cage-fill: rgba(105, 219, 124, 0.28);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-3 {
    --ks-cage-fill: rgba(255, 107, 107, 0.25);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-4 {
    --ks-cage-fill: rgba(177, 151, 252, 0.28);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-5 {
    --ks-cage-fill: rgba(255, 165, 0, 0.30);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-6 {
    --ks-cage-fill: rgba(0, 206, 209, 0.28);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-7 {
    --ks-cage-fill: rgba(255, 105, 180, 0.25);
}

body.ss-killer-board-mode-cages #parent-root .cell {
    --ks-cage-fill: transparent !important;
}

body.ss-killer-board-mode-colors #parent-root .cell .ks-cage-line {
    display: none;
}

/* Match sum-label chip to the cage color family, but keep it fully opaque so it masks the dashed line */
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-0 .ks-cage-label {
    background-color: rgb(255, 240, 176);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-1 .ks-cage-label {
    background-color: rgb(201, 228, 252);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-2 .ks-cage-label {
    background-color: rgb(208, 242, 214);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-3 .ks-cage-label {
    background-color: rgb(255, 219, 219);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-4 .ks-cage-label {
    background-color: rgb(229, 219, 255);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-5 .ks-cage-label {
    background-color: rgb(255, 227, 186);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-6 .ks-cage-label {
    background-color: rgb(191, 242, 244);
}
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-color-7 .ks-cage-label {
    background-color: rgb(255, 219, 236);
}

/* ---- Cage border classes are retained for print support.
   Runtime borders are drawn by injected .ks-cage-line elements. ---- */
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-top,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-right,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-bottom,
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-border-left {
}

/* ---- Cage sum label ---- */
body.ss-killer-sudoku-route #parent-root .ks-cage-label {
    position: absolute;
    top: 1px;
    left: 2px;
    min-width: 12px;
    padding: 0 2px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.05;
    color: rgb(18, 18, 18);
    background-color: rgb(255, 252, 245);
    box-shadow: 0 0 0 1px rgb(215, 206, 188);
    z-index: 8;
    pointer-events: none;
    user-select: none;
    text-shadow: none;
}

body.ss-killer-sudoku-route #parent-root .cell .cell__notes {
    top: 10% !important;
    left: 10% !important;
    width: 80% !important;
    height: 80% !important;
}

body.ss-killer-sudoku-route #parent-root .cell .cell__note {
    font-size: 0.4em !important;
    line-height: 0.8 !important;
}

/* ---- Conflict highlights (must override cage colors via !important) ---- */
body.ss-killer-sudoku-route #parent-root .cell.ks-cage-conflict {
    background-color: rgba(255, 0, 0, 0.20) !important;
}

body.ss-killer-sudoku-route #parent-root .cell.ks-sum-mismatch {
    background-color: rgba(255, 140, 0, 0.25) !important;
}

body.ss-killer-sudoku-route #parent-root .cell.ks-cage-conflict.ks-sum-mismatch {
    background-color: rgba(255, 0, 0, 0.25) !important;
}

/* ---- Killer hint highlight contrast ---- */
body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell.ss-hint-focus {
    --ks-cell-tone: rgba(0, 0, 0, 0.11);
    box-shadow: none !important;
}

body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell.ss-hint-target {
    --ks-cell-tone: rgba(0, 0, 0, 0.20);
    box-shadow: none !important;
}

body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell.ss-hint-focus.ss-hint-target {
    --ks-cell-tone: rgba(0, 0, 0, 0.24);
    box-shadow: none !important;
}

/* ---- Killer native selection as darkened cell-tone on colored boards ---- */
body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell._selected {
    --ks-cell-tone: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 2px rgba(17, 17, 17, 0.92) !important;
}

body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell._selected_once {
    --ks-cell-tone: rgba(0, 0, 0, 0.08);
}

body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell._same-digit {
    --ks-cell-tone: rgba(0, 0, 0, 0.07);
}

body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell._selected .highlighter,
body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell._selected_once .highlighter,
body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .cell._same-digit .highlighter,
body.ss-killer-sudoku-route:not(.ss-killer-board-mode-cages) #parent-root .check-areas i {
    background-color: transparent !important;
}

/* ---- White-board mode: fall back to a more classic 9x9-style selection feel ---- */
body.ss-killer-board-mode-cages #parent-root .cell.ss-hint-focus {
    --ks-cell-tone: rgba(255, 225, 90, 0.22);
    box-shadow: inset 0 0 0 2px rgba(17, 17, 17, 0.78) !important;
}

body.ss-killer-board-mode-cages #parent-root .cell.ss-hint-target {
    --ks-cell-tone: rgba(111, 205, 120, 0.32);
    box-shadow: inset 0 0 0 3px rgba(17, 17, 17, 0.94) !important;
}

body.ss-killer-board-mode-cages #parent-root .cell.ss-hint-focus.ss-hint-target {
    --ks-cell-tone: rgba(111, 205, 120, 0.36);
    box-shadow: inset 0 0 0 3px rgba(17, 17, 17, 0.94) !important;
}

body.ss-killer-board-mode-cages #parent-root .cell._selected {
    --ks-cell-tone: rgba(255, 212, 59, 0.76);
    box-shadow: inset 0 0 0 2px rgba(17, 17, 17, 0.82) !important;
}

body.ss-killer-board-mode-cages #parent-root .cell._selected_once {
    --ks-cell-tone: rgba(255, 212, 59, 0.26);
}

body.ss-killer-board-mode-cages #parent-root .cell._same-digit {
    --ks-cell-tone: rgba(77, 171, 247, 0.20);
}

body.ss-killer-board-mode-cages #parent-root .cell._selected .highlighter,
body.ss-killer-board-mode-cages #parent-root .cell._selected_once .highlighter,
body.ss-killer-board-mode-cages #parent-root .cell._same-digit .highlighter,
body.ss-killer-board-mode-cages #parent-root .check-areas i {
    background-color: transparent !important;
}

/* ---- Preserve highlighter interaction ---- */
body.ss-killer-sudoku-route #parent-root .cell .highlighter {
    opacity: 1;
}

/* ---- Killer settings: board appearance mode buttons ---- */
body.ss-killer-sudoku-route .settings__block-plate._themes.ss-killer-boardmode-plate {
    display: block;
    padding: 10px;
}

body.ss-killer-sudoku-route .ss-killer-boardmode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

body.ss-killer-sudoku-route .ss-killer-boardmode__button {
    min-height: 40px;
    padding: 8px 6px;
    border: var(--nb-border-w) solid var(--nb-border);
    background: #fff;
    color: var(--nb-border);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    box-shadow: var(--nb-shadow-sm);
    opacity: 1;
    cursor: pointer;
}

body.ss-killer-sudoku-route .ss-killer-boardmode__button._active {
    background: var(--nb-yellow);
}

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

/* ---- Mobile adjustments ---- */
@media screen and (max-width: 600px) {
    body.ss-killer-sudoku-route #parent-root .ks-cage-label {
        font-size: 8px;
        top: 0px;
        left: 1px;
    }

    body.ss-killer-sudoku-route #parent-root .cell {
        --ks-cage-line-edge-inset: 3px;
        --ks-cage-line-side-gap: 5px;
        --ks-cage-line-turn-gap: 3px;
        --ks-cage-line-width: 0.8px;
        --ks-cage-line-corner-cap-size: 1.6px;
    }
}