.jg-board { display: grid; gap: 2px; background: #3a5168; border: 6px solid #2a3c4e; border-radius: 8px; width: max-content; margin: 8px auto; }
.jg-board .jg-cell { width: 40px; height: 40px; background: #d8c39a; display: grid; place-items: center; font-size: 22px; cursor: pointer; position: relative; }
.jg-board .jg-cell.water { background: #4d96ff; }
.jg-board .jg-cell.trap { background: #c98f6b; }
.jg-board .jg-cell.den-B { background: #7d8db0; }
.jg-board .jg-cell.den-A { background: #b07d8d; }
.jg-board .jg-cell.sel { box-shadow: inset 0 0 0 3px #ffd93d; }
.jg-board .jg-cell .piece { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.jg-board .jg-cell .piece.B { background: #2e6fd6; color: #fff; }
.jg-board .jg-cell .piece.A { background: #d6455f; color: #fff; }
.hud { text-align: center; font-size: 13px; color: var(--muted); margin: 8px 0; }
.hud b { color: var(--ink); }