/* Deliberately local: geometry also works in monochrome and forced colors. */
.game-mode-icon.game-mode-icon {
  display: inline-block;
  flex: none;
  width: var(--game-mode-icon-size, 28px);
  height: var(--game-mode-icon-size, 28px);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--game-mode-icon-color);
  vertical-align: middle;
  pointer-events: none;
}
.game-mode-icon-race { --game-mode-icon-color: #9a581b; }
.game-mode-icon-known { --game-mode-icon-color: #167681; }
.game-mode-icon-hidden { --game-mode-icon-color: #7654a8; }
:root[data-theme=dark] .game-mode-icon-race { --game-mode-icon-color: #ffc078; }
:root[data-theme=dark] .game-mode-icon-known { --game-mode-icon-color: #84d1d5; }
:root[data-theme=dark] .game-mode-icon-hidden { --game-mode-icon-color: #c4a7f0; }
.game-mode-icon .mode-icon-soft { opacity: .28; }
.game-mode-icon .mode-icon-tile,
.game-mode-icon .mode-icon-moon,
.game-mode-icon .mode-icon-point { fill: color-mix(in srgb, currentColor 11%, transparent); }
.game-mode-icon .mode-icon-solid,
.game-mode-icon .mode-icon-particle { fill: currentColor; stroke: none; }
.game-mode-icon .mode-icon-fading { opacity: .5; }
.game-mode-icon .mode-icon-particle { opacity: .5; }
.game-mode-icon .mode-icon-emblem { transform-box: fill-box; transform-origin: center; }

/* One short response per interaction; no idle loops or motion-only meaning. */
button:focus-visible .game-mode-icon .mode-icon-particle,
button[aria-pressed=true] .game-mode-icon .mode-icon-particle {
  animation: mode-icon-spark .7s ease-out var(--mode-icon-delay, 0s) both;
}
button:focus-visible .game-mode-icon .mode-icon-emblem,
button[aria-pressed=true] .game-mode-icon .mode-icon-emblem {
  animation: mode-icon-greet .45s ease-out both;
}
@media (hover: hover) {
  button:hover .game-mode-icon .mode-icon-particle { animation: mode-icon-spark .7s ease-out var(--mode-icon-delay, 0s) both; }
  button:hover .game-mode-icon .mode-icon-emblem { animation: mode-icon-greet .45s ease-out both; }
}
.game-mode-icon .mode-icon-particle-two { --mode-icon-delay: .09s; }
@keyframes mode-icon-spark {
  0% { opacity: .5; transform: translateY(0); }
  55% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: .5; transform: translateY(0); }
}
@keyframes mode-icon-greet {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .game-mode-icon.game-mode-icon * { animation: none !important; }
}
@media (forced-colors: active) {
  .game-mode-icon.game-mode-icon { color: ButtonText; }
  .game-mode-icon .mode-icon-soft,
  .game-mode-icon .mode-icon-fading { opacity: 1; }
}