.fem-overlay { position: absolute; pointer-events: none; z-index: 5; }
.fem-cell { position: absolute; width: 12.5%; height: 12.5%; }
.fem-marker { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.fem-marker-face { position: relative; z-index: 1; }
.fem-respawn-badge { position: absolute; bottom: 5%; right: 5%; z-index: 2; display: flex; align-items: center; justify-content: center; width: .38em; height: .38em; padding: .05em; border-radius: 50%; background: #fffffff0; color: #475569; box-shadow: 0 1px 3px #0f172a26; }
.fem-respawn-badge svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fem-marker--shared { inset: auto 2% 2% auto; width: 44%; height: 44%; font-size: .55em; background: #fff9; border-radius: 50%; }
.fem-points-badge { position: absolute; top: 0; right: 0; min-width: 1.25em; padding: .12em .2em; border: 1px solid #6a5b3d; border-radius: 999px; background: #fffdf2; color: #322714; font: 700 .25em/1.1 system-ui, sans-serif; text-align: center; box-sizing: border-box; }
.preview-square { position: relative; }
.preview-square .fem-marker { font-size: clamp(14px, 2.5vw, 28px); }
.preview-square .fem-marker--shared { font-size: clamp(10px, 1.4vw, 16px); }
.position-edit-link, .position-create-link { display: inline-block; margin-top: 8px; font-size: .85rem; color: var(--accent-dark); }

.fem-goal--locked { opacity: .3; }
.fem-goal--done { opacity: .2; }
.fem-goal--active .fem-marker-face { filter: drop-shadow(0 0 5px #ffb300); }
.fem-order-badge { position: absolute; top: 3%; left: 3%; z-index: 3; min-width: 1.4em; border-radius: 50%; background: #fff; color: #162234; border: 2px solid #efad00; text-align: center; font: 800 .4em/1.4 system-ui, sans-serif; }

.emoji-animation-face { position: relative; }
.emoji-animation-face.has-animated-emoji { color: transparent; }
.noto-animated-emoji { position: absolute; width: 1.15em; height: 1.15em; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; }
.emoji-motion { display: inline-block; animation: emoji-bob 1.8s ease-in-out infinite; }
@keyframes emoji-bob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8%) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .emoji-motion { animation: none; }
}

/* External labels reserve frame space without changing the board's square geometry. */
chess-board-frame.board-wrap:has(> g-chess-board[data-coordinate-mode="outside"]),
chess-board-frame.board-wrap:has(> g-chess-board[data-coordinate-mode="outside-uppercase"]),
chess-board-frame.board-wrap:has(> g-chess-board[data-coordinate-mode="emoji"]) {
  padding: 52px; box-sizing: border-box;
}
.fem-coordinates { position: absolute; pointer-events: none; font-family: system-ui, sans-serif; font-weight: 700; color: var(--ink, #243629); }
.fem-coordinate-file, .fem-coordinate-rank { position: absolute; display: flex; align-items: center; justify-content: center; }
.fem-coordinate-file { top: calc(100% + 6px); height: 40px; }
.fem-coordinate-rank { right: calc(100% + 6px); width: 40px; }