/* games/stratego.html: what only the Stratego page needs (the page: board-game.css, the board: ../stratego-board.css). */
.dot.black{background:var(--piece-black,#c62828);border-radius:4px}
.dot.white{background:var(--piece-white,#1f5fd6);border-radius:4px}
.count{margin-left:4px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--muted)}
.player.active .count{color:var(--text)}
.hero{background:linear-gradient(135deg,rgba(198,40,40,.22),var(--card) 45%,rgba(31,95,214,.2))}
.hero .sub{color:var(--accent)}

/* The set-up: a tray with the pieces still to place */
.setup-card{margin-bottom:12px}
.setup-card h3{font-size:16px;margin-bottom:4px}
.tray{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tray button{display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer}
.tray button .tp{display:grid;place-items:center;min-width:24px;height:24px;border-radius:5px;background:var(--mine-color);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);font-size:12px}
.tray button small{color:var(--muted)}
.tray button.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.tray button:disabled{opacity:.35;cursor:default}
.setup-card .actions{margin-top:0}

/* Pieces each side has lost */
.fallen{margin-top:12px;font-size:13px;display:grid;gap:4px}
.fallen .row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;color:var(--muted)}
.fallen .fp{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 3px;border-radius:5px;color:#fff;font-weight:800;font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.fallen .fp.black{background:var(--piece-black,#c62828)}
.fallen .fp.white{background:var(--piece-white,#1f5fd6)}