/* Battleship for GameOS - styles (prefix bs-).
   Pairs with js/newgames/battleship.html + battleship.js */

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

#battleship-window .bs-body {
    padding: 10px;
    background: var(--win-bg);
    text-align: center;
}
#battleship-window .bs-stats { font-size: 11px; margin-bottom: 6px; }
#battleship-window .bs-status {
    font-size: 11px;
    margin: 8px auto 0;
    min-height: 28px;
    max-width: 520px;
}
#battleship-window .bs-controls { margin-bottom: 8px; }
#battleship-window .bs-help {
    font-size: 10px;
    color: var(--win-dark);
    margin-top: 4px;
}

/* Two boards side by side (they stack on very narrow windows). */
#battleship-window .bs-boards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
}
#battleship-window .bs-board { text-align: center; }
#battleship-window .bs-board-title {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 4px;
}

/* Sunken-bevel frame around each grid. */
#battleship-window .bs-grid {
    display: grid;
    grid-template-columns: 14px repeat(10, 22px);
    grid-auto-rows: 22px;
    gap: 1px;
    padding: 3px;
    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);
}

#battleship-window .bs-label {
    font-size: 9px;
    line-height: 22px;
    color: var(--win-text);
    text-align: center;
    font-weight: bold;
}

#battleship-window .bs-cell {
    width: 22px; height: 22px;
    background: #2c6fb5;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.25),
        inset -1px -1px 0 rgba(0, 0, 0, 0.35);
    position: relative;
}
/* The tracking grid (right) is clickable. */
#battleship-window #bs-enemy-grid .bs-cell { cursor: crosshair; }
#battleship-window #bs-enemy-grid .bs-cell:hover {
    background: #3f8fe0;
}

/* Own ships shown as grey steel hulls. */
#battleship-window .bs-cell.bs-ship {
    background: #6f7378;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.4),
        inset -1px -1px 0 rgba(0, 0, 0, 0.5);
}

/* Miss = white peg dot. */
#battleship-window .bs-cell.bs-miss::after {
    content: '';
    position: absolute;
    top: 8px; left: 8px;
    width: 6px; height: 6px;
    background: #e8f0ff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #8aa8c8;
}
/* Hit = red burst. */
#battleship-window .bs-cell.bs-hit {
    background: #d02020;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}
#battleship-window .bs-cell.bs-hit::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px;
    width: 10px; height: 10px;
    background:
        linear-gradient(45deg, transparent 44%, #ffdd44 44%, #ffdd44 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, #ffdd44 44%, #ffdd44 56%, transparent 56%);
}
/* Sunk = dark charred hull. */
#battleship-window .bs-cell.bs-sunk {
    background: #401010;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}
#battleship-window .bs-cell.bs-sunk::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px;
    width: 10px; height: 10px;
    background:
        linear-gradient(45deg, transparent 44%, #ff8844 44%, #ff8844 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, #ff8844 44%, #ff8844 56%, transparent 56%);
}

/* Keyboard cursor highlight on the tracking grid. */
#battleship-window .bs-cell.bs-cursor {
    box-shadow:
        inset 0 0 0 2px #ffee55,
        inset 1px 1px 0 rgba(255, 255, 255, 0.25);
}

/* Fleet roster chips under each board. */
#battleship-window .bs-roster {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    max-width: 250px;
}
#battleship-window .bs-chip {
    font-size: 9px;
    padding: 1px 4px;
    background: var(--win-btn-face);
    border-top: 1px solid var(--win-white);
    border-left: 1px solid var(--win-white);
    border-right: 1px solid var(--win-darker);
    border-bottom: 1px solid var(--win-darker);
}
#battleship-window .bs-chip-sunk {
    background: #a00000;
    color: #ffffff;
    text-decoration: line-through;
    border-color: #600000;
}

/* Retro raised buttons for Randomize / Start. */
#battleship-window .bs-btn {
    font-size: 11px;
    font-family: inherit;
    padding: 3px 12px;
    margin: 0 3px;
    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;
}
#battleship-window .bs-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 Battleship icon: ocean grid with a little grey ship + red hit peg. */
.icon-battleship-sm {
    width: 16px; height: 16px; position: relative; display: inline-block;
}
/* Ocean-blue tiles: one square multiplied across a grid via box-shadow. */
.icon-battleship-sm::before {
    content: '';
    position: absolute; top: 1px; left: 1px;
    width: 3px; height: 3px;
    background: #2c6fb5;
    box-shadow:
        4px 0 0 #2c6fb5, 8px 0 0 #2c6fb5, 12px 0 0 #2c6fb5,
        0 4px 0 #2c6fb5, 4px 4px 0 #6f7378, 8px 4px 0 #6f7378, 12px 4px 0 #2c6fb5,
        0 8px 0 #2c6fb5, 4px 8px 0 #2c6fb5, 8px 8px 0 #6f7378, 12px 8px 0 #2c6fb5,
        0 12px 0 #2c6fb5, 4px 12px 0 #2c6fb5, 8px 12px 0 #2c6fb5, 12px 12px 0 #2c6fb5;
}
/* Red hit marker sitting on the hull. */
.icon-battleship-sm::after {
    content: '';
    position: absolute; top: 5px; left: 9px;
    width: 3px; height: 3px;
    background: #d02020;
}