/* ============================================
   CHESS (js/newgames/chess.js + chess.html)
   All rules prefixed ch- ; retro Win95 look per style.css
   ============================================ */

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

/* 16px Start-menu / title-bar icon: checkered chip with a white king */
.icon-chess-sm {
    width: 16px; height: 16px; position: relative; display: inline-block;
}
.icon-chess-sm::before {
    content: '';
    position: absolute; top: 1px; left: 1px;
    width: 14px; height: 14px;
    background: repeating-conic-gradient(#404040 0% 25%, #e8e8e8 0% 50%) 0 0 / 7px 7px;
    border: 1px solid #000;
}
.icon-chess-sm::after {
    content: '\265A';               /* white king glyph */
    position: absolute; top: -1px; left: 2px;
    font-size: 15px; line-height: 16px;
    color: #fff;
    text-shadow: 0 0 1px #000, 1px 1px 0 #000, -1px 0 0 #000;
}

/* ---------- window body / layout ---------- */

.ch-body {
    padding: 8px;
    background: var(--win-bg);
    display: flex;
    flex-direction: column;
}

.ch-status {
    font-size: 11px;
    margin-bottom: 6px;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--win-light);
    border-top: 1px solid var(--win-dark);
    border-left: 1px solid var(--win-dark);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
}

.ch-main {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ---------- board ---------- */

.ch-board-wrap {
    position: relative;
    flex-shrink: 0;
}

.ch-board {
    display: inline-grid;
    grid-template-columns: repeat(8, 44px);
    grid-template-rows: repeat(8, 44px);
    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);
    box-shadow: 0 0 0 1px #000;
}

.ch-cell {
    position: relative;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.ch-light { background: #f0d9b5; }
.ch-dark  { background: #b58863; }

/* last move + selected highlights */
.ch-last     { background: #cdd26a; }
.ch-dark.ch-last { background: #aaa23a; }
.ch-selected { box-shadow: inset 0 0 0 3px #ffff00; }
.ch-check    { background: #ff6b6b !important; }

/* legal-move dot / capture ring (cell is position:relative) */
.ch-move::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.32);
    border-radius: 50%;
    pointer-events: none;
}
.ch-capture::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    border: 4px solid rgba(0, 0, 0, 0.32);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- pieces ---------- */

.ch-piece {
    font-size: 34px;
    line-height: 1;
    position: relative;
    z-index: 1;
    pointer-events: none;
    /* crisp glyphs */
    -webkit-font-smoothing: antialiased;
}

.ch-pw {
    color: #fff;
    text-shadow:
        0 0 1px #000,
        1px 0 0 #000, -1px 0 0 #000,
        0 1px 0 #000, 0 -1px 0 #000,
        1px 1px 0 #000, -1px -1px 0 #000,
        1px -1px 0 #000, -1px 1px 0 #000;
}

.ch-pb {
    color: #202020;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- promotion chooser overlay ---------- */

.ch-promo {
    position: absolute;
    inset: 0;
    display: flex;               /* toggled to none/flex by chess.js */
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.55);
    z-index: 5;
}

.ch-promo-btn {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    background: var(--win-bg);
    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);
}

.ch-promo-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);
}

/* ---------- move list ---------- */

.ch-moves {
    width: 132px;
    height: 356px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    background: var(--win-white);
    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);
    padding: 2px 3px;
}

.ch-move-row {
    display: flex;
    gap: 4px;
    padding: 1px 0;
}

.ch-move-no {
    width: 24px;
    color: var(--win-dark);
    flex-shrink: 0;
    text-align: right;
}

.ch-ply {
    flex: 1;
    white-space: nowrap;
}

.ch-ply-last {
    background: #000080;
    color: #fff;
    padding: 0 2px;
}