/* Picross (nonogram) for GameOS - styles (prefix pi-).
   Pairs with the picross window markup + picross.js */

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

#picross-window .pi-body {
    padding: 10px;
    background: var(--win-bg);
    text-align: center;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

#picross-window .pi-stats {
    font-size: 11px;
    margin-bottom: 8px;
}
#picross-window .pi-status {
    font-size: 11px;
    margin-top: 8px;
    min-height: 14px;
}
#picross-window .pi-help {
    font-size: 10px;
    color: var(--win-dark);
    margin-top: 4px;
}

/* --- board layout: corner | col-clues / row-clues | grid ------------------ */
#picross-window .pi-board {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    padding: 6px;
    background: var(--win-bg);
    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);
    user-select: none;
}

/* per-size metrics (cell edge + gutter thickness + clue font) */
#picross-window .pi-size-5  { --pi-cell: 32px; --pi-gut: 54px; --pi-fs: 13px; }
#picross-window .pi-size-10 { --pi-cell: 24px; --pi-gut: 74px; --pi-fs: 11px; }
#picross-window .pi-size-15 { --pi-cell: 18px; --pi-gut: 92px; --pi-fs: 10px; }

#picross-window .pi-corner {
    width: var(--pi-gut);
    height: var(--pi-gut);
    background: var(--win-dark);
    border: 1px solid var(--win-darker);
    box-sizing: border-box;
}

/* top gutter: a row of columns, each stacking its clue numbers bottom-up */
#picross-window .pi-col-clues {
    display: flex;
    height: var(--pi-gut);
    background: #d8d8d8;
    border-top: 1px solid var(--win-darker);
    border-right: 1px solid var(--win-darker);
    box-sizing: border-box;
}
#picross-window .pi-col-clue {
    width: var(--pi-cell);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 2px;
    box-sizing: border-box;
    line-height: 1.05;
}

/* left gutter: a column of rows, each laying its clue numbers left-to-right */
#picross-window .pi-row-clues {
    display: flex;
    flex-direction: column;
    width: var(--pi-gut);
    background: #d8d8d8;
    border-left: 1px solid var(--win-darker);
    border-bottom: 1px solid var(--win-darker);
    box-sizing: border-box;
}
#picross-window .pi-row-clue {
    height: var(--pi-cell);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding-right: 4px;
    box-sizing: border-box;
}

#picross-window .pi-num {
    font-size: var(--pi-fs);
    color: #202020;
    font-weight: bold;
}
/* satisfied line clues grey out as a solving aid */
#picross-window .pi-clue-done .pi-num { color: #9a9a9a; font-weight: normal; }

/* --- play grid ------------------------------------------------------------ */
#picross-window .pi-grid {
    display: grid;
    border-top: 1px solid var(--win-darker);
    border-left: 1px solid var(--win-darker);
    background: #ffffff;
}
#picross-window .pi-cell {
    width: var(--pi-cell);
    height: var(--pi-cell);
    box-sizing: border-box;
    border-right: 1px solid #a8a8a8;
    border-bottom: 1px solid #a8a8a8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #ffffff;
}
/* heavier rule after every 5th column / row for readability on big grids */
#picross-window .pi-cell.pi-c5 { border-right-color: var(--win-darker); }
#picross-window .pi-cell.pi-r5 { border-bottom-color: var(--win-darker); }

#picross-window .pi-grid:not(.pi-solved) .pi-cell:hover {
    background: #e6ecf5;
}
#picross-window .pi-cell.pi-fill {
    background: #2b2b2b;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18),
                inset -1px -1px 0 rgba(0, 0, 0, 0.5);
}
#picross-window .pi-grid:not(.pi-solved) .pi-cell.pi-fill:hover { background: #1c1c1c; }

#picross-window .pi-cell.pi-x::after {
    content: '\00d7';
    font-size: calc(var(--pi-cell) - 6px);
    line-height: 1;
    color: #b00020;
    font-weight: bold;
}

#picross-window .pi-grid.pi-solved .pi-cell {
    cursor: default;
}
#picross-window .pi-grid.pi-solved {
    outline: 2px solid #007000;
    outline-offset: 1px;
}

/* --- 16px Picross icon: a small filled/empty grid via box-shadows --------- */
.icon-picross-sm {
    width: 16px;
    height: 16px;
    position: relative;
    display: inline-block;
    background: #e8e8e8;
    box-shadow: inset 0 0 0 1px #555;
}
/* five dark cells on a 3px pitch-4 grid: (0,0)(2,0)(1,1)(0,2)(2,2) */
.icon-picross-sm::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 3px;
    height: 3px;
    background: #111;
    box-shadow:
        8px 0 0 #111,
        4px 4px 0 #111,
        0 8px 0 #111,
        8px 8px 0 #111;
}
/* two more dark cells: (1,0) and (2,1) to read as a paint-by-numbers pattern */
.icon-picross-sm::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 3px;
    height: 3px;
    background: #111;
    box-shadow: 4px 4px 0 #111;
}