/* shared look for the board games (tic-tac-toe, four in a row, checkers, slides & ladders) */
.bg-wrap { max-width: 720px; }
.bg-opts { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .6rem; }
.bg-opts button { font: inherit; font-weight: 700; border: 3px solid #fff; border-radius: 999px; padding: .45em 1.1em; cursor: pointer; background: #fff; color: var(--purple); min-height: 48px; }
.bg-opts button[aria-pressed="true"] { background: var(--purple); color: #fff; }
.bg-turn { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .7rem; font-weight: 700; font-size: 1.15rem; background: #fff; color: #3d2a5c; border-radius: 999px; padding: .35rem 1rem; box-shadow: 0 6px 16px rgba(61,26,110,.12); width: fit-content; margin-left: auto; margin-right: auto; }
.bg-turn img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c, #ffd23f); }
.bg-score { display: flex; justify-content: center; gap: 1rem; margin-top: .7rem; font-weight: 700; }
.bg-score span { background: #fff; color: #3d2a5c; border-radius: 999px; padding: .25em .9em; box-shadow: 0 3px 8px rgba(61,26,110,.12); }
.bg-again { display: flex; justify-content: center; margin-top: .8rem; }
.bg-again .btn { font-family: inherit; cursor: pointer; }
.piece-h { --pc: #ff7ac0; } .piece-k { --pc: #3f8ef0; }
@keyframes bg-drop { from { transform: translateY(-260%); } }
@keyframes bg-win { 50% { transform: scale(1.15); } }