/* Sudoku for GameOS - styles (prefix su-).
   Pairs with js/newgames/sudoku.html + sudoku.js
   Everything is scoped under #sudoku-window / .window-sudoku so nothing
   leaks into the global desktop. */

.window-sudoku { width: auto; min-width: unset; }

#sudoku-window .su-body {
    padding: 10px;
    background: var(--win-bg);
    text-align: center;
}
#sudoku-window .su-stats {
    font-size: 11px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 16px;
}
#sudoku-window .su-status {
    font-size: 11px;
    margin-top: 8px;
    min-height: 14px;
}
#sudoku-window .su-help {
    font-size: 10px;
    color: var(--win-dark);
    margin-top: 4px;
}

/* Sunken board frame (inset bevel: dark top/left, light bottom/right) */
#sudoku-window .su-grid {
    display: grid;
    grid-template-columns: repeat(9, 30px);
    grid-template-rows: repeat(9, 30px);
    width: max-content;
    margin: 0 auto;
    background: #000;
    gap: 1px;
    padding: 2px;
    border-top: 2px solid var(--win-dark);
    border-left: 2px solid var(--win-dark);
    border-right: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-white);
}

#sudoku-window .su-cell {
    width: 30px;
    height: 30px;
    background: var(--win-field);
    color: #000080;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Thicker gaps between 3x3 boxes: widen the black grid backing by adding
   margins on the box boundaries (columns 3 & 6, rows 3 & 6). */
#sudoku-window .su-cell:nth-child(9n+4),
#sudoku-window .su-cell:nth-child(9n+7) {
    margin-left: 2px;
}
#sudoku-window .su-cell:nth-child(n+28):nth-child(-n+36),
#sudoku-window .su-cell:nth-child(n+55):nth-child(-n+63) {
    margin-top: 2px;
}

/* Givens: locked, engraved look on the silver face */
#sudoku-window .su-cell.su-given {
    background: var(--win-bg);
    color: #000;
    cursor: default;
}

/* Selection + peers (same row/col/box as selection) */
#sudoku-window .su-cell.su-peer { background: #e8e8f8; }
#sudoku-window .su-cell.su-given.su-peer { background: #d0d0d0; }
#sudoku-window .su-cell.su-sel {
    background: #000080;
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff;
}
#sudoku-window .su-cell.su-given.su-sel { color: #ffff80; }

/* Live conflicts (dupes in row/col/box) and Check errors */
#sudoku-window .su-cell.su-conflict { color: #d40000; background: #ffdede; }
#sudoku-window .su-cell.su-conflict.su-sel { background: #a00000; color: #fff; }
#sudoku-window .su-cell.su-wrong {
    color: #d40000;
    background: #ffe0a0;
    text-decoration: underline;
}

/* Chunky retro buttons (outset bevel), used if any inline controls appear */
#sudoku-window .su-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 2px 10px;
    background: var(--win-btn-face);
    color: var(--win-text);
    border-top: 2px solid var(--win-white);
    border-left: 2px solid var(--win-white);
    border-right: 2px solid var(--win-darker);
    border-bottom: 2px solid var(--win-darker);
    cursor: pointer;
}
#sudoku-window .su-btn:active {
    border-top: 2px solid var(--win-darker);
    border-left: 2px solid var(--win-darker);
    border-right: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-white);
}

/* 16px Sudoku icon: a 3x3 grid of pixels via box-shadow, on a white field.
   ::before paints the white background + a single seed pixel; ::after tiles
   that seed pixel into a 3x3 pattern of dark cells with light gaps. */
.icon-sudoku-sm {
    width: 16px; height: 16px; position: relative; display: inline-block;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #000;
}
.icon-sudoku-sm::before {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 2px; height: 2px; background: #000080;
    box-shadow:
        4px 0 0 #000080,  8px 0 0 #000080,
        0 4px 0 #000080,  4px 4px 0 #000080,  8px 4px 0 #000080,
        0 8px 0 #000080,  4px 8px 0 #000080,  8px 8px 0 #000080;
}
.icon-sudoku-sm::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 16px; height: 16px;
    /* thin grid lines dividing the 3x3 boxes */
    background:
        linear-gradient(#808080, #808080) 5px 0 / 1px 16px no-repeat,
        linear-gradient(#808080, #808080) 10px 0 / 1px 16px no-repeat,
        linear-gradient(#808080, #808080) 0 5px / 16px 1px no-repeat,
        linear-gradient(#808080, #808080) 0 10px / 16px 1px no-repeat;
}