/* Mastermind for GameOS - styles (prefix mm-).
   Pairs with js/newgames/mastermind.html + mastermind.js */

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

.mm-body { padding: 8px; background: var(--win-bg); text-align: center; }

.mm-status { font-size: 11px; margin-bottom: 6px; min-height: 14px; }
.mm-status.mm-win { color: #007000; font-weight: bold; }
.mm-status.mm-lose { color: #a00000; font-weight: bold; }
.mm-help { font-size: 10px; color: var(--win-dark); margin-top: 6px; }

/* Secret code row: wooden shield strip above the board */
.mm-secret-row {
    display: inline-flex; gap: 6px;
    padding: 5px 10px; margin-bottom: 6px;
    background: #6a4218;
    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);
}

/* Board: 10 rows, first guess at the bottom */
.mm-board {
    display: inline-block;
    padding: 4px;
    background: #8a5a28;
    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);
}
.mm-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 4px;
    border: 1px solid transparent;
}
.mm-row.mm-active {
    background: #a06830;
    border: 1px dotted #ffe0a0;
}

/* Pegs */
.mm-peg {
    width: 22px; height: 22px;
    border-radius: 50%;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.45),
                inset 2px 2px 3px rgba(255, 255, 255, 0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: transparent;
}
.mm-peg-empty {
    background: #5a3a14;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.mm-row.mm-active .mm-peg { cursor: pointer; }
.mm-peg-hidden {
    background: #4a3010;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
    color: #e0c080; font-weight: bold;
}

/* Feedback pegs: 2x2 grid per row; black = right color+spot, white = right color */
.mm-fb {
    display: grid;
    grid-template-columns: repeat(2, 9px);
    gap: 2px;
    margin-left: 6px;
    padding: 2px;
}
.mm-fb-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #5a3a14;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.mm-fb-dot.mm-fb-black {
    background: #101010;
    box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.8),
                inset 1px 1px 1px rgba(255, 255, 255, 0.3);
}
.mm-fb-dot.mm-fb-white {
    background: #f4f4f4;
    box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.35),
                inset 1px 1px 1px rgba(255, 255, 255, 0.9);
}

/* Controls: color palette + submit */
.mm-controls {
    margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mm-palette { display: flex; gap: 5px; }
.mm-swatch {
    width: 20px; height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #000;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.4),
                inset 2px 2px 3px rgba(255, 255, 255, 0.4);
}
.mm-swatch:hover { outline: 1px dotted var(--win-text); }

.mm-btn {
    font-size: 11px;
    font-family: inherit;
    padding: 3px 12px;
    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;
}
.mm-btn:active:not(:disabled) {
    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);
}
.mm-btn:disabled { color: var(--win-dark); text-shadow: 1px 1px 0 var(--win-white); }

/* 16px Mastermind icon: wooden board with four colored pegs */
.icon-mastermind-sm {
    width: 16px; height: 16px; position: relative; display: inline-block;
}
.icon-mastermind-sm::before {
    content: '';
    position: absolute; top: 1px; left: 1px;
    width: 12px; height: 12px;
    background: #8a5a28;
    border: 1px solid #000;
}
.icon-mastermind-sm::after {
    content: '';
    position: absolute; top: 4px; left: 4px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #d40000;
    box-shadow: 5px 0 0 #f0d000, 0 5px 0 #00a000, 5px 5px 0 #2050d4;
}